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

@layer pages {
  /* The bar of the landing mockup: the wordmark, the links and round glass buttons (ms-icon-button: the cart, the
     account, the phone's burger and back button), spread across the page grid. On a desktop it lies on the page
     gradient and scrolls away with the page; on a phone it is a sticky frosted bar (the phone section), and above a
     React application a compact frosted bar that stays on top (spa_site_nav.css).
     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;
  }
  /* The wordmark: the display typeface in spaced capitals. */
  .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 — „Biżuteria” on the catalogue and product pages) in the tone. */
  .kl__nav-link[aria-current] { color: var(--tone); }
  .kl__nav-link[aria-current]:hover { color: var(--tone-strong); }
  /* „Zaprojektuj”, 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 keep the mockup's box model — content sizes (16 × 13, 7 × 6) inside a 1.5px stroke — so they render exactly
     like the mockup's, 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 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 „Wróć” button of the back-button variant (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 — the header of the product card's mobile mockup: a round glass „Wróć” with
     a blue chevron on the left, the wordmark in the middle, the burger on the right and no cart. The bar lies on the
     page like the desktop one: 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; }
  }
}