/* ============================================================
   SHARED STYLES — Orava brand, nav, responsive
   Used by manifesto.html and contact.html
   ============================================================ */

:root {
  --warm-stone: #A39585;
  --moss-green: #6B7F5E;
  --deep-forest: #2B3D2F;
  --dark: #08080c;
  --cream: #F5F0EB;
  --brown: #2C2825;
  --copper: rgba(181,105,58,0.85);
  /* Adaptive color for the global nav (logo mark + hamburger). Default is
     cream for dark backgrounds; per-page and per-section overrides flip it
     to charcoal on light surfaces. Both elements use currentColor so a
     single property drives the SVG fill, the bars, and the label text. */
  --snav-fg: var(--cream);
  --snav-border: rgba(245, 240, 235, 0.3);
}
/* Pages whose default background is light → dark nav. */
body.page-contact, body.page-manifesto {
  --snav-fg: var(--brown);
  --snav-border: rgba(44, 40, 37, 0.28);
}
/* Toggled by js/site-nav.js when a .module-feature--light panel crosses
   the top of the viewport on a module page. */
body.snav-on-light {
  --snav-fg: var(--brown);
  --snav-border: rgba(44, 40, 37, 0.28);
}
/* When the menu overlay (dark wood panel) is open, the nav controls sit
   on top of it — always force light so the hamburger / logo are legible. */
body:has(.snav__overlay.open) {
  --snav-fg: var(--cream);
  --snav-border: rgba(245, 240, 235, 0.3);
}
/* While the footer crosses the top of the viewport, flip nav to match the
   footer's surface. Default footer is brown (dark) → light nav; on
   page-module the footer is cream → dark nav. */
body.snav-on-footer {
  --snav-fg: var(--cream);
  --snav-border: rgba(245, 240, 235, 0.3);
}
body.page-module.snav-on-footer {
  --snav-fg: var(--brown);
  --snav-border: rgba(44, 40, 37, 0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; color: var(--cream); }
html { scroll-behavior: smooth; }

/* ---- GLOBAL SITE NAV (injected by js/site-nav.js) ---- */
.snav__logo {
  position: fixed; left: 40px; top: 28px; z-index: 201;
  width: 36px; height: auto; color: var(--snav-fg);
  text-decoration: none; display: block;
  transition: color 0.6s ease;
}
.snav__logo svg { width: 36px; height: auto; display: block; }

.snav__toggle {
  position: fixed; right: 40px; top: 24px; z-index: 203;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 26px;
  background: transparent;
  border: 1px solid var(--snav-border);
  color: var(--snav-fg);
  transition: color 0.6s ease, border-color 0.6s ease;
  font-family: 'DM Mono', monospace;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}
.snav__toggle-bars {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px;
  width: 22px; height: 14px;
}
.snav__toggle-bars span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.6s ease;
  transform-origin: center;
}
.snav__toggle.is-open .snav__toggle-bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.snav__toggle.is-open .snav__toggle-bars span:nth-child(2) { opacity: 0; }
.snav__toggle.is-open .snav__toggle-bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Dimmed backdrop covering the visible page on the left while the panel is open. */
.snav__backdrop {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(8, 8, 12, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.snav__backdrop.open { opacity: 1; pointer-events: auto; }

/* Slide-in panel — 50vw wide, anchored to the right. */
.snav__overlay {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 50vw; min-width: 360px; max-width: 720px;
  z-index: 200;
  background: #422D1F;
  display: flex; flex-direction: column;
  padding: 100px clamp(36px, 4vw, 72px) 60px;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
}
.snav__overlay.open { transform: translateX(0); }

.snav__close {
  position: absolute; top: 28px; right: 40px;
  background: none; border: none; padding: 8px; cursor: pointer;
  color: var(--cream); display: none; /* hidden — using the morphing hamburger */
}
.snav__close svg { width: 24px; height: 24px; }

/* Wordmark inside the panel — mirrors the hero "Orava" wordmark spec
   (Lora italic semibold, tightened tracking) and clicks through to home. */
.snav__wordmark {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: clamp(28px, 4vw, 56px);
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
}

.snav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0;
  width: 100%;
  /* Idle state: DM Mono uppercase. Hover/current swap to Lora italic via the
     two stacked label spans. */
  font-family: 'DM Mono', monospace;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-stone);
}
.snav__sub {
  list-style: none; margin: 0;
  padding: 0 0 0 clamp(16px, 2vw, 28px);
  display: flex; flex-direction: column;
  gap: 0;
  width: 100%;
  font-size: clamp(12px, 0.95vw, 14px);
  /* Collapsed by default — animated open via max-height. */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.snav__item.has-children.is-expanded > .snav__sub { max-height: 800px; }

.snav__item {
  position: relative;
  width: 100%;
  padding: 0;
}
/* Row trigger (anchor or button) gets the vertical rhythm — top padding only,
   so expanded sub-lists tuck flush against their parent without doubling
   padding above/below. The very last row in the panel picks up its bottom
   breathing room from .snav__list padding-bottom. */
.snav__item > a,
.snav__item > .snav__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(16px, 1.8vw, 22px) 0;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Animated divider — scales from 0 → full width L→R, staggered per item.
   Anchored to the top edge of the row so it sits above the padding. */
.snav__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(163, 149, 133, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(0.1s + var(--idx, 0) * 0.04s);
}
.snav__overlay.open .snav__item::before { transform: scaleX(1); }
/* Sub-items: only show their dividers once the parent is expanded. */
.snav__sub .snav__item::before { transition-delay: 0s; }
.snav__item.has-children.is-expanded > .snav__sub .snav__item::before { transform: scaleX(1); }

.snav__row {
  position: relative;
  display: inline-block;
}

/* Three stacked label spans:
   - ghost establishes the box at the LARGER (Lora) size, in-flow but invisible
   - top is the idle DM Mono variant, absolutely positioned over the ghost
   - bot is the Lora italic variant, ditto, swapped in on hover/current
   This way the row never reflows when hovering or expanding. */
.snav__label {
  display: inline-flex; align-items: center;
  white-space: nowrap;
}
.snav__label--ghost {
  visibility: hidden;
  font-family: 'Lora', serif;
  font-style: italic; font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--swap-scale, 1.45em);
  line-height: 1;
}
.snav__label--top,
.snav__label--bot {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
}
.snav__label--bot {
  font-family: 'Lora', serif;
  font-style: italic; font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
  font-size: var(--swap-scale, 1.45em);
  line-height: 1;
}
/* On the current page item, the TOP label is also Lora italic. */
.snav__item.is-current .snav__label--top {
  font-family: 'Lora', serif;
  font-style: italic; font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
  font-size: var(--swap-scale, 1.45em);
}

/* Buttons (Menu toggle, Read our manifesto, etc.) use a slightly tighter
   Lora optical size than the big nav rows. */
.snav__toggle, .text-swap { --swap-scale: 1.25em; }

/* Reveal-char clip + transform machinery. Tight box (no extra padding) so the
   container is exactly the letter height — letters can't peek out early.
   Scoped to .snav__row so the same mechanism works inside .snav__list rows,
   the menu toggle, and any .text-swap button on the page. */
.snav__row .reveal-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}
.snav__row .reveal-char-inner {
  display: inline-block;
  line-height: 1;
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * var(--step, 0.05s));
}

/* Buttons that always show their label (menu toggle, .text-swap buttons):
   letters rest at y=0, and hover/focus triggers the DM Mono/inherited →
   Lora italic swap. */
.snav__toggle .snav__label--top .reveal-char-inner,
.text-swap .snav__label--top .reveal-char-inner { transform: translateY(0%); }
.snav__toggle .snav__label--bot .reveal-char-inner,
.text-swap .snav__label--bot .reveal-char-inner { transform: translateY(110%); }
.snav__toggle:hover .snav__label--top .reveal-char-inner,
.snav__toggle:focus-visible .snav__label--top .reveal-char-inner,
.text-swap:hover .snav__label--top .reveal-char-inner,
.text-swap:focus-visible .snav__label--top .reveal-char-inner {
  transform: translateY(-110%);
}
.snav__toggle:hover .snav__label--bot .reveal-char-inner,
.snav__toggle:focus-visible .snav__label--bot .reveal-char-inner,
.text-swap:hover .snav__label--bot .reveal-char-inner,
.text-swap:focus-visible .snav__label--bot .reveal-char-inner {
  transform: translateY(0%);
}

/* When the overlay opens, top labels rise into view. Bottom labels stay
   parked below until a hover/focus (or .is-current) pulls them in. */
.snav__overlay.open .snav__label--top .reveal-char-inner { transform: translateY(0%); }
.snav__overlay.open .snav__label--bot .reveal-char-inner { transform: translateY(110%); }

/* Hover / focus: top exits up, bottom rises into place. */
.snav__overlay.open .snav__item a:hover .snav__label--top .reveal-char-inner,
.snav__overlay.open .snav__item a:focus-visible .snav__label--top .reveal-char-inner,
.snav__overlay.open .snav__item .snav__trigger:hover .snav__label--top .reveal-char-inner,
.snav__overlay.open .snav__item .snav__trigger:focus-visible .snav__label--top .reveal-char-inner {
  transform: translateY(-110%);
}
.snav__overlay.open .snav__item a:hover .snav__label--bot .reveal-char-inner,
.snav__overlay.open .snav__item a:focus-visible .snav__label--bot .reveal-char-inner,
.snav__overlay.open .snav__item .snav__trigger:hover .snav__label--bot .reveal-char-inner,
.snav__overlay.open .snav__item .snav__trigger:focus-visible .snav__label--bot .reveal-char-inner {
  transform: translateY(0%);
}

@media (max-width: 720px) {
  .snav__logo { left: 24px; top: 24px; }
  .snav__toggle { right: 24px; top: 24px; }
  .snav__overlay { width: 100vw; min-width: 0; max-width: none; padding: 100px 28px 60px; }
}

/* ---- FOOTER ---- */
.site-footer {
  /* Default: charcoal footer with cream text — for cream / warm-stone pages */
  --footer-bg: var(--brown);
  --footer-fg: var(--cream);
  --footer-rule: rgba(245,240,235,0.18);
  --footer-link: rgba(245,240,235,0.72);
  --footer-link-hover: rgba(245,240,235,1);
  --footer-meta: rgba(245,240,235,0.42);
  --footer-label: rgba(245,240,235,0.5);
  background: var(--footer-bg);
  padding: 112px 40px 56px;
  font-family: 'DM Sans', sans-serif;
  color: var(--footer-fg);
  letter-spacing: 0.01em;
}
.site-footer .footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.site-footer .footer-statement {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 16ch;
  color: var(--footer-fg);
  margin: 0 0 80px;
}
.site-footer .footer-rule {
  border: 0;
  border-top: 1px solid var(--footer-rule);
  margin: 0;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding: 56px 0 64px;
}
.site-footer .footer-col-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--footer-label);
  margin: 0 0 22px;
}
.site-footer .footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer .footer-link-list a {
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--footer-link);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.25s ease;
}
.site-footer .footer-link-list a:hover {
  color: var(--footer-link-hover);
}
.site-footer .footer-rail {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  font-size: 12px;
  color: var(--footer-meta);
}
.site-footer .footer-rail svg {
  width: 18px;
  height: auto;
  color: var(--footer-meta);
  flex: none;
}
.site-footer .footer-rail p {
  margin: 0;
  letter-spacing: 0.04em;
}

/* Dark-bg pages (module pages): cream footer with charcoal text */
body.page-module .site-footer {
  --footer-bg: var(--cream);
  --footer-fg: var(--brown);
  --footer-rule: rgba(44,40,37,0.14);
  --footer-link: rgba(44,40,37,0.72);
  --footer-link-hover: rgba(44,40,37,1);
  --footer-meta: rgba(44,40,37,0.42);
  --footer-label: rgba(44,40,37,0.5);
}

/* Portrait stack */
.layout-portrait .site-footer {
  padding: 80px 24px 40px;
}
.layout-portrait .site-footer .footer-statement {
  font-size: clamp(28px, 8vw, 44px);
  margin-bottom: 56px;
}
.layout-portrait .site-footer .footer-grid {
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 40px 0 48px;
}

/* ---- PAGE CONTENT FADE-IN ---- */
.page-content { opacity: 0; transition: opacity 0.6s ease 0.2s; }
.page-content.visible { opacity: 1; }

/* ---- RESPONSIVE: PORTRAIT ---- */
.layout-portrait .nav-links { display: none; }
.layout-portrait #hamburger-btn { display: block; }
.layout-portrait #site-nav { padding: 20px 24px; }
.layout-portrait #nav-logo { left: 24px; top: 20px; }