/*
Theme Name: Colorado Accident Help
Theme URI: https://coloradoaccidenthelp.com
Description: Child theme of Hello Elementor for Colorado Accident Help. The design system, components and application logic live in the CO Core plugin so they survive theme changes. Keep this child theme thin.
Author: Colorado Accident Help
Template: hello-elementor
Version: 1.4.0
License: GNU General Public License v2 or later
Text Domain: co
*/

/* -------------------------------------------------------------------------
 * Heading type scale, realigned to calaccidenthelp.com.
 *
 * Colorado's heading ramp had drifted about 4% smaller than California's,
 * with leading about 2% tighter, while body, button, caption, eyebrow, nav
 * and small text matched exactly. The effect was a page that read as subtly
 * flatter than the reference site without any single thing looking wrong.
 *
 * These are California's values, token for token. Only the nine that had
 * drifted are restated; every other type token already matched and is left
 * to CO Core.
 *
 * The doubled :root is deliberate. CO Core declares these at :root in
 * tokens.css, and stylesheet order between a plugin and a child theme is not
 * guaranteed. (0,2,0) wins on specificity rather than on load order, so this
 * holds however the two files end up sequenced.
 * ------------------------------------------------------------------------- */

:root:root {
	--co-fs-display: clamp(2.625rem, 1.55rem + 4.3vw, 4.25rem);
	--co-fs-h1:      clamp(2.125rem, 1.45rem + 2.7vw, 3.25rem);
	--co-fs-h2:      clamp(1.75rem, 1.32rem + 1.7vw, 2.375rem);
	--co-fs-h3:      clamp(1.375rem, 1.16rem + 0.85vw, 1.75rem);
	--co-fs-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--co-fs-body-lg: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);

	--co-lh-heading: 1.24;
	--co-lh-snug:    1.2;
	--co-lh-tight:   1.08;
}


/* -------------------------------------------------------------------------
 * Split section headers - the California treatment.
 *
 * calaccidenthelp.com runs its section headers as two columns on desktop:
 * the eyebrow and heading hold the left column, the intro sits beside them
 * on the right, and the pair spans the full container. Colorado stacked the
 * intro under the heading inside a 64ch column, which left the right half of
 * every section empty and made the whole page read as one narrow left-hand
 * strip. That is the difference you notice immediately at desktop width.
 *
 * California implements this per section, with rules keyed to individual
 * Elementor element ids inside 166KB of kit CSS. Those ids do not exist on
 * this site and would not survive a widget being rebuilt, so this is a
 * modifier on the widget instead: set Layout to Split on any section header
 * and it gets the same geometry.
 *
 * The ratio, gap and baseline alignment are California's values.
 * ------------------------------------------------------------------------- */

@media (min-width: 901px) {

	.co-section-header--split {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
		column-gap: clamp(32px, 5vw, 88px);
		align-items: end;
	}

	.co-section-header--split > .co-eyebrow {
		grid-column: 1;
		grid-row: 1;
	}

	.co-section-header--split > .co-section-header__title {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
		text-wrap: balance;
	}

	/* The intro sits on the heading's last baseline rather than its top, which
	   is what keeps the two columns looking set rather than merely adjacent. */
	.co-section-header--split > .co-section-header__intro {
		grid-column: 2;
		grid-row: 2;
		margin-bottom: 0;
		max-width: 46ch;
	}

	.co-section-header--split > .co-link {
		grid-column: 2;
		grid-row: 3;
		justify-self: start;
		margin-top: var(--co-space-4, 16px);
	}
}

/* Below 901px the modifier does nothing and the header stacks, which is the
   same breakpoint California uses. */


/* -------------------------------------------------------------------------
 * Centre the section containers.
 *
 * THE bug behind the page reading as one left-hand strip on a wide screen.
 *
 * Every section wraps its content in an element carrying .co-container, which
 * caps the width (1264px here). But that element sits inside an Elementor
 * flex container, and it had margin-left and margin-right of 0. A flex item
 * with a max-width and no auto margin sits at the start of the line, so at
 * 1920px the content occupied x=0..1264 and left roughly 660px of empty space
 * down the right-hand side of every section. calaccidenthelp.com centres the
 * same container, which is why its sections sit in the middle of the page.
 *
 * margin-inline: auto centres a flex item as well as a block one, so this is
 * correct whichever way the parent is laid out. It is scoped to the container
 * itself and cannot affect anything that is deliberately full-bleed, which
 * matters on this site - the sections are meant to span the full width, it is
 * only their inner content that is capped and needs centring.
 * ------------------------------------------------------------------------- */

.co-container,
.co-container--wide,
.elementor-element.co-container,
.elementor-element.co-container--wide {
	/* Elementor flex containers build their margin from these custom
	   properties, which default to 0. Setting them is the framework's own
	   route to an auto margin and avoids fighting its shorthand. */
	--margin-left: auto;
	--margin-right: auto;
	--margin-inline-start: auto;
	--margin-inline-end: auto;
	margin-inline: auto;
}