/* 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.
     Every variant is 73px tall — 14px above and below the 44px buttons plus a 1px bottom border, transparent on
     a desktop and white where the bar is frosted — so the bar keeps its height between the Rails pages and the
     applications. */
  .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;
  }
  .kl__nav-in {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .kl__brand {
    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 { display: flex; align-items: center; gap: 30px; font-size: var(--text-md); letter-spacing: var(--tracking-wide); }
  .kl__nav-link { 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: the tone on a line of the tone. */
  .kl__nav-link--accent {
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
    color: var(--tone);
  }
  .kl__nav-link--accent:hover { color: var(--tone-strong); }
  .kl__nav-actions { display: flex; align-items: center; gap: 8px; }

  /* 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(--text-xl); }
  .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 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; }
  }
}