/*
 * Color More Lines — WordPress bridge layer.
 *
 * Two jobs, and nothing else:
 *
 *   1. Define the responsive custom properties that theme.json references.
 *      These MUST be declared per breakpoint. Below 1024px the root font size
 *      is the browser default (1rem = 16px); at and above 1024px root.css sets
 *      `html { font-size: 0.5208333333vw }` so 1rem = 10px at the 1920px design
 *      width. A single rem value would therefore mean two very different sizes
 *      on either side of that breakpoint — hence the explicit media query.
 *
 *   2. Map core Gutenberg blocks onto the delivered design system, so pages the
 *      client builds from core blocks inherit the same look as the ACF blocks.
 *
 * Load order matters: this file must be enqueued AFTER style.css and after the
 * core block library styles.
 */

/* ------------------------------------------------------------------------- *
 * 1. Responsive tokens consumed by theme.json
 * ------------------------------------------------------------------------- */

:root {
	/* Layout widths — full-bleed on mobile, matching .container above. */
	--cml-content: 100%;
	--cml-wide: 100%;

	/* Spacing scale. Mobile values are fixed px, by design. */
	--cml-space-1: 8px;
	--cml-space-2: 16px;
	--cml-space-3: 24px;
	--cml-space-4: 32px;
	--cml-space-5: 48px;
	--cml-space-6: 60px;
	--cml-space-7: 80px;

	/*
	 * Type scale tokens.
	 *
	 * style.css writes these sizes as literals on the .title-* / .text-*
	 * classes — there were no custom properties for them. These tokens mirror
	 * those literals exactly so theme.json can expose the same scale to the
	 * editor without duplicating values, and so the preset classes WordPress
	 * generates can be aliased onto the design classes further down.
	 *
	 * If a size changes in style.css, change it here in both breakpoints.
	 */
	--fs-title-xl: 48px;
	--fs-title-lg: 36px;
	--fs-title-l: 36px;
	--fs-title-m: 40px;
	--fs-title-sm: 32px;
	--fs-text-xl: 21px;
	--fs-text-lg: 20px;
	--fs-text-m: 18px;
	--fs-body: var(--base-font-size);
}

@media (min-width: 1024px) {
	:root {
		/*
		 * contentSize is a prose measure — 1200px at the 1920px design width.
		 * wideSize matches .container--md (168rem), the widest container the
		 * design actually uses. Plain .container is max-width:none above 1024px
		 * and relies on --container-pad, which theme.json applies as root
		 * padding, so alignfull blocks land in the same gutter as designed
		 * sections.
		 */
		--cml-content: 120rem;
		--cml-wide: 168rem;

		--cml-space-1: 0.8rem;
		--cml-space-2: 1.6rem;
		--cml-space-3: 2.4rem;
		--cml-space-4: 3.2rem;
		--cml-space-5: 4.8rem;
		--cml-space-6: 10rem;
		--cml-space-7: 14rem;

		--fs-title-xl: 18.4rem;
		--fs-title-lg: 15rem;
		--fs-title-l: 14rem;
		--fs-title-m: 10rem;
		--fs-title-sm: 8rem;
		--fs-text-xl: 5rem;
		--fs-text-lg: 3.6rem;
		--fs-text-m: 3.2rem;
	}
}

/* ------------------------------------------------------------------------- *
 * 1b. Preset class aliases
 * ------------------------------------------------------------------------- *
 * theme.json generates .has-{slug}-font-size for each preset. Alias each onto
 * the design's own class so markup authored by hand (.title-l) and markup
 * authored in the editor (.has-title-l-font-size) resolve identically.
 *
 * NOTE: .title-l and .title-lg are different sizes and always have been. That
 * naming is a trap inherited from style.css. Do not "fix" it — style.css is
 * vendor-supplied and renaming would fork it.
 */

.has-title-xl-font-size { font-size: var(--fs-title-xl); }
.has-title-lg-font-size { font-size: var(--fs-title-lg); }
.has-title-l-font-size  { font-size: var(--fs-title-l); }
.has-title-m-font-size  { font-size: var(--fs-title-m); }
.has-title-sm-font-size { font-size: var(--fs-title-sm); }
.has-text-xl-font-size  { font-size: var(--fs-text-xl); }
.has-text-lg-font-size  { font-size: var(--fs-text-lg); }
.has-text-m-font-size   { font-size: var(--fs-text-m); }
.has-body-font-size     { font-size: var(--fs-body); }

/* Background presets alias onto the design's section treatments. */
.has-primary-background-color { background-color: var(--brand-color); }
.has-charcoal-background-color,
.has-near-black-background-color { color: #fff; --heading-color: #fff; }

/* ------------------------------------------------------------------------- *
 * 2. Core block mapping
 * ------------------------------------------------------------------------- */

/* The delivered markup wraps everything in .wrapper — a full-height flex
   column that keeps the footer at the bottom on short pages. Block themes
   emit .wp-site-blocks in that position, so it inherits the same job. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	position: relative;
}

.wp-site-blocks > .main {
	flex: 1 0 auto;
}

/*
 * Full-bleed breakout is handled by core, not here.
 *
 * theme.json sets useRootPaddingAwareAlignments: true and puts
 * var(--container-pad) in styles.spacing.padding, so core gives constrained
 * containers .has-global-padding and lets .alignfull children escape it with
 * negative margins. Do not add competing padding rules for .alignfull — they
 * fight core's margins and produce a double gutter.
 *
 * ACF section blocks declare "align": ["full"] and set alignfull, which is what
 * puts them edge to edge while prose stays at contentSize.
 */

/* --- Buttons: mirror .btn / .btn--primary ------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: "Sora", "Arial", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1;
	font-weight: 800;
	padding: 8px 30px;
	border: none;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	background-color: #6fcf97;
	color: #fff;
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

@media (min-width: 1024px) {
	.wp-block-button__link {
		font-size: max(15px, 1.5rem);
	}
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: #50ac76;
	color: #fff;
}

/* Outline variant follows the design's white button. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: #fff;
	color: #246840;
	border: 1px solid currentColor;
}

/* On the dark section backgrounds the design flips button text to charcoal. */
.bg-dark .wp-block-button__link,
.bg-gray .wp-block-button__link,
.has-charcoal-background-color .wp-block-button__link,
.has-near-black-background-color .wp-block-button__link {
	color: #333;
}

/* --- Registered block styles ------------------------------------------- *
 * Each maps a .is-style-* onto the delivered design class. Registered in
 * inc/blocks.php; if you add one there, add its rule here or it does nothing.
 */

/* .btn--white */
.wp-block-button.is-style-cml-white > .wp-block-button__link {
	background-color: #fff;
	color: #246840;
}

.wp-block-button.is-style-cml-white > .wp-block-button__link:hover,
.wp-block-button.is-style-cml-white > .wp-block-button__link:focus {
	background-color: #50ac76;
	color: #fff;
}

/* .btn--border */
.wp-block-button.is-style-cml-border > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid #333;
	color: #333;
}

.wp-block-button.is-style-cml-border > .wp-block-button__link:hover,
.wp-block-button.is-style-cml-border > .wp-block-button__link:focus {
	background-color: #333;
	color: #fff;
}

/* .btn--arrow — the gap the inline arrow SVG sits in. */
.wp-block-button.is-style-cml-arrow > .wp-block-button__link {
	gap: 6px;
}

/* .btn--lg exists only above 1024px in the source; match that exactly. */
@media (min-width: 1024px) {
	.wp-block-button.is-style-cml-arrow > .wp-block-button__link {
		gap: max(6px, 0.6rem);
	}

	.wp-block-button.is-style-cml-lg > .wp-block-button__link {
		font-size: 3.5rem;
		padding: 1.6rem 3.5rem;
		gap: 1.2rem;
	}
}

/* .divider — negative top margin pulls it into the preceding section. */
.wp-block-separator.is-style-cml-divider {
	margin-top: calc(var(--section-py, var(--cml-space-6)) * -1);
	margin-bottom: var(--section-py, var(--cml-space-6));
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.18;
}

/* .overline — a pill badge, not a text style. */
.wp-block-heading.is-style-cml-overline {
	display: block;
	font-size: 15px;
	line-height: 1.27;
	padding: 6px 20px;
	font-weight: 800;
	color: #fff;
	min-width: 153px;
	width: fit-content;
	text-align: center;
	background-color: #333;
	border-radius: 80px;
	/*
	 * Constrained layout gives every child `margin-left: auto; margin-right:
	 * auto`, which centres a fit-content box. In the design this badge sits at
	 * the start of a flex column, so pin the inline start margin back to 0 and
	 * let the end margin stay auto.
	 */
	margin-inline: 0 auto;
	margin-bottom: 16px;
}

.bg-gray .wp-block-heading.is-style-cml-overline,
.has-charcoal-background-color .wp-block-heading.is-style-cml-overline {
	background-color: #fff;
	color: #333;
}

/* .cml-section — the design's vertical section rhythm on a plain group. */
.wp-block-group.is-style-cml-section {
	padding-top: var(--cml-space-6);
	padding-bottom: var(--cml-space-6);
}

/* --- Prose links -------------------------------------------------------- *
 * style.css sets `a { color: inherit; text-decoration: none }` globally,
 * because every link in the comps gets its appearance from a component class
 * (.menu__link, .btn, .row-list__action…). root.css defines --base-link-color
 * but nothing ever consumes it.
 *
 * That leaves an editorial link inside post content visually identical to the
 * text around it — colour alone is not even available as a cue, let alone a
 * sufficient one. That is a WCAG 1.4.1 failure, so the token is put to work
 * here, scoped to content only. Buttons and any block that styles its own
 * links are excluded.
 *
 * This lives in the bridge rather than theme.json because theme.json's element
 * styles are emitted in global-styles-inline-css, which loads BEFORE
 * style.css — so a link colour set there loses to `a { color: inherit }`.
 */

.entry-content a:where(:not(.wp-element-button):not([class*="wp-block-"])),
.wp-block-post-content a:where(:not(.wp-element-button):not([class*="wp-block-"])) {
	color: var(--base-link-color);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.entry-content a:where(:not(.wp-element-button):not([class*="wp-block-"])):hover,
.wp-block-post-content a:where(:not(.wp-element-button):not([class*="wp-block-"])):hover {
	text-decoration: none;
}

/* On the dark bands the link blue fails contrast; use the brand green. */
.has-charcoal-background-color a:where(:not(.wp-element-button)),
.has-near-black-background-color a:where(:not(.wp-element-button)),
.bg-dark a:where(:not(.wp-element-button)),
.bg-gray a:where(:not(.wp-element-button)) {
	color: var(--brand-color);
}

/* --- Lists: apply the design's .list treatment by default -------------- *
 * Not a block style — prose lists should look right without the client
 * having to pick anything.
 */

.wp-block-list {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--cml-space-3);
	padding-left: 0;
	list-style: none;
}

.wp-block-list:last-child {
	margin-bottom: 0;
}

.wp-block-list > li {
	position: relative;
	padding-left: 28px;
}

.wp-block-list > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 6px;
	margin-left: 10px;
	margin-top: 0.6em;
	background-color: currentColor;
	border-radius: 50%;
}

/* Ordered lists keep their numbers — the dot treatment is for bullets only. */
.wp-block-list:where([type="1"], [type="a"], [type="A"], [type="i"], [type="I"]),
ol.wp-block-list {
	list-style: decimal;
	padding-left: 1.4em;
}

ol.wp-block-list > li {
	padding-left: 0;
}

ol.wp-block-list > li::before {
	content: none;
}

/* --- Quote: mirror .quote ---------------------------------------------- */

.wp-block-quote {
	font-family: "Avenir", Georgia, serif;
	font-style: italic;
	border-left: 3px solid #6fcf97;
	padding-left: var(--cml-space-3);
	margin-left: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--cml-space-2);
	font-family: "Sora", sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: var(--h6);
	color: #6fcf97;
}

/* --- Separator: mirror .divider ---------------------------------------- */

.wp-block-separator {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.18;
	margin-block: var(--cml-space-5);
}

/* --- Lists -------------------------------------------------------------- */

.wp-block-list {
	padding-left: 1.2em;
}

.wp-block-list li {
	margin-bottom: var(--cml-space-1);
}

/* --- Columns ------------------------------------------------------------ */

.wp-block-columns {
	gap: var(--cml-space-4);
}

/* --- Images ------------------------------------------------------------- */

.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-block-image.is-style-rounded img,
.wp-block-image .is-style-cml-rounded img {
	border-radius: 20px;
}

/* --- Details / disclosure ---------------------------------------------- *
 * style.css carries an old normalize block that sets `summary { display:
 * block }` for IE 10/11. A <summary> only paints its disclosure triangle at
 * `display: list-item`, so core/details renders with no affordance at all —
 * the client sees a heading that happens to be clickable.
 *
 * Rather than restoring the browser default, this mirrors the design's own
 * accordion toggle (.accordion-details__toggle): a 22px brand-green disc with
 * a chevron that points down when closed and up when open. The chevron is the
 * same path used in the delivered markup.
 */

.wp-block-details {
	border-bottom: 1px solid rgba(51, 51, 51, 0.12);
	padding-bottom: var(--cml-space-2);
	margin-bottom: var(--cml-space-2);
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cml-space-2);
	cursor: pointer;
	font-weight: 800;
	list-style: none;
}

/* Both are needed: the pseudo-element for WebKit, list-style for the rest. */
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #6fcf97;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 8" fill="%23333"><path d="M12.6195 6.16992C12.9899 6.54025 12.9899 7.14139 12.6195 7.51172C12.2492 7.88204 11.6481 7.88204 11.2777 7.51172L6.44864 2.68262L1.61954 7.51172C1.24922 7.88204 0.648068 7.88204 0.277744 7.51172C-0.0925812 7.14139 -0.0925812 6.54025 0.277744 6.16992L6.44864 0L12.6195 6.16992Z"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 8px;
	/* Closed points down; the source chevron points up, so rotate it. */
	transform: rotate(180deg);
	transition: transform 0.25s ease;
}

.wp-block-details[open] > summary::after {
	transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::after {
		transition: none;
	}
}

/* --- Tables ------------------------------------------------------------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--cml-space-2) var(--cml-space-3);
	border-bottom: 1px solid rgba(51, 51, 51, 0.12);
	text-align: left;
}

.wp-block-table th {
	font-weight: 800;
}

/* --- Groups carrying a palette background get the design's section rhythm - */

.wp-block-group.has-background {
	padding-top: var(--cml-space-6);
	padding-bottom: var(--cml-space-6);
}

/*
 * A background group that is NOT full-width still needs its own horizontal
 * inset.
 *
 * Core zeroes horizontal padding on any nested .has-global-padding that is not
 * .alignfull, to stop the gutter being applied twice. That is right for a
 * transparent wrapper — the outer container already provides the gutter — but
 * a group with a background has visible edges of its own, so the rule leaves
 * text sitting flush against the colour.
 *
 * In this design, colour bands are full-bleed; patterns that carry one set
 * align:full and are excluded from core's rule. This is the safety net for a
 * client who adds a background group without setting full width.
 *
 * Specificity here (0,3,0) deliberately beats core's (0,1,0) so load order
 * cannot change the outcome.
 */
.wp-block-group.has-background:not(.alignfull) {
	padding-left: var(--cml-space-4);
	padding-right: var(--cml-space-4);
}

/* Dark palette backgrounds are handled in §1b alongside the other preset
   aliases, so the mapping lives in one place. */