/* ============================================================
   Pinned header for the 2026-09 marketing site.

   inject_header.py moves the announcement bar and the nav out of the
   1440px artboard into <header class="kr-head">, so both can run the full
   width of the screen. This file pins that header, gives the nav its
   shadow, and styles the announcement's close button. Linked on every page
   at publish time; see inject_header.py for why it is not in the markup.
   Being the one desktop stylesheet on every page, it also carries the few
   page-wide touches made after the export (footer focus, painting corners).

   Layout of the bars themselves (heights, wrapping on phones) stays with
   the export's inline styles and mobile.css. Nothing here restates them.
   ============================================================ */

.kr-head {
  position: sticky;
  top: 0;
  /* Above the nav's own z-index 60 and everything in the page below it. */
  z-index: 100;
}

/* ---------- the nav ----------
   Its white ground and shadow span the screen; the bar's contents stay on
   the artboard's 1440px column so they line up with the page below. */
.kr-nav {
  background: #FFFFFF;
  /* Layered, like .lift in the page: a hairline edge plus a soft fall-off
     reads as a bar sitting over the page rather than a drawn line. */
  box-shadow:
    0 1px 0 rgba(16,26,85,.07),
    0 4px 10px rgba(16,26,85,.06),
    0 12px 28px rgba(16,26,85,.08);
}
.kr-nav > div {
  max-width: 1440px;
  margin: 0 auto;
}
/* header.js moves focus here when the announcement closes under it; the
   container is only a landing point, not a control, so it draws no ring. */
.kr-nav:focus { outline: none; }

/* Clicking an item in a dropdown keeps the pointer over it, and a clicked
   link keeps focus, so :hover and :focus-within would hold the menu open
   over the section it just jumped to. Now that the nav no longer scrolls
   away, that covers the content. header.js sets this class on the item's
   menu until the pointer or focus leaves it. */
.navdd.kr-menu-shut .navmenu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
}
.navdd.kr-menu-shut .navchev { transform: none !important; }

/* ---------- the announcement ---------- */
.kr-ann {
  position: relative;
  /* Keeps the centred copy clear of the close button on narrow desktops.
     Symmetric so the copy stays centred on the page. */
  padding-left: 60px;
  padding-right: 60px;
}
/* !important because the export sets display: flex inline on the bar, and an
   inline style beats any ordinary stylesheet rule. */
html.kr-ann-off .kr-ann { display: none !important; }

/* The button is placed by a script-free rule but only shown once the head
   script has run, so nobody without JavaScript sees a button that does
   nothing. */
.kr-ann-x {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  /* The glyph's right edge lines up with the Sign up button's: the nav
     keeps a 40px gutter inside a 1440px column, and the glyph sits 10px in
     from the edge of its 32px hit area. */
  right: calc(max(40px, 50% - 680px) - 10px);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
html.kr-js .kr-ann-x { display: flex; }
/* The page lifts every button on hover; this one sits in a bar and stays put. */
.kr-ann-x:hover,
.kr-ann-x:active {
  color: #FFFFFF;
  background: rgba(255,255,255,0.12);
  transform: none;
  box-shadow: none;
}
/* The page's focus ring is brand blue, which vanishes on the navy bar, and
   on the footer, which is the same brand blue. This file is linked on every
   page, so the footer's fix lives here too. */
.kr-ann :focus-visible,
.ftr :focus-visible { outline-color: #FFFFFF; }

/* Closing collapses the bar instead of snapping the page up by its height. */
.kr-ann.kr-ann-closing {
  overflow: hidden;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: height .24s cubic-bezier(.4,0,.2,1), padding .24s cubic-bezier(.4,0,.2,1), opacity .16s ease;
}

/* ---------- in-page links ----------
   Anchors (#how, #uses, the legal pages' contents) must land below the
   pinned header, not under it. header.js keeps --kr-pin-h at the height
   that actually stays on screen; the fallbacks cover the moment before it
   runs, at the desktop bar heights. */
html { scroll-padding-top: var(--kr-pin-h, 84px); }
/* Two rules, not one list: a browser without :has() would drop the whole
   list. :has() keys on the markup, so it also holds with JavaScript off. */
html.kr-has-ann:not(.kr-ann-off) { scroll-padding-top: var(--kr-pin-h, 148px); }
html:has(.kr-ann):not(.kr-ann-off) { scroll-padding-top: var(--kr-pin-h, 148px); }

/* The header's own controls are always on screen. Without this, focusing
   one while scrolled counts as "under the scroll padding" and the page
   lurches by several hundred pixels on every Tab through the nav. */
.kr-head a, .kr-head button { scroll-margin-top: calc(-1 * var(--kr-pin-h, 148px)); }

/* #top now starts below the header. On phones only the nav's height is
   padded, so "Home" would stop with the announcement scrolled away; adding
   the announcement's height back lands it at the very top. On desktop the
   target is already negative and clamps to 0. */
#top { scroll-margin-top: var(--kr-ann-h, 0px); }

/* Headings that animate in (.rise) sit 22px low until revealed. A link lands
   the shifted box at the header's edge, then the reveal lifts the heading
   under it. The margin clears the lift with a few pixels to spare. */
.rise[id], .rise-h[id] { scroll-margin-top: 28px; }

/* ---------- paintings ----------
   The export draws the home page's painted panels (the hero, the wire, "What
   goes in", delivery) with square corners, beside cards that are all rounded.
   They take the 18px of "See beyond the obvious", the one painting the export
   already rounds, at the same panel size. Keyed on the painting rather than
   the section so a re-export that reorders the page keeps it. Each panel
   already clips its contents, so the picture follows the curve. The subpage
   mastheads are left square: they hang from the nav, and a curve there would
   notch the join. */
#top .art:has(> img[src$="-art.jpg"]),
#how { border-radius: 18px; }

/* ---------- phones ----------
   The nav wraps to two rows and the announcement to three lines, so pinning
   both would hold a quarter of the screen. Here the announcement scrolls
   away with the page and only the nav stays: the header sticks at minus the
   announcement's height, which header.js measures. Until it has, the whole
   header pins, which at scroll position zero looks the same. */
@media (max-width: 860px), (max-height: 500px) {
  /* Short, wide screens (large phones on their side) hit the same problem
     as narrow ones: both bars would hold 40% of the screen. The query must
     match PHONE in header.js, which sizes --kr-pin-h to suit. */
  .kr-head { top: calc(-1 * var(--kr-ann-h, 0px)); }
}
@media (max-width: 860px) {
  /* Width only: on a wide, short screen the nav keeps its desktop gutter,
     so the button stays lined up with Sign up. */
  .kr-ann-x { right: 8px; }
  /* These two run edge to edge on a phone, where a curve against the side
     of the screen reads as a gap. The inset panels stay rounded. */
  #top #wire > .art,
  #top #how { border-radius: 0; }
}