/*
 * theme.css — MARKED EXCEPTIONS ONLY.
 *
 * work-flow.md: block style attributes + theme.json express almost the entire paint surface. CSS is
 * for the things a block genuinely cannot say. Every rule below names WHY it is here; anything a
 * block could express belongs on the block, not in this file.
 */

/* ── EXCEPTION 1: full-bleed sections must sit flush (Gutenberg #51242) ───────────────────────
 * WordPress applies the theme.json blockGap between top-level blocks, which puts a gap between
 * adjacent full-bleed sections. There is no block attribute for "no gap to my sibling".
 */
/* css-allow: Gutenberg #51242: theme.json blockGap inserts a gap between adjacent full-bleed sections and no block attribute suppresses it */
.wp-site-blocks > .alignfull {
	margin-top: 0;
	margin-block-start: 0;
}

/* ── EXCEPTION 2: card surface + shadow ──────────────────────────────────────────────────────
 * The source draws feature / testimonial / pricing items as white cards with a soft shadow.
 * core/column has no shadow support in this WP, so the elevation cannot live on the block. The
 * COLOURS still come from theme.json presets, so the palette stays single-sourced.
 */
/* css-allow: elevation. box-shadow and border-radius have no block attribute or theme.json preset
   in this WP for core/column, so they cannot be moved onto the block. Background and padding CAN
   be, and were — they are set on the block in gen-specs.mjs, not here. */
.feature-card,
.testimonial-card,
.pricing-card {
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba( 32, 32, 32, 0.06 );
	height: 100%;
}

/* The middle pricing plan is the highlighted one in the source. */
.pricing__grid > .wp-block-column:nth-child( 2 ) .pricing-card,
.pricing__grid > .wp-block-column:nth-child( 2 ) {
	border: 1px solid var( --wp--preset--color--accent );
}

/* ── EXCEPTION 3: list markers the source draws as icons ─────────────────────────────────────
 * The check / cross glyphs are shipped as SVG assets and set as the list marker. A block cannot
 * express "use this image as my ::marker", and core/icon cannot carry a custom glyph at all
 * (WP_Icons_Registry only resolves core's bundled library).
 */
/* css-allow: custom list marker. The padding-left reserves the space the ::before glyph occupies — it is one mechanism with the marker, not independent spacing, and no block attribute sets a ::marker image */
.hero__guarantees,
.expert__checks,
.pricing__features {
	list-style: none;
	padding-left: 0;
}
/* css-allow: same custom-marker mechanism: the per-item indent that the absolute-positioned glyph sits in */
.hero__guarantees li,
.expert__checks li,
.pricing__features li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}
.hero__guarantees li::before,
.expert__checks li::before,
.pricing__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.1em;
	height: 1.1em;
	background: no-repeat center / contain;
}
.hero__guarantees li::before,
.expert__checks li::before {
	background-image: url( "../images/icon-check-circle.png" );
}
.pricing__features li::before {
	background-image: url( "../images/icon-check.png" );
}

/* ── EXCEPTION 4: header nav is a horizontal row ─────────────────────────────────────────────
 * core/list has no "lay my items out in a row" attribute. (A core/navigation block would, but the
 * source's menu is a plain list and 1:1 grouping says reproduce the element that is there.)
 */
/* css-allow: core/list has no horizontal-layout attribute; the source menu is a plain list and 1:1 grouping says reproduce the element that is there rather than swap in core/navigation */
.site-header__nav {
	list-style: none;
	display: flex;
	gap: 2rem;
	justify-content: center;
	padding-left: 0;
	margin: 0;
}
/* css-allow: cancels the UA list-item margin inside the flex nav row above — part of the same
   horizontal-nav mechanism, not independent spacing */
.site-header__nav li {
	margin: 0;
}
.site-header__logo img {
	max-width: 150px;
	height: auto;
}

/* ── EXCEPTION 5: logo strip + feature grid wrap ─────────────────────────────────────────────
 * isStackedOnMobile:false keeps them in a row, but at narrow widths they must wrap rather than
 * squash. There is no block attribute for "wrap instead of shrink".
 */
/* css-allow: core/columns cannot express flex-wrap; without it these rows squash instead of wrapping at narrow widths */
.hero__logos,
.features__grid,
.steps__grid,
.testimonials__grid,
.pricing__grid {
	flex-wrap: wrap;
	gap: 1.5rem;
}
/* The logo strip needs NO size rule: measured on the source, each logo renders at its intrinsic
   160x86 with no scaling. The max-height cap that used to live here was invented, not measured,
   and it shrank the whole strip. */

/* Testimonial avatar is a fixed round thumbnail in the source. */
/* css-allow: circular crop of a non-square source image — object-fit has no block attribute */
.testimonial__avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}