/* ===== T3-MOBILE-PADDING — universal edge floor (Wave 7) ===== */
/* Ensures no section touches browser edge on mobile.
   Per-module CSS may override with larger padding. */
main > section,
main > .section,
main > .modular {
  padding-inline: clamp(16px, 5vw, 32px);
}
/* Container fluid: never wider than 1280px, with breathing room */
main .container,
main .container-fluid {
  width: min(1280px, 100% - clamp(0px, 0vw, 0px));
  margin-inline: auto;
}
/* Common nested wrappers — ensure inner padding doesn't compound */
main > section > .container,
main > section > .container-fluid {
  padding-inline: 0;
}
/* Footer */
.site-footer,
footer.site-footer,
body > footer {
  padding-inline: clamp(16px, 5vw, 32px);
}
/* Site-wide horizontal overflow guard */
html, body { overflow-x: clip; }

/* ─────────────────────────────────────────────────────────────────
   CRO Base — token alias shim for the legacy cro-*.css modules.

   The legacy CRO modules (cro-faq, cro-hero-form, cro-pain-tabs,
   cro-timeline, cro-calculator, cro-stats-carousel, cro-lead-form,
   cro-hero-video, cro-hero-industry, …) reference brand/shadow/gray
   variables that predate the design system. Rather than rewrite each
   of those (~10k lines of layout/state machinery we must not break),
   this file re-points those legacy variable names at the canonical
   design-system tokens. Result: every legacy `var(--brand-red)`,
   `var(--shadow-md)`, `var(--gray-200)`, etc. now resolves to a
   --ds-* token, so the CRO library participates in the unified
   visual rhythm without touching its layout/JS hooks.

   This file loads AFTER design-system.css, so the aliases below
   override anything defined upstream.

   Cosmetic rules in legacy cro-*.css (radii, shadows, transitions)
   that use literal pixel values cannot be re-aliased here; those are
   left in place because they're typically structural (input padding,
   icon sizing, decorative offsets) — the design-system token
   surfaces (border, color, shadow, transition timing) are the
   visual rhythm and those route through these aliases.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Brand color aliases → design-system tokens ─────────── */
  /* Legacy "red" = primary CTA accent */
  --brand-red:        var(--ds-cta);
  --brand-red-dark:   var(--ds-cta-dk);
  --brand-red-light:  color-mix(in srgb, var(--ds-cta) 14%, transparent);

  /* Legacy "navy" = ink/steel neutrals */
  --brand-navy:       var(--ds-ink);
  --brand-navy-dark:  var(--ds-steel);

  /* Legacy "green" = trust/success — moss accent */
  --brand-green:        var(--ds-trust);
  --brand-green-hover:  var(--ds-trust-dk);
  --brand-green-dark:   var(--ds-trust-dk);
  --brand-green-light:  color-mix(in srgb, var(--ds-trust) 14%, transparent);
  --brand-green-muted:  color-mix(in srgb, var(--ds-trust) 24%, transparent);

  --brand-green-outline-bg:     color-mix(in srgb, var(--ds-trust) 10%, transparent);
  --brand-green-outline-border: var(--ds-trust);
  --brand-green-outline-fore:   var(--ds-trust);

  /* ── Semantic aliases ──────────────────────────────────── */
  --success:        var(--ds-trust);
  --success-light:  color-mix(in srgb, var(--ds-trust) 14%, white);
  --success-muted:  color-mix(in srgb, var(--ds-trust) 24%, transparent);

  --warning:        var(--ds-cta);
  --warning-light:  color-mix(in srgb, var(--ds-cta) 14%, white);
  --info:           var(--ds-steel);
  --info-light:     color-mix(in srgb, var(--ds-steel) 12%, white);

  /* ── Neutral grays mapped onto warm-ink scale ──────────── */
  /* Use the design-system warm neutrals so CRO surfaces share the
     paper/sand palette instead of the legacy cool slate scale. */
  --gray-50:   var(--ds-paper);
  --gray-100:  var(--ds-paper-2);
  --gray-200:  var(--ds-rule);
  --gray-300:  var(--ds-rule);
  --gray-400:  var(--ds-ink-mute);
  --gray-600:  var(--ds-ink-soft);
  --gray-700:  var(--ds-ink-soft);
  --gray-900:  var(--ds-ink);

  /* ── Shadow aliases ────────────────────────────────────── */
  --shadow-sm:       var(--ds-shadow-sm);
  --shadow-md:       var(--ds-shadow-sm);
  --shadow-lg:       var(--ds-shadow-md);
  --shadow-xl:       var(--ds-shadow-lg);
  --shadow-primary:  var(--ds-shadow-cta);
  --shadow-accent:   0 4px 14px color-mix(in srgb, var(--ds-trust) 32%, transparent);
}

/* ─────────────────────────────────────────────────────────────────
   GLOBAL SVG ICON CONTAINMENT (fixes catastrophic full-viewport SVGs)

   The icons.html.twig macro emits .icon-preset / .icon-svg / .icon-img
   wrappers around inline SVGs that have NO width/height attributes.
   Without sizing, browsers render those SVGs at their parent's full
   width — which on /cro causes 1100px+ icons. This rule constrains
   every macro-emitted icon to a sane default, and per-context CSS
   (e.g. .cta-btn-icon) can still increase or override.
   ───────────────────────────────────────────────────────────── */
.icon-preset,
.icon-svg,
.icon-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  line-height: 0;
}
.icon-preset > svg,
.icon-svg > svg,
.icon-custom > svg,
.icon-preset > img,
.icon-svg > img,
.icon-custom > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
/* When the wrapper has explicit sizing classes (cta-btn-icon, icon-img,
   stat-icon-v2 .icon-preset) those existing rules already set width/height
   and our 1em default is overridden naturally. */
.cta-btn-icon { width: 20px; height: 20px; }
.cta-icon-svg { width: 20px; height: 20px; }
/* Hard ceiling: no .icon-* should ever exceed these sizes by accident */
.icon-preset, .icon-svg, .icon-custom { max-width: 100%; }