/* ==========================================================================
   global.css -- site-wide base + shared components (build/components.py).
   Owner: header/footer/components builder. Colours only via Elementor's kit
   variables (--e-global-color-<id>, ids from build/brand.json) -- no hex here.
   ========================================================================== */

/* Smooth scrolling only once the page has loaded (assets/js/global.js adds .ac-smooth).
   Set from the start, Chrome animates a deep link (/#track) towards an offset measured
   before webfonts reflow the page and lands ~50px past the target. */
html.ac-smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.ac-smooth { scroll-behavior: auto; } }

body {
	background-color: var(--e-global-color-white);
	color: var(--e-global-color-text);
}

/* Anchor targets clear nothing sticky today, but keep a little air above them. */
[id] { scroll-margin-top: 16px; }

/* --- links (Hello's reset paints them #c36 / hover #336) ----------------- */
a { color: var(--e-global-color-accent); }
a:hover, a:active { color: var(--e-global-color-secondary); }
a:visited { text-decoration: none; }

/* --- retire Hello Elementor's pink buttons -------------------------------
   reset.css: `[type=button],[type=submit],button{border:1px solid #c36;color:#c36}`
   and `[type=button]:hover,...{background-color:#c36;color:#fff}` -- (0,2,0).
   Base below is (0,1,1), hover/focus (0,2,1). .elementor-button is excluded via
   :where() (no specificity cost) so Elementor's own button styling is untouched.
   PAGE CSS FOR A CUSTOM <button>: scope it, e.g. `body.page-slug-x .ac-y` (base)
   and `body.page-slug-x .ac-y:hover` (0,3,1) -- a lone `.ac-y:hover` loses. */
body :is(button, [type=button], [type=submit]):where(:not(.elementor-button)) {
	border-color: currentColor;
	color: inherit;
}
body :is(button, [type=button], [type=submit]):where(:not(.elementor-button)):is(:hover, :focus) {
	background-color: transparent;
	color: inherit;
}
:is(button, [type=button], [type=submit], a):focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

/* --- layout -------------------------------------------------------------- */
/* theme.inner(): the 1232px content box inside a theme.shell() section. */
.ac-inner {
	max-width: 1232px;
	margin-left: auto;
	margin-right: auto;
}

/* Flex children otherwise refuse to shrink below their content (min-width:auto)
   and push long words out of their column on a phone. */
.ac-shrink { min-width: 0; }

/* Text-editor widgets: Hello gives <p> a .9rem bottom margin, which makes every
   copy block ~14px taller than the design. Paragraph spacing inside multi-
   paragraph copy is kept. */
.ac-text p:last-child { margin-bottom: 0; }
.ac-text p { margin-top: 0; }

/* --- Eyebrow (bar variant: page hero) ------------------------------------ */
.ac-eyebrow--bar .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ac-eyebrow--bar .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 32px;
	height: 3px;
	background: var(--e-global-color-primary);
}

/* --- Page hero breadcrumb ------------------------------------------------- */
.ac-crumbs__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-crumbs a { color: inherit; }
.ac-crumbs a:hover { color: var(--e-global-color-white); text-decoration: underline; }
.ac-crumbs__current { color: var(--e-global-color-white); }
/* Touch: 44px hit area round each crumb link without moving anything. */
@media (max-width: 1024px) {
	.ac-crumbs a { display: inline-block; padding: 11px 6px; margin: -11px -6px; }
}

.ac-hero__photo img { display: block; }

/* --- Check list: keep the tick aligned to the first line on wrap --------- */
.ac-checks .elementor-icon-list-icon { align-self: flex-start; padding-top: .3em; }

/* --- Feature cards ---------------------------------------------------------
   Grid items stretch to the row height; the card's own flex column then needs
   to fill it so borders line up across a row. */
.ac-feature-grid > .ac-feature-card { height: 100%; }

/* CTA band: copy column is flex 0 1 700px (components: _flex_size shrink) -- it gives way
   to the buttons between 1025 and ~1300 rather than pushing the page wide. */
.ac-cta-band__copy { min-width: 0; }
.ac-icon-tile .elementor-icon { display: inline-flex; }

/* components.box(hug=True): nested containers default to --width:100%. */
.e-con.ac-hug { --width: auto; }

/* components.fill(): take the rest of a row beside fixed-width siblings. Row layout
   only exists on desktop here; below 1025 these rows stack, and the column just fills. */
.e-con.ac-fill { --width: auto; }
@media (min-width: 1025px) { .e-con.ac-fill { flex: 1 1 0%; } }

/* --- Page hero 1025-1279: stack the lead under the title ---------------------
   Side by side, the fixed 460px lead squeezed the 64px H1 to 5-8 lines at 1025.
   Same stacking as tablet; 1280+ keeps the Figma layout. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.ac-page-hero__intro { flex-direction: column !important; align-items: flex-start !important; --gap: 24px; gap: 24px; }
	.ac-page-hero__intro > .ac-fill { flex: none; width: 100%; }
	.ac-page-hero__intro > .ac-page-hero__lead { --width: 100%; max-width: 720px; }
}

/* --- Skip link target (site plugin wraps page content in <main id="content">) */
.ac-main:focus { outline: none; }

/* --- Form fields: visible focus on every Elementor Pro form ------------------
   Elementor writes field borders with a generated (0,6,0) selector, so page-level
   :focus rules lost. !important on just these declarations (vendor CSS, per skill). */
.elementor-form .elementor-field-group .elementor-field:focus,
.elementor-form .elementor-field-group .elementor-field-textual:focus,
.elementor-form .elementor-field-group select:focus {
	border-color: var(--e-global-color-secondary) !important;
	box-shadow: 0 0 0 3px var(--e-global-color-navy300) !important;
	outline: none !important;
}

/* --- Focus on red surfaces: the red ring disappears on red ---------------- */
.ac-cta-band :is(a, button, [tabindex]):focus-visible,
.acs-testi :is(a, button, [tabindex]):focus-visible,
.ac-on-red :is(a, button, [tabindex]):focus-visible {
	outline-color: var(--e-global-color-white);
}