/*
Theme Name:   Trailwind Endurance Child
Theme URI:    https://trailwindendurance.com
Description:  Child theme for Trailwind Endurance — Virtual Gravel Triathlon Series
Author:       Trailwind Endurance
Template:     astra
Version:      1.0.0
Text Domain:  trailwind-endurance-child
*/

/* ============================================================
   BRAND TOKENS — Edit these to update colors sitewide
   ============================================================ */
:root {
  /* Core Palette */
  --tw-inkwell:    #1D1C24;   /* Primary dark background */
  --tw-pumpkin:    #F36C21;   /* Finish Line — primary accent, CTAs */
  --tw-ember:      #C55217;   /* Ember — hover states, deep accent */
  --tw-copper:     #B67749;   /* Saddle — warm highlight */
  --tw-limestone:  #989F96;   /* Limestone — muted labels, secondary text */
  --tw-teal:       #A0C9CB;   /* Gravel Teal — newsletter bar, cool accents */
  --tw-dust:       #F2EDE6;   /* Dust Road — warm background, body on dark */
  --tw-mist:       #E4E8E8;   /* Slate Mist — alternate section backgrounds */

  /* Typography Scale */
  --tw-font-display:  'Teko', sans-serif;
  --tw-font-ui:       'Rajdhani', sans-serif;
  --tw-font-body:     'Libre Baskerville', serif;

  --tw-size-hero:     clamp(64px, 10vw, 112px);
  --tw-size-h1:       clamp(52px, 7vw, 88px);
  --tw-size-h2:       clamp(40px, 5vw, 64px);
  --tw-size-h3:       clamp(24px, 3vw, 32px);
  --tw-size-label:    11px;
  --tw-size-body:     16px;
  --tw-size-small:    13px;

  --tw-tracking-wide:   4px;
  --tw-tracking-wider:  6px;
  --tw-tracking-widest: 8px;

  /* Spacing */
  --tw-section-v:  120px;
  --tw-section-h:  64px;
  --tw-gap-sm:     16px;
  --tw-gap-md:     32px;
  --tw-gap-lg:     64px;
  --tw-gap-xl:     120px;

  /* Effects */
  --tw-radius:     2px;
  --tw-transition: 0.2s ease;
  --tw-shadow:     0 8px 32px rgba(0,0,0,0.3);
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--tw-font-body);
  font-size: var(--tw-size-body);
  color: var(--tw-inkwell);
  background-color: var(--tw-dust);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY OVERRIDES
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.ast-header-logo,
.site-title {
  font-family: var(--tw-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  line-height: 0.92 !important;
}

h1 { font-size: var(--tw-size-h1); }
h2 { font-size: var(--tw-size-h2); }
h3 { font-size: var(--tw-size-h3); }

p {
  font-family: var(--tw-font-body);
  line-height: 1.8;
}

/* Eyebrow / label utility class */
.tw-eyebrow,
.eyebrow-label {
  font-family: var(--tw-font-ui) !important;
  font-size: var(--tw-size-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tw-tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--tw-pumpkin) !important;
}

/* Orange rule divider — add class to any Elementor Divider widget */
.tw-rule,
.orange-rule {
  width: 48px !important;
  height: 2px !important;
  background: var(--tw-pumpkin) !important;
  border: none !important;
  margin: 16px 0 24px !important;
  display: block !important;
}

/* Muted body text on dark backgrounds */
.tw-body-muted {
  color: rgba(242, 237, 230, 0.65) !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Base nav */
.ast-primary-header-bar,
.main-header-bar {
  background: transparent !important;
  transition: background var(--tw-transition), padding var(--tw-transition) !important;
}

/* Scrolled state — triggered by Astra sticky header */
.ast-header-sticked .ast-primary-header-bar,
.ast-header-sticked .main-header-bar {
  background: rgba(29, 28, 36, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(243, 108, 33, 0.15) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.3) !important;
}

/* ── NAV LOGO ── */
.ast-site-title,
.site-title a {
  font-family: var(--tw-font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--tw-dust) !important;
  text-decoration: none !important;
}

/* ── LOGO FILES (all stored in /wp-content/themes/trailwind-child/)
   logo-horizontal-light.png  — nav/footer on dark backgrounds
   logo-horizontal-dark.png   — nav on light backgrounds
   logo-icon-light.png        — icon only, small spaces on dark
   logo-icon-dark.png         — icon only, small spaces on light
   favicon-32.png             — browser tab (set in Customizer > Site Identity)
   favicon-512.png            — WordPress site icon (Customizer > Site Identity)
   og-image.jpg               — social share (set in Rank Math > Homepage thumbnail)
── */

/* Nav logo — dark header uses light logo */
.ast-header-logo-container img,
.custom-logo,
.site-logo img,
.nav-logo img {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
  transition: opacity 0.2s !important;
  display: block !important;
  content: url('logo-horizontal-light.png') !important;
}

/* Nav logo — light header variant uses dark logo */
.header-light .ast-header-logo-container img,
.header-light .custom-logo,
.header-light .nav-logo img,
.ast-header-style-plain .ast-header-logo-container img {
  content: url('logo-horizontal-dark.png') !important;
}

.ast-header-logo-container img:hover,
.custom-logo:hover,
.nav-logo img:hover {
  opacity: 0.75 !important;
}

/* Footer logo — light version, reduced opacity */
.site-footer .ast-header-logo-container img,
.ast-footer-area .custom-logo,
.footer-logo img {
  height: 32px !important;
  width: auto !important;
  opacity: 0.65 !important;
  content: url('logo-horizontal-light.png') !important;
}
.site-footer .ast-header-logo-container img:hover,
.footer-logo img:hover {
  opacity: 0.9 !important;
}

/* Retina — ensure crisp rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .nav-logo img,
  .ast-header-logo-container img,
  .footer-logo img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Nav links */
.ast-primary-header-bar .menu-link,
.main-navigation .menu-link,
.ast-nav-menu > li > a {
  font-family: var(--tw-font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--tw-limestone) !important;
  transition: color var(--tw-transition) !important;
  padding: 8px 0 !important;
}

.ast-primary-header-bar .menu-link:hover,
.ast-nav-menu > li > a:hover {
  color: var(--tw-dust) !important;
}

/* Nav CTA button */
.ast-header-button,
.ast-header-button-link {
  font-family: var(--tw-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: var(--tw-pumpkin) !important;
  color: #ffffff !important;
  padding: 10px 22px !important;
  border-radius: var(--tw-radius) !important;
  transition: background var(--tw-transition) !important;
  border: none !important;
  text-decoration: none !important;
}

.ast-header-button:hover,
.ast-header-button-link:hover {
  background: var(--tw-ember) !important;
}

/* Mobile hamburger */
.ast-mobile-menu-trigger-fill,
.ast-button-wrap .menu-toggle {
  color: var(--tw-dust) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.elementor-button,
.ast-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  font-family: var(--tw-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  background: var(--tw-pumpkin) !important;
  color: #ffffff !important;
  padding: 16px 36px !important;
  border-radius: var(--tw-radius) !important;
  border: none !important;
  transition: background var(--tw-transition), transform 0.1s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.elementor-button:hover,
.ast-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--tw-ember) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Ghost / outline button variant */
.elementor-button.btn-ghost,
.tw-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(242, 237, 230, 0.25) !important;
  color: var(--tw-dust) !important;
}

.elementor-button.btn-ghost:hover,
.tw-btn-ghost:hover {
  background: transparent !important;
  border-color: var(--tw-pumpkin) !important;
  color: var(--tw-pumpkin) !important;
  transform: none !important;
}

/* Dark button variant */
.tw-btn-dark,
.elementor-button.btn-dark {
  background: var(--tw-inkwell) !important;
  color: var(--tw-dust) !important;
}

.tw-btn-dark:hover,
.elementor-button.btn-dark:hover {
  background: rgba(29, 28, 36, 0.85) !important;
}

/* ============================================================
   FORMS — WPForms dark theme
   ============================================================ */

/* Dark form wrapper — add class tw-form-dark to WPForms container */
.tw-form-dark .wpforms-field input,
.tw-form-dark .wpforms-field textarea,
.tw-form-dark .wpforms-field select {
  background: rgba(242, 237, 230, 0.06) !important;
  border: 1px solid rgba(152, 159, 150, 0.2) !important;
  color: var(--tw-dust) !important;
  font-family: var(--tw-font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  padding: 15px 18px !important;
  border-radius: var(--tw-radius) !important;
  transition: border-color var(--tw-transition) !important;
}

.tw-form-dark .wpforms-field input::placeholder,
.tw-form-dark .wpforms-field textarea::placeholder {
  color: rgba(152, 159, 150, 0.35) !important;
}

.tw-form-dark .wpforms-field input:focus,
.tw-form-dark .wpforms-field textarea:focus,
.tw-form-dark .wpforms-field select:focus {
  border-color: var(--tw-pumpkin) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(243, 108, 33, 0.12) !important;
}

.tw-form-dark .wpforms-field label {
  font-family: var(--tw-font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--tw-limestone) !important;
}

/* Form submit button */
.tw-form-dark .wpforms-submit,
.tw-form-dark button[type="submit"] {
  width: 100% !important;
  background: var(--tw-pumpkin) !important;
  margin-top: 4px !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

/* Full-bleed hero with video background */
.tw-hero-section {
  position: relative !important;
  min-height: 100vh !important;
}

/* Gradient bottom fade — apply to hero section */
.tw-hero-fade::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 45% !important;
  background: linear-gradient(to bottom, transparent, var(--tw-inkwell)) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hero discipline label row */
.tw-disc-labels {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.tw-disc-label {
  font-family: var(--tw-font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: rgba(242, 237, 230, 0.5) !important;
}

.tw-disc-label.active {
  color: var(--tw-pumpkin) !important;
}

.tw-disc-dot {
  width: 3px !important; height: 3px !important;
  border-radius: 50% !important;
  background: var(--tw-pumpkin) !important;
  display: inline-block !important;
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.tw-stats-strip {
  background: var(--tw-pumpkin) !important;
}

.tw-stats-strip .tw-stat-num {
  font-family: var(--tw-font-display) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: var(--tw-inkwell) !important;
  line-height: 1 !important;
}

.tw-stats-strip .tw-stat-label {
  font-family: var(--tw-font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(29, 28, 36, 0.55) !important;
}

/* ============================================================
   FEEL / EDITORIAL SECTION
   ============================================================ */
.tw-feel-lines .tw-line-large {
  font-family: var(--tw-font-display) !important;
  font-size: clamp(36px, 4vw, 52px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--tw-dust) !important;
  line-height: 1.0 !important;
}

.tw-feel-lines .tw-line-muted {
  font-family: var(--tw-font-ui) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--tw-limestone) !important;
  margin: 8px 0 !important;
}

.tw-feel-lines .tw-line-accent {
  color: var(--tw-pumpkin) !important;
}

/* ============================================================
   PHOTO CARDS (Moments / Disciplines)
   ============================================================ */
.tw-photo-card {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.tw-photo-card .elementor-widget-wrap {
  transition: transform 0.6s ease !important;
}

.tw-photo-card:hover .elementor-widget-wrap {
  transform: scale(1.04) !important;
}

.tw-photo-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(29,28,36,0.85) 0%, rgba(29,28,36,0.1) 60%) !important;
  pointer-events: none !important;
}

/* ============================================================
   BLOG CARDS
   ============================================================ */
.tw-blog-card {
  background: var(--tw-inkwell) !important;
  transition: transform 0.2s ease !important;
}

.tw-blog-card:hover {
  transform: translateY(-4px) !important;
}

.tw-blog-card .tw-post-cat {
  font-family: var(--tw-font-ui) !important;
  font-size: 9px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: var(--tw-pumpkin) !important;
  margin-bottom: 10px !important;
}

.tw-blog-card .tw-post-title {
  font-family: var(--tw-font-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--tw-dust) !important;
  line-height: 1.0 !important;
  letter-spacing: 1px !important;
}

.tw-blog-card .tw-post-excerpt {
  font-family: var(--tw-font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(242, 237, 230, 0.5) !important;
}

.tw-read-more {
  font-family: var(--tw-font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--tw-pumpkin) !important;
  text-decoration: none !important;
  transition: letter-spacing var(--tw-transition) !important;
}

.tw-read-more:hover {
  letter-spacing: 6px !important;
}

/* ============================================================
   NEWSLETTER BAR
   ============================================================ */
.tw-newsletter-bar {
  background: var(--tw-teal) !important;
}

.tw-newsletter-bar .tw-nl-headline {
  font-family: var(--tw-font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--tw-inkwell) !important;
  line-height: 1 !important;
}

.tw-newsletter-bar .tw-nl-sub {
  font-family: var(--tw-font-body) !important;
  font-size: 14px !important;
  color: rgba(29, 28, 36, 0.6) !important;
}

.tw-newsletter-bar input[type="email"] {
  background: rgba(29, 28, 36, 0.08) !important;
  border: 1px solid rgba(29, 28, 36, 0.2) !important;
  padding: 13px 18px !important;
  font-family: var(--tw-font-ui) !important;
  font-size: 14px !important;
  color: var(--tw-inkwell) !important;
  border-radius: var(--tw-radius) !important;
  width: 240px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.ast-footer-area,
footer.entry-footer {
  background: var(--tw-inkwell) !important;
  border-top: 1px solid rgba(243, 108, 33, 0.1) !important;
  padding: 40px 64px !important;
}

.ast-footer-copyright,
.footer-copy {
  font-family: var(--tw-font-ui) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(152, 159, 150, 0.28) !important;
}

/* Footer links */
footer a,
.ast-footer-area a {
  font-family: var(--tw-font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(152, 159, 150, 0.45) !important;
  text-decoration: none !important;
  transition: color var(--tw-transition) !important;
}

footer a:hover,
.ast-footer-area a:hover {
  color: var(--tw-pumpkin) !important;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Section divider line top */
.tw-border-top-orange {
  position: relative !important;
}
.tw-border-top-orange::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, var(--tw-pumpkin), transparent) !important;
}

/* Left border accent card */
.tw-card-left-border {
  border-left: 3px solid rgba(29, 28, 36, 0.2) !important;
  padding: 22px 24px !important;
  transition: border-color var(--tw-transition), background var(--tw-transition) !important;
}
.tw-card-left-border:hover {
  border-left-color: var(--tw-pumpkin) !important;
  background: rgba(243, 108, 33, 0.04) !important;
}

/* Custom arrow list */
.tw-arrow-list {
  list-style: none !important;
  padding-left: 0 !important;
}
.tw-arrow-list li {
  padding-left: 20px !important;
  position: relative !important;
  margin-bottom: 10px !important;
  font-family: var(--tw-font-body) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(242, 237, 230, 0.55) !important;
}
.tw-arrow-list li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--tw-pumpkin) !important;
}

/* Grain texture overlay — add to any full-bleed section */
.tw-grain::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") !important;
  opacity: 0.025 !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* ============================================================
   RESPONSIVE — Tablet (768–1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --tw-section-v: 80px;
    --tw-section-h: 40px;
    --tw-gap-xl: 60px;
  }

  h1 { font-size: clamp(44px, 7vw, 64px) !important; }
  h2 { font-size: clamp(36px, 5vw, 52px) !important; }

  .site-footer,
  .ast-footer-area {
    padding: 32px 40px !important;
  }

  /* Stats strip — 2x2 on tablet */
  .tw-stats-strip .elementor-column {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Feel section — stack photo above content */
  .tw-feel-section .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Feel photo fixed height when stacked */
  .tw-feel-photo-col {
    min-height: 380px !important;
    height: 380px !important;
  }

  /* Moments cards — stack on tablet */
  .tw-moments-grid .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .tw-photo-card {
    min-height: 300px !important;
    height: 300px !important;
    aspect-ratio: 16/9 !important;
  }

  /* Signup — stack headline above form */
  .tw-signup-section .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Reduce signup form padding */
  .tw-signup-section .elementor-column:last-child {
    padding: 36px !important;
  }

  /* Hero bottom row — stack tagline above buttons */
  .tw-hero-bottom .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (up to 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --tw-section-v: 60px;
    --tw-section-h: 24px;
    --tw-gap-xl: 40px;
    --tw-gap-lg: 32px;
  }

  h1 { font-size: 44px !important; line-height: 0.9 !important; }
  h2 { font-size: 36px !important; }
  h3 { font-size: 24px !important; }

  /* ── HERO ── */

  /* Remove staggered indents on hero headline lines */
  .tw-hero-section .line-2,
  .tw-hero-section .line-3,
  .tw-hero-section [style*="padding-left:60px"],
  .tw-hero-section [style*="padding-left:120px"],
  .tw-hero-section [style*="padding-left: 60px"],
  .tw-hero-section [style*="padding-left: 120px"] {
    padding-left: 0 !important;
    display: block !important;
  }

  .tw-hero-section .elementor-widget-heading .elementor-heading-title {
    font-size: 44px !important;
    letter-spacing: 0 !important;
    line-height: 0.9 !important;
  }

  /* Increase overlay opacity on mobile for text readability over video */
  .tw-hero-section .elementor-background-overlay {
    opacity: 0.70 !important;
  }

  /* Hero discipline labels — hide last label on very small screens */
  .tw-disc-labels .tw-disc-label:last-child,
  .tw-disc-labels .tw-disc-dot:last-of-type {
    display: none !important;
  }

  /* Hero CTA buttons — stack full width */
  .tw-hero-section .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .tw-hero-section .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* ── STATS STRIP ── */
  .tw-stats-strip .elementor-column {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .tw-stats-strip .tw-stat-num {
    font-size: 32px !important;
  }

  /* ── FEEL SECTION ── */
  .tw-feel-photo-col {
    min-height: 260px !important;
    height: 260px !important;
  }

  /* Remove right-to-dark gradient on photo — not needed when stacked */
  .tw-feel-photo-col::after {
    background: linear-gradient(to bottom, transparent 70%, #1D1C24 100%) !important;
  }

  /* Reduce feel content padding */
  .tw-feel-content-col,
  .tw-feel-content-col .elementor-column-wrap {
    padding: 48px 24px !important;
  }

  /* Scale down feel headline lines */
  .tw-feel-lines div[style*="clamp(36px"],
  .tw-feel-lines div[style*="clamp(36px, 4vw, 52px)"] {
    font-size: 32px !important;
  }

  .tw-feel-lines div[style*="clamp(18px"],
  .tw-feel-lines div[style*="clamp(18px, 2vw, 24px)"] {
    font-size: 16px !important;
  }

  /* ── MOMENTS CARDS ── */
  .tw-photo-card {
    min-height: 260px !important;
    height: 260px !important;
    aspect-ratio: unset !important;
  }

  .tw-moments-grid .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ── SIGNUP SECTION ── */
  .tw-signup-section .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Reduce dark form wrapper padding on mobile */
  .tw-signup-section .elementor-column:last-child,
  .tw-signup-section .elementor-column:last-child .elementor-column-wrap {
    padding: 28px 20px !important;
  }

  /* Stack first name and email fields vertically */
  .tw-form-dark .wpforms-field-container,
  .tw-form-row {
    flex-direction: column !important;
  }

  .tw-form-dark .wpforms-field,
  .tw-form-row .wpforms-field {
    width: 100% !important;
    float: none !important;
  }

  /* ── BLOG CARDS ── */
  .tw-blog-card .tw-post-title {
    font-size: 22px !important;
  }

  /* Hide excerpt on smaller cards on mobile to reduce clutter */
  .tw-blog-card:not(:first-child) .tw-post-excerpt {
    display: none !important;
  }

  /* ── NEWSLETTER BAR ── */
  .tw-newsletter-bar .elementor-widget-wrap {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .tw-newsletter-bar input[type="email"] {
    width: 100% !important;
  }

  .tw-newsletter-bar .nl-btn,
  .tw-newsletter-bar button {
    width: 100% !important;
  }

  /* ── FOOTER ── */
  .site-footer,
  .ast-footer-area {
    padding: 32px 24px !important;
    text-align: center !important;
  }

  .footer-links,
  .ast-footer-area ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* ── IDENTITY / DISCIPLINE STRIP ── */
  .tw-identity-strip {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tw-identity-strip::-webkit-scrollbar { display: none !important; }
}

/* ============================================================
   ASTRA MOBILE NAV DRAWER
   Set these in Astra Customizer too, but CSS here as fallback
   ============================================================ */
@media (max-width: 920px) {

  /* Drawer background */
  .ast-mobile-popup-drawer .ast-mobile-popup-inner,
  #ast-mobile-popup-close-btn,
  .main-navigation {
    background: var(--tw-inkwell) !important;
  }

  /* Drawer nav links */
  .ast-mobile-popup-drawer .main-navigation a,
  .ast-mobile-popup-drawer .menu-link {
    font-family: var(--tw-font-ui) !important;
    font-size: 16px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: var(--tw-dust) !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(152, 159, 150, 0.1) !important;
  }

  .ast-mobile-popup-drawer .main-navigation a:hover,
  .ast-mobile-popup-drawer .menu-link:hover {
    color: var(--tw-pumpkin) !important;
  }

  /* Hamburger icon color */
  .ast-mobile-menu-trigger-fill path,
  .menu-toggle span,
  .ast-mobile-menu-trigger-minimal span {
    background: var(--tw-dust) !important;
    fill: var(--tw-dust) !important;
  }

  /* Close button */
  #ast-mobile-popup-close-btn {
    color: var(--tw-limestone) !important;
  }
  #ast-mobile-popup-close-btn:hover {
    color: var(--tw-pumpkin) !important;
  }

  /* Mobile CTA button in nav */
  .ast-mobile-popup-drawer .ast-header-button,
  .ast-mobile-popup-drawer .nav-cta {
    display: block !important;
    text-align: center !important;
    margin: 24px 0 0 !important;
    background: var(--tw-pumpkin) !important;
    color: white !important;
    padding: 14px 32px !important;
  }
}

/* ============================================================
   WPFORMS STYLESHEET OVERRIDE
   Disable WPForms default stylesheet via WPForms > Settings >
   General > Disable Stylesheet, then these rules take full control
   ============================================================ */

/* Ensure WPForms fields inherit child theme dark styles */
.tw-form-dark .wpforms-container input[type="text"],
.tw-form-dark .wpforms-container input[type="email"],
.tw-form-dark .wpforms-container input[type="tel"],
.tw-form-dark .wpforms-container select,
.tw-form-dark .wpforms-container textarea {
  background: rgba(242, 237, 230, 0.06) !important;
  border: 1px solid rgba(152, 159, 150, 0.2) !important;
  color: var(--tw-dust) !important;
  font-family: var(--tw-font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  padding: 15px 18px !important;
  border-radius: var(--tw-radius) !important;
  width: 100% !important;
  transition: border-color var(--tw-transition) !important;
  -webkit-appearance: none !important;
}

/* Remove WPForms default focus glow, apply brand focus */
.tw-form-dark .wpforms-container input:focus,
.tw-form-dark .wpforms-container select:focus,
.tw-form-dark .wpforms-container textarea:focus {
  border-color: var(--tw-pumpkin) !important;
  box-shadow: 0 0 0 2px rgba(243, 108, 33, 0.12) !important;
  outline: none !important;
}

/* WPForms error state */
.tw-form-dark .wpforms-container .wpforms-error input,
.tw-form-dark .wpforms-container .wpforms-error select {
  border-color: #e55 !important;
}

.tw-form-dark .wpforms-container .wpforms-error label.wpforms-error {
  color: #ff8080 !important;
  font-family: var(--tw-font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
}

/* WPForms success message */
.tw-form-dark .wpforms-confirmation-container-full {
  background: rgba(160, 201, 203, 0.1) !important;
  border: 1px solid rgba(160, 201, 203, 0.3) !important;
  border-radius: var(--tw-radius) !important;
  padding: 24px !important;
  color: var(--tw-dust) !important;
  font-family: var(--tw-font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* WPForms submit button */
.tw-form-dark .wpforms-submit-container .wpforms-submit {
  width: 100% !important;
  background: var(--tw-pumpkin) !important;
  color: white !important;
  font-family: var(--tw-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  padding: 18px 36px !important;
  border: none !important;
  border-radius: var(--tw-radius) !important;
  cursor: pointer !important;
  transition: background var(--tw-transition) !important;
  margin-top: 8px !important;
}

.tw-form-dark .wpforms-submit-container .wpforms-submit:hover {
  background: var(--tw-ember) !important;
}

/* ============================================================
   VIDEO FALLBACK — ensure fallback image covers on mobile
   iOS Safari doesn't autoplay video; fallback image shows instead
   ============================================================ */
.tw-hero-section .elementor-background-video-container {
  background-size: cover !important;
  background-position: center center !important;
}

@media (max-width: 767px) {
  /* Force fallback image to show on mobile if video doesn't load */
  .tw-hero-section .elementor-background-video-container video {
    display: none !important;
  }

  .tw-hero-section .elementor-background-video-fallback {
    display: block !important;
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }
}