/* =========================================================
   HEADER — everything about the top of the page lives here:
   announcement bar, header bar, mobile menu (drawer).
   Markup + behaviour: js/header.js

   Two modes:
   • Solid (default): cream bar that sticks to the top.
   • Overlay: <body data-header="overlay">. Transparent over the
     hero image with cream text; turns solid once you scroll.
   ========================================================= */

/* ---------- Header settings: tweak these first ---------- */
:root {
  --hdr-height: 84px;                       /* desktop bar height */
  --hdr-height-mobile: 64px;
  --hdr-bg: rgba(255, 254, 251, .96);       /* solid background */
  --hdr-text: var(--text);
  --hdr-text-soft: var(--text-muted);
  --hdr-line: transparent;                  /* line under the header: var(--line) to bring it back */
  --hdr-overlay-text: var(--cream);         /* text colour over the hero */
  --hdr-overlay-line: transparent;          /* line over the hero: rgba(246, 243, 236, .28) to bring it back */
  --hdr-link-size: 14px;                    /* menu + Account text */
  --hdr-gap: 28px;                          /* space between nav links */
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--brown); color: var(--cream);
  font-size: var(--fs-caption); letter-spacing: .06em; text-align: center;
  padding: 10px var(--gutter);
}
.announce a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header bar ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  color: var(--hdr-text);
  background: var(--hdr-bg);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hdr-line);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Three columns: menu | logo | actions. Logo always dead centre.
   Spans the full screen width (not the 1320px content box), like the references. */
.header-inner {
  max-width: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--hdr-height);
}
.header-left { display: flex; align-items: center; justify-self: start; }

/* Logo (centre) */
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: center; }
.brand img { width: 28px; height: 28px; }
.brand .logo-light { display: none; }
.brand-name {
  font-family: var(--font-display); font-size: 15px; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
  padding-top: .15em; /* Josefin sits high; nudge to optical centre */
}

/* Main menu (left) */
.main-nav ul { display: flex; gap: var(--hdr-gap); list-style: none; margin: 0; padding: 0; }
.main-nav a,
.header-actions .hdr-link {
  position: relative; font-size: var(--hdr-link-size); font-weight: 400;
  padding: var(--s-2) 0; white-space: nowrap; transition: opacity var(--dur) var(--ease);
}
.main-nav a::after,
.header-actions .hdr-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after,
.header-actions .hdr-link:hover::after { transform: scaleX(1); }

/* Actions (right): text links on desktop, icons on phones */
.header-actions { display: flex; align-items: center; gap: var(--s-3); justify-self: end; margin-right: -10px; }
.header-actions .hdr-link { margin-inline: var(--s-2); }
.site-header .icon-btn svg { width: 20px; height: 20px; }
.menu-toggle { display: none; }

/* Menu icon: three thin lines that turn into × while the menu is open */
.burger { position: relative; display: block; width: 20px; height: 14px; }
.burger span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6.25px; }
.burger span:nth-child(3) { top: 12.5px; }
.menu-toggle.is-open .burger span:nth-child(1) { top: 6.25px; transform: rotate(45deg); }
.menu-toggle.is-open .burger span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .burger span:nth-child(3) { top: 6.25px; transform: rotate(-45deg); }
.site-header .header-left .menu-toggle:hover, [data-header] .site-header .header-left .menu-toggle:hover { background: none; }

.cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.cart-count[data-count="0"] { display: none; }

/* Cart: grows an underline on hover (like the menu links) instead of a circle */
.site-header .header-actions .hdr-cart:hover,
[data-header] .site-header .header-actions .hdr-cart:hover { background: none; }
.hdr-cart::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.hdr-cart:hover::after, .hdr-cart:focus-visible::after { transform: scaleX(1); }

/* ---------- Search (icon that opens into a field) ---------- */
:root { --hdr-search-w: 200px; }  /* open width on desktop */

.hdr-search { position: relative; display: flex; align-items: center; }
.site-header .hdr-search .hdr-search__btn:hover, [data-header] .site-header .hdr-search .hdr-search__btn:hover { background: none; }
.hdr-search__input {
  width: 0; min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; outline: none;
  font-family: var(--font); font-size: var(--hdr-link-size); letter-spacing: .02em;
  transition: width .35s var(--ease), padding .35s var(--ease);
}
.hdr-search__input::placeholder { color: inherit; opacity: .7; }
.hdr-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Desktop: hovering the icon slides the field open to the left (js/header.js adds .is-open) */
@media (min-width: 1280px) {
  .hdr-search { border-bottom: 1px solid transparent; transition: border-color .35s var(--ease); }
  .hdr-search.is-open { border-bottom-color: currentColor; }
  .hdr-search.is-open .hdr-search__input { width: var(--hdr-search-w); padding-right: var(--s-2); }
}

/* Phones & tablets: hover (or tap) the icon, a full-width bar drops in under the header */
@media (max-width: 1279px) {
  .hdr-search { position: static; }
  .hdr-search.is-open .hdr-search__input {
    position: absolute; left: 0; right: 0; top: 100%; width: auto;
    padding: var(--s-4) var(--gutter);
    /* frosted glass, same as the menu panel */
    background: rgba(250, 247, 240, .55); color: var(--text);
    backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    font-size: 16px; /* 16px stops iPhones zooming in */
  }
}

/* A blur can't see through a parent that also blurs, so the header drops its own
   blur while the frosted search bar is open (phones & tablets only) */
@media (max-width: 1279px) {
  .site-header:has(.hdr-search.is-open),
  [data-header="overlay"] .site-header.is-solid:has(.hdr-search.is-open) {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-header:not([data-header="overlay"] *):has(.hdr-search.is-open),
  [data-header="overlay"] .site-header.is-solid:has(.hdr-search.is-open) { background: var(--paper); }
}

/* ---------- Overlay mode (transparent over hero) ---------- */
[data-header="overlay"] .site-header {
  position: absolute; left: 0; right: 0; top: var(--announce-h, 0px);
  background: transparent; color: var(--hdr-overlay-text);
  border-bottom-color: var(--hdr-overlay-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-header="overlay"] .brand .logo-dark { display: none; }
[data-header="overlay"] .brand .logo-light { display: block; }
[data-header="overlay"] .site-header .icon-btn:hover { background: rgba(246, 243, 236, .15); }
[data-header="overlay"] .cart-count { background: var(--cream); color: var(--brown); }

/* Stays pinned to the top while you scroll over the hero… */
[data-header="overlay"] .site-header.is-fixed { position: fixed; top: 0; }

/* …and becomes the normal solid bar once the hero has scrolled away */
[data-header="overlay"] .site-header.is-solid {
  background: var(--hdr-bg); color: var(--hdr-text); border-bottom-color: var(--hdr-line);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: var(--shadow-sm);
}
[data-header="overlay"] .site-header.is-solid .brand .logo-dark { display: block; }
[data-header="overlay"] .site-header.is-solid .brand .logo-light { display: none; }
[data-header="overlay"] .site-header.is-solid .cart-count { background: var(--accent); color: var(--on-accent); }

/* ---------- Mobile menu (drawer) ---------- */
.drawer-overlay {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--drawer-top, 0px); z-index: 60;
  background: rgba(46, 29, 16, .12);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* Frosted-glass panel: almost-solid cream with a blur of whatever is behind it */
.drawer {
  position: fixed; top: var(--drawer-top, 0px); bottom: 0; left: 0; z-index: 61;
  width: min(260px, 70vw); color: var(--text);
  background: rgba(250, 247, 240, .55);              /* lower = more see-through */
  backdrop-filter: blur(28px) saturate(1.4);         /* stronger blur keeps text readable */
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-right: 1px solid rgba(255, 255, 255, .45);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .35s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drawer { background: rgba(250, 247, 240, .97); } /* older browsers: plain, nearly solid */
}
.drawer[hidden] { display: none; }
.drawer.is-open { transform: none; }

/* Links: small spaced capitals, generous spacing, underline grows on hover */
.drawer-nav { padding: var(--s-6) var(--s-6) var(--s-4); overflow-y: auto; flex: 1; }
.drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-nav li + li { margin-top: var(--s-1); }
.drawer-nav a {
  display: inline-block; padding: var(--s-2) 0;
  font-size: 12px; font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 4px) / 0% 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.drawer-nav a:hover, .drawer-nav a:focus-visible, .drawer-nav a[aria-current="page"] { background-size: 100% 1px; }
.drawer-nav__sep { margin-top: var(--s-5) !important; padding-top: var(--s-4); border-top: 1px solid rgba(91, 58, 34, .15); }

.drawer-foot {
  margin-inline: var(--s-6); padding: var(--s-4) 0 var(--s-6);
  border-top: 1px solid rgba(91, 58, 34, .15);
  font-size: 11px; letter-spacing: .04em; color: var(--text-muted);
}
.drawer-foot a { display: block; padding: 2px 0; }
.drawer-foot a:hover { color: var(--text); }

/* ---------- Tablet & phone ---------- */
/* Six menu items need ~490px beside the centred logo, so:
   1420px+ full size · 1280–1419px slightly smaller · below 1280px menu button.
   If you rename or add menu items, re-check these widths. */
@media (max-width: 1419px) {
  :root { --hdr-gap: 24px; --hdr-link-size: 13px; }
  .brand-name { font-size: 14px; letter-spacing: .24em; }
}

@media (max-width: 1279px) {
  .header-inner { height: var(--hdr-height-mobile); }
  .main-nav { display: none; }
  .menu-toggle { display: inline-grid; margin-left: -10px; }
  .header-actions { gap: 0; margin-right: -10px; }
  .header-actions .hdr-link { display: none; }
  .brand-name { font-size: 13px; letter-spacing: .26em; }
}

@media (min-width: 1280px) {
  .drawer, .drawer-overlay { display: none; }
}

@media (max-width: 600px) {
  .header-inner .brand-name { display: none; }   /* mark alone on small phones */
}