/* ===========================================================
   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 removed 2026-06-08 evening per Adi's
   menu redesign. Full locked spec retained at:
     ~/.claude/.../memory/decisions_sub_nav_260608.md
   Restore from git commits between 8fb4e46 and e04e640 if needed. */

/* ============================================================
   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; }
}

/* =============================================================
   Nav label accommodation — 2026-07-01
   The July nav labels (Premium Coaching / Kinship Nexus /
   The Training Grounds / Public Offerings) are longer than the
   June set, so the type tiers engage earlier to keep every item
   on ONE line. Header PADDING untouched (locked — see
   memory/decisions_sub_nav_260608.md).
   ============================================================= */
.site-header .main-nav > ul > li > a { white-space: nowrap !important; }

/* Mid tier from 1480 (was only ≤1200) */
@media (max-width: 1480px) {
  .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; }
}

/* Tight tier for small desktop / landscape tablet */
@media (max-width: 1160px) {
  .site-header .main-nav ul { gap: 1rem !important; }
  .site-header .main-nav > ul > li > a { font-size: 0.7rem !important; letter-spacing: 0.1em !important; }
  .site-header .apply-btn { font-size: 0.7rem !important; letter-spacing: 0.1em !important; padding: 0.45rem 0.9rem !important; }
}

/* Below this the six labels cannot fit one line legibly —
   fall to the mobile presentation (logo + Apply), previously ≤768 */
@media (max-width: 950px) {
  .site-header .main-nav { display: none !important; }
}