/* ============================================================
   Zazen Health Solutions — site.css
   Handles what Tailwind utility classes can't: CSS custom
   properties, reveal-on-scroll, mega/mobile menu transitions,
   marquee, prose typography, focus-visible, print.
   ============================================================ */

:root {
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 180px);
  --header-h: 84px; /* set to 66px by site.js once .scrolled is active */
}

.nav.scrolled,
.nav.mega-open {
  background: rgba(244, 239, 230, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #DDD4C1;
}

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body.menu-open { overflow: hidden; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 0;
  top: -48px;
  z-index: 100;
  background: #1A1E1A;
  color: #F4EFE6;
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in { opacity: 1; transform: none; }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  }
  .reveal-stagger.in > * { opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 0.55s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ---------- Header / mega menu ---------- */
.nav-underline { position: relative; }
.nav-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: #3E5B3E;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.nav-underline:hover::after,
.nav-underline.active::after,
.nav-underline[aria-expanded="true"]::after { transform: scaleX(1); }

/* Mega panel enter/leave animation lives entirely in Alpine's x-transition
   (templates/partials/nav/header.html) now -- x-show handles display:none,
   x-transition handles the opacity/transform tween. No CSS needed here. */

/* ---------- Mobile menu ---------- */
.mobile-menu {
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(.7,0,.2,1);
  pointer-events: none;
}
body.menu-open .mobile-menu {
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Buttons ---------- */
.btn .arrow {
  width: 22px; height: 1px; background: currentColor; position: relative;
  display: inline-block;
  transition: width 0.3s;
}
.btn .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { width: 30px; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: inline-flex;
  animation: marquee 50s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Prose (journal / legal) ---------- */
.prose-zhs {
  font-size: 17px;
  line-height: 1.75;
  color: #3A3E38;
}
.prose-zhs h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  margin: 2em 0 0.6em;
  color: #1A1E1A;
}
.prose-zhs h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(21px, 2.2vw, 26px);
  margin: 1.8em 0 0.5em;
  color: #1A1E1A;
}
.prose-zhs p { margin: 0 0 1.4em; }
.prose-zhs a { text-decoration: underline; text-underline-offset: 3px; }
.prose-zhs ul, .prose-zhs ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose-zhs li { margin-bottom: 0.5em; }

/* ---------- Contrast (axe: color-contrast) ---------- */
/* text-muted (#6B6A62) is 4.75:1 on bg-cream (passes AA) but only 4.25:1 on
   the warmer bg-elev / bg-deep tones -- below the 4.5:1 threshold for the
   11px mono eyebrow/label text that uses it (components/eyebrow.html and
   the section labels in templates/sections/*.html). Override to ink-soft
   (#3A3E38, 9.8:1+ on both) specifically where text-muted is nested inside
   an elevated-background container, rather than changing the muted token
   itself (which stays fine, and visually distinct from ink-soft, on plain
   cream). Two-class specificity beats Tailwind's single-class .text-muted
   utility regardless of <style>/<link> injection order. */
.bg-elev .text-muted,
.bg-deep .text-muted {
  color: #3A3E38;
}

/* ---------- Form controls (.field__input) ---------- */
/* .field__input is the shared hook on every ZHS underlined input:
   storefront/templatetags/lead_form_tags.py FIELD_INPUT_CLASSES (which
   components/field.html, the settings forms' phone subwidgets and the HTMX
   region <select> fragment all use) and allauth/elements/field.html.
   - Placeholders: the muted token instead of Tailwind preflight's gray-400,
     which reads cold on cream/elev.
   - Selects: Chrome/Safari's native menulist insets its text ~4px even at
     padding 0, so it never lined up with the inputs above/below. Drop the
     native chrome and draw the chevron here, with room on the right.
   - Errors: the underline turns the error colour (#7A3B2E, as the inline
     error text) for an aria-invalid input or one inside .field--error; a
     focused field keeps focus:border-ink so focus stays visible. */
.field__input::placeholder {
  color: #6B6A62;
  opacity: 1;
}
select.field__input:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233A3E38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 7px;
  cursor: pointer;
}
.field__input[aria-invalid="true"]:not(:focus),
.field--error .field__input:not(:focus) {
  border-color: #7A3B2E;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid #3E5B3E;
  outline-offset: 2px;
}

/* ---------- Price ---------- */
.price__code { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }

/* ---------- Print (warranty) ---------- */
@media print {
  .nav, .mobile-menu, .footer, #cart-drawer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}