/* pb_public/css/components.css
   Shared components: header, menu sheet, footer, newsletter card, toast. */

/* ══ Header ═══════════════════════════════════════════════════════════════ */
.site-header {
  --nav-fade: var(--space-10);
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding:
    calc(var(--safe-top) + var(--space-4))
    var(--content-inset)
    var(--nav-fade);
  background: linear-gradient(to bottom,
    var(--bg) 0,
    var(--bg) 45%,
    transparent 100%);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-header__controls {
  display: flex; align-items: center; gap: var(--space-2);
  /* NEW: cross-document morph. Glides from bottom-right (home landing)
     to top-right (docked) as the visitor navigates. */
  view-transition-name: nav-dock;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font: 700 var(--text-lg) / 1 var(--font-body);
  letter-spacing: -0.01em;
}

/* ── Frosted pills ──────────────────────────────────────────────────────── */
.site-header__controls :is(.icon-btn, .icon-group) {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  transition: opacity var(--dur-base) var(--ease-calm);
}
.site-header__controls :is(.icon-btn, .icon-group):hover {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.site-header__controls .icon-group {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}
.site-header__controls .icon-group > .icon-btn {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 0;
  border-radius: 999px;
}
.site-header__controls .icon-group > .icon-btn:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.site-header__controls .icon-group::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: var(--text-muted);
  pointer-events: none;
}

/* The header search button participates in the search-view morph. */
.site-header__controls [data-search-open] {
  view-transition-name: search-bar;
}

/* ── Menu toggle: one button, two icons, swapped by aria-expanded ───────── */
[data-menu-toggle] .icon-menu-close { display: none; }
[data-menu-toggle][aria-expanded="true"] .icon-menu-open  { display: none; }
[data-menu-toggle][aria-expanded="true"] .icon-menu-close { display: block; }

/* Icon state — sun/moon, note/note-off */
[data-theme-toggle] .icon-sun,
[data-sound-toggle] .icon-note-on { display: none; }
[data-theme-toggle][aria-pressed="true"] .icon-sun,
[data-sound-toggle][aria-pressed="true"] .icon-note-on { display: block; }
[data-theme-toggle][aria-pressed="true"] .icon-moon,
[data-sound-toggle][aria-pressed="true"] .icon-note-off { display: none; }

/* ══ Menu sheet ══════════════════════════════════════════════════════════ */

body[data-menu-open] { overflow: hidden; }

body[data-menu-open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet) - 1);
  background: var(--overlay);
  animation: backdrop-in var(--dur-base) var(--ease-calm);
}
@keyframes backdrop-in { from { opacity: 0; } }

/* Lift the header above the sheet so the toggle stays tappable. */
body[data-menu-open] .site-header {
  z-index: calc(var(--z-sheet) + 1) !important;
  /* The header sits above the dimming overlay, so its own solid-colour fade would show as a
     bright band across the dimmed page. Only the controls need to stay; the strip goes. */
  background: none !important;
}

/* When the menu opens while the header is still in its floating "landing"
   state (over the home hero, not yet docked), fade the sensory pill out.
   Only the close button remains. Docked state, or any non-home page, keeps
   the pill visible. */
body[data-page="home"][data-hero-state="landing"][data-menu-open]
  .site-header__controls .icon-group {
  opacity: 0;
  pointer-events: none;
}

.menu-sheet {
  position: fixed;
  inset: 0 0 0 auto;                 /* a drawer on the right, never the whole page */
  margin: 0;
  padding: 0;
  border: 0;
  width: min(80dvw, 480px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  background: var(--surface);
  color: var(--text);
  z-index: var(--z-sheet);

  transform: translateX(100%);
  transition:
    transform var(--dur-base) var(--ease-calm),
    display   var(--dur-base) allow-discrete;
}
.menu-sheet[open] {
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--safe-top) + var(--space-16))
    var(--space-6)
    calc(var(--safe-bottom) + var(--space-6));
  transform: none;
}
@starting-style {
  .menu-sheet[open] { transform: translateX(100%); }
}
.menu-sheet:focus { outline: none; }

.menu-sheet__greeting {
  margin-top: 0;
  font: italic 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) / var(--leading-snug) var(--font-display);
  color: var(--text);
}

.menu-sheet__links {
  margin-block: auto;
  padding-inline: 0;
  max-width: 520px;
}

.menu-links { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.menu-links--secondary { margin-top: var(--space-12); }
.menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  text-decoration: none;
  letter-spacing: -0.015em;
  color: var(--text);
  transition:
    transform var(--dur-base) var(--ease-calm),
    color     var(--dur-fast) var(--ease-calm);
}
.menu-links a:hover {
  text-decoration: none;
  transform: translateX(var(--space-2));
}
.menu-links a[aria-current="page"] {
  color: var(--nav-active);
  font-weight: 600;
}
.menu-links a[aria-current="page"]::after {
  content: "";
  width: 3px;
  height: 1.5em;
  border-radius: 2px;
  background: var(--nav-active-bar);
  flex: none;
}

.menu-sheet__reach { text-align: center; }
.menu-sheet__reach p {
  font-size: var(--text-sm);
  margin: 0 auto var(--space-3);
  color: var(--text-muted);
}

.social-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}
.social-list__text {
  display: inline-block;
  padding: var(--space-3);
  font-size: var(--text-sm);
}
.menu-sheet .social-list .icon-btn { color: var(--text); }

/* ── Staggered menu entrance ────────────────────────────────────────────── */
.menu-links--secondary { --base: 360ms; }
.menu-links li:nth-child(1) { --i: 0; }
.menu-links li:nth-child(2) { --i: 1; }
.menu-links li:nth-child(3) { --i: 2; }
.menu-links li:nth-child(4) { --i: 3; }
.menu-links li:nth-child(5) { --i: 4; }
.menu-sheet[open] .menu-links li {
  animation: menu-link-in var(--dur-slow) var(--ease-calm) both;
  animation-delay: calc(var(--i, 0) * 60ms + var(--base, 80ms));
}
@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* Desktop: a narrower drawer, same shape. */
@media (min-width: 960px) {
  .menu-sheet { width: min(440px, 38vw); }
  .menu-sheet[open] {
    padding:
      calc(var(--safe-top) + var(--space-16))
      var(--space-8)
      calc(var(--safe-bottom) + var(--space-6));
  }

  .menu-sheet__greeting { font-size: var(--text-xl); }
  .menu-sheet__links {
    margin-block: var(--space-8) auto;
    max-width: none;
  }
  .menu-links a {
    padding-block: var(--space-2);
    font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.25rem);
  }

  .menu-sheet__reach { text-align: left; padding: 0; }
  .menu-sheet__reach p { margin: 0 0 var(--space-2); }
  .menu-sheet .social-list { justify-content: flex-start; margin-inline: calc(var(--space-3) * -1); }
}

/* ══ Footer ══════════════════════════════════════════════════════════════ */
.site-footer {
  flex-shrink: 0;
  margin-top: var(--space-4);
  background: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer__main {
  padding:
    var(--space-8)
    var(--gutter)
    calc(var(--safe-bottom) + var(--space-8));
}
.site-footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-10);
}

.site-footer a { color: inherit; }
.site-footer :focus-visible { outline-color: var(--mint); }

/* Columns: stacked on narrow, three across on wide. */
.site-footer__cols {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 720px) {
  .site-footer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-10);
  }
}

.footer-section {
  display: grid;
  gap: var(--space-8);
  align-content: start;
}
.footer-group { display: grid; gap: var(--space-3); }

/* Quick links + Back to top: flex row on mobile, plain block on wide. */
.footer-first {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer-first .footer-group { flex: 1 1 auto; }

@media (min-width: 720px) {
  .footer-first { display: block; }
  .footer-first .footer-group { margin-bottom: var(--space-6); }
}

.footer-title {
  font: 500 var(--text-sm) / 1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2);
  color: var(--footer-muted);
}

.footer-links { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.footer-links a,
.footer-contact a,
.footer-contact p {
  color: var(--footer-text);
  text-decoration: none;
}
.footer-links a:hover,
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-contact { display: grid; gap: var(--space-3); }

.site-footer .social-list {
  justify-content: flex-start;
  margin-inline: calc(var(--space-3) * -1);
}
.site-footer .icon-btn { color: var(--footer-text); }

.site-footer .footer-top {
  min-height: 36px;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  color: var(--footer-text);
  border-color: var(--gray);
}

.site-footer__legal {
  padding-top: var(--space-5);
  border-top: 1px solid var(--footer-line);
  color: var(--footer-muted);
  font-size: var(--text-sm);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer__legal p { margin: 0; max-width: none; }

@media (max-width: 600px) {
  .site-footer__legal { flex-direction: column; gap: var(--space-2); }
}

/* ── Newsletter card (used inside the third footer column) ─────────────── */
.sub {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--footer-card);
  border: 1px solid var(--footer-card-border);
  align-content: center;
}
.sub__title {
  font: 600 var(--text-lg) / 1.2 var(--font-body);
  color: var(--footer-text);
}
.sub__text {
  margin-top: var(--space-2);
  color: var(--footer-muted);
  font-size: var(--text-sm);
  max-width: 44ch;
}
.sub__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.sub__done {
  margin-top: var(--space-6);
  color: var(--mint);
  font-size: var(--text-sm);
}
.sub input:not(.hp) {
  min-height: 44px;
  padding: var(--space-2) 0;
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--footer-text);
  border: 0;
  border-bottom: 1px solid var(--footer-line);
  border-radius: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-bottom-color var(--dur-fast) var(--ease-calm),
              border-bottom-width var(--dur-fast) var(--ease-calm);
}
.sub input:not(.hp)::placeholder { color: var(--footer-muted); opacity: 1; }
.sub input:not(.hp):focus,
.sub input:not(.hp):focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--mint);
}
.sub .btn--mint {
  border-radius: var(--radius-sm);
  min-width: 96px;
  justify-self: start;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ══ Toast ═══════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--safe-bottom) + var(--space-6));
  z-index: var(--z-toast);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-inline: var(--gutter);
  pointer-events: none;
}
.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-2);
  animation: toast-in var(--dur-base) var(--ease-calm);
  font-size: var(--text-sm);
}
.toast--error { border-left: 4px solid var(--error); }
/* A toast with an action (Undo, Retry). The shelf ignores clicks so it never
   blocks the page; each toast takes them back. */
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-4); }
.toast__action {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toast__action:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ══ Menu sheet: account strip ══════════════════════════════════════════ */

.menu-sheet__account {
  text-align: center;
  margin-bottom: var(--space-4);
}
.menu-sheet__account-link {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: border-color var(--dur-fast) var(--ease-calm),
              background-color var(--dur-fast) var(--ease-calm);
}
.menu-sheet__account-link:hover {
  border-color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

@media (min-width: 960px) {
  .menu-sheet__account {
    text-align: left;
    margin-bottom: var(--space-6);
  }
}


/* ── Shop: cart entry in the menu, orders on the account page ───────────── */
.menu-links li.menu-links__shop { display: flex; align-items: center; gap: var(--space-4); }
.menu-links li.menu-links__shop a { flex: 1; }
.menu-cart {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer;
}
.menu-cart__count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--shop-active); color: var(--panther);
  font-size: var(--text-xs); font-weight: 700;
}
.menu-cart__count[hidden] { display: none; }
/* Shop is the active page: text, cart outline and bar all use --shop-active
   (not the site green), with the bar at the far right of the row like the others. */
.menu-links li.menu-links__shop a[aria-current="page"] { color: var(--shop-active); }
.menu-links li.menu-links__shop a[aria-current="page"]::after { display: none; }
.menu-links li.menu-links__shop:has(a[aria-current="page"]) .menu-cart { border-color: var(--shop-active); }
.menu-links li.menu-links__shop:has(a[aria-current="page"])::after {
  content: ""; flex: none; width: 3px; height: 1.5em; border-radius: 2px; background: var(--shop-active);
}
.account-orders__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.account-orders__list li { display: grid; gap: var(--space-1); }