/* The public site's navbar (home/_nav): the desktop bar, the phone bar, its drawer and the back button. */

@layer pages {
  /* The frost lives on a layer under the content, not on the bar itself: an element with a backdrop-filter becomes the
     backdrop root of its descendants, so the blur of the phone menu would see only the bar, never the page behind it.
     The phone bar and the bar above the applications (spa_site_nav.css) are 73px tall — 14px above and below the 44px
     buttons plus a 1px bottom border, white where the bar is frosted; the desktop bar of the Rails pages is taller,
     with its links on a second row. */
  .kl__nav {
    position: relative;
    z-index: 20;
    line-height: normal;
    border-bottom: 1px solid transparent;
  }
  .kl__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  /* The promo bar over the header: one line on a sky wash with the garnet pill to the designer; it scrolls away with
     the page, also on a phone, where the bar under it sticks. */
  .kl__promo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    padding: 9px var(--gutter);
    background: var(--gradient-bar);
    font-size: var(--text-md);
    line-height: normal;
    letter-spacing: var(--tracking-wide);
    text-align: center;
    color: var(--ink);
  }
  .kl__promo-link {
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: var(--gradient-action);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    color: var(--white);
    transition: filter var(--duration-fast) var(--ease-standard);
  }
  .kl__promo-link:hover { filter: brightness(1.08); }
  .kl__promo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Desktop: the wordmark and the buttons on the first row, the links centred on a row of their own under them. */
  .kl__nav-in {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px var(--gutter) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "links links";
    align-items: center;
    column-gap: 24px;
  }
  .kl__brand {
    grid-area: brand;
    justify-self: start;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--heading-lg);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink);
  }
  .kl__nav-links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    margin-top: 10px;
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
  .kl__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 14px;
    color: var(--ink);
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .kl__nav-link:hover { color: var(--tone); }
  /* The link of the page's section (aria-current) in the tone. */
  .kl__nav-link[aria-current] { color: var(--tone); }
  .kl__nav-link[aria-current]:hover { color: var(--tone-strong); }
  /* The way to the designer: in the tone, like the promo bar's pill. */
  .kl__nav-link--accent { color: var(--tone); }
  .kl__nav-link--accent:hover { color: var(--tone-strong); }
  /* A link with a panel of pages under it: a small chevron, turned while the panel is open. */
  .kl__nav-link--parent::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-base) var(--ease-standard);
  }
  .kl__nav-link--parent:hover::after,
  .kl__nav-link--parent:has(+ .kl__nav-panel:is(:hover, :focus-within))::after { transform: translateY(3px) rotate(-135deg); }

  /* The panel of a link's pages: white, across the window under the bar, opened by hovering the link (or the panel)
     and by keyboard focus on either — CSS only. It closes a moment late, so the pointer crosses from the link into it. */
  .kl__nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 6;
    background: var(--paper);
    box-shadow: var(--shadow-xl);
    text-transform: none;
    letter-spacing: normal;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
  }
  .kl__nav-link--parent:hover + .kl__nav-panel,
  .kl__nav-link--parent:focus-visible + .kl__nav-panel,
  .kl__nav-panel:hover,
  .kl__nav-panel:focus-within { visibility: visible; opacity: 1; transition-delay: 0s; }
  .kl__nav-panel-in {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 44px var(--gutter) 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 24px 48px;
  }
  .kl__nav-panel-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .kl__nav-panel-title { font-size: var(--heading-lg); }
  .kl__nav-panel-all { font-size: var(--text-md); color: var(--tone); text-decoration: underline; text-underline-offset: 4px; }
  .kl__nav-panel-all:hover { color: var(--tone-strong); }
  .kl__nav-panel-list { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 48px; }
  .kl__nav-panel-link {
    display: block;
    padding: 8px 0;
    font-weight: var(--weight-light);
    font-size: var(--text-xl);
    line-height: 1.3;
    color: var(--ink);
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .kl__nav-panel-link:hover, .kl__nav-panel-link[aria-current] { color: var(--tone); }

  .kl__nav-actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
  /* The bar's round buttons are plain icons on the white page; hovered, a blush disc under them. */
  .kl__nav-actions .ms-icon-button {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .kl__nav-actions .ms-icon-button:hover { background: var(--blush); }

  /* The cart's drawn bag (a body with rounded bottom corners and a handle) and, while the cart holds something, a
     garnet badge with the number of pieces (cart_count_controller.js). The account's drawn bust. The bag and its
     handle size their content box (16 × 13, 7 × 6) inside a 1.5px stroke, so their inner shape stays the same whatever
     the browser snaps a 1.5px border to (Chrome draws 1px). */
  .kl__cart-icon {
    box-sizing: content-box;
    position: relative;
    width: 16px;
    height: 13px;
    margin-top: 4px;
    border: 1.5px solid var(--ink);
    border-radius: 2px 2px 4px 4px;
  }
  .kl__cart-icon::before {
    content: "";
    box-sizing: content-box;
    position: absolute;
    left: 3px;
    top: -7px;
    width: 7px;
    height: 6px;
    border: 1.5px solid var(--ink);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
  }
  .kl__cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--gradient-action-soft);
    color: var(--white);
    font-size: var(--text-3xs);
  }
  .kl__cart-count[hidden] { display: none; }
  /* The bust: a round head over the shoulders' arc, in the bag's 1.5px stroke. */
  .kl__account-icon { position: relative; width: 16px; height: 17px; }
  .kl__account-icon::before,
  .kl__account-icon::after { content: ""; box-sizing: border-box; position: absolute; left: 50%; translate: -50% 0; border: 1.5px solid var(--ink); }
  .kl__account-icon::before { top: 0; width: 8px; height: 8px; border-radius: 50%; }
  .kl__account-icon::after { bottom: 0; width: 16px; height: 7px; border-bottom: 0; border-radius: 8px 8px 0 0; }
  /* The panel's crown, the signed-in admin's way to the panel: three points no border can draw, so a stroked path in
     the bag's 1.5px masks the ink. */
  .kl__panel-icon {
    width: 20px;
    height: 18px;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M1.75 15.25v-10l4.75 4.75L10 2.75l3.5 7.25 4.75-4.75v10z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* The „i” of the legal menu (home/_nav, a page without the footer): a ring with the letter, in the bag's 1.5px. */
  .kl__legal-icon {
    width: 18px;
    height: 18px;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='5.25' r='1.1'/%3E%3Cpath d='M9 8v5.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* The legal menu: a glass card like the phone drawer, in the top layer under the bar's right edge, which lies
     a gutter inside the page's width. Hidden by its own rule too: a browser without popovers drops the :popover-open
     one and would otherwise show the card for good. */
  .kl__nav-legal {
    display: none;
    position: fixed;
    inset: 68px max(var(--gutter), (100vw - var(--page-max)) / 2 + var(--gutter)) auto auto;
    margin: 0;
    padding: 10px 0;
    border-radius: var(--radius-sheet);
    border: 1px solid var(--glass-edge);
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 95%, transparent), color-mix(in srgb, var(--blush-card) 90%, transparent));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-xl);
    color: var(--ink);
    font-size: var(--text-md);
    line-height: normal;
  }
  .kl__nav-legal:popover-open { display: flex; flex-direction: column; }
  .kl__nav-legal .kl__footer-link { padding: 8px 20px; }
  /* On a phone the same links end the drawer, smaller than the pages above them and set apart by a line. */
  .kl__nav-drawer-legal {
    display: flex;
    flex-direction: column;
    margin: 6px 16px 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line-faint);
    font-size: var(--text-md);
  }
  .kl__nav-drawer-legal .kl__footer-link { padding: 8px 0; }

  /* The phone menu: a round glass burger and a glass card under the bar (pure CSS, works without JS), shown in the
     phone section. The checkbox exists only for the phone menu: on a desktop it would be an invisible first tab stop. */
  .kl__nav-cb { display: none; position: absolute; opacity: 0; pointer-events: none; }
  .kl__burger { display: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Three 1.5px lines 5px apart; open, the outer two cross. */
  .kl__burger-line, .kl__burger-line::before, .kl__burger-line::after {
    content: "";
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
  }
  .kl__burger-line::before { transform: translateY(-6.5px); }
  .kl__burger-line::after { transform: translateY(5px); }
  .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line { background: transparent; }
  .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::before { transform: translateY(0) rotate(45deg); }
  .kl__nav-cb:checked ~ .kl__nav-in .kl__burger-line::after { transform: translateY(-1.5px) rotate(-45deg); }
  .kl__nav-cb:focus-visible ~ .kl__nav-in .kl__burger { outline: 2px solid var(--tone); outline-offset: 3px; }
  .kl__nav-drawer { display: none; }
  .kl__nav-drawer-in { display: flex; flex-direction: column; font-size: var(--heading-xs); }
  .kl__nav-drawer-link { padding: 14px 16px; color: var(--ink); transition: color var(--duration-fast) var(--ease-standard); }
  .kl__nav-drawer-link:hover { color: var(--tone); }
  .kl__nav-drawer-link--accent, .kl__nav-drawer-link[aria-current] { color: var(--tone); }
  .kl__nav-drawer-link--accent:hover, .kl__nav-drawer-link[aria-current]:hover { color: var(--tone-strong); }
  /* The pages of an offer page, indented under its link. */
  .kl__nav-drawer-sub { display: flex; flex-direction: column; margin: -6px 0 6px; padding-left: 16px; }
  .kl__nav-drawer-link--sub { padding-block: 8px; font-size: var(--text-xl); color: var(--ink-soft); }
  /* The back button (a view's content_for :nav_back) exists only on a phone (below). */
  .kl__nav-back { display: none; }

  /* The back-button variant on a phone lies on the page like the desktop bar — not sticky, without the frost and its
     border — so nothing covers the top of the window. The selectors name .kl__nav--back to outweigh the phone section
     at the end of narrow-screens.css. */
  @media (max-width: 768px) {
    .kl:has(> .kl__nav--back) { --nav-stuck: 0px; }
    html:has(> body > .kl:not(.spa-site-nav) > .kl__nav--back) { scroll-padding-top: 24px; }
    .kl__nav.kl__nav--back { position: relative; border-bottom: 0; }
    .kl__nav.kl__nav--back::before { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .kl__nav.kl__nav--back * { scroll-margin-top: 0; }
    .kl__nav--back .kl__nav-in { padding-bottom: 10px; }
    .kl__nav--back .kl__brand { font-size: var(--heading-sm); }
    .kl__nav--back :is(.kl__cart, .kl__account-button) { display: none; }
    .kl__nav--back .kl__nav-back { --icon-button-size: 40px; display: flex; box-shadow: none; }
    /* An 8px corner of two 1.5px strokes turned to point left, nudged right to sit optically in the middle. */
    .kl__nav-back-icon {
      box-sizing: content-box;
      width: 8px;
      height: 8px;
      margin-left: 3px;
      border-left: 1.5px solid var(--link);
      border-bottom: 1.5px solid var(--link);
      transform: rotate(45deg);
    }
    .kl__nav--back .kl__burger { --icon-button-size: 42px; }
    .kl__nav--back .kl__burger-line,
    .kl__nav--back .kl__burger-line::before,
    .kl__nav--back .kl__burger-line::after { width: 14px; }
    .kl__nav--back .kl__nav-drawer { top: 66px; }
  }
}