/* ETF Site: page sections in the apple.com page grammar. Full-width Group blocks set their own fixed palette:
   black (etf-site-section--dark: text #f5f5f7, secondary #a1a1a6), off-white (--light) and white (--white),
   both with text #1d1d1f and secondary #6e6e73. No light/dark modes: black sections and tiles say
   color-scheme: only dark, so native controls and scrollbars inside them match locally. Then the hero, the
   explanation cards (2x2 on white) and the big tiles with their visuals (figures, fine print, questions,
   the at-a-glance row). Selectors carry two classes where they must outrank the block layout rules. */

/* ---- Sections: edge to edge, touching (no block gap between them, none under the header) ---- */
.wp-block-post-content > .etf-site-section {
	margin-block: 0;
	padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}

.etf-site-section--dark,
.etf-site-tile--dark {
	--etf-site-text-2: #a1a1a6;
	--etf-site-link: #2997ff;  /* 6.96:1 on black */
	--etf-site-cta-2: #2997ff;
	background: #000;
	color: #f5f5f7;
	color-scheme: only dark;
}

.etf-site-section--light,
.etf-site-tile--light {
	background: var(--etf-site-offwhite);
}

.etf-site-section--white {
	background: #fff;
}

/* ---- Hero: type only, two actions ---- */
.etf-site-section.etf-site-hero {
	padding-block: clamp(4rem, 2.5rem + 8vw, 8rem);
	text-align: center;
}

.etf-site-hero > h1 {
	max-width: 15em;
	font-size: clamp(2.5rem, 1.75rem + 3.5vw, 4rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-wrap: balance;
}

.etf-site-hero.etf-site-hero > p {
	max-width: 38rem;
	margin-block-start: 1.25rem;
	color: var(--etf-site-text-2);
	font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-wrap: pretty;
}

.etf-site-hero.etf-site-hero > .wp-block-buttons {
	justify-content: center;
	margin-block-start: 2rem;
}

/* ---- Calculator page: a compact page title, left, like a product name in a local nav, close under the bar
   (browsers without :has() keep the normal section padding) ---- */
.wp-block-post-content > .etf-site-section:has(> .etf-site-local-title) {
	padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.etf-site-section > .etf-site-local-title {
	max-width: var(--wp--style--global--wide-size);
	margin-block-end: 2.5rem;
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: left;
}

/* ---- Explanation cards: the approved paragraphs, 2x2 on white; the bold lead becomes the card title ---- */
.etf-site-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.etf-site-cards > .etf-site-card {
	margin: 0;
	padding: 1.75rem 1.75rem 2rem;
	border-radius: 22px;
	background: var(--etf-site-card);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.etf-site-card > strong:first-child {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

/* ---- Big tiles (apple.com): headline, one-line subheadline, two pill actions, a visual below ---- */
.etf-site-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.etf-site-tiles > .etf-site-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: clamp(2.5rem, 2rem + 2.5vw, 3.75rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
	border-radius: 28px;
	text-align: center;
}

.etf-site-tiles .etf-site-tile > * {
	max-width: 40rem;
	margin-block: 0;
}

.etf-site-tiles .etf-site-tile > h2 {
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.etf-site-tiles .etf-site-tile > h2 + p {
	margin-block-start: 0.625rem;
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.etf-site-tiles .etf-site-tile > .wp-block-buttons {
	justify-content: center;
	margin-block-start: 1.5rem;
}

/* Visual: big figures with a label under each */
.etf-site-tiles .etf-site-tile > .etf-site-figures {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 3.5rem;
	max-width: none;
	margin-block-start: 2.75rem;
}

.etf-site-figures > .etf-site-figure {
	margin: 0;
	color: var(--etf-site-text-2);
	font-size: 1.0625rem;
	line-height: 1.35;
}

.etf-site-figure > strong:first-child {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--etf-site-text);
	font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.etf-site-tile--dark .etf-site-figure > strong:first-child {
	color: #f5f5f7;
}

/* Fine print under the figures: the example's settings and the disclaimer, verbatim */
.etf-site-tiles .etf-site-tile > .etf-site-fineprint {
	margin-block-start: 1.25rem;
	color: var(--etf-site-text-2);
	font-size: 0.8125rem;
	letter-spacing: 0;
	line-height: 1.45;
}

.etf-site-tiles .etf-site-tile > .etf-site-fineprint + .etf-site-fineprint {
	margin-block-start: 0.5rem;
}

/* Visual: question titles (plain text, not links), separated by hairlines */
.etf-site-tiles .etf-site-tile > .etf-site-questions {
	width: 100%;
	max-width: 30rem;
	margin-block-start: 2.25rem;
	padding: 0;
	list-style: none;
	text-align: left;
}

.etf-site-questions > li {
	margin: 0;
	padding: 0.875rem 0;
	border-top: 1px solid var(--etf-site-hairline);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.008em;
	line-height: 1.35;
}

/* Visual: the at-a-glance row with check marks */
.etf-site-tiles .etf-site-tile > .etf-site-glance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	max-width: none;
	margin-block-start: 2.25rem;
	padding: 0;
	font-size: 1.0625rem;
	list-style: none;
}

.etf-site-glance > li {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.etf-site-glance > li::before {
	content: "";
	flex: none;
	width: 0.4375rem;
	height: 0.875rem;
	margin-top: -0.25rem;
	border: solid #248a3d;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

@media (width >= 48em) {
	.etf-site-cards,
	.etf-site-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.etf-site-tiles > .etf-site-tile--wide {
		grid-column: 1 / -1;
	}
}

/* Increased contrast: tiles and cards get a defined border, secondary text darkens in both palettes */
@media (prefers-contrast: more) {
	.etf-site-section--dark,
	.etf-site-tile--dark {
		--etf-site-text-2: #d2d2d7;
	}

	.etf-site-tiles > .etf-site-tile,
	.etf-site-cards > .etf-site-card {
		box-shadow: inset 0 0 0 1px #8e8e93;
	}
}

@media (forced-colors: active) {
	.etf-site-tiles > .etf-site-tile,
	.etf-site-cards > .etf-site-card {
		border: 1px solid CanvasText;
	}

	.etf-site-glance > li::before {
		border-color: CanvasText;
	}
}