/**
 * Impreza 8.x compatibility shim
 *
 * Impreza 8.x ships broader, more aggressive CSS than Impreza 7.11 did. Some of
 * its new rules override JFJC's Lapraim design by targeting bare elements
 * (h1-h6, a, a:hover) or overriding inherited colors. The rules below undo
 * those specific regressions so Lapraim's intended design renders again.
 *
 * This file is intentionally NOT a kitchen-sink override. Each block below is:
 *   1. A specific Impreza 8.x rule we've identified in /uploads/us-assets/*.css
 *   2. A narrowly-scoped counter that restores 7.11 behavior in the context
 *      where Lapraim relies on it
 *
 * Maintenance rule: every time Impreza updates and a visual regression
 * appears, add a new block here with a /* Impreza 8.x: ... *\/ comment
 * explaining which Impreza rule it's compensating for. Do not add generic
 * design rules here — those go in style-lapraim.css.
 *
 * Loaded via functions.php with a late priority so it wins over us-assets.
 */

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `h1, h2, h3, h4, h5, h6 { color: var(--color-content-heading); }`
 *
 * This rule in us-assets directly colors every heading with the
 * --color-content-heading palette value. Direct element-selector rules beat
 * inheritance, so any Lapraim context that sets a parent `color` expecting
 * children to inherit it (like a dark hero overlay, or a colored card) sees
 * its headings break back to the palette color instead.
 *
 * Lapraim contexts where headings must inherit parent color, not fall back
 * to palette:
 *   - `.wpb_text_column.light` — Power of One hero overlay (white text over
 *     dark bg)
 *   - `.card-grid .card` — BrainAbouts High-Risk Behaviors cards (white
 *     heading over colored card bg)
 *
 * Add more selectors here as we encounter new contexts during QA.
 * ---------------------------------------------------------------------------*/
.wpb_text_column.light h1,
.wpb_text_column.light h2,
.wpb_text_column.light h3,
.wpb_text_column.light h4,
.wpb_text_column.light h5,
.wpb_text_column.light h6,
.card-grid .card h1,
.card-grid .card h2,
.card-grid .card h3,
.card-grid .card h4,
.card-grid .card h5,
.card-grid .card h6 {
	color: inherit;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: button hover color + background regressions.
 *
 * Two Impreza 8 rules change how Lapraim buttons look on hover:
 *
 *   .no-touch a:hover { color: var(--color-content-link-hover); }
 *     — recolors all link text on hover to the link-hover palette color,
 *       fading button text away from white.
 *
 *   .no-touch .us-btn-style_1:hover { background: var(--btn-hover-background);
 *                                      color: white !important; }
 *     — changes button bg to `color_bg_hover` from the button theme option,
 *       which resolves to `_content_secondary` = teal #89d2d9. White text on
 *       teal gives 2.64:1 contrast, failing WCAG AA (4.5:1 required).
 *
 * Prod had neither issue: Impreza 7.11 didn't ship these hover rules, so
 * buttons simply stayed black on hover (no hover change). We match that
 * behavior — buttons keep Lapraim's normal styling on hover rather than
 * shifting to an inaccessible teal.
 *
 * Lapraim defines two button text colors in style-lapraim.css:
 *   - default `.button` / `.button.blue` → white text
 *   - `.button.yellow` → black text
 * And one base background: `a.w-btn / a.button { background: black }`.
 * We restore these on hover so the hover state matches the rest state.
 *
 * Note: `color: inherit` would inherit from the parent on hover, not the
 * element's own non-hover value, so we use explicit colors matching Lapraim.
 * Use `!important` on the yellow override to beat Impreza's `!important`
 * on `.us-btn-style_1:hover { color: white !important }`.
 * ---------------------------------------------------------------------------*/
.no-touch a.button:hover,
.no-touch a.w-btn:hover,
.no-touch button.button:hover,
.no-touch span.button:hover,
.no-touch input[type="submit"].button:hover {
	color: #fff;
	background: #000;
}

.no-touch a.button.blue:hover,
.no-touch a.w-btn.blue:hover {
	background: #00a7e0;
}

.no-touch a.button.yellow:hover,
.no-touch a.w-btn.yellow:hover,
.no-touch button.button.yellow:hover,
.no-touch span.button.yellow:hover,
.no-touch input[type="submit"].button.yellow:hover {
	color: #000 !important;
	background: #fed103;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `.g-cols.via_flex.type_default { margin: 0 -1.5rem; }`
 *
 * The new via_flex row layout applies a negative horizontal gutter to every
 * row, replacing 7.x's `margin: 0 auto` centering. This affects every
 * top-level row site-wide — content renders flush-left against the viewport
 * instead of being horizontally centered within the page gutter.
 *
 * Two scopes:
 *   1. Top-level rows (direct children of `.l-section-h`) — need to be
 *      centered within the page container, not shoved flush-left by the
 *      negative gutter.
 *   2. Nested rows (inside `.vc_column-inner`, the wrapper of every column
 *      in a WPBakery layout) — the negative gutter extends the nested row
 *      past its parent column's inner padding, making contained images with
 *      fixed aspect-ratio (`.w-image.has_ratio`) render wider than intended.
 *      On prod, nested rows use the classic `vc_inner` pattern with `margin: 0`,
 *      which respects the outer column's padding. We match that on DDEV.
 *
 * The old Lapraim rule `.g-cols.type_default { margin: 0 auto }` does exactly
 * the top-level case, but Impreza's `via_flex` rule wins on specificity
 * (0-3-0 vs 0-2-0). Bumping our selector's specificity here restores the
 * intended layout in both scopes.
 *
 * Also covers the History-page timeline where `.tl-event` rows need the same
 * centering for Lapraim's `translateX(±50%)` odd/even positioning to work.
 * ---------------------------------------------------------------------------*/
.l-section-h > .g-cols.via_flex,
.vc_column-inner > .g-cols.via_flex,
.vc_column-inner > .wpb_wrapper > .g-cols.via_flex,
body.page-id-73 #timeline .g-cols.via_flex.tl-event {
	margin-left: auto;
	margin-right: auto;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `.l-canvas { background: #fff; }` (solid white canvas bg)
 * The new canvas background is opaque white, whereas 7.x left it transparent.
 * Lapraim's History timeline uses `#tl-line { z-index: -1 }` to sit the teal
 * vertical connector line *behind* the timeline event cards but *above* the
 * canvas. With the new opaque canvas bg, z-index -1 now sinks the line
 * entirely behind the canvas, making it invisible.
 *
 * Raise `#tl-line` to z-index 0 so it renders above the canvas bg while
 * still layering behind the .tl-event cards (which create their own
 * stacking context via transform).
 * ---------------------------------------------------------------------------*/
body.page-id-73 #timeline #tl-line {
	z-index: 0;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: form field styling via `input_fields` theme option.
 *
 * Impreza 8.x applies these rules (via CSS vars in us-assets) to every
 * non-submit input and textarea:
 *   input { line-height: inherit; font-size: inherit; }
 *   input:not([type=submit]) {
 *     font-size: var(--inputs-font-size);    // 1rem = 16px
 *     box-shadow: var(--inputs-box-shadow);  // inset 0 1px 0 rgba(0,0,0,.08)
 *   }
 *   input[type=text] {
 *     min-height: var(--inputs-height);      // 2.8rem = 44.8px
 *     line-height: var(--inputs-height);     // 44.8px
 *   }
 *
 * Lapraim styles form fields in its own pass (`form input:not([type=submit]),
 * form textarea { border:1px solid lightgrey; bg:#f8f8f8; border-radius:3px;
 * padding: 8px 10px }`), but doesn't set min-height / line-height / font-size,
 * assuming browser defaults. With Impreza 8 explicitly overriding those,
 * fields balloon to 62.8px tall with forced 44.8px line-height instead of
 * prod's natural ~43.5px at 17px/25.5px line-height.
 *
 * Reset the properties Impreza 8 imposes so fields fall back to their natural
 * sizing inside Lapraim's visual treatment.
 *
 * `line-height: inherit` here is deliberate: prod's Impreza 7.11 sets
 * `input { line-height: inherit }`, which cascades to 25.5px from the parent
 * `<p>`. Setting `normal` here would produce ~22.4px at 17px font and make
 * every text-input render 2.5px shorter than prod.
 * ---------------------------------------------------------------------------*/
form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
form textarea {
	min-height: 0;
	line-height: inherit;
	font-size: 17px;
	box-shadow: none;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: checkbox / radio appearance reset.
 *
 * Impreza 8 applies to every checkbox/radio:
 *   input[type=checkbox] { width: var(--inputs-checkbox-size); height: same; }
 *   input[type=checkbox] { appearance: none; }  (implicit in the resets)
 *
 * With `appearance: none`, Lapraim's generic `form input:not([type=submit])`
 * rule (border:1px solid lightgrey; bg:#f8f8f8; padding:8px 10px; radius:3px)
 * suddenly paints on the checkbox — producing a 42px padded rounded box
 * instead of the ~20px native checkbox prod users see.
 *
 * Prod hid this because Impreza 7.11 left `appearance: auto`, so the browser
 * drew the native widget and ignored all those decorative CSS properties.
 *
 * Restore native rendering + intrinsic sizing. This also implicitly drops the
 * Lapraim border/padding/bg because native checkboxes ignore those.
 * ---------------------------------------------------------------------------*/
form input[type="checkbox"],
form input[type="radio"] {
	appearance: auto;
	-webkit-appearance: auto;
	/* Match prod (Impreza 7.11 parent theme) which sized at 1.2rem */
	width: 1.2rem;
	height: 1.2rem;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	/* Impreza 8 `input:not([type=submit]) { font-size: var(--inputs-font-size) }`
	 * forces 16px on checkboxes, overriding the parent `.wpcf7-list-item`'s
	 * 15px (set by Lapraim). Inherit instead so the parent sizing wins. */
	font-size: inherit;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: Contact Form 7 checkbox-group layout changes.
 *
 * Impreza 8 changed two rules that make CF7 checkbox groups render denser
 * and tighter than prod's Impreza 7.11 did:
 *
 *   span.wpcf7-list-item > label { padding: 0.2em 0; }  // new in 8.x
 *   span.wpcf7-list-item { margin: 0; }                 // was `0 1.5rem 0 0` in 7.x
 *
 * The first puts 3px of top+bottom padding on each checkbox's <label>,
 * inflating row heights. The second removes the 24px right margin that
 * spaces list items apart horizontally. Together they change the visual
 * rhythm of every checkbox group on the site.
 *
 * Restore 7.x behavior: no label padding, 1.5rem right margin.
 * ---------------------------------------------------------------------------*/
form span.wpcf7-list-item > label {
	padding: 0;
}

form span.wpcf7-list-item {
	margin-right: 1.5rem;
}

/* -----------------------------------------------------------------------------
 * WPBakery (js_composer): restore `.field-wrapper` bottom margin that
 * `.wpb_text_column :last-child { margin-bottom: 0 }` zeroes out.
 *
 * NOT an Impreza 8 issue — but surfaced by the modernization. WPBakery ships
 * a rule to remove bottom margin from the last child of `.wpb_text_column` so
 * that text blocks end flush with their container. When a contact form's
 * checkbox-group or message field-wrapper is the only (and therefore last)
 * child of its `.field-row`, WPBakery's rule wins on specificity (0,0,2,0)
 * over Lapraim's `form .field-wrapper { margin-bottom: 20px }` (0,0,1,1),
 * collapsing the spacing between the checkbox group and the Message block,
 * and between Message and Submit.
 *
 * On prod this was masked because Impreza's theme-options CSS was
 * suppressed and other layout rules compensated; now that the design system
 * is intact again, we need to re-assert Lapraim's intended form rhythm.
 *
 * Specificity note: WPBakery's selector is `.wpb_text_column :last-child`
 * (0,0,2,0). Lapraim's `form .field-wrapper` is (0,0,1,1) — loses.
 * We bump ours to `.wpb_text_column form .field-wrapper` (0,0,2,1) to win.
 * ---------------------------------------------------------------------------*/
.wpb_text_column form .field-wrapper {
	margin-bottom: 20px;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `.wpcf7-form-control.wpcf7-checkbox` lost its vertical padding.
 *
 * Impreza 7.11 parent theme set `.wpcf7-form-control.wpcf7-checkbox {
 * padding: 0.5rem 0 }` (8px top + 8px bottom). Impreza 8 dropped that rule
 * entirely, making every checkbox group 16px shorter — which also shifts
 * everything below it up by 16px.
 *
 * Restore it.
 * ---------------------------------------------------------------------------*/
.wpcf7-form-control.wpcf7-checkbox {
	padding: 0.5rem 0;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: textarea lost its explicit height.
 *
 * Impreza 7.11 parent theme set `textarea { height: 8rem; min-height: 3rem }`
 * which produced a 128px tall Message field regardless of the textarea's
 * `rows` attribute. Impreza 8 dropped that rule, so textareas now fall back
 * to the intrinsic height of their `rows` count (typically `rows=10` → ~134px
 * at 17px/25.5px line-height).
 *
 * The result is a Message field ~6px taller than prod, which shifts the
 * Submit button down by the same amount. Restore 7.x's explicit sizing.
 * ---------------------------------------------------------------------------*/
form textarea {
	height: 8rem;
	min-height: 3rem;
}

/* -----------------------------------------------------------------------------
 * Lapraim design quirk: footer main nav links were styled `font-family:
 * "PT Serif", serif` in style-lapraim.css. On every page that renders
 * `body.tribe-events-page-template` (the /events/ templates) a second Lapraim
 * rule `body.tribe-events-page-template * { font-family: Nunito Sans !important }`
 * overrode that with Nunito Sans.
 *
 * The result was inconsistent: Tribe pages had sans-serif footer links,
 * every other page had serif. Standardize on Nunito Sans site-wide — matches
 * the rest of the site's typography and the client's preference (2026-04-21
 * explicitly: "the Events page font is proper, other pages are not").
 *
 * NOT an Impreza 8.x issue, but lives in the same maintenance concern:
 * Lapraim CSS has stylistic inconsistencies we override without touching the
 * frozen vendor file.
 * ---------------------------------------------------------------------------*/
footer#main-footer .footer-main a {
	font-family: "Nunito Sans", helvetica, arial, sans-serif;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `.wpb_text_column:not(:last-child) { margin-bottom: var(--text-block-margin-bottom); }`
 *
 * Impreza 8 ships this new rule that applies a 1.5rem (24px) bottom margin
 * to every non-last-child text column. Lapraim has `.wpb_text_column {
 * margin-bottom: 30px }`, but Impreza's is more specific (0,0,2,0 vs
 * 0,0,1,0) and wins, leaving text columns 6px closer together than on prod.
 *
 * Bump specificity to restore the 30px. Using `body .wpb_text_column`
 * (0,0,1,1) still loses to Impreza's `.wpb_text_column:not(:last-child)`
 * (0,0,2,0) — so we need a 2-class selector minimum.
 *
 * Specificity trap: our original attempts used selectors with spec (0,0,3,0)
 * or (0,0,4,0), which beat Impreza's (0,0,2,0) but ALSO beat Lapraim's
 * context-specific overrides — e.g. `.stats-container .stat { margin: 0 }`
 * (0,0,2,0) — that prod depends on to remove margin from stat/card grid
 * items. Overriding those broke grid layouts.
 *
 * Match Impreza's exact specificity (0,0,2,0). Source-order then decides:
 * impreza8-compat loads after us-assets so our rule wins over Impreza, but
 * Lapraim's context-specific (0,0,2,0) rules also match that spec and load
 * between us-assets and compat — at same specificity the LATER declaration
 * wins, and our compat file loads after Lapraim, so in theory compat wins
 * there too. But the grid overrides like `.stats-container .stat` have MORE
 * specific markers than `.wpb_text_column:not(:last-child)` in certain
 * cases: they include `.stats-container` and `.stat` (2 classes), while
 * ours is `.wpb_text_column` + `:not(:last-child)` — the `:not()` counts as
 * its argument's spec (1 class), so spec is still (0,0,2,0). Tied.
 *
 * Solution: use the inverse approach — match Impreza's exact selector so
 * we tie source-order-wise, but exclude the grid-item class names
 * explicitly. `.card` was already there; add `.stat` for the
 * `.stats-container` case. Any additional Lapraim grid-item class that
 * surfaces later goes in this list.
 * ---------------------------------------------------------------------------*/
.wpb_text_column:not(:last-child):not(.card):not(.stat) {
	margin-bottom: 30px;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: home-page hero row collapses, hiding Lapraim decorations.
 *
 * Impreza 7.x rows (`.g-cols.vc_row`) had flex with implicit stretch behavior
 * — columns in a row shared the tallest column's height. Impreza 8.x added
 * `via_flex` and `stacking_default` classes that resolve `align-items` as
 * non-stretch, so a row collapses to the SHORTER column's natural height.
 *
 * Symptom on the home page: the hero row has a text column (tall) next to an
 * image column (shorter). On 8.x the row collapses to the image column's
 * 544px instead of stretching to the text column's 672px. Lapraim's
 * `.triagle` L-bracket decoration positioned `bottom: -20px` relative to
 * the image column then visually falls BELOW the hero section, giving the
 * illusion of being clipped. Same mechanism hides the `#purpose::before`
 * swoosh (whose layout assumes the section has expected height).
 *
 * Diagnosis confirmed via computed-style diff (2026-04-23): `.triagle` rect
 * is identical on prod and DDEV (x:677 y:391 w:150 h:149); the row height
 * is where prod (672px) and DDEV (544px) diverge.
 *
 * Fix: restore stretch semantics on Impreza 8.x `via_flex` rows within the
 * home-page hero. Scoped narrowly — broaden only if other pages show the
 * same collapse pattern.
 * ---------------------------------------------------------------------------*/
body.home .hero .g-cols.via_flex {
	align-items: stretch;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `.l-canvas { background-color: #fff }` hides decorations.
 *
 * Impreza 7.x left `.l-canvas` with no background (transparent). 8.x sets
 * it to opaque white. That breaks any Lapraim decoration that uses negative
 * z-index and overflows its section into the canvas's territory:
 *   - `#purpose::before` — light-blue swoosh wave above Our Purpose section.
 *     Overflows 300px above its parent at z-index -2. On prod the transparent
 *     canvas lets it show through; on 8.x the white canvas paints over it.
 *   - Potentially other Lapraim decorations that paint above/below their
 *     sections into canvas space.
 *
 * Diagnosis (2026-04-23): `.l-canvas` computed `backgroundColor` is
 * `rgba(0,0,0,0)` on prod vs `rgb(255,255,255)` on DDEV (Impreza 8.44).
 * No ancestor of `#purpose` creates a stacking context on either site,
 * so the `-2` pseudo is painting behind its positioned parent as intended
 * — the canvas fill is just covering it.
 *
 * Fix: restore transparent canvas to match prod. Unscoped (site-wide) because
 * prod renders correctly with transparent canvas, and any Lapraim decoration
 * that overflows its section into canvas territory needs this globally.
 * Individual sections set their own backgrounds, so the page still renders
 * the intended panel colors.
 * ---------------------------------------------------------------------------*/
.l-canvas {
	background-color: transparent;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `.us-btn-style_1 { line-height: 1.2 !important }` promoted.
 *
 * Impreza 7.11's style generator emitted `.us-btn-style_1 { line-height: 1.2 }`
 * without `!important`. Lapraim's `a.w-btn { line-height: 1 }` in
 * style-lapraim.css (line 166-199) won via source order — same specificity
 * (0,0,1,1), Lapraim loaded later.
 *
 * Impreza 8.x's style generator now emits `line-height: 1.2 !important`
 * (see common/admin/templates/sw_site_preview/theme_styles_html.php line 1,
 * output into `uploads/us-assets/<host>.css`). The `!important` beats Lapraim's
 * un-flagged `line-height: 1`. Result: every `.us-btn-style_1` button
 * site-wide renders at line-height 20.4px instead of 17px, making it ~3.4px
 * taller. On BrainAbouts this cascades the "Explore The Core" button and
 * everything below it downward. All other instances site-wide are similarly
 * affected.
 *
 * Fix: match the 8.x `!important` with our own to restore Lapraim's intended
 * line-height: 1. Same-specificity + same-important + our file loads AFTER
 * us-assets → source-order wins → Lapraim's 1 wins.
 *
 * Verified: prod (7.11) rendered button height 49px, dev (8.44) 52.39px.
 * Lapraim's `min-width: 180px; padding: 16px 24px; font-size: 17px` are
 * identical on both — the only divergence is the line-height.
 * ---------------------------------------------------------------------------*/
a.w-btn.us-btn-style_1 {
	line-height: 1 !important;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x: `#tribe-events-pg-template` lost its top padding.
 *
 * Impreza 7.11 set `#tribe-events-pg-template { padding-top: 40px }` as the
 * single-event-page top breathing room. Impreza 8.44 dropped the rule.
 *
 * Measured delta (2026-04-24): back-link (`.tribe-events-back`) renders at
 * doc-y 200 on prod vs doc-y 160 on dev — a clean 40px delta. The `.l-canvas`
 * `margin-top: 160px` and body structure are identical on both versions;
 * the only functional difference on the page is this missing padding.
 *
 * Fix: restore the 40px top padding on the Tribe single-event wrapper.
 * ---------------------------------------------------------------------------*/
#tribe-events-pg-template {
	padding-top: 40px;
}

/* -----------------------------------------------------------------------------
 * Impreza 8.x / WPBakery 8.x: empty `[vc_column]` columns get their inner
 * padding stripped at render time when the column has no visible content.
 *
 * The home page hero (post 8) intentionally has a 3rd full-width column
 * containing only a `[us_popup show_on="load"]` shortcode whose modal is
 * `display: none` until triggered. On Impreza 7.11 that column rendered
 * with WPBakery's default `.vc_column-inner` padding (64px top + 64px
 * bottom = 128px of intentional spacer between the hero text/image row
 * and the next section's swoosh wave). Impreza/WPBakery 8.x detects the
 * hidden content and zeroes the inner padding, collapsing the column to
 * 0px and pulling the swoosh flush against the hero image.
 *
 * Restore the prod desktop spacer behavior. Prod also collapses this
 * column at viewport widths ≤ 1024px (the WPBakery tablet breakpoint),
 * so we scope the override to ≥ 1025px to match prod across breakpoints.
 *
 * If the popup is ever removed from the page or the page is re-built in
 * the WPBakery editor, this rule becomes a harmless no-op (no matching
 * `.vc_col-sm-12` inside `body.home section.hero`).
 * ---------------------------------------------------------------------------*/
@media (min-width: 1025px) {
	body.home section.l-section.hero .vc_col-sm-12 .vc_column-inner {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}