/**
 * Section layout shared by the Pillar (.hr-pillar) and Keyword Hub (.hr-hub) pages, loaded last:
 * section bands, the site header and footer on these pages, and the phone gutter.
 * Components live in ui.css; every colour comes from tokens.css.
 *
 * Bands (theme O, light throughout; white only for the site header and cards):
 * - hero (with breadcrumb) and inquiry CTA: fixed colours with a grid texture
 * - number band: Pillar "numbers" capability blocks (and the factory evidence number strip)
 * - light A / B: every other section, alternating by position among those sections only,
 *   so two neighbouring content sections never share a colour on any Pillar or Hub.
 * The CTA is always the last section (section order in inc/render/*-page.php).
 */

/* Content bands. :where() keeps these at zero specificity so the fixed bands below win. */
:where(.hr-pillar, .hr-hub) > :where(section:nth-child(odd of section:not(.hr-cta, .hr-pillar__capability--stat))) {
	--hr-band: var(--hr-band-a);
}

:where(.hr-pillar, .hr-hub) > :where(section:nth-child(even of section:not(.hr-cta, .hr-pillar__capability--stat))) {
	--hr-band: var(--hr-band-b);
}

:where(.hr-pillar, .hr-hub) > :where(nav, header) {
	--hr-band: var(--hr-band-hero);
	--hr-band-texture: var(--hr-band-grid);
}

:where(.hr-pillar, .hr-hub) > :where(.hr-cta) {
	--hr-band: var(--hr-band-cta);
	--hr-band-texture: var(--hr-band-grid);
}

:where(.hr-pillar, .hr-hub) > :where(.hr-pillar__capability--stat) {
	--hr-band: var(--hr-band-data);
}

/* Paint the bands. The Hub's sections already span the window. */
:where(.hr-pillar, .hr-hub) > :is(nav, header, section) {
	background-color: var(--hr-band);
	background-image: var(--hr-band-texture, none);
	background-size: var(--hr-band-grid-size) var(--hr-band-grid-size);
}

/* The Pillar sits in Astra's boxed container: each band is painted by a ::before stretched to
   the window edges; .site-content clips it so the page never scrolls sideways. */
body.hr-pillar-page .site-content {
	overflow-x: clip;
}

.hr-pillar > :is(nav, header, section) {
	position: relative;
	isolation: isolate;
	background: none;
}

.hr-pillar > :is(nav, header, section)::before {
	content: "";
	position: absolute;
	inset: 0 -100vmax;
	z-index: -1;
	background-color: var(--hr-band);
	background-image: var(--hr-band-texture, none);
	background-size: var(--hr-band-grid-size) var(--hr-band-grid-size);
}

/* No Astra container margins: the hero starts right under the site header and the CTA
   meets the footer. */
.hr-pillar-page #primary {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Band spacing: hero and CTA 72px, number band 52px (tablet / phone values in tokens.css). */
.hr-pillar > header.hr-pillar__hero,
.hr-hub > header.hr-hub__hero {
	padding-bottom: var(--hr-band-padding-y);
}

:is(.hr-pillar, .hr-hub) > section.hr-cta {
	padding-top: var(--hr-band-padding-y);
	padding-bottom: var(--hr-band-padding-y);
}

.hr-pillar > section.hr-pillar__capability--stat {
	padding-top: var(--hr-data-padding-y);
	padding-bottom: var(--hr-data-padding-y);
}

/* Number band: big accent numbers straight on the band, labels in secondary text. */
.hr-pillar .factory-evidence .factory-stats {
	background: var(--hr-band-data);
	border-radius: var(--hr-radius-lg);
	padding: 8px 0;
}

.hr-pillar :is(.hr-pillar__capability--stat, .factory-evidence) .factory-stats > div {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 20px 16px;
}

.hr-pillar :is(.hr-pillar__capability--stat, .factory-evidence) .hr-pillar__stat-value {
	font-family: var(--hr-font-data-number);
	font-size: var(--hr-fs-data-number);
	font-weight: var(--hr-fw-data-number);
	line-height: 1.1;
	color: var(--hr-color-stat);
}

.hr-pillar :is(.hr-pillar__capability--stat, .factory-evidence) .factory-stats p:not(.hr-pillar__stat-value) {
	color: var(--hr-data-label);
}

/* Site header and footer on these pages. */
body .site-header :is(.ast-primary-header-bar, .ast-above-header-bar),
body #ast-mobile-header .ast-primary-header-bar {
	background-color: var(--hr-header-bg);
	border-bottom-color: var(--hr-color-border);
}

body .main-header-menu .menu-item:is(.current-menu-item, .current-menu-ancestor) > .menu-link {
	color: var(--hr-color-accent);
}

body footer.site-footer {
	background-color: var(--hr-footer-bg);
	color: var(--hr-footer-text);
}

body footer.site-footer :is(.site-above-footer-wrap, .site-primary-footer-wrap, .site-below-footer-wrap) {
	background-color: transparent;
	border-color: var(--hr-color-border);
}

body footer.site-footer :is(p, li, span) {
	color: var(--hr-footer-text);
}

body footer.site-footer :is(h1, h2, h3, h4, h5, h6, .widget-title) {
	color: var(--hr-color-heading);
}

body footer.site-footer a,
body footer.site-footer .menu-item > .menu-link {
	color: var(--hr-footer-text);
}

body footer.site-footer a:hover,
body footer.site-footer .menu-item > .menu-link:hover {
	color: var(--hr-color-accent-hover);
}

/* Phone */
@media (max-width: 544px) {
	/* Pillar: 16px side gutter (Astra uses 0.54em, about 9px; only these pages change). */
	body.hr-pillar-page #content .ast-container {
		padding-left: var(--hr-gutter);
		padding-right: var(--hr-gutter);
	}

	.hr-pillar :is(.hr-pillar__capability--stat, .factory-evidence) .factory-stats > div {
		padding: 14px 16px;
	}
}