/* ============================================================
   ORCA MARKETING — OVERRIDES CSS
   Loaded AFTER Konvert/Webflow stylesheets so our rules win.
   - Bilingual visibility (lang-fr / lang-en)
   - Color overrides where Webflow CSS still references old hexes
   - Cookie banner styling
   - Mobile fixes for our injected sections
   ============================================================ */

/* ---------- BILINGUAL VISIBILITY ---------- */
[data-lang="fr"] .lang-en { display: none !important; }
[data-lang="en"] .lang-fr { display: none !important; }

/* ---------- LANG TOGGLE BUTTON STATES ---------- */
.nav-lang-toggle button { transition: all 0.2s ease; }
.nav-lang-toggle button.active {
  background: #10B981 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}
.nav-lang-toggle button:not(.active):hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- HERO TITLE BREATHING ROOM ----------
   Webflow set line-height:1.05 with drop-shadow(0 4px 14px) — descenders +
   underline + shadow get clipped against the next line. Loosen vertical rhythm. */
.section.hero .hero-title {
  line-height: 1.15 !important;
  padding-bottom: 10px !important;
}

/* ---------- TFO HERO BADGE — bigger ---------- */
.tfo-hero-badge {
  font-size: 17px !important;
  padding: 11px 28px !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
@media (max-width: 991px) {
  .tfo-hero-badge { font-size: 14px !important; padding: 9px 20px !important; }
}

/* ---------- TRUSTED BADGE (Webflow had blue border + #4555fd glow baked in) ---------- */
.trusted-badge {
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.06) !important;
}

/* Override the Webflow CSS variables themselves so any other class
   referencing --primary-blue / --secondary-blue gets green. */
:root {
  --primary-blue: #10B981;
  --secondary-blue: #34D399;
}

/* ---------- KV-EYEBROW SIZE BUMP (Konvert ones were too small) ---------- */
.kv-eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  padding: 8px 18px !important;
  border-radius: 100px !important;
  border: 1px solid currentColor !important;
  display: inline-block !important;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
  line-height: 1.3 !important;
}
@media (max-width: 768px) {
  .kv-eyebrow { font-size: 12.5px !important; padding: 7px 14px !important; }
}

/* ---------- WEBFLOW COLOR LEAKS (eyebrow tints, kv-eyebrow variants) ---------- */
/* The kv-eyebrow class has variants is-blue / is-purple / is-red / is-green
   defined in Konvert CSS. We override the blue/purple variants to green tones. */
.kv-eyebrow.is-blue {
  color: #34D399 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}
.kv-eyebrow.is-purple {
  color: #6EE7B7 !important;
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
}
.kv-eyebrow.is-green {
  color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}
.kv-eyebrow.is-red {
  color: #ff5555 !important;
  background: rgba(255, 85, 85, 0.12) !important;
  border-color: rgba(255, 85, 85, 0.4) !important;
}

/* ---------- TF-CARD HOVER + RISK CARD REFINEMENT ---------- */
.tf-card:hover {
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.25), 0 6px 28px rgba(0, 0, 0, 0.55) !important;
}
.tf-icon {
  background: radial-gradient(circle at 30% 30%, #064e3b, #042f1c 70%, #021610 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 0 24px rgba(16, 185, 129, 0.32),
    0 0 0 1px rgba(16, 185, 129, 0.3) !important;
}

/* ---------- MOBILE FIXES FOR INJECTED SECTIONS ---------- */
@media (max-width: 991px) {
  /* Nav language toggle */
  .nav-lang-toggle {
    right: 12px !important;
    transform: translateY(-50%) scale(0.9) !important;
  }
  /* Navbar stack: logo on top, trust badge below, lang toggle hidden on mobile */
  .navbar .nav-trust-wrap { display: none !important; }
  /* Wordmark scale */
  .tfo-wordmark span:last-child { font-size: 16px !important; }
  .tfo-wordmark span:first-child { width: 38px !important; height: 38px !important; font-size: 18px !important; }

  /* Trust strip wraps to 2 cols */
  .tfo-trust-strip { font-size: 13px !important; gap: 8px 16px !important; }

  /* Calculator stacks */
  .calc-card-tfo { padding: 24px 18px !important; }

  /* First Wave + Disqual cards */
  .fw-card { padding: 28px 20px !important; }
  .disqual-card-tfo { padding: 24px 18px !important; }

  /* Method-reveal headline scale */
  .section.method-reveal .tf-headline { font-size: 30px !important; }
}

/* ---------- PRESERVE CTA TEXT VISIBILITY ON THE SECONDARY-BUTTON ---------- */
.secondary-button:hover .secondary-btn-text { color: #fff !important; }
.secondary-button .secondary-btn-text { line-height: 1.2 !important; }

/* ---------- COOKIE BANNER ---------- */
#tfo-cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 540px;
  margin: 0 auto;
  background: #0b0b14;
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 28px rgba(16, 185, 129, 0.18);
  z-index: 200;
  font-family: 'Inter', sans-serif;
  display: none;
  color: rgba(255, 255, 255, 0.92);
}
#tfo-cookie-banner.is-open { display: block; }
#tfo-cookie-banner h4 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}
#tfo-cookie-banner p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
  line-height: 1.55;
}
#tfo-cookie-banner .cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#tfo-cookie-banner button {
  flex: 1;
  min-width: 110px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s;
}
#tfo-cookie-banner button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}
#tfo-cookie-banner button.cb-accept {
  background: #10B981;
  color: #fff;
  border-color: #10B981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}
#tfo-cookie-banner button.cb-accept:hover {
  background: #059669;
  border-color: #059669;
}

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


/* ---------- FAQ TITLE — fix overflow (was getting cut by viewport) ----------
   Real cause: Webflow's inline CSS forces `white-space: nowrap` on the
   FAQ section-title for screens >=840px. The full sentence is wider than
   the viewport, so the italic word at the end (postuler / applying)
   spills off-screen and gets clipped. Fix: allow normal wrapping, give
   the italic glyph some right padding to clear the gradient text-clip
   bounding box, and constrain the title to its container width. */
.section.faq .section-title-wrap,
.section.faq .section-title { overflow: visible !important; }
.section.faq .section-title-wrap .section-title {
  white-space: normal !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
.section.faq .section-title .section-title-span,
.section.faq .section-title .cta-title-italic,
.section.faq .section-title em,
.section.faq .section-title i {
  display: inline-block;
  padding-right: 0.18em;
}


/* ============================================================
   COMPREHENSIVE MOBILE CENTERING (<= 991px)
   Konvert's inline mobile CSS forces text-align:left on the hero.
   We override for proper mobile-friendly centered layout.
   ============================================================ */
@media (max-width: 991px) {

  /* ---------- HERO: full center alignment ----------
     Two-stage specificity bump (html body) + flex column on .hero-title-wrap
     so ALL direct children (badge, trade pill, H1, sub, CTA wrapper, VSL)
     stack vertically and center horizontally regardless of inline styles. */
  html body .page-wrapper .section.hero .hero-content,
  html body .page-wrapper .section.hero .hero-wrapper,
  html body .page-wrapper .section.hero .hero-title-wrap {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .page-wrapper .section.hero .hero-title,
  html body .page-wrapper .section.hero .hero-details {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  /* All direct children of .hero-title-wrap (badge, trade pill, h1, p, vsl wrapper) center */
  html body .page-wrapper .section.hero .hero-title-wrap > * {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  html body .page-wrapper .section.hero .hero-btn-wrap,
  html body .page-wrapper .section.post-hero-cta .hero-btn-wrap {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Hero badges: center-block them (they're inline-flex) */
  .tfo-hero-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Hero CTA row */
  .hero-cta-row {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Trust strip centered */
  .tfo-trust-strip {
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- ALL EYEBROWS center-block ---------- */
  .kv-eyebrow {
    display: block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- ALL SECTION HEADLINES centered ---------- */
  .tf-headline,
  .section-title,
  .cta-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- METHOD REVEAL center ---------- */
  .section.method-reveal .tf-wrap {
    text-align: center !important;
  }

  /* ---------- CALCULATOR ---------- */
  .calc-wrap .tf-wrap { text-align: center !important; }
  .calc-bridge-intro { text-align: center !important; padding: 0 8px !important; }

  /* Slider labels keep their justify-between but the field itself centers */
  /* Trade selector buttons center on mobile */
  .calc-trade-buttons {
    justify-content: center !important;
  }
  .calc-trade-row > div:first-child {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Calculator detail toggle pill centers automatically (already margin auto) */
  .calc-cta-row { justify-content: center !important; }
  .calc-cta-block { text-align: center !important; }

  /* ---------- APPROACH SECTION (6 problem cards) ---------- */
  .section.approach .approach-left {
    text-align: center !important;
  }
  .section.approach .approach-left p,
  .section.approach .approach-left h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---------- FOUNDERS / TIMELINE ---------- */
  .section.founders .founders-title-wrapper,
  .section.founders .founders-title-wrap {
    text-align: center !important;
  }

  /* ---------- TRUST FUNNEL / RISK CARDS ---------- */
  .tf-wrap { text-align: center !important; }

  /* ---------- DISQUALIFIERS ---------- */
  .disqual-wrap { text-align: center !important; }
  .disqual-list-tfo { text-align: left !important; } /* keep list items left for readability */

  /* ---------- FIRST WAVE ---------- */
  .fw-wrap, .fw-card { text-align: center !important; }
  .fw-perks { text-align: left !important; } /* keep perk items left */

  /* ---------- FINAL CTA ---------- */
  .section.cta .cta-wrapper,
  .section.cta .cta-inner-flex { text-align: center !important; }
  .section.cta .button-wrap { justify-content: center !important; }

  /* ---------- FAQ ---------- */
  .section.faq .section-title-wrap {
    text-align: center !important;
  }

  /* ---------- FOOTER / DISCLAIMER ---------- */
  .disc-wrap { text-align: center !important; }
  .disc-wrap h2,
  .disc-wrap h3,
  .disc-wrap p { text-align: center !important; }
}

/* ============================================================
   EXTRA TIGHTENING FOR PHONES <= 480px
   ============================================================ */
@media (max-width: 480px) {
  /* Hero H1: tighter font + line-height (html prefix beats body inline style) */
  html .page-wrapper .section.hero .hero-title {
    font-size: 28px !important;
    line-height: 1.18 !important;
  }
  html .page-wrapper .section.hero .hero-details {
    font-size: 14.5px !important;
  }
  /* Trade list pill text wraps gracefully */
  .tfo-hero-badge { font-size: 13px !important; padding: 8px 16px !important; }

  /* Calculator inputs grid stays 1-col (already handled in calc CSS) */

  /* CTAs phone-friendly: allow wrap, smaller font, no horizontal overflow */
  html body .secondary-button {
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    padding: 18px 22px !important;
    font-size: 15px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  html body .secondary-button .secondary-btn-text {
    font-size: 15px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  /* Wrap CTA in a centered container even if parent has flex-start */
  html body .hero-cta-row,
  html body .calc-cta-row,
  html body .calc-cta-block,
  html body .button-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ============================================================
   TABLET / MID PHONES (481px - 768px) — slightly larger CTA padding
   ============================================================ */
@media (min-width: 481px) and (max-width: 768px) {
  html body .secondary-button {
    padding: 20px 28px !important;
    font-size: 16px !important;
    white-space: normal !important;
    max-width: 90% !important;
  }
  html body .secondary-button .secondary-btn-text {
    font-size: 16px !important;
    white-space: normal !important;
  }
}