/**
 * Legacy block pages under sequoia-v2.
 *
 * A handful of published pages were never migrated to the relaunch component
 * set. Their stored bodies still carry `sequoia/two-columns`, `sequoia/column`
 * and `sequoia/accordion` markup, plus colour and font-size preset classes
 * (`primary-1`, `tertiary-4`, `green`, `has-large-font-size`, ...) that belong
 * to a theme.json this theme no longer ships. WordPress emits no rule at all
 * for an undefined preset, so those classes are inert: tinted bands render
 * white, and `has-white-color` text on a would-be dark band renders white on
 * white -- invisible, not merely unstyled.
 *
 * This file makes those pages read as part of the v2 site. It is not a
 * restoration of the old design: legacy palette slugs are re-pointed at v2
 * tokens rather than at their original teal values, so the pages inherit the
 * current brand instead of reintroducing a retired one.
 *
 * SCOPING. Two mechanisms, both chosen so nothing here can reach a relaunch
 * page:
 *   1. Legacy-only class names (`wp-block-sequoia-*`, `sequoia-accordion-*`,
 *      and the dead preset slugs). A relaunch page carries none of them --
 *      the slugs in particular cannot collide, because v2's palette has no
 *      `primary-*`, `secondary-*`, `tertiary-*` or `green` entry.
 *   2. `.entry-content:has(.wp-block-sequoia-column)` for rules that would
 *      otherwise touch core blocks. The gate is the legacy markup itself,
 *      not a body class or a page ID, so it survives a slug change and does
 *      not need a list to be kept up to date.
 */

/* ---------------------------------------------------------------------------
 * 1. Retired palette slugs -> current v2 tokens.
 *
 * The mapping preserves each slug's ROLE (dark band, light band, accent
 * surface), not its old hue. `tertiary` was a dark band carrying white text,
 * so it must stay dark or that text disappears.
 * ------------------------------------------------------------------------ */

.has-primary-1-background-color { background-color: var(--sq-green, #3f6d3f); }
.has-primary-1-color { color: var(--sq-ink, #17160f); }

/* `primary-2` is the wide surface behind body copy in every alternating
   image/text row. It has to work under dark text, so it maps to cream. */
.has-primary-2-background-color { background-color: var(--sq-cream, #f6f4ee); }
.has-primary-3-background-color { background-color: var(--sq-cream, #f6f4ee); }

/* `tertiary` = full-bleed dark band. */
.has-tertiary-background-color { background-color: var(--sq-green, #3f6d3f); }
.has-tertiary-4-background-color { background-color: var(--sq-cream, #f6f4ee); }
.has-green-background-color { background-color: var(--sq-sage-wash, #eef3ec); }

/* A dark band's white text is inherited by everything inside it, including a
   nested legacy column that carries its own light surface. Drop that column's
   surface rather than the band's, so the band stays one continuous colour. */
.has-tertiary-background-color .wp-block-sequoia-column.has-primary-2-background-color {
	background-color: transparent;
}
.has-tertiary-background-color.has-white-color,
.has-tertiary-background-color.has-white-color :is(h1, h2, h3, h4, h5, h6, p, li, strong, em) {
	color: var(--sq-white, #fff);
}

/* `secondary-1` is deliberately NOT mapped. It only ever appears on buttons,
   where leaving it inert lets the v2 `.wp-element-button` treatment win --
   which is the treatment these pages should have. Defining it would repaint
   every CTA in a retired accent. */

/* ---------------------------------------------------------------------------
 * 2. Retired font-size presets. v2's theme.json declares no fontSizes at all,
 *    so these classes currently do nothing and every sized element collapses
 *    to body size.
 * ------------------------------------------------------------------------ */

.entry-content:has(.wp-block-sequoia-column) .has-small-font-size { font-size: 1rem; }
.entry-content:has(.wp-block-sequoia-column) .has-normal-font-size { font-size: 1.125rem; }
.entry-content:has(.wp-block-sequoia-column) .has-large-font-size { font-size: 1.5rem; }
.entry-content:has(.wp-block-sequoia-column) .has-extra-large-font-size {
	font-family: var(--sq-font-display, "Montserrat", Arial, sans-serif);
	/* The source value was 2.375rem. Capped lower because the slug's busiest
	   call site is a dollar range inside a three-up card, where 2.375rem wraps
	   to two lines and outshouts the payout figure it is labelling. */
	font-size: clamp(1.375rem, 2.2vw, 1.625rem);
	font-weight: 700;
	line-height: 1.15;
}

/* ---------------------------------------------------------------------------
 * 3. Containment. Legacy pages lean on `alignfull` groups as coloured bands,
 *    but those groups have no constrained layout, so their headings and
 *    paragraphs run edge-to-edge on a 1440px viewport while the rest of the
 *    site sits in a 1180px shell.
 * ------------------------------------------------------------------------ */

/* `alignwide` gets its width from the theme but no centring, so a legacy
   page's wide groups sit hard against the left edge of a 1440px viewport. */
.entry-content:has(.wp-block-sequoia-column) .alignwide {
	max-width: var(--sq-shell-width, 1180px);
	margin-inline: auto;
}

.entry-content:has(.wp-block-sequoia-column) .wp-block-group.alignfull > .alignwide,
.entry-content:has(.wp-block-sequoia-column) .wp-block-group.alignfull
	> :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, .wp-block-columns, .wp-block-buttons, .wp-block-group:not(.alignfull)) {
	max-width: var(--sq-shell-width, 1180px);
	margin-inline: auto;
}

/* Tinted bands need breathing room or the colour hugs the text. Bands whose
   only child is a full-bleed two-columns keep their own edge-to-edge look,
   because the column block supplies its own padding. */
.entry-content:has(.wp-block-sequoia-column) .wp-block-group.alignfull.has-background {
	/* Held in a custom property because the bleed rule below has to cancel it
	   exactly. Recomputing the same expression in both places drifts the moment
	   one of them is overridden -- which is what the mobile block does. */
	--legacy-band-pad: max(24px, calc((100% - var(--sq-shell-width, 1180px)) / 2));
	padding-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: var(--legacy-band-pad);
}
.entry-content:has(.wp-block-sequoia-column) .wp-block-group.alignfull.has-background
	> .wp-block-sequoia-two-columns:only-child {
	margin-inline: calc(-1 * var(--legacy-band-pad));
	width: auto;
}

/* ---------------------------------------------------------------------------
 * 4. Legacy card block styles. Registered as block style variations by the
 *    blocks plugin, but their CSS lived in the retired theme.
 * ------------------------------------------------------------------------ */

.entry-content:has(.wp-block-sequoia-column) .is-style-sequoia-shadow-2 {
	background-color: var(--sq-white, #fff);
	border: 1px solid var(--sq-line, #e3dfd3);
	box-shadow: 0 2px 12px rgba(23, 22, 15, 0.06);
}
.entry-content:has(.wp-block-sequoia-column) .is-style-sequoia-border-dark {
	border-color: var(--sq-ink, #17160f);
}

/* ---------------------------------------------------------------------------
 * 5. The `turf-types` card row on /artificial-turf-installers/. Source images
 *    are 1140x540 but the markup constrains nothing, so a card whose image
 *    fails to load collapses and the row loses its grid.
 * ------------------------------------------------------------------------ */

.entry-content:has(.wp-block-sequoia-column) .wp-block-columns.turf-types { gap: 24px; }
.entry-content:has(.wp-block-sequoia-column) .turf-type-card .wp-block-image { margin: 0; }
.entry-content:has(.wp-block-sequoia-column) .turf-type-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-color: var(--sq-line, #e3dfd3);
}
.entry-content:has(.wp-block-sequoia-column) .turf-type-card h3 {
	margin-top: 0.75rem;
	font-size: 1.25rem;
}

/* Ordinary images inside core columns, which the legacy pages use for content
   grids. Explicitly NOT `.wp-block-sequoia-column .wp-block-image img`: the
   blocks plugin sets height on those for its stretch-image modes. */
.entry-content:has(.wp-block-sequoia-column) .wp-block-column .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 6. Accordion. The blocks plugin ships the structural CSS; what is missing is
 *    the numbering chip's surface (it uses the dead `primary-1` slug) and the
 *    text treatment that made it read as a step marker.
 * ------------------------------------------------------------------------ */

/* The numeral is marked up as an <h2>, so the theme's heading colour beats
   anything inherited from the chip -- it has to be set on the element. */
.sequoia-accordion-title-numbering.has-primary-1-background-color,
.sequoia-accordion-title-numbering.has-primary-1-background-color :is(h1, h2, h3, h4, div) {
	color: var(--sq-white, #fff);
}
.sequoia-accordion .sequoia-accordion-title-numbering-main,
.sequoia-accordion .sequoia-accordion-title-main {
	font-family: var(--sq-font-display, "Montserrat", Arial, sans-serif);
	font-weight: 700;
}
/* The plugin sets the numeral to 2rem over a 1.5rem line box, which only ever
   worked because the chip had no surface to clip against. Give it one and the
   descender-less digits still get cut; restore a real line box. */
.sequoia-accordion .sequoia-accordion-title-numbering-main {
	line-height: 1.1;
	margin: 0;
}
.sequoia-accordion.sequoia-accordion-bar .sequoia-accordion-title-numbering {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.75rem 0.5rem;
}
.sequoia-accordion .sequoia-accordion-title-numbering-secondary {
	font-family: var(--sq-font-mono, "IBM Plex Mono", "Courier New", monospace);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}
.sequoia-accordion .sequoia-accordion-title-main { font-size: clamp(1.125rem, 2vw, 1.4rem); }
.sequoia-accordion .sequoia-accordion-content {
	color: var(--sq-body, #3f3d34);
	padding: 0 2rem 2rem;
}
.sequoia-accordion .sequoia-accordion-title:hover { background-color: var(--sq-cream, #f6f4ee); }

/* ---------------------------------------------------------------------------
 * 7. Mobile. Only some legacy two-columns blocks were authored with a
 *    `breakpoint-*` class, so the rest keep a 50/50 split at 390px and render
 *    body copy one word per line. Stack every legacy row instead of relying on
 *    an attribute the editor may never have set.
 * ------------------------------------------------------------------------ */

@media screen and (max-width: 900px) {
	.wp-block-sequoia-two-columns.direction-horizontal { flex-direction: column; }
	.wp-block-sequoia-column {
		flex-basis: auto;
		width: 100%;
	}
	.wp-block-sequoia-column > .inner {
		max-width: 100%;
		margin: 0;
		padding: 2.5rem 1.25rem !important;
	}
	.wp-block-sequoia-column.image-column > .inner {
		height: auto !important;
		padding: 0 !important;
	}
	.wp-block-sequoia-column.image-column .wp-block-image,
	.wp-block-sequoia-column.image-column .wp-block-image img {
		height: auto;
		width: 100%;
	}
	/* The decorative offset block behind an image column is positioned for a
	   side-by-side row; stacked, it only paints a stripe over the photo. */
	.wp-block-sequoia-column.bg-color-control::before { display: none; }

	/* Wide groups lose their gutter once max-width exceeds the viewport, so
	   body copy runs into the screen edge. */
	.entry-content:has(.wp-block-sequoia-column) .alignwide {
		padding-inline: 1.25rem;
	}
	.entry-content:has(.wp-block-sequoia-column) .wp-block-group.alignfull.has-background {
		--legacy-band-pad: 1.25rem;
	}
	.entry-content:has(.wp-block-sequoia-column) .wp-block-columns.turf-types { gap: 1.5rem; }
	.sequoia-accordion .sequoia-accordion-content { padding: 0 1.25rem 1.5rem; }
}