/* ==========================================================================
   layout.css  —  Page chrome & structural primitives
   --------------------------------------------------------------------------
   Header, primary nav, footer, the .container wrapper and section rhythm.
   The header/footer MARKUP is injected by JS (see assets/js/components/),
   so this file styles classes the JS outputs. Keep class names in sync.
   ========================================================================== */

/* ---- Containers & sections ------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Narrow reading column. The container keeps the full width (so its left
   edge matches the hero and every section head); only the CONTENT is
   width-limited, and stays left-aligned. This keeps one consistent left
   spine down the page instead of indenting reading blocks toward centre. */
.container--narrow { max-width: var(--container-max); }
.container--narrow > * { max-width: var(--container-narrow); }
.container--narrow.text-center > * { margin-inline: auto; }   /* opt-in centring */

.section { padding-block: var(--section-y); }

.section--alt { background: var(--bg-alt); }

.section--dark {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: hidden;
}
/* Warm light pooling from above — depth instead of a flat dark block */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(220, 196, 150, 0.10) 0%, rgba(15, 38, 28, 0) 60%),
    radial-gradient(140% 140% at 50% 50%, rgba(11,28,21,0) 55%, rgba(11,28,21,0.45) 100%);
}
.section--dark > * { position: relative; z-index: 1; }
.section--dark h2,
.section--dark h3 { color: var(--text-on-dark); }

.section__head {
  max-width: 760px;
  margin-bottom: var(--space-5);
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__head .eyebrow { margin-bottom: var(--space-2); }
.section__head h2 { margin-bottom: var(--space-3); }

/* ==========================================================================
   Site header  (markup from js/components/header.js)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Transparent over hero, solid once scrolled (toggled by main.js) */
.site-header--solid {
  background: rgba(15, 38, 28, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;   /* a full word now, not a 4-letter monogram */
  color: var(--text-on-dark);
  padding-left: 0.1em;
}
.brand small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  font-weight: 500;
  color: var(--color-sage-300);
  margin-top: 2px;
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav__list { display: flex; align-items: center; gap: var(--space-4); }
.nav__link {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--text-on-dark);
  position: relative;
  padding-block: 4px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover { color: var(--color-sage-300); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--accent-on-dark); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 34px; height: 34px;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 24px; height: 2px;
  background: var(--text-on-dark);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span { top: 16px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile nav ------------------------------------------------------ */
@media (max-width: 880px) {
  .nav-toggle { display: block; z-index: 120; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--color-forest-900);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-5);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; gap: var(--space-4); }
  .nav__link { font-size: 1.4rem; }
  body.nav-open { overflow: hidden; }

  /* CRITICAL: a backdrop-filter on the header turns it into the containing
     block for its fixed children, trapping the drawer inside the 76px bar.
     Remove it while the menu is open so the drawer covers the full viewport. */
  body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-forest-900);
  }
}

/* ==========================================================================
   Footer  (markup from js/components/footer.js)
   ========================================================================== */
.site-footer {
  background: var(--color-forest-900);
  color: var(--text-on-dark);
  padding-block: var(--space-6) var(--space-4);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__brand .brand { padding-left: 0; }
.site-footer__brand p { color: var(--color-sage-300); margin-top: var(--space-2); max-width: 34ch; }
.footer-col h4 {
  color: var(--text-on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.footer-col address { font-style: normal; }
.footer-col a, .footer-col p { color: var(--color-sage-300); font-size: var(--fs-small); }
.footer-col a:hover { color: var(--text-on-dark); }
.footer-col li { margin-bottom: var(--space-1); }
.site-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-sage-300);
}
.site-footer__base a { color: var(--accent-on-dark); }
.site-footer__base a:hover { color: var(--color-cream-50); }

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- Generic responsive grid helpers -------------------------------- */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 880px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}