/* ===========================================================
   The Animist Apothecary — Site Header (shared)
   Single-row layout: logo on the LEFT, nav center/right, Apply
   button on the far right. Loaded by every public marketing page
   in addition to styles.css.
   =========================================================== */

.site-header {
  background: var(--backdrop-warm, rgba(247, 239, 217, 0.94)) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* ===== LOCKED VALUES — main nav inner — 2026-06-08 =====
   Padding values locked in px (was rem) so they don't drift if
   root font-size changes. Vertical padding only at the 1200px
   breakpoint — at wide and narrow widths, the logo height drives
   the nav box. See also: memory/decisions_sub_nav_260608.md.
   Do NOT retune without explicit instruction.
   ============================================================= */
.site-header .header-inner {
  padding: 0 56px !important;                  /* 0 vertical / 56 horizontal — sides only */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;                        /* (was 2rem) */
  min-height: auto !important;
  max-width: 1640px;
  margin: 0 auto;
}

/* ===== Logo (left): trio symbols fitting the nav bar height edge-to-edge ===== */
.site-header .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.site-header .logo::before {
  display: none !important;
  content: none !important;
}
.site-header .logo-mark {
  display: block !important;
  height: 52px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 1200px) {
  .site-header .logo-mark { height: 46px !important; }
}
@media (max-width: 960px) {
  .site-header .logo-mark { height: 40px !important; }
}
/* Wordmark text hidden — the trio is the brand mark now. */
.site-header .logo-text { display: none !important; }
.site-header .logo-text em,
.site-header .logo-accent { display: none !important; }

/* ===== Right side: nav + Apply ===== */
.site-header .header-nav-row {
  display: flex !important;
  align-items: center !important;
  gap: 2.25rem;
}

.site-header .main-nav ul { gap: 2.4rem !important; align-items: center; }
.site-header .main-nav li { position: relative; }
.site-header .main-nav > ul > li > a {
  font-family: 'Cinzel', 'Cormorant SC', serif !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--bark) !important;
  padding: 0.5rem 0 !important;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.2s;
}
.site-header .main-nav > ul > li > a:hover { color: var(--gold) !important; }
.site-header .main-nav .nav-arrow { font-size: 0.6rem; opacity: 0.5; }

.site-header .apply-btn {
  font-family: 'Cinzel', 'Cormorant SC', serif !important;
  font-size: 0.84rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--bark) !important;
  padding: 0.7rem 1.6rem !important;
  border: 1px solid var(--bark) !important;
  border-radius: 2px !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}
.site-header .apply-btn:hover {
  background: var(--bark) !important;
  color: var(--parchment-warm) !important;
}

/* ===== Dropdown panel (simple single-column) ===== */
.site-header .nav-dropdown-parent .nav-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-4px) !important;
  min-width: 220px !important;
  background: #fdfaf3 !important;
  border: 1px solid rgba(45,42,38,0.08) !important;
  box-shadow: 0 14px 36px rgba(45,42,38,0.10) !important;
  padding: 0.6rem 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s !important;
  z-index: 100 !important;
}
.site-header .nav-dropdown-parent:hover .nav-dropdown,
.site-header .nav-dropdown-parent:focus-within .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}
.site-header .nav-dropdown a {
  display: block;
  padding: 0.6rem 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--bark);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.site-header .nav-dropdown a:hover { background: rgba(201,168,76,0.08); color: var(--gold); }

/* ===== Mega dropdown: 4-column Offerings panel ===== */
.site-header .nav-dropdown--mega {
  min-width: 880px !important;
  padding: 1.5rem 1.25rem !important;
}
.site-header .nav-dropdown--mega .nav-dropdown-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}
.site-header .nav-dropdown--mega .nav-drop-col {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0 0.5rem;
}
.site-header .nav-dropdown--mega .nav-drop-label {
  display: block;
  font-family: 'Cinzel', 'Cormorant SC', serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-soft, rgba(201,168,76,0.18));
}
.site-header .nav-dropdown--mega a {
  padding: 0.36rem 0;
  font-size: 0.92rem;
  white-space: normal;
}

/* =============================================================
   FEATURE TILE inside nav dropdowns — the flagship offering.
   Reads as a small ceremonial invitation card: warm vellum wash,
   double engraved rule top + bottom, sigil-flanked eyebrow, larger
   serif title with optional italic-gold accent, italic descriptor,
   and a hover-revealed "Read on →" line. Letterpress feel.
   ============================================================= */
.site-header .nav-dropdown .nav-feature {
  display: block !important;
  padding: 1.4rem 1.4rem 1.3rem !important;
  margin: 0.55rem 0 0.7rem !important;
  /* Warm vellum wash — subtle, like paper held to the light. */
  background:
    linear-gradient(180deg,
      rgba(248, 243, 228, 0.72) 0%,
      rgba(244, 236, 215, 0.55) 100%) !important;
  border: 1px solid rgba(201, 168, 76, 0.55) !important;
  border-radius: 1px !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  /* Inner highlight rim — the pressed-paper feel. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 230, 0.7),
    0 1px 0 rgba(201, 168, 76, 0.10) !important;
  transition: background 0.5s cubic-bezier(.22,.61,.36,1),
              border-color 0.4s ease,
              box-shadow 0.5s cubic-bezier(.22,.61,.36,1),
              transform 0.5s cubic-bezier(.22,.61,.36,1) !important;
}

/* Top engraved rule — gold hairline fading at the edges. */
.site-header .nav-dropdown .nav-feature::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 14px !important;
  right: 14px !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.55) 18%,
    rgba(201, 168, 76, 0.55) 82%,
    transparent 100%) !important;
  opacity: 0.7 !important;
  transition: opacity 0.4s ease, top 0.4s cubic-bezier(.22,.61,.36,1) !important;
  pointer-events: none !important;
}

/* Bottom engraved rule — mirrors the top. */
.site-header .nav-dropdown .nav-feature::after {
  content: "" !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 14px !important;
  right: 14px !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.55) 18%,
    rgba(201, 168, 76, 0.55) 82%,
    transparent 100%) !important;
  opacity: 0.7 !important;
  transition: opacity 0.4s ease, bottom 0.4s cubic-bezier(.22,.61,.36,1) !important;
  pointer-events: none !important;
}

.site-header .nav-dropdown .nav-feature:hover {
  background:
    linear-gradient(180deg,
      rgba(250, 246, 232, 0.95) 0%,
      rgba(246, 238, 218, 0.85) 100%) !important;
  border-color: var(--gold, #c9a84c) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 230, 1),
    0 8px 26px rgba(120, 90, 40, 0.16),
    0 0 0 1px rgba(201, 168, 76, 0.85) !important;
  transform: translateY(-2px) !important;
}
.site-header .nav-dropdown .nav-feature:hover::before {
  opacity: 1 !important;
  top: 6px !important;
}
.site-header .nav-dropdown .nav-feature:hover::after {
  opacity: 1 !important;
  bottom: 6px !important;
}

/* Eyebrow — small caps with sigil dashes flanking it on both sides. */
.site-header .nav-dropdown .nav-feature .feat-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.7em !important;
  font-family: 'Cinzel', 'Cormorant SC', serif !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase !important;
  color: var(--gold, #c9a84c) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  border: none !important;
  margin: 0 0 0.7rem !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}
.site-header .nav-dropdown .nav-feature .feat-eyebrow::before,
.site-header .nav-dropdown .nav-feature .feat-eyebrow::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.5) 50%,
    transparent 100%) !important;
  max-width: 38px !important;
}

/* Title — serif, generous. Italic <em> accent renders in gold. */
.site-header .nav-dropdown .nav-feature .feat-title {
  display: block !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  color: var(--bark, #2D2A26) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  margin: 0 0 0.4rem !important;
  text-align: center !important;
}
.site-header .nav-dropdown .nav-feature .feat-title em {
  font-style: italic !important;
  font-weight: 400 !important;
  color: #b8932a !important; /* gold-deep — warmer than the eyebrow gold */
}

/* Descriptor — italic Cormorant, a quiet subtitle. */
.site-header .nav-dropdown .nav-feature .feat-desc {
  display: block !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  color: var(--bark, #2D2A26) !important;
  opacity: 0.72 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Hover-revealed "Read on →" — appears under the description on hover. */
.site-header .nav-dropdown .nav-feature .feat-cta {
  display: block !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  color: var(--gold, #c9a84c) !important;
  text-align: center !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(.22,.61,.36,1),
              opacity 0.35s ease 0.05s,
              transform 0.4s cubic-bezier(.22,.61,.36,1),
              margin-top 0.4s cubic-bezier(.22,.61,.36,1) !important;
}
.site-header .nav-dropdown .nav-feature:hover .feat-cta {
  max-height: 32px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin-top: 0.7rem !important;
}

/* =============================================================
   PAGE SUB-NAVIGATION — surfaces the old dropdown options as
   in-page links right below the main nav. One strip per
   landing page (about, solo-work, group-work, training-grounds,
   writings). Replaces the hover-dropdown discovery path.

   ===== LOCKED VALUES — 2026-06-08 =====
   Adi iterated through padding / sticky / opacity / optical
   alignment / breakpoint offsets and approved these exact
   dimensions on 2026-06-08. Do NOT retune any of the values
   below without explicit instruction. See also:
     memory/decisions_sub_nav_260608.md
   ============================================================= */
.page-subnav {
  background: #F7F5F0;                                   /* 100% opaque cream — no see-through */
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);     /* faint gold hairline at base of zone */
  /* 60px total cream zone, text dead-center: 18 top + 24 link box (text 20 + 2/0 link padding) + 17 bottom + 1 border = 60 */
  padding: 18px 32px 17px;
  position: sticky;
  top: 87px;                                             /* matches main-nav height @ >1200px */
  z-index: 999;                                          /* below .site-header (1000), above body */
  margin-top: -43px;                                     /* eats SOT cream buffer above (body.padTop 130 − nav 87) */
}
@media (max-width: 1200px) { .page-subnav { top: 80px; margin-top: -40px; } }
@media (max-width: 960px)  { .page-subnav { top: 75px; margin-top: -35px; } }
.page-subnav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.page-subnav-label {
  font-family: 'Cinzel', 'Cormorant SC', serif;
  font-size: 0.66rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #c9a84c;
  font-weight: 500;
  white-space: nowrap;
}
.page-subnav-links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.page-subnav-links a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  line-height: 1.25;                                     /* locks text box to 20px — pinned for 60px-zone math */
  color: #2D2A26;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* Symmetric vertical padding so the link box's center matches the
     text's vertical center — keeps the row truly centered when flex
     align-items: center stacks them inside the band. */
  padding: 2px 0;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.page-subnav-links a:hover {
  color: #c9a84c;
  border-bottom-color: #c9a84c;
}
.page-subnav-links a.is-current {
  color: #c9a84c;
  border-bottom-color: rgba(201, 168, 76, 0.45);
}
.page-subnav-links a.featured {
  color: #b8932a;
  font-style: italic;
  font-weight: 500;
}
@media (max-width: 720px) {
  /* Mobile: opt out of sticky. Column-stacked sub-nav is too tall
     to pin without eating most of the viewport. Let it scroll
     away with the page like the rest of the body content. */
  .page-subnav { padding: 0.75rem 1rem; position: static; top: auto; }
  .page-subnav-inner { gap: 0.6rem; flex-direction: column; }
  .page-subnav-links { gap: 1rem; }
  .page-subnav-links a { font-size: 0.94rem; }
}

/* ============================================================
   SITE-WIDE DESIGN RULE — TOP NAV BUFFER
   ============================================================
   Every public page must show a visible cream buffer strip
   between the fixed nav (bottom edge) and the first content
   section (top edge of hero or first body section).

   The buffer reads as intentional breathing room and prevents
   the dark hero from feeling like it's being eaten by the nav.

   Math:  visible buffer = body.padding-top − nav height
   Goal:  ~40px visible cream strip across all breakpoints

   ┌──────────────┬─────────────┬────────────┬──────────────┐
   │ Viewport     │ body pad-top│ nav height │ visible strip│
   ├──────────────┼─────────────┼────────────┼──────────────┤
   │ > 1200px     │ 130px       │ ~87px      │ ~43px        │
   │ ≤ 1200px     │ 120px       │ ~80px      │ ~40px        │
   │ ≤ 960px      │ 110px       │ ~75px      │ ~35px        │
   └──────────────┴─────────────┴────────────┴──────────────┘

   This is the SINGLE SOURCE OF TRUTH for nav→hero spacing.
   Do NOT add page-level margin-top, body padding, or negative
   margins that escape this. Anything that lands a hero flush
   beneath the nav (or behind it) is a bug — fix it here.
   ============================================================ */
body { padding-top: 130px !important; }

/* Stronger nav bottom border for visual separation against light content */
.site-header { border-bottom: 1px solid rgba(45, 42, 38, 0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 12px rgba(45, 42, 38, 0.04) !important; }

@media (max-width: 1200px) {
  /* Locked: 8/32 vertical/horizontal padding (was 0.5rem 2rem) */
  .site-header .header-inner { padding: 8px 32px !important; gap: 1.2rem !important; }
  .site-header .main-nav ul { gap: 1.6rem !important; }
  .site-header .main-nav > ul > li > a { font-size: 0.78rem !important; letter-spacing: 0.16em !important; }
  .site-header .apply-btn { font-size: 0.78rem !important; letter-spacing: 0.16em !important; padding: 0.5rem 1.1rem !important; }
  .site-header .logo-text { font-size: 1.35rem !important; }
}
@media (max-width: 1200px) {
  /* Nav ~80px at this breakpoint + ~40px buffer */
  body { padding-top: 120px !important; }
}
@media (max-width: 960px) {
  /* Locked: 0/24 vertical/horizontal padding (was 0 1.5rem) */
  .site-header .header-inner { padding: 0 24px !important; }
  .site-header .header-nav-row { gap: 1.25rem; }
  .site-header .main-nav ul { gap: 1.1rem !important; }
  /* Nav ~75px at this breakpoint + ~35px buffer */
  body { padding-top: 110px !important; }
}