/* ==================================================================
   Wagon Foundation — custom.css
   Textures, typography, section styling, animation states.
   Loads after style.css (tokens + base live there).
   ================================================================== */

/* ------------------------------------------------------------------
   Skip link
   ------------------------------------------------------------------ */
.wf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--wf-forest-darkest);
  color: var(--wf-text-light);
  font-family: var(--wf-sans);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wf-skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------
   Fixed navigation
   ------------------------------------------------------------------ */
.wf-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.wf-nav--scrolled {
  background: rgba(26, 37, 24, 0.96);
  box-shadow: 0 1px 0 rgba(196, 149, 58, 0.25);
}

.wf-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wf-nav__mark {
  width: 30px;
  height: 30px;
  opacity: 0.9;
}

.wf-nav__wordmark {
  font-family: var(--wf-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--wf-text-light);
}

.wf-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.wf-nav__link,
.wf-nav__support {
  font-family: var(--wf-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.wf-nav__link {
  color: rgba(240, 235, 227, 0.75);
}

.wf-nav__link:hover,
.wf-nav__link:focus-visible {
  color: var(--wf-text-light);
  border-bottom-color: rgba(240, 235, 227, 0.5);
}

.wf-nav__support {
  color: var(--wf-gold-light);
}

.wf-nav__support:hover,
.wf-nav__support:focus-visible {
  border-bottom-color: var(--wf-gold-light);
}

/* Anchor targets clear the fixed nav */
#donate,
#residency,
#mission {
  scroll-margin-top: 72px;
}

/* ------------------------------------------------------------------
   Section scaffolding: neutralise Elementor defaults
   ------------------------------------------------------------------ */
.wf-hero,
.wf-text-section,
.wf-photo-section,
.wf-dark-section {
  position: relative;
  width: 100%;
}

.wf-hero > .elementor-container,
.wf-text-section > .elementor-container,
.wf-dark-section > .elementor-container {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wf-text-section > .elementor-container,
.wf-dark-section > .elementor-container {
  max-width: 640px;
}

.wf-hero > .elementor-container {
  max-width: 900px;
}

/* Remove Elementor defaults that conflict with the design */
.elementor-section.wf-photo-section {
  padding: 0 !important;
}

.elementor-section.wf-photo-section .elementor-container {
  max-width: 100% !important;
}

.wf-text-section .elementor-widget-heading .elementor-heading-title,
.wf-dark-section .elementor-widget-heading .elementor-heading-title,
.wf-hero .elementor-widget-heading .elementor-heading-title {
  margin: 0;
}

.wf-dark-section .elementor-widget-heading .elementor-heading-title {
  color: var(--wf-text-light);
}

/* Serif statements always wrap balanced, no orphaned last word */
.wf-text-section .elementor-widget-heading .elementor-heading-title,
.wf-dark-section .elementor-widget-heading .elementor-heading-title,
.wf-hero .elementor-widget-heading .elementor-heading-title {
  text-wrap: balance;
}

.wf-hero .elementor-widget:not(:last-child),
.wf-text-section .elementor-widget:not(:last-child),
.wf-dark-section .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* Ensure speckle texture sits above Elementor's background overlay */
.elementor-section.wf-speckled > .elementor-background-overlay {
  z-index: 0;
}

/* ------------------------------------------------------------------
   Typography roles
   ------------------------------------------------------------------ */
.wf-eyebrow {
  font-family: var(--wf-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wf-gold);
  text-indent: 0.4em; /* balances trailing letter-spacing when centered */
}

/* High-specificity variants so section-level heading colors never
   swallow the label color (dark sections force headings to text-light). */
.elementor-section .elementor-heading-title.wf-eyebrow--gold,
.wf-eyebrow--gold {
  color: var(--wf-gold);
}

.elementor-section .elementor-heading-title.wf-eyebrow--orange,
.wf-eyebrow--orange {
  color: var(--wf-orange);
}

/* Hero eyebrow gets short hairlines either side, like a stamped plate.
   The flex treatment lives on the text element itself so it centers
   correctly in both theme markup (class on the <p>) and Elementor
   markup (class on the widget wrapper). */
p.wf-eyebrow--ruled,
.wf-eyebrow--ruled .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: var(--wf-gold-light);
}

p.wf-eyebrow--ruled::before,
p.wf-eyebrow--ruled::after,
.wf-eyebrow--ruled .elementor-heading-title::before,
.wf-eyebrow--ruled .elementor-heading-title::after {
  content: '';
  flex: none;
  width: 40px;
  height: 1px;
  background: rgba(212, 169, 74, 0.55);
}

.wf-display {
  font-family: var(--wf-serif);
  font-weight: 500;
  font-size: clamp(3.4rem, 6.5vw, 6.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
  color: var(--wf-text-light);
  margin-top: 1.75rem !important;
}

.wf-subhead {
  font-family: var(--wf-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.5;
  text-align: center;
  color: var(--wf-text-light);
  padding-bottom: 0.25rem; /* italic descender clearance */
}

.wf-statement {
  font-family: var(--wf-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
  color: var(--wf-text-dark);
  margin-top: 2.5rem !important;
}

.wf-dark-section .wf-statement {
  color: var(--wf-text-light);
}

.wf-body {
  font-family: var(--wf-sans);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.7;
  text-align: center;
}

.wf-body p {
  margin: 0;
}

.wf-body--hero {
  color: rgba(240, 235, 227, 0.9);
  margin-top: 1.5rem;
}

/* Supporting prose under section statements.
   Width is constrained on the inner paragraph (not the widget wrapper)
   because Elementor's generated _margin rules override margin:auto on
   the wrapper. */
.wf-prose {
  font-family: var(--wf-sans);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.75;
  text-align: center;
  color: rgba(26, 46, 26, 0.76);
  margin-top: 2rem;
}

.wf-prose p {
  max-width: 52ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wf-prose p {
  margin: 0;
}

.wf-dark-section .wf-prose {
  color: rgba(240, 235, 227, 0.72);
}

/* Legal fine print under the donation button */
.wf-fineprint {
  font-family: var(--wf-sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(240, 235, 227, 0.5);
  margin-top: 1.75rem;
}

.wf-fineprint p {
  margin: 0;
}

/* ------------------------------------------------------------------
   Gold rules (divider widgets)
   ------------------------------------------------------------------ */
.wf-rule {
  display: flex;
  justify-content: center;
  padding: 2.25rem 0 0;
}

.wf-rule .elementor-divider-separator {
  display: block;
  height: 1px;
  border: 0;
  background: var(--wf-gold);
}

.wf-rule--64 .elementor-divider-separator { width: 64px; }
.wf-rule--80 .elementor-divider-separator { width: 80px; }
.wf-rule--120 .elementor-divider-separator { width: 120px; }

.wf-rule--gradient .elementor-divider-separator {
  background: linear-gradient(90deg, transparent, var(--wf-gold) 25%, var(--wf-gold) 75%, transparent);
}

/* Signature ornament: hairline broken by a small wagon wheel.
   Works on any Elementor divider widget carrying .wf-rule--ornament. */
.wf-rule--ornament .elementor-divider-separator,
.elementor-widget-divider.wf-rule--ornament .elementor-divider-separator {
  position: relative;
  display: block;
  width: 160px;
  height: 17px;
  border: 0;
  background:
    linear-gradient(var(--wf-gold), var(--wf-gold)) left center / 62px 1px no-repeat,
    linear-gradient(var(--wf-gold), var(--wf-gold)) right center / 62px 1px no-repeat;
}

.wf-rule--ornament .elementor-divider-separator {
  margin-left: auto;
  margin-right: auto;
}

.wf-rule--ornament .elementor-divider-separator::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='20' stroke='%23c4953a' stroke-width='3'/%3E%3Cg stroke='%23c4953a' stroke-width='2.5'%3E%3Cline x1='24' y1='4' x2='24' y2='44'/%3E%3Cline x1='4' y1='24' x2='44' y2='24'/%3E%3Cline x1='9.86' y1='9.86' x2='38.14' y2='38.14'/%3E%3Cline x1='38.14' y1='9.86' x2='9.86' y2='38.14'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='5' fill='%23c4953a'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.wf-rule--ornament {
  padding-top: 2.5rem;
}

.elementor-widget.wf-rule--ornament,
.wf-rule--ornament .elementor-widget-container,
.wf-rule--ornament .elementor-divider {
  display: block;
  width: 100%;
  text-align: center;
}

/* ------------------------------------------------------------------
   Section 1: hero
   ------------------------------------------------------------------ */
.wf-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 6rem 0;
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=2400&q=80');
  background-size: cover;
  background-position: center;
  color: var(--wf-text-light);
}

.wf-hero > .elementor-background-overlay,
.wf-hero > .elementor-container {
  border-radius: 0;
}

.wf-hero > .elementor-background-overlay {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 37, 24, 0.55) 0%,
    rgba(26, 37, 24, 0.38) 45%,
    rgba(26, 37, 24, 0.72) 100%
  );
  pointer-events: none;
}

.wf-hero .wf-rule {
  padding-top: 2.5rem;
}

.wf-hero .wf-subhead {
  margin-top: 2.5rem !important;
}

.wf-hero__mark-wrap,
.wf-hero .elementor-widget-image .elementor-widget-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.wf-hero__mark,
.wf-hero .elementor-widget-image img {
  width: 44px;
  height: 44px;
  opacity: 0.85;
}

/* ------------------------------------------------------------------
   Sections 2 & 6: text blocks on paper
   ------------------------------------------------------------------ */
.wf-text-section {
  padding: 160px 0;
}

.wf-cream-bg {
  background: var(--wf-cream);
}

.wf-tan-bg {
  background: var(--wf-tan);
}

.wf-cream-bg::before,
.wf-tan-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Sections 3, 5, 7: full-bleed photographs
   ------------------------------------------------------------------ */
.wf-photo-section {
  min-height: 55vh;
  background-size: cover;
  background-position: center;
}

/* Soft top/bottom vignette binds the plates into the journal */
.wf-photo-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 37, 24, 0.22), transparent 20%),
    linear-gradient(0deg, rgba(26, 37, 24, 0.22), transparent 20%);
  pointer-events: none;
}

.wf-photo-stream {
  min-height: 60vh;
  background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=2400&q=80');
}

.wf-photo-cabin {
  min-height: 68vh;
  background-image: url('https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8?auto=format&fit=crop&w=2400&q=80');
}

.wf-photo-library {
  background-image: url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=2400&q=80');
}

/* ------------------------------------------------------------------
   Sections 4 & 8: dark green with speckled grain
   ------------------------------------------------------------------ */
.wf-dark-section {
  padding: 160px 0;
  background: var(--wf-forest-deep);
  color: var(--wf-text-light);
}

.wf-speckled {
  position: relative;
}

.wf-speckled::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 1;
}

.wf-speckled::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='speckle'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.6' numOctaves='2' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0' in='noise' result='gray'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23speckle)'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

.wf-speckled > .elementor-container {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------------
   Donation button
   ------------------------------------------------------------------ */
.wf-dark-section .elementor-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

/* Both markups: class directly on the <a> (theme templates) or on the
   widget wrapper (Elementor _css_classes) — style only the anchor. */
a.wf-button,
a.wf-button:visited,
.wf-button a.elementor-button,
.wf-button a.elementor-button:visited {
  display: inline-block;
  padding: 1.1rem 2.75rem;
  border: 1px solid var(--wf-gold);
  border-radius: 0;
  background: transparent;
  color: var(--wf-gold-light);
  font-family: var(--wf-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em;
  white-space: nowrap;
  transition: background-color 0.35s ease, color 0.35s ease;
}

a.wf-button:hover,
a.wf-button:focus-visible,
.wf-button a.elementor-button:hover,
.wf-button a.elementor-button:focus-visible {
  background: var(--wf-gold);
  color: var(--wf-forest-darkest);
}

/* ------------------------------------------------------------------
   Section 8: footer refinements
   ------------------------------------------------------------------ */
.wf-footer {
  padding: 140px 0;
  background: var(--wf-forest-darkest);
}

.wf-footer .elementor-widget-image .elementor-widget-container {
  display: flex;
  justify-content: center;
}

.wf-footer__mark {
  width: 48px;
  height: 48px;
  opacity: 0.7;
}

.wf-footer__wordmark {
  margin-top: 1.75rem !important;
}

.wf-footer .wf-rule {
  padding-top: 1.75rem;
}

.wf-footer__place {
  margin-top: 1.75rem !important;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
}

.wf-footer__note {
  margin-top: 1.25rem;
  color: rgba(240, 235, 227, 0.68);
  font-size: 1.15rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
   Type floor
   These selectors outrank Elementor's per-element generated CSS
   ((0,4,1)+ vs its (0,4,0)), so the theme's type scale holds even if
   stale page data is saved from an old editor session. Nothing on the
   page can render below 16px.
   ------------------------------------------------------------------ */
.wf-hero .elementor-column .elementor-widget-heading p.elementor-heading-title,
.wf-text-section .elementor-column .elementor-widget-heading p.elementor-heading-title,
.wf-dark-section .elementor-column .elementor-widget-heading p.elementor-heading-title {
  font-size: 1rem; /* section labels */
}

.wf-hero .elementor-column .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(3.4rem, 6.5vw, 6.25rem);
}

.wf-hero .elementor-column .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.wf-text-section .elementor-column .elementor-widget-heading h2.elementor-heading-title,
.wf-dark-section:not(.wf-footer) .elementor-column .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}

.wf-footer .elementor-column .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
}

.wf-text-section .elementor-column .elementor-widget-text-editor p {
  font-size: 1.3rem;
}

.wf-hero .elementor-column .elementor-widget-text-editor p {
  font-size: 1.35rem;
}

.wf-dark-section:not(.wf-footer) .elementor-column .elementor-widget-text-editor p {
  font-size: 1rem;
}

/* Prose in the dark section keeps its reading size (beats the 1rem
   floor above by source order at equal specificity). */
.wf-dark-section:not(.wf-footer) .elementor-column .elementor-widget-text-editor.wf-prose p,
.wf-dark-section:not(.wf-footer) .elementor-column .elementor-widget-text-editor .wf-prose p {
  font-size: 1.3rem;
}

.wf-footer .elementor-column .elementor-widget-text-editor p {
  font-size: 1.15rem;
}

.wf-dark-section .elementor-column .elementor-widget-button a.elementor-button {
  font-size: 1rem;
}

/* ------------------------------------------------------------------
   Scroll-triggered reveals
   ------------------------------------------------------------------ */
.wf-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wf-fade-in.wf-visible {
  opacity: 1;
  transform: translateY(0);
}

.wf-fade-in:nth-child(2) { transition-delay: 0.1s; }
.wf-fade-in:nth-child(3) { transition-delay: 0.2s; }
.wf-fade-in:nth-child(4) { transition-delay: 0.3s; }
.wf-fade-in:nth-child(5) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .wf-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* No-JS safety: never leave content hidden */
.no-js .wf-fade-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .wf-text-section,
  .wf-dark-section {
    padding: 100px 0;
  }

  .wf-footer {
    padding: 96px 0;
  }

  .wf-photo-section {
    min-height: 45vh;
  }

  .wf-nav {
    height: 60px;
  }

  .wf-nav__wordmark {
    font-size: 1rem;
    letter-spacing: 0.22em;
  }

  .wf-nav__link {
    display: none; /* mobile keeps brand + Support only */
  }

  .wf-eyebrow--ruled::before,
  .wf-eyebrow--ruled::after {
    width: 24px;
  }
}