/* ============================================================================
   cosmos-polish.css — global alignment + interactivity layer
   Loaded site-wide via head.php. Additive only — does NOT modify any
   existing element class set. Targets:
     - Common hero sections (.cf-el-hero, .cf-q-hero, .cf-pg-*-hero)
     - Form cards (.cf-el-form-card, .cf-q-form-card, .cf-pg-*-form-card)
     - FAQ details
     - Trust badges
     - Buttons + cards (interactivity)
   Mobile-first, brand-faithful (#E8622A accent, #0a2540 text).
   ============================================================================ */

/* ---------- 1. ALIGNMENT BASELINE — consistent vertical rhythm ---------- */

[class*="cf-el-hero"],
[class*="cf-q-hero"],
[class*="cf-pg-"][class*="-hero"] {
  padding-top: clamp(48px, 8vw, 88px) !important;
  padding-bottom: clamp(36px, 6vw, 64px) !important;
}

[class*="cf-el-hero"] .container,
[class*="cf-q-hero"] .container,
[class*="cf-pg-"][class*="-hero"] .container {
  max-width: 1140px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

[class*="cf-el-hero"] h1,
[class*="cf-q-hero"] h1,
[class*="cf-pg-"][class*="-hero"] h1 {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.022em !important;
  line-height: 1.12 !important;
}

[class*="cf-el-hero"] p,
[class*="cf-q-hero"] p,
[class*="cf-pg-"][class*="-hero"] p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Trust badge row — never break a badge mid-content; wrap as a group */
[class*="cf-el-trust"],
[class*="cf-q-trust"],
[class*="cf-pg-"][class*="-trust"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 920px;
  margin: 24px auto 0 !important;
}

[class*="cf-el-trust"] span,
[class*="cf-q-trust"] span,
[class*="cf-pg-"][class*="-trust"] span {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* H2 vertical rhythm — consistent across all new pages */
.cf-el-faq h2,
.cf-q-stage h2,
[class*="cf-pg-"] h2 {
  font-size: clamp(20px, 2.6vw, 28px) !important;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: #0a2540;
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.25;
}

/* Form card — consistent max-width + spacing */
.cf-el-form-card,
.cf-q-form-card,
[class*="cf-pg-"][class*="-form-card"] {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cf-el-form-card .form-control,
.cf-q-form-card .form-control,
[class*="cf-pg-"] .form-control {
  width: 100%;
  height: 48px;
  padding: 10px 14px !important;
  border: 1px solid #d6dce5;
  border-radius: 10px;
  font-size: 15px;
  color: #0a2540;
  background: #fff;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

.cf-el-form-card .form-control:focus,
.cf-q-form-card .form-control:focus,
[class*="cf-pg-"] .form-control:focus {
  outline: none;
  border-color: #E8622A;
  box-shadow: 0 0 0 3px rgba(232, 98, 42, 0.16) !important;
}

/* FAQ details — uniform card style across all pages */
[class*="cf-el-faq"] details,
[class*="cf-pg-"] details {
  border: 1px solid #e3e8ef !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  background: #fafbfd !important;
  transition: border-color 180ms ease, box-shadow 220ms ease, background 180ms ease;
}
[class*="cf-el-faq"] details:hover,
[class*="cf-pg-"] details:hover {
  border-color: rgba(232, 98, 42, 0.30);
  background: #fff;
  box-shadow: 0 6px 18px rgba(10, 37, 64, 0.05);
}
[class*="cf-el-faq"] summary,
[class*="cf-pg-"] summary {
  font-weight: 700 !important;
  color: #0a2540 !important;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
[class*="cf-el-faq"] summary::-webkit-details-marker,
[class*="cf-pg-"] summary::-webkit-details-marker { display: none; }
[class*="cf-el-faq"] summary::after,
[class*="cf-pg-"] summary::after {
  content: "+";
  float: right;
  font-size: 22px;
  color: #E8622A;
  line-height: 1;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
[class*="cf-el-faq"] details[open] summary::after,
[class*="cf-pg-"] details[open] summary::after {
  content: "−";
}
[class*="cf-el-faq"] details p,
[class*="cf-pg-"] details p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #324054;
}

/* ---------- 2. INTERACTIVITY ---------- */

/* Buttons: subtle press + glow */
.cf-el-submit, .cf-q-btn--primary, [class*="cf-pg-"][class*="submit"],
.btn-primary, .cf-q-btn--full {
  position: relative;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 240ms ease, background 240ms ease;
}
.cf-el-submit:hover, .cf-q-btn--primary:hover,
[class*="cf-pg-"][class*="submit"]:hover,
.btn-primary:hover, .cf-q-btn--full:hover {
  transform: translateY(-1px);
}
.cf-el-submit:active, .cf-q-btn--primary:active,
[class*="cf-pg-"][class*="submit"]:active,
.btn-primary:active, .cf-q-btn--full:active {
  transform: translateY(0);
}

/* Scroll-reveal class hook (JS adds .cf-rev-in when in viewport) */
.cf-rev {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(.2,.8,.2,1),
              transform 600ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.cf-rev.cf-rev-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cf-rev { opacity: 1; transform: none; transition: none; }
}

/* Card hover lift — applied to FAQ details and any element marked cf-card */
.cf-card,
.cf-el-step,
.cf-q-stage .cf-q-option {
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 240ms ease,
              border-color 200ms ease !important;
}
.cf-card:hover,
.cf-el-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 37, 64, 0.10);
}

/* Stat number counter — scroll-in animation */
.cf-stat-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #E8622A;
}

/* Smooth scroll for in-page anchor links */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Anchor offset so deep links don't hide under any fixed header */
[id]:not(html):not(body) { scroll-margin-top: 80px; }

/* ---------- 3. HOMEPAGE HERO ALIGNMENT (legacy class names) ----------
   The homepage uses .hero-subhead / .free-ele / .lead-bullets / .chip /
   .btn-primary / .btn-ghost / .btn-ghost1 — none of which carry the cf- prefix
   that the rest of the polish layer targets. These rules unify them so the
   hero feels like one design system instead of three. */

/* Uniform hero buttons — same height, padding, line-height */
.btn-primary,
.btn-ghost,
.btn-ghost1,
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  margin-right: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 240ms ease, background 240ms ease, color 200ms ease !important;
}
.btn-primary {
  background: linear-gradient(135deg, #E8622A 0%, #ff7f47 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(232, 98, 42, 0.32);
  border: none;
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(232, 98, 42, 0.44); transform: translateY(-1px); }
.btn-ghost,
.btn-ghost1 {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}
.btn-ghost:hover,
.btn-ghost1:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
}
/* When the buttons sit in a section with a LIGHT background (e.g. an inner page),
   ghost variant must adapt — detect via parent element class */
[class*="cf-pg-"][class*="-form-card"] .btn-ghost,
[class*="cf-pg-"][class*="-form-card"] .btn-ghost1,
[class*="cf-pg-"][class*="-body"] .btn-ghost,
[class*="cf-pg-"][class*="-body"] .btn-ghost1 {
  color: #0a2540 !important;
  border-color: rgba(10, 37, 64, 0.30) !important;
}
[class*="cf-pg-"][class*="-form-card"] .btn-ghost:hover,
[class*="cf-pg-"][class*="-form-card"] .btn-ghost1:hover {
  background: rgba(10, 37, 64, 0.06) !important;
  border-color: #0a2540 !important;
}

/* Hero chip row — uniform pill sizing, aligned baseline */
.lead-bullets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 22px 0 !important;
  padding: 0 !important;
}
.lead-bullets .chip,
.lead-bullets > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0a2540 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.003em !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  border: 1px solid rgba(232, 98, 42, 0.18);
  box-shadow: 0 2px 8px rgba(10, 37, 64, 0.06);
  margin: 0 !important;
}

/* Hero subhead / trust paragraph — reading-width clamp prevents right-edge overflow */
.hero-subhead,
.free-ele,
.free-ele p {
  max-width: 920px !important;
  line-height: 1.55 !important;
}
.hero-subhead {
  font-size: clamp(15px, 1.6vw, 17px) !important;
  margin-bottom: 16px !important;
}
.free-ele {
  margin: 18px 0 !important;
}
.free-ele p {
  margin-bottom: 10px !important;
}

/* Make sure paragraph-button groups don't collapse oddly */
section p > .btn-primary,
section p > .btn-ghost,
section p > .btn-ghost1 {
  display: inline-flex !important;
}

/* ---------- 4. CONTAINER OVERFLOW GUARDS (mobile-safe) ---------- */
body { overflow-x: hidden; }

[class*="cf-el-form-card"],
[class*="cf-q-form-card"],
[class*="cf-pg-"][class*="-form-card"],
[class*="cf-pg-"][class*="-section"] {
  box-sizing: border-box;
}

img { max-width: 100%; height: auto; }