/* ═══════════════════════════════════════════════════════════════════
   Site header — shared by the landing and the store finder at /where/.

   It lives in its own file rather than in landing.css because both apps
   load it. The alternative was a second copy inside where/assets/, and a
   header that exists twice is a header that drifts.

   Everything the block needs is declared here: the layout of .hdr__in is
   not borrowed from .wrap, and the CTA's button rules are restated under
   .hdr. The finder has no .btn system at all, and its .wrap is a
   different width, so relying on either would give the two sites
   different headers — which is the one thing this file exists to prevent.
   ═══════════════════════════════════════════════════════════════════ */

/* Colour tokens are scoped to .hdr, not :root.

   The finder's accent is terracotta (--clay: #E4674B) and has to stay
   that way everywhere except here. Declaring the crimson on .hdr means
   it reaches the mark, the nav underline and the CTA by inheritance, and
   physically cannot reach the map, the region cards or the shop list.
   On the landing these restate what :root already says, so nothing moves.

   The layout tokens (--header-h, --gut, --wrap, --r-pill) are NOT set
   here: the finder needs --header-h outside the header too, to offset
   the full-height map, so those live in each site's base.css. */
.hdr {
  --crimson:      #DA0840;
  --crimson-dark: #B00532;
}

/* Element resets the header takes for granted.

   The landing declares these globally in base.css; the finder's base.css
   never has, so without them its header falls back to the browser defaults:
   a blue underlined wordmark, and a language switch rendered in Arial that
   sits six pixels shorter than the landing's.

   Wrapped in :where() so they contribute no specificity — exactly like the
   bare `a` and `button` selectors they mirror. At (0,1,1) instead, `.hdr
   button` would outrank `.lang__btn` and reset its 12.5px back to 16px. */
:where(.hdr) a { color: inherit; text-decoration: none; }
:where(.hdr) button, :where(.hdr) input { font: inherit; color: inherit; }

.hdr {
  position: sticky; top: 0; z-index: 60;

  /* The landing sets this on body; the finder's body leaves it at `normal`,
     which shortens the language switch by 4px because the pill is sized by
     its label's line box. Declared here so the header keeps its proportions
     on any page, without imposing a rhythm on the rest of the finder. */
  line-height: 1.6;

  background: transparent;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Transparent over the hero, solid the moment the page moves. */
.hdr.is-stuck {
  background: rgba(251,247,242,.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(36,30,26,.06);
}

/* Carries its own centring instead of leaning on .wrap — see the note
   at the top of the file. Same numbers the landing's .wrap produced. */
.hdr__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}

.hdr__brand { display: flex; align-items: center; gap: 9px; flex: none; }
.hdr__brand img {
  width: 34px; height: 34px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(218,8,64,.26);
}
.hdr__name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: -.04em;
}
.hdr__dot { color: var(--crimson); }

.hdr__nav {
  display: none;
  margin-inline: auto;
  gap: 26px;
  font-size: 14.5px; font-weight: 500;
}
.hdr__nav a { position: relative; padding-block: 4px; color: var(--ink); }
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--crimson);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.hdr__nav a:hover::after, .hdr__nav a.is-current::after { transform: scaleX(1); }

.hdr__side { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.lang { display: flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: rgba(36,30,26,.06); }
.lang__btn {
  min-width: 38px; padding: 5px 9px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lang__btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* The CTA is a .btn, which base.css defines on the landing but not in the
   finder. Restated under .hdr so both get the same button; the values are
   the landing's, so its own rendering is untouched. */
.hdr .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s var(--ease), background-color .16s var(--ease),
              box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.hdr .btn:hover { transform: translateY(-1px); }
.hdr .btn:active { transform: translateY(0) scale(.985); }
.hdr .btn svg { width: 18px; height: 18px; flex: none; }
.hdr .btn--primary {
  background: var(--crimson);
  color: #fff;
  box-shadow: 0 4px 14px rgba(218,8,64,.26);
}
.hdr .btn--primary:hover { background: var(--crimson-dark); box-shadow: 0 6px 20px rgba(218,8,64,.32); }
.hdr .btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* Scoped to .hdr so it outranks `.hdr .btn { display: inline-flex }` above.
   As a bare .hdr__cta this loses the specificity contest and the CTA shows
   up on mobile, where the burger is supposed to have replaced it. */
.hdr .hdr__cta { display: none; }

.burger {
  width: 42px; height: 42px;
  display: grid; place-content: center; gap: 5px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .24s var(--ease), opacity .18s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Set while the drawer is open. base.css has this on the landing; the
   finder needs it too, and restating it is harmless. */
body.is-locked { overflow: hidden; }

/* Mobile drawer */
@media (max-width: 899px) {
  .hdr__nav {
    position: fixed; inset: var(--header-h) 0 auto;
    display: grid; gap: 0;
    padding: 8px var(--gut) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .hdr__nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .hdr__nav a { padding: 14px 2px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .hdr__nav a::after { display: none; }
  .hdr__nav a:last-child { border-bottom: 0; }
}

@media (min-width: 900px) {
  .hdr__nav { display: flex; }
  .hdr .hdr__cta { display: inline-flex; }
  .burger { display: none; }
  .hdr__brand img { width: 40px; height: 40px; }
  .hdr__name { font-size: 18px; }
}