/*
Theme Name: 25th.Ai (Hello Elementor Child)
Theme URI: https://25th.ai
Description: Custom child theme for 25th.Ai. Built by Spotted Fox Digital. Long-scroll Elementor homepage with brand-tuned tokens, accessibility helpers, and AEO-friendly markup.
Author: Spotted Fox Digital
Author URI: https://spottedfoxdigital.com
Template: hello-elementor
Version: 1.0.0
Text Domain: 25thai-child
*/

/* ─── 25th.Ai Brand Tokens ──────────────────────────────────────────── */
:root{
  --green:#0D7B5F;
  --green-lt:#0f9472;
  --green-dk:#095c47;
  --green-pale:#e0f0eb;
  --charcoal:#2A2A2A;
  --char-md:#383838;
  --char-lt:#454545;
  --white:#FFFFFF;
  --off-white:#F8F8F8;
  --light:#F2F2F2;
  --mid:#777777;
  --dark-txt:#444444;
  --border:#E2E2E2;
  --rad:8px;
  --ease:.22s ease;
}

/* ─── Typography defaults ───────────────────────────────────────────── */
body,
.elementor-widget-text-editor,
.elementor-widget-heading,
button,
input,
textarea,
select{
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:'Manrope', system-ui, sans-serif;
  letter-spacing:-.02em;
}

.syne, .h-num, .stat-num, .step-circle{
  font-family:'Syne', sans-serif !important;
}

/* ─── Skip link (a11y) ──────────────────────────────────────────────── */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--charcoal);
  color:var(--white);
  padding:.6rem 1rem;
  z-index:9999;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ─── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ─── Wireframe-parity styles (component layer) ─────────────────────── */
/* These mirror the wireframe so any non-Elementor block, or fallback render, looks correct. */

.s25-fade-up{ opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.s25-fade-up.visible{ opacity:1; transform:translateY(0); }

.s25-pulse-dot{ width:6px; height:6px; background:var(--green-lt); border-radius:50%; animation:s25-pulse 2s infinite; display:inline-block; }
@keyframes s25-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

.s25-hero-strip{ position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--green); }

.s25-stat-num{ font-family:'Syne',sans-serif; font-weight:800; color:var(--green-lt); line-height:1; }

/* Featured engage card "Recommended" badge */
.s25-featured-badge{
  display:inline-block;
  background:var(--green-dk);
  color:rgba(255,255,255,.85);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .75rem;
  border-radius:100px;
}

/* GHL embed container */
.s25-ghl-embed{
  background:rgba(255,255,255,.04);
  border:2px dashed rgba(255,255,255,.15);
  border-radius:var(--rad);
  padding:2rem;
  text-align:center;
  color:rgba(255,255,255,.55);
}
.s25-ghl-embed iframe{ width:100%; min-height:520px; border:0; }

/* ─── Gravity Forms — 25th.Ai brand styling ─────────────────────────────
   Scoped to .gform_wrapper.gf-25thai_wrapper (GF appends "_wrapper" to the
   form's cssClass). Uses GF's native gfield--width-half for the side-by-
   side First Name + Last Name. High specificity + !important to win
   against GF's Orbital theme defaults.
   ────────────────────────────────────────────────────────────────────── */
.cta-section .gform_wrapper.gf-25thai_wrapper{
  max-width:560px !important;
  margin:2.5rem auto 0 !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:var(--rad) !important;
  padding:2rem 1.75rem !important;
  text-align:left !important;
  box-shadow:0 18px 50px rgba(0,0,0,.35) !important;
}

/* Force 2-column grid so gfield--width-half puts First/Last Name inline */
body .gform_wrapper.gf-25thai_wrapper .gform_fields{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:1.1rem 1rem !important;
}
body .gform_wrapper.gf-25thai_wrapper .gfield{
  grid-column:1 / -1 !important;
}
body .gform_wrapper.gf-25thai_wrapper .gfield.gfield--width-half{
  grid-column:span 1 !important;
}
@media (max-width:600px){
  body .gform_wrapper.gf-25thai_wrapper .gform_fields{
    grid-template-columns:1fr !important;
  }
  body .gform_wrapper.gf-25thai_wrapper .gfield.gfield--width-half{
    grid-column:1 / -1 !important;
  }
}

/* Override Orbital theme CSS variables — clean way to retheme inputs */
body .gform_wrapper.gf-25thai_wrapper{
  --gf-ctrl-bg-color: rgba(0,0,0,.35);
  --gf-ctrl-text-color: #fff;
  --gf-ctrl-border-color: rgba(255,255,255,.12);
  --gf-ctrl-border-color-focus: var(--green-lt);
  --gf-ctrl-placeholder-color: rgba(255,255,255,.35);
  --gf-ctrl-label-color-primary: rgba(255,255,255,.85);
  --gf-ctrl-label-color-required: var(--green-lt);
  --gform-theme-color-primary: var(--green);
  --gform-theme-color-primary-darker: var(--green-dk);
  --gform-theme-color-secondary: var(--white);
  --gform-theme-control-border-color: rgba(255,255,255,.12);
  --gform-theme-control-background-color: rgba(0,0,0,.35);
  --gform-theme-control-color: #fff;
}

/* Labels */
body .gform_wrapper.gf-25thai_wrapper .gfield_label{
  font-family:'Manrope',sans-serif !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.85) !important;
  margin-bottom:.5rem !important;
}
body .gform_wrapper.gf-25thai_wrapper .gfield_required,
body .gform_wrapper.gf-25thai_wrapper .gfield_required_text{
  color:var(--green-lt) !important;
  font-weight:700 !important;
}

/* Inputs + textareas — beat .gform-theme--orbital */
body .gform_wrapper.gf-25thai_wrapper .gfield input,
body .gform_wrapper.gf-25thai_wrapper .gfield textarea,
body .gform_wrapper.gf-25thai_wrapper input[type="text"],
body .gform_wrapper.gf-25thai_wrapper input[type="email"],
body .gform_wrapper.gf-25thai_wrapper input[type="tel"],
body .gform_wrapper.gf-25thai_wrapper input[type="url"],
body .gform_wrapper.gf-25thai_wrapper input[type="number"],
body .gform_wrapper.gf-25thai_wrapper textarea{
  width:100% !important;
  background:rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:6px !important;
  padding:.8rem .9rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:.95rem !important;
  color:#fff !important;
  line-height:1.4 !important;
  -webkit-appearance:none !important;
  box-shadow:none !important;
}
body .gform_wrapper.gf-25thai_wrapper input::placeholder,
body .gform_wrapper.gf-25thai_wrapper textarea::placeholder{
  color:rgba(255,255,255,.35) !important;
  opacity:1 !important;
}
body .gform_wrapper.gf-25thai_wrapper input:focus,
body .gform_wrapper.gf-25thai_wrapper textarea:focus{
  outline:none !important;
  border-color:var(--green-lt) !important;
  background:rgba(0,0,0,.45) !important;
  box-shadow:0 0 0 3px rgba(15,148,114,.18) !important;
}
body .gform_wrapper.gf-25thai_wrapper textarea{
  min-height:110px !important;
  resize:vertical !important;
}

/* Validation states */
body .gform_wrapper.gf-25thai_wrapper .gfield_error input,
body .gform_wrapper.gf-25thai_wrapper .gfield_error textarea,
body .gform_wrapper.gf-25thai_wrapper .gfield--has-error input,
body .gform_wrapper.gf-25thai_wrapper .gfield--has-error textarea{
  border-color:#e36b6b !important;
  background:rgba(227,107,107,.08) !important;
}
body .gform_wrapper.gf-25thai_wrapper .gfield_validation_message,
body .gform_wrapper.gf-25thai_wrapper .validation_message{
  color:#ffb4b4 !important;
  font-size:.8rem !important;
  font-family:'Manrope',sans-serif !important;
  margin-top:.4rem !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
body .gform_wrapper.gf-25thai_wrapper .gform_validation_errors{
  background:rgba(227,107,107,.1) !important;
  border:1px solid rgba(227,107,107,.3) !important;
  color:#ffb4b4 !important;
  border-radius:6px !important;
  padding:.7rem .9rem !important;
  margin-bottom:1rem !important;
  font-family:'Manrope',sans-serif !important;
  font-size:.85rem !important;
}

/* Submit button — beat .gform_button defaults */
body .gform_wrapper.gf-25thai_wrapper .gform_footer,
body .gform_wrapper.gf-25thai_wrapper .gform_page_footer{
  display:flex !important;
  justify-content:center !important;
  margin-top:1.5rem !important;
  padding:0 !important;
}
body .gform_wrapper.gf-25thai_wrapper input[type="submit"],
body .gform_wrapper.gf-25thai_wrapper .gform_button,
body .gform_wrapper.gf-25thai_wrapper .gform_button.button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  background:var(--green) !important;
  color:#fff !important;
  font-family:'Manrope',sans-serif !important;
  font-size:.85rem !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:1rem 1.75rem !important;
  border:none !important;
  border-radius:var(--rad) !important;
  cursor:pointer !important;
  text-shadow:none !important;
  box-shadow:none !important;
  transition:background .2s ease, transform .2s ease !important;
}
body .gform_wrapper.gf-25thai_wrapper input[type="submit"]:hover,
body .gform_wrapper.gf-25thai_wrapper .gform_button:hover,
body .gform_wrapper.gf-25thai_wrapper .gform_button.button:hover{
  background:var(--green-dk) !important;
  transform:translateY(-2px) !important;
}
body .gform_wrapper.gf-25thai_wrapper input[type="submit"]:focus-visible,
body .gform_wrapper.gf-25thai_wrapper .gform_button:focus-visible{
  outline:2px solid var(--green-lt) !important;
  outline-offset:3px !important;
}

/* AJAX spinner */
body .gform_wrapper.gf-25thai_wrapper .gform_ajax_spinner{
  filter:invert(1) brightness(2) !important;
  margin-left:.6rem !important;
}

/* Confirmation message (if used instead of redirect) */
body .gform_wrapper.gf-25thai_wrapper .gform_confirmation_message{
  color:#fff !important;
  font-family:'Manrope',sans-serif !important;
  font-size:1rem !important;
  text-align:center !important;
  padding:1.5rem !important;
}

/* ─── Full-bleed homepage ───────────────────────────────────────────────
   The Elementor Canvas template still leaves Elementor's section/container
   wrappers with default max-width + padding, which pinches the dark
   sections and shows a thin white gutter. Nuke all wrapper constraints on
   any page using the elementor_canvas template — our own .container inside
   the markup handles content-width.
   ──────────────────────────────────────────────────────────────────── */
body.page-template-elementor_canvas{ overflow-x:hidden; }
body.page-template-elementor_canvas .elementor-section,
body.page-template-elementor_canvas .elementor-container,
body.page-template-elementor_canvas .elementor-row,
body.page-template-elementor_canvas .elementor-column,
body.page-template-elementor_canvas .elementor-column-wrap,
body.page-template-elementor_canvas .elementor-widget-wrap,
body.page-template-elementor_canvas .elementor-widget,
body.page-template-elementor_canvas .elementor-widget-html,
body.page-template-elementor_canvas .elementor-widget-container,
body.page-template-elementor_canvas .e-con,
body.page-template-elementor_canvas .e-con-inner,
body.page-template-elementor_canvas .e-con > .e-con-inner{
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}