/* =============================================================================
   Site — Willowbound Child Theme

   Design tokens · Base reset · Layout · Skip link · Header · Logo
   Nav toggle · Site nav · Site footer · Buttons · Links · Social links
   Section variants · Inner hero · Shared paper section · Scroll reveal
   Reduced motion · WP admin bar offsets
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */

:root {

  /* Colors */
  --color-deep-forest:  #2A4020;
  --color-willow-green: #435922;
  --color-cream-linen:  #F2DCB3;
  --color-walnut-brown: #593622;
  --color-near-black:   #0D0D0D;

  /* Spacing — 4pt scale */
  --space-3xs: 0.25rem;  /*  4px */
  --space-2xs: 0.5rem;   /*  8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-md);
  --header-height: 64px;

  /* Grain textures — SVG feTurbulence 200px tile */
  --grain-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.045'/></svg>");
  --grain-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.025'/></svg>");

  /* Decorative botanical (cream-linen hardcoded) */
  --botanical-svg: url("data:image/svg+xml,<svg viewBox='0 0 480 320' xmlns='http://www.w3.org/2000/svg' fill='none'><path d='M 480,30 C 440,15 380,10 320,20 C 260,30 200,50 150,65' stroke='%23F2DCB3' stroke-width='2' stroke-linecap='round'/><path d='M 455,22 C 460,70 458,120 452,162' stroke='%23F2DCB3' stroke-width='1.2' stroke-linecap='round'/><path d='M 420,14 C 422,65 418,118 410,160' stroke='%23F2DCB3' stroke-width='1.2' stroke-linecap='round'/><path d='M 385,12 C 384,64 378,117 368,158' stroke='%23F2DCB3' stroke-width='1.1' stroke-linecap='round'/><path d='M 350,15 C 346,68 338,120 325,160' stroke='%23F2DCB3' stroke-width='1.1' stroke-linecap='round'/><path d='M 315,20 C 308,74 296,126 280,165' stroke='%23F2DCB3' stroke-width='1.0' stroke-linecap='round'/><path d='M 280,28 C 270,83 256,135 238,172' stroke='%23F2DCB3' stroke-width='1.0' stroke-linecap='round'/><path d='M 245,38 C 232,93 216,144 196,178' stroke='%23F2DCB3' stroke-width='0.9' stroke-linecap='round'/><path d='M 210,48 C 194,102 175,150 152,180' stroke='%23F2DCB3' stroke-width='0.9' stroke-linecap='round'/><ellipse cx='452' cy='166' rx='3' ry='6.5' fill='%23F2DCB3' transform='rotate(-5, 452, 166)'/><ellipse cx='410' cy='164' rx='3' ry='6.5' fill='%23F2DCB3' transform='rotate(-10, 410, 164)'/><ellipse cx='368' cy='162' rx='3' ry='6' fill='%23F2DCB3' transform='rotate(-15, 368, 162)'/><ellipse cx='325' cy='164' rx='2.8' ry='6' fill='%23F2DCB3' transform='rotate(-20, 325, 164)'/><ellipse cx='280' cy='169' rx='2.5' ry='5.5' fill='%23F2DCB3' transform='rotate(-25, 280, 169)'/><ellipse cx='238' cy='176' rx='2.5' ry='5.5' fill='%23F2DCB3' transform='rotate(-25, 238, 176)'/><ellipse cx='196' cy='182' rx='2.2' ry='5' fill='%23F2DCB3' transform='rotate(-20, 196, 182)'/><ellipse cx='152' cy='184' rx='2.2' ry='5' fill='%23F2DCB3' transform='rotate(-15, 152, 184)'/><ellipse cx='380' cy='90' rx='2' ry='4.5' fill='%23F2DCB3' transform='rotate(-13, 380, 90)'/><ellipse cx='298' cy='98' rx='1.8' ry='4' fill='%23F2DCB3' transform='rotate(-23, 298, 98)'/><ellipse cx='212' cy='114' rx='1.8' ry='4' fill='%23F2DCB3' transform='rotate(-18, 212, 114)'/></svg>");

}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-lg);
    --header-height: 80px;
  }
}


/* ---------------------------------------------------------------------------
   Base reset + global
   --------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-cream-linen);
}

/* Default: main sits below the fixed header */
.site-main { padding-top: var(--header-height); }

/* Pages leading with a dark hero (homepage .hero, inner pages .inner-hero)
   let the hero run edge-to-edge under the transparent header. The hero's own
   top padding absorbs the header-height offset. :has() picks them up
   automatically — no body class discipline required. */
.site-main:has(> .hero),
.site-main:has(> .inner-hero) {
  padding-top: 0;
}


/* ---------------------------------------------------------------------------
   Layout utilities
   --------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section--dark {
  background-color: var(--color-deep-forest);
  color: var(--color-cream-linen);
}

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-cream-linen); }

.section--dark a:not(.btn) {
  color: var(--color-cream-linen);
  transition: opacity var(--duration-base) ease;
}

.section--dark a:not(.btn):hover { opacity: 0.75; }

.section--willow {
  background-color: var(--color-willow-green);
  color: var(--color-cream-linen);
}

.section--willow h1, .section--willow h2, .section--willow h3 { color: var(--color-cream-linen); }

.section--willow a:not(.btn) {
  color: var(--color-cream-linen);
  transition: opacity var(--duration-base) ease;
}

.section--willow a:not(.btn):hover { opacity: 0.75; }


/* ---------------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-cream-linen);
  color: var(--color-near-black);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  z-index: 9999;
  transition: top var(--duration-base) ease;
}

.skip-link:focus { top: var(--space-sm); }


/* ---------------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background-color: var(--color-deep-forest);
  transition:
    background-color var(--duration-slow) var(--ease-in-out),
    box-shadow       var(--duration-slow) var(--ease-in-out);
}

/* Transparent over the dark hero until the user scrolls past the threshold.
   Every prototype page leads with a Deep Forest hero, so the header can
   float over it cleanly. If a future light-hero page is added, opt out with
   a body-class or template-scoped override. */
.site-header:not(.is-scrolled) {
  background-color: transparent;
  box-shadow: none;
}

.site-header.is-scrolled {
  background-color: var(--color-deep-forest);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* WP admin bar offsets — logged-in users see a 32px (desktop) or 46px (mobile) bar */
.admin-bar .site-header { top: 32px; }
.admin-bar .site-nav    { top: calc(var(--header-height) + 32px); }

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .site-nav    { top: calc(var(--header-height) + 46px); }
}


/* ---------------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------------- */

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}

.site-logo__img {
  display:    block;
  height:     40px;
  width:      auto;
  opacity:    0.92;
  transition: opacity 0.2s ease;
}

.site-logo:hover .site-logo__img,
.site-logo:focus-visible .site-logo__img {
  opacity: 1;
}


/* ---------------------------------------------------------------------------
   Nav toggle (hamburger)
   --------------------------------------------------------------------------- */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

@media (min-width: 768px) { .nav-toggle { display: none; } }

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-cream-linen);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--duration-slow) var(--ease-out-quart),
    opacity   var(--duration-base) ease;
  margin-inline: auto;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ---------------------------------------------------------------------------
   Site nav
   --------------------------------------------------------------------------- */

.site-nav {
  position: absolute;
  top: var(--header-height);
  left: 0; right: 0;
  background: var(--color-deep-forest);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height var(--duration-slow) var(--ease-out-quart),
    opacity    0.3s ease;
}

.site-nav.is-open {
  max-height: 480px;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .site-nav {
    position: static;
    background: transparent;
    overflow: visible;
    max-height: none;
    opacity: 1;
    pointer-events: auto;
  }
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--container-pad) var(--space-lg);
  gap: var(--space-xs);
}

@media (min-width: 768px) {
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    padding: 0;
  }
}

.site-nav__list li a {
  display: inline-block;
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-cream-linen);
  text-decoration: none;
  padding-block: var(--space-2xs);
  position: relative;
  transition: opacity var(--duration-base) ease;
}

.site-nav__list li a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-cream-linen);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out-quart);
}

.site-nav__list li a:hover::after,
.site-nav__list li.current-menu-item > a::after,
.site-nav__list li.current_page_item > a::after { transform: scaleX(1); }

.site-nav__list li a:hover { opacity: 0.8; }

@media (max-width: 767px) {
  .site-nav__list li a {
    font-size: var(--text-md);
    padding-block: var(--space-sm);
  }
}


/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-2xl) var(--space-lg);
  border-top: 1px solid rgba(242, 220, 179, 0.08);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.site-footer__logo .site-logo__img { height: 56px; }

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  margin: 0; padding: 0;
}

.site-footer__nav-list li a {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-cream-linen);
  text-decoration: none;
  opacity: 0.72;
  display: inline-block;
  padding-block: var(--space-2xs);
  transition: opacity var(--duration-base) ease;
}

.site-footer__nav-list li a:hover,
.site-footer__nav-list li.current-menu-item > a,
.site-footer__nav-list li.current_page_item > a { opacity: 1; }

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-social-link {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-cream-linen);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity var(--duration-base) ease;
}

.footer-social-link:hover { opacity: 1; }

.site-footer__copyright {
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-cream-linen);
  opacity: 0.35;
  margin: 0;
  max-width: none;
}


/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-xl);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out-quart),
    color            var(--duration-base) var(--ease-out-quart),
    border-color     var(--duration-base) var(--ease-out-quart);
}

.btn--outline {
  background: transparent;
  color: var(--color-cream-linen);
  border: 1px solid rgba(242, 220, 179, 0.5);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-cream-linen);
  color: var(--color-deep-forest);
  border-color: var(--color-cream-linen);
}

.btn--solid {
  background: var(--color-deep-forest);
  color: var(--color-cream-linen);
  border: 1px solid var(--color-deep-forest);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--color-willow-green);
  border-color: var(--color-willow-green);
}

.btn:focus-visible {
  outline: 2px solid var(--color-cream-linen);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   Link patterns
   --------------------------------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color:          var(--color-walnut-brown);
  text-decoration: none;
  padding-block: var(--space-2xs);
}

.link-arrow::after {
  content: '→';
  transition: transform var(--duration-base) var(--ease-out-quart);
}

.link-arrow:hover            { color: var(--color-deep-forest); }
.link-arrow:hover::after     { transform: translateX(4px); }

.link-arrow:focus-visible {
  outline: 2px solid var(--color-walnut-brown);
  outline-offset: 3px;
  border-radius: 2px;
}

.link-arrow--cream {
  color: var(--color-cream-linen);
  opacity: 0.75;
}

.link-arrow--cream:hover { color: var(--color-cream-linen); opacity: 1; }

.link-arrow--cream:focus-visible { outline-color: var(--color-cream-linen); }


/* ---------------------------------------------------------------------------
   Inline social links
   --------------------------------------------------------------------------- */

.social-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.social-inline__link {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:
    color                 var(--duration-base) ease,
    text-decoration-color var(--duration-base) ease;
}

.section--willow .social-inline__link {
  color: var(--color-cream-linen);
  text-decoration-color: rgba(242, 220, 179, 0.35);
}

.section--willow .social-inline__link:hover {
  text-decoration-color: var(--color-cream-linen);
}

.social-inline__sep { opacity: 0.4; }

.section--willow .social-inline__sep { color: var(--color-cream-linen); }


/* ---------------------------------------------------------------------------
   Inner hero — shared pattern for non-homepage pages
   --------------------------------------------------------------------------- */

.inner-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-deep-forest);
  background-image:
    var(--grain-dark),
    radial-gradient(ellipse 60% 50% at 50% 30%,
      oklch(0.55 0.09 78 / 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 65% 55% at 15% 90%,
      oklch(0.22 0.06 152 / 0.22) 0%, transparent 60%);
  background-size: 200px 200px, auto, auto;
  padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-2xl);
}

@media (min-width: 768px) {
  .inner-hero { padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-3xl); }
}

.inner-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 720px;
}

@media (max-width: 767px) {
  .inner-hero__inner {
    align-items: center;
    text-align: center;
  }
}

@keyframes inner-hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inner-hero__eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-light);
  font-style:     italic;
  letter-spacing: var(--tracking-wider);
  color:          var(--color-cream-linen);
  opacity: 0.6;
  margin: 0;
  max-width: none;
  animation: inner-hero-fade-up var(--duration-enter) var(--ease-out-quart) 0.1s both;
}

.inner-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.5rem, 6vw + 1rem, 5rem);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color:          var(--color-cream-linen) !important;
  margin: 0;
  max-width: none;
  text-shadow:
    0 0 80px  rgba(242, 200, 100, 0.15),
    0 0 160px rgba(242, 200, 100, 0.08);
  animation: inner-hero-fade-up var(--duration-enter) var(--ease-out-quart) 0.25s both;
}

.inner-hero__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 200px;
  opacity: 0.35;
  margin-block: var(--space-2xs);
  animation: inner-hero-fade-up var(--duration-enter) var(--ease-out-quart) 0.4s both;
}

.inner-hero__divider-rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-cream-linen);
}

.inner-hero__divider-motif {
  font-size: 0.6rem;
  color: var(--color-cream-linen);
  flex-shrink: 0;
  line-height: 1;
}

.inner-hero__lead {
  font-family:  var(--font-body);
  font-style:   italic;
  font-weight:  var(--weight-light);
  font-size:    var(--text-md);
  line-height:  var(--leading-loose);
  color:        var(--color-cream-linen);
  opacity: 0.82;
  max-width: 52ch;
  margin: 0;
  animation: inner-hero-fade-up var(--duration-enter) var(--ease-out-quart) 0.55s both;
}


/* ---------------------------------------------------------------------------
   Paper section — Cream Linen content band with torn-edge transition
   Each page overrides --paper-tear to give itself a unique silhouette.
   --------------------------------------------------------------------------- */

.section--paper {
  position: relative;
  background-color: var(--color-cream-linen);
  background-image: var(--grain-light);
  background-size: 200px 200px;
  padding-block: var(--space-3xl) var(--space-2xl);

  --paper-tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M 0,36 C 90,10 200,48 310,24 C 410,12 530,50 650,30 C 750,48 860,16 970,34 C 1080,50 1190,12 1310,32 C 1380,46 1440,28 1440,28 L 1440,56 L 0,56 Z' fill='black'/%3E%3C/svg%3E");
}

.section--paper::before {
  content: '';
  position: absolute;
  top: -56px;
  left: 0;
  right: 0;
  height: 56px;
  background-color: var(--color-cream-linen);
  background-image: var(--grain-light);
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: var(--paper-tear);
          mask-image: var(--paper-tear);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}


/* ---------------------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   750ms var(--ease-out-quart),
    transform 750ms var(--ease-out-quart);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }

  .reveal {
    opacity:   1;
    transform: none;
    transition: none;
  }

  .hero { animation: none; --hero-glow-opacity: 0.17; }

  .hero__botanical { transition: none; }

  .hero__botanical-willow { animation: none; transform: none; }
}