/* ============================================================
   Zion layout system — ported verbatim from the original
   styles.css, keyed to Elementor container ELEMENT-IDs (Elementor
   renders #id on imported containers, not classes) with the real
   breakpoints (1200/1020/880/560). Loaded last so it wins.
   ============================================================ */

/* ---- Body base + heading tracking (registry §4) ---- */
body { font-size: 18px; line-height: 1.6; }
@media (max-width: 880px) { body { font-size: 17px; } }
/* Base heading tracking — :where() = ZERO specificity so the per-class label rules
   (eyebrow, mini-label, program-badge, testi-p …) win instead of being clobbered by this
   rule loading after sections.css. Generic headings still inherit it. */
:where(.elementor-widget-heading .elementor-heading-title) { letter-spacing: -0.012em; }
/* Line-height: the Global Kit sets `.elementor-heading-title{line-height:1}`, which beats a
   :where() rule — real headings rendered at 1.0 instead of dist's 1.08. Re-assert 1.08 with
   real specificity, scoped to heading TAGS so eyebrows/labels (div/span, own line-height) are
   untouched. dist applies 1.08 uniformly to h1–h4. */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title { line-height: 1.08; }

/* ---- Section vertical rhythm + fluid gutter (registry §2–3) ---- */
/* Applies to page-content sections only — exclude the Theme Builder header/footer
   template containers (they carry their own spacing; see chrome override below). */
.e-con.e-parent:not(.elementor-element-zionhdr01):not(.elementor-element-zionftr01) { padding-top: clamp(64px,8vw,116px) !important; padding-bottom: clamp(64px,8vw,116px) !important; }
.e-con.e-parent > .e-con { padding-left: clamp(20px,5vw,64px) !important; padding-right: clamp(20px,5vw,64px) !important; }
#hero-a, #more-than-band, #trust-bar { padding-top: 0 !important; padding-bottom: 0 !important; }
#trust-bar > .e-con { padding-top: 18px; padding-bottom: 18px; }

/* ---- GRID CONTAINERS: reproduce the original grid-template-columns ---- */
#problem-grid, #diff-layout, #region-wrap, #faq-layout, #page-grid,
#pillar-grid, #testi-grid, [id^="program-"], [id^="skill-grid"] { display: grid !important; }
/* Elementor wraps a boxed container's children in an intermediate `.e-con-inner`.
   Make that wrapper `display:contents` so the REAL column elements become direct grid
   items of the #id grid. Without this every column collapses into a single track
   (half-width, badly wrapped, ~2x tall) — the root cause of the page-height blow-up. */
#problem-grid > .e-con-inner, #diff-layout > .e-con-inner, #region-wrap > .e-con-inner,
#faq-layout > .e-con-inner, #page-grid > .e-con-inner, #pillar-grid > .e-con-inner,
#testi-grid > .e-con-inner, [id^="program-"] > .e-con-inner,
[id^="skill-grid"] > .e-con-inner { display: contents !important; }
/* promoted grid items must drop Elementor's flex/boxed width so they fill their track */
#problem-grid > .e-con-inner > .e-con, #diff-layout > .e-con-inner > .e-con,
#region-wrap > .e-con-inner > .e-con, #faq-layout > .e-con-inner > .e-con,
#page-grid > .e-con-inner > .e-con, #pillar-grid > .e-con-inner > .e-con,
#testi-grid > .e-con-inner > .e-con, [id^="program-"] > .e-con-inner > .e-con,
[id^="program-"] > .e-con-inner > .elementor-widget,
[id^="skill-grid"] > .e-con-inner > .e-con { width: auto !important; max-width: none !important; }

/* Two-column blocks → 1 col @880 */
#problem-grid { grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
#diff-layout  { grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
#region-wrap  { grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
#faq-layout   { grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px,5vw,64px); align-items: start; }
#page-grid    { grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); }
#program-1, #program-2 { grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
@media (max-width: 880px) {
  #problem-grid, #diff-layout, #region-wrap, #faq-layout, #page-grid,
  #program-1, #program-2 { grid-template-columns: 1fr; }
  #program-2 > .elementor-widget-image { order: -1; } /* flip: media above copy on mobile */
}

/* Pillars 4 → 2 (≤1200) → 1 (≤560) */
#pillar-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1200px) { #pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { #pillar-grid { grid-template-columns: 1fr; } }

/* Testimonials 3 → 1 (≤1200) */
#testi-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1200px) { #testi-grid { grid-template-columns: 1fr; } }

/* Skill-grid: 2-col ROW-major grid → 1 (≤560) */
#skill-grid-1, #skill-grid-2 { grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 26px; }
@media (max-width: 560px) { #skill-grid-1, #skill-grid-2 { grid-template-columns: 1fr; } }

/* Region-list: CSS multi-column (column-major) 2 → 1 (≤880) */
#region-list { display: block !important; column-count: 2; column-gap: 22px; }
#region-list > .e-con-inner { display: contents !important; }
#region-list > .e-con-inner > .e-con { width: auto !important; break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 880px) { #region-list { column-count: 1; } }

/* Region "Get Directions" — overlay bottom-right of the map (original .map-directions) */
#region-map-col { position: relative; }
#region-map-col .elementor-widget-button { position: absolute; right: 18px; bottom: 40px; z-index: 5; margin: 0; }
#region-map-col .elementor-widget-button .elementor-button { padding: 12px 20px; }

/* Hero A copy column — cap at the original .hero-a-box 620px (Elementor's width
   control renders 1140 here, so the H1 wouldn't wrap to the original 3 lines). */
#hero-copy { max-width: 620px !important; width: auto !important; }

/* section-head max-width 720 (centered heads) */
#whyearly-head, #testi-head { max-width: 720px !important; margin-left: auto; margin-right: auto; text-align: center; }
#whyearly-head .eyebrow, #testi-head .eyebrow { justify-content: center; }

/* ============================================================
   Theme Builder header/footer chrome — kill Elementor's default
   container padding (renders as 102.4px = 8% block padding here,
   overriding the JSON padding:0). Keyed to the seeded container
   element-IDs so the topbar sits flush at the top, the hero seats
   directly under the nav, and the footer has no extra dead space.
   The header/footer widgets carry their own spacing (topbar/header
   heights, .site-footer padding-block).
   ============================================================ */
.elementor-element-zionhdr01,
.elementor-element-zionftr01,
.elementor-location-header > .elementor .e-con,
.elementor-location-footer > .elementor .e-con {
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   1:1 spacing polish — the original's fine per-element margins
   (.diff-item h3, .more-than p, .region-list li …) don't match the
   Elementor widget DOM, so WP fell back to the Kit's uniform 20px
   widget spacing (looser/uneven). Re-key those margins to the widget
   classes that DO render, and pin the diff photo aspect.
   ============================================================ */

/* Diff photo — original aspect-ratio 4/5 (portrait), 16/10 ≤880 */
#diff-layout .diff-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 18px; display: block; }
@media (max-width: 880px) { #diff-layout .diff-media img { aspect-ratio: 16/10; } }

/* Diff numbered cards — tight internal rhythm (h3 mb5, p 0, tags mt10). The real
   looseness is the Elementor container flex-gap (20px --widgets-spacing) on the
   content column's inner wrapper; zero it (targeted via :has, since classes don't
   render on imported containers) and let the original margins define the rhythm. */
#diff-layout .e-con-inner:has(> .diff-h3) { row-gap: 0 !important; }
#diff-layout .diff-h3 { margin-block-end: 5px !important; }
#diff-layout .diff-p  { margin-block-end: 0 !important; }
#diff-layout .diff-p p { margin: 0 !important; font-size: 15.5px; }
#diff-layout .diff-h3 .elementor-heading-title { font-size: 20px; }

/* "Known, encouraged" band — eyebrow→h2 18, h2→p 20 (zero the container gap, then margins) */
#more-than-band .e-con-inner:has(> .on-dark-h2c) { row-gap: 0 !important; }
#more-than-band .mt-p p { margin: 0 !important; }
#more-than-band .on-dark-h2c { margin-block-start: 18px !important; }
#more-than-band .mt-p        { margin-block-start: 20px !important; }

/* Region location list — original li padding 7px 0 (16px, weight 500) */
#region-list .li-pin { margin: 0 !important; padding: 7px 0 !important; }

/* Pillar card headings — DELIBERATE 1:1 bug-match (user decision 2026-08-29): the
   approved reference renders these white on the white card (inherited from the dark
   section = invisible). To un-hide later, change the color to a dark token (e.g. --ink). */
#pillar-grid .pillar-h3 .elementor-heading-title { color: #ffffff !important; font-size: 21px; }
#pillar-grid .pillar-h3 { margin-block-end: 7px !important; }

/* ============================================================
   1:1 TYPOGRAPHY CORRECTIONS (audit 2026-08-29 vs dist/)
   Fixes: all headings were rendering at the Kit's weight 600 and several
   section h2s fell back to 32px; the eyebrow lost its wide tracking/weight;
   region/concern list text inherited the Kit's grey.
   ============================================================ */

/* Heading weight → 500 at the source: the Kit applies
   var(--e-global-typography-primary-font-weight) (=600) to every heading via
   .elementor-widget-heading .elementor-heading-title. Redefine the var to 500 so
   generic headings are 500; rules that set an EXPLICIT weight (card-title/diff-num
   /tag/eyebrow 600–700) are unaffected. Original base h1–h4 weight is 500. */
body.elementor-kit-4 { --e-global-typography-primary-font-weight: 500 !important; }

/* Eyebrow — Hanken 13/700, wide .14em uppercase (was getting the generic heading
   treatment: weight 500 + base -0.012em tracking). Higher specificity beats the Kit. */
.elementor-widget-heading.eyebrow .elementor-heading-title {
  font-weight: 700 !important; letter-spacing: .14em !important; line-height: 1.6 !important;
}

/* Section-head h2 fluid sizes (registry §5) — several classes set no size and fell to
   the Kit's 32px. Base on-dark-h2c (why-early) = 50; per-section clamps override. */
.on-dark-h2c .elementor-heading-title { font-size: clamp(30px,4vw,50px) !important; }
#more-than-band .on-dark-h2c .elementor-heading-title { font-size: clamp(30px,4.4vw,56px) !important; }
#region-wrap .h2-lg .elementor-heading-title { font-size: clamp(28px,3.6vw,46px) !important; }
#faq .h2-lg .elementor-heading-title { font-size: clamp(28px,3.4vw,44px) !important; }

/* List text colour — region items = --ink, concern items = --ink-soft (were inheriting
   the Kit's grey #7a7a7a because .zli sets no colour). */
.li-pin p, .li-pin .elementor-widget-container { color: var(--ink) !important; }
.li-minus p, .li-minus .elementor-widget-container { color: var(--ink-soft) !important; }

/* Program-copy sub = 17px / margin 16 0 22 (original .program-copy .sub), distinct
   from the section-head .sub (clamp→19.5) even though both use the .sub class. */
[id^="program-"] .sub .elementor-widget-container, [id^="program-"] .sub p {
  font-size: 17px !important; margin: 16px 0 22px !important;
}