/* ============================================================================
   v2-site-bridge.css — Site brand polish on top of editor-v2 widget output.

   The editor-v2 public-render emits markup with classes like:
     .iw-el                    – every element wrapper
     .iw-el--container         – container wrappers
     .iw-el--widget            – leaf widgets
     .iw-el--heading           – type-specific wrapper class (per widget type)
     .iw-w-heading             – inner widget render
     .iw-w-text                – inner widget render
     .iw-w-image               – image widget wrapper (img inside)
     .iw-w-button              – button widget anchor
     .iw-el__body              – container's flex/grid body

   Phase 4a — Site brand-restoration: we marry the iw-w-* / iw-el--container
   output to the polish-grade styling already present in site.css and
   site-blocks.css (which were designed for .cms-* selectors).

   We do this by:
     (a) having the migration add Site-style cssClasses to specific containers
         (stats-card, benefit, promo-card, step, tcarousel, cms-hero, …);
     (b) using the rules below to dress the iw-w-* children inside those
         class-tagged containers.

   Loaded AFTER tailwind, site.css, site-blocks.css so it can override.
============================================================================ */

/* -------------------------------------------------------------------------
   Section layout fallback — Tailwind CDN's JIT can miss arbitrary classes
   added to the DOM AFTER its initial scan (public-render.js mounts the v2
   tree post-DOMContentLoaded). We anchor the canonical section pattern
   (depth-0 full-bleed section wrap → depth-1 boxed inner) in real CSS so
   the layout is correct even if no Tailwind JIT class makes it through.
------------------------------------------------------------------------- */

/* Outer section wrap: full width, no horizontal padding (its bg is full-bleed). */
#iw-public-root > .iw-el--container.iw-el--depth-0 {
    width: 100%;
    box-sizing: border-box;
}
#iw-public-root > .iw-el--container.iw-el--depth-0 > .iw-el__body {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Inner boxed container: 1200px cap, centered, with sensible v/h padding.
   We force `align-self: center` (cross-axis) AND auto margins so the inner
   wraps correctly inside a flex-column parent — Safari is fussy about which
   one actually wins when align-items:stretch is in play.

   We also constrain the depth-2 children's text containers so a long heading
   wraps cleanly within the boxed area instead of using the full 1200px width.
*/
/* The outer (depth-0) is flex-column; we need its child (depth-1) to actually
   CENTER horizontally rather than stretch-to-left. align-self:center on a
   flex item with auto margins centers reliably across all browsers, but only
   if no rule with higher specificity sets a different align-self. !important
   forecloses any cascade race. */
#iw-public-root > .iw-el--container.iw-el--depth-0
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1 {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    padding: 64px 24px !important;
    box-sizing: border-box !important;
}
/* Also center the depth-0 body so a stretched depth-1 child can fall back on
   parent-level centering. */
#iw-public-root > .iw-el--container.iw-el--depth-0 > .iw-el__body {
    align-items: center;
}
#iw-public-root > .iw-el--container.iw-el--depth-0
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1
  > .iw-el__body {
    width: 100%;
    box-sizing: border-box;
}

/* ── Hero gradient seam fix ────────────────────────────────────────────────
   site-blocks.css's .cms-hero rule paints a multi-layer radial+linear
   gradient that fades from #f6f9fc to #fff. In v1 that class lived on the
   full-width hero section so the gradient covered the viewport. In v2 it
   lives on the BOXED depth-1 inner (1200px) — so the gradient stops at
   600px from the viewport's center, and outside that the depth-0's solid
   #f6f9fc shows. The mismatch reads as a visible vertical seam.
   Fix: kill the gradient on .cms-hero and re-paint it on the depth-0
   outer (whose box spans the full viewport). The visual effect stays the
   same but with no seam.
*/
#iw-public-root .iw-el--container.cms-hero {
    background: transparent !important;
}
#iw-public-root > .iw-el--container.iw-el--depth-0:has(.cms-hero) {
    background:
        radial-gradient(1100px 540px at 75% -10%, rgba(0, 61, 165, .12), transparent 60%),
        radial-gradient(800px 400px at 5% 100%, rgba(0, 102, 204, .08), transparent 60%),
        linear-gradient(180deg, #f6f9fc 0%, #fff 100%) !important;
}

/* Section-header pattern: container hosts eyebrow + h2 + lead paragraph
   centered above a grid of cards. Migration tags them with `sec-hdr`. */
#iw-public-root .iw-el--container.sec-hdr {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    width: 100%;
}
#iw-public-root .iw-el--container.sec-hdr > .iw-el__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#iw-public-root .iw-el--container.sec-hdr .iw-w-heading,
#iw-public-root .iw-el--container.sec-hdr .iw-w-text {
    text-align: center;
    width: 100%;
}

/* Top bar and header strips are short — tighten their vertical padding so
   they don't add 128px of empty space above the hero. */
#iw-public-root > .iw-el--container.iw-el--depth-0:nth-child(-n+2)
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1 {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Stats strip is also visually tighter than the rest. */
#iw-public-root > .iw-el--container.iw-el--depth-0
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1.statsgrid,
#iw-public-root > .iw-el--container.iw-el--depth-0
  > .iw-el__body
  > .iw-el--container.iw-el--depth-1[class*="stats"] {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Grid containers (accident split, services 3-col, promos 3-col, etc.):
   Tailwind's `grid grid-cols-N` may not land — force CSS Grid + responsive
   collapses here so the 2/3/4-column sections actually flow. */
#iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-2"],
#iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-[repeat(2"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
#iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-3"],
#iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-[repeat(3"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
#iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-4"],
#iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-[repeat(4"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 900px) {
    #iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-2"],
    #iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-[repeat(2"],
    #iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-3"],
    #iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-[repeat(3"],
    #iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-4"],
    #iw-public-root .iw-el--container > .iw-el__body[class*="grid-cols-[repeat(4"] {
        grid-template-columns: 1fr;
    }
}

/* Stack-mode bodies: ensure column flex even when Tailwind classes are missing.
   Skip elements that explicitly carry a flex-row class — they're split-layout
   containers (topbar, header, hdrctas) and need horizontal layout. */
#iw-public-root .iw-el--container > .iw-el__body:not([class*="grid-cols"]):not([class*="flex-row"]):not(.iw-row > *) {
    display: flex;
    flex-direction: column;
}
#iw-public-root .iw-el--container > .iw-el__body[class*="flex-row"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
}

/* Stable hook for `layout: 'split'` containers (migration tags them with
   `iw-row`). Beats every cascade race against flex-direction. */
#iw-public-root .iw-el--container.iw-row > .iw-el__body {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Tailwind utility fallbacks — the CDN's MutationObserver can miss classes
   that get added in a single big innerHTML write. We re-declare the most
   layout-critical utilities here so they always apply on v2 pages.
   [class~="x"] matches when "x" is a whole class in the list.
------------------------------------------------------------------------- */

#iw-public-root [class~="text-left"]    { text-align: left !important; }
#iw-public-root [class~="text-center"]  { text-align: center !important; }
#iw-public-root [class~="text-right"]   { text-align: right !important; }
#iw-public-root [class~="text-justify"] { text-align: justify !important; }

#iw-public-root [class~="items-start"]    { align-items: flex-start; }
#iw-public-root [class~="items-center"]   { align-items: center; }
#iw-public-root [class~="items-end"]      { align-items: flex-end; }
#iw-public-root [class~="items-stretch"]  { align-items: stretch; }

#iw-public-root [class~="justify-start"]   { justify-content: flex-start; }
#iw-public-root [class~="justify-center"]  { justify-content: center; }
#iw-public-root [class~="justify-end"]     { justify-content: flex-end; }
#iw-public-root [class~="justify-between"] { justify-content: space-between; }
#iw-public-root [class~="justify-around"]  { justify-content: space-around; }

#iw-public-root [class~="flex-row"]    { flex-direction: row; }
#iw-public-root [class~="flex-col"]    { flex-direction: column; }
#iw-public-root [class~="flex-wrap"]   { flex-wrap: wrap; }
#iw-public-root [class~="flex-nowrap"] { flex-wrap: nowrap; }

#iw-public-root [class~="mx-auto"] { margin-left: auto; margin-right: auto; }
#iw-public-root [class~="w-full"]  { width: 100%; }
#iw-public-root [class~="h-full"]  { height: 100%; }

/* -------------------------------------------------------------------------
   Generic — base widget tweaks that apply everywhere on v2 pages.
------------------------------------------------------------------------- */

.iw-el--widget.iw-el--heading > .iw-w-heading { margin: 0; }
.iw-el--widget.iw-el--text > .iw-w-text { margin: 0; }

/* Service-card images: round the corners on top-of-card photos. */
.iw-el--container.iw-el--container > .iw-el__body > .iw-el--container[class*="iw-el--container"] > .iw-el__body > .iw-w-image img {
    border-radius: 12px 12px 0 0;
}

/* -------------------------------------------------------------------------
   HERO photo card — premium chrome on iw-w-image inside cms-hero__photo
------------------------------------------------------------------------- */

.iw-el--container.cms-hero__photo {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .15);
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    isolation: isolate;
}
.iw-el--container.cms-hero__photo > .iw-el__body { width: 100%; height: 100%; }
.iw-el--container.cms-hero__photo .iw-w-image,
.iw-el--container.cms-hero__photo .iw-el--image {
    width: 100%; height: 100%;
}
.iw-el--container.cms-hero__photo .iw-w-image img,
.iw-el--container.cms-hero__photo img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    opacity: .94;
}
.iw-el--container.cms-hero__photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(11, 25, 41, .35) 0%, rgba(11, 25, 41, 0) 50%, rgba(0, 61, 165, .35) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
}
/* Floating badges sit above the gradient overlay. */
.iw-el--container.cms-hero__photo .cms-hero__badge { z-index: 3; }

/* Editor-only fix: editor-v1.css sets `.iw-el { position: relative }` on
   every element wrapper so editor handles can anchor. That makes the badge
   widget wrappers (.iw-el--widget around .iw-w-html) the nearest positioned
   ancestor of .cms-hero__badge — so the badge anchors there instead of to
   the photo card. Force static on .iw-el--widget INSIDE .cms-hero__photo so
   absolute positioning resolves to .cms-hero__photo (which is relative).
   The public site loads neither editor-v1.css nor needs this override, but
   it's harmless there because nothing changes the cascade. */
.iw-el--container.cms-hero__photo .iw-el--widget { position: static !important; }

/* -------------------------------------------------------------------------
   STATS — count-up cards
   Migration emits an html-widget that renders <div class="stats-card"> with
   .num (data-target) + .label. Style those plus dress the container wrapper.
------------------------------------------------------------------------- */

.iw-el--container.stats-card-wrap {
    background: #ffffff;
    border-radius: 14px;
    border-top: 3px solid #dbeafe;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding: 28px 16px !important;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.iw-el--container.stats-card-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 61, 165, .08);
}
.iw-el--container.stats-card-wrap .iw-w-html .stats-card {
    border: 0; padding: 0; background: transparent;
}
.iw-el--container.stats-card-wrap .iw-w-html .num {
    display: block;
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    color: #003DA5;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 10px;
}
.iw-el--container.stats-card-wrap .iw-w-html .label {
    display: block;
    font-size: 13px;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* -------------------------------------------------------------------------
   SERVICE cards — the white-card grid in the "What We Do" section.
   We rely on the migration's existing shadow-sm + radius + border, and add
   the signature hover lift.
------------------------------------------------------------------------- */

.iw-el--container.svc-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.iw-el--container.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 61, 165, .10);
    border-color: #003DA5 !important;
}
.iw-el--container.svc-card .iw-w-image img {
    border-radius: 12px;
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   PROMO cards — dark-section feature tiles
------------------------------------------------------------------------- */

.iw-el--container.promo-card {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.iw-el--container.promo-card:hover {
    transform: translateY(-6px);
    border-color: #003DA5 !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .25);
}

/* -------------------------------------------------------------------------
   BENEFIT cards — the 10 Reasons grid
------------------------------------------------------------------------- */

.iw-el--container.benefit {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.iw-el--container.benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 61, 165, .08);
    border-color: #003DA5 !important;
}

/* -------------------------------------------------------------------------
   STEP cards — How-It-Works circles
------------------------------------------------------------------------- */

.iw-el--container.step-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
.iw-el--container.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 61, 165, .10);
}
.iw-el--container.step-card .iw-w-html div {
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------
   TESTIMONIALS carousel — sliding track + dots
------------------------------------------------------------------------- */

.iw-el--container.tcarousel-wrap .tcarousel {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
}
.iw-el--container.tcarousel-wrap .tcarousel-track {
    display: flex;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.iw-el--container.tcarousel-wrap .tcarousel-slide {
    min-width: 100%;
    flex: 0 0 100%;
    padding: 0 8px;
    box-sizing: border-box;
}
.iw-el--container.tcarousel-wrap .tcarousel-dots {
    display: flex; gap: 8px; justify-content: center; margin-top: 24px;
}
.iw-el--container.tcarousel-wrap .tcarousel-dots button {
    width: 10px; height: 10px; border-radius: 50%;
    background: #cbd5e1; border: 0; padding: 0; cursor: pointer;
    transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.iw-el--container.tcarousel-wrap .tcarousel-dots button.on {
    background: #003DA5; width: 28px; border-radius: 5px;
}

/* -------------------------------------------------------------------------
   Reveal-on-scroll — top-level sections get data-fw-reveal in the v2 shell.
   site.js adds .is-revealed when they intersect the viewport.
   We DON'T set opacity:0 by default — that's brittle if JS misses an
   observer. Instead we only animate translate on initial entry.
------------------------------------------------------------------------- */
[data-fw-reveal] {
    transition: opacity .65s ease, transform .65s ease;
}
.js-reveal-armed [data-fw-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(18px);
}
.js-reveal-armed [data-fw-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Don't hide the topbar/header behind the reveal — they're above the fold. */
.js-reveal-armed #iw-public-root > .iw-el:nth-child(-n+2) {
    opacity: 1 !important;
    transform: none !important;
}

/* -------------------------------------------------------------------------
   Typography polish — Inter wherever site.css's --inter is expected.
   Site.css mostly already does this; here we just normalise headings
   inside dark sections.
------------------------------------------------------------------------- */
.iw-el--heading h1, .iw-el--heading h2,
.iw-el--heading h3, .iw-el--heading h4 { font-family: inherit; letter-spacing: -.5px; }