/* ==================================================================================================
 * HYDRO / Typography (R1.8, theme 1.19.0): one type style per shared component across the 23 pages.
 *
 * The page families (Layout 01 / V3 service pages, hubs, company pages, homepage Concept C) each set the
 * type of their breadcrumbs, kickers, FAQ, captions and buttons, and they had drifted apart (an audit of
 * the 23 pages at 1440 / 768 / 390 / 320 found 29 component / width groups with more than one style:
 * tests/browser/r18-typography.cjs). This file is loaded last and sets, for each shared component, the
 * type only (family, size, weight, line height, letter spacing, case) from the tokens below; colours,
 * spacing and layout stay with the page families. !important is used on those type properties only,
 * because the family rules are more specific; nothing else here uses it.
 *
 * Unchanged on purpose: the H1 sizes of the approved heroes, the section heading hierarchy, the form
 * (Fluent Forms #3), the header, the footer type (already one style), the How It Works component.
 * ================================================================================================== */

:root {
	/* Defined in base.css per breakpoint: --hydro-breadcrumb (13 / 14), --hydro-kicker (13 / 14),
	   --hydro-button (16 / 17), --hydro-faq-q (16 ≤ 380 / 17 / 18). Completed here: */
	--hydro-faq-a: 1rem;
	--hydro-caption-chip: 0.8125rem;
	--hydro-tile-caption: 1rem;
}

@media (min-width: 768px) {
	:root {
		--hydro-faq-a: 1.0625rem;
		--hydro-tile-caption: 1.0625rem;
	}
}

@media (min-width: 1100px) {
	:root {
		--hydro-breadcrumb: 0.9375rem;
		--hydro-button: 1.0625rem;
	}
}

/* Breadcrumbs: every page but the homepage, dark and light heroes alike. */
.hydro-crumbs,
.hydro-crumbs :is(ol, li, a, span) {
	font-family: var(--sans) !important;
	font-size: var(--hydro-breadcrumb) !important;
	font-weight: 500 !important;
	line-height: 1.8 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Section kickers (the small uppercase label above a heading). */
main :is(.co-label, .v3-kicker, .is-style-kicker, .hero__kicker, .pwork__kicker, .process__kicker) {
	font-family: var(--sans) !important;
	font-size: var(--hydro-kicker) !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

/* FAQ: the homepage list and the shared list (questions and answers). */
:is(.faq__list, .sl-faq__list) summary {
	font-family: var(--sans) !important;
	font-size: var(--hydro-faq-q) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
}

:is(.faq__list, .sl-faq__list) details :is(p, li) {
	font-family: var(--sans) !important;
	font-size: var(--hydro-faq-a) !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: normal !important;
}

/* Caption chips on a photo or clip: the gallery viewer and the before / after slider. */
main :is(.sl-gal__item figcaption, .cmp-gal .cmp:not(.cmp--tile) .cmp__caption) {
	font-family: var(--sans) !important;
	font-size: var(--hydro-caption-chip) !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
}

/* Captions under a tile: About Us and Our Work tiles, the collection, the homepage project and
   before / after tiles (the service label above them and the market tag keep their own small type). */
main :is(.wk-tile__subject, .ab-tile .wp-element-caption, .pwork__cap, .cmp--tile .cmp__cap) {
	font-family: var(--sans) !important;
	font-size: var(--hydro-tile-caption) !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	letter-spacing: -0.01em !important;
}

/* Buttons and CTA labels in the page content (header and form buttons have their own component). */
main .wp-block-button__link {
	font-family: var(--sans) !important;
	font-size: var(--hydro-button) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
}