/*
Theme Name:   ETF Site
Description:  Child theme of Twenty Twenty-Five for the ETF fee-drag simulator site: light translucent header with NL/EN link and a full-height mobile menu, black, off-white and white sections with big tiles, footer, 404, ad slots that stay off.
Template:     twentytwentyfive
Version:      0.3.1
Requires at least: 6.3
Requires PHP: 7.4
Text Domain:  etf-site
Update URI:   false
*/

/* Site tokens (Phase 6c, apple-hig-css). Type scale and fonts live in theme.json; the parts are in assets/css/:
   header, menu, footer, sections (section palettes, hero, cards, big tiles), buttons, pages, and ads (loaded
   only when ads are on). One fixed palette, no light/dark modes: the OS setting changes nothing, and black
   sections opt into color-scheme: only dark for their own native controls. */
:root {
	color-scheme: only light; /* also stops Android's forced auto-dark */
	--etf-site-hit: max(44px, 2.75rem);
	--etf-site-bar: max(44px, 2.75rem); /* header bar height */
	--etf-site-focus: #007aff;
	--etf-site-text: #1d1d1f;
	--etf-site-text-2: #6e6e73;        /* 5.1:1 on white, 4.66:1 on #f5f5f7 */
	--etf-site-nav: #424245;           /* menu links other than the current page */
	--etf-site-link: #0066cc;          /* content links and outline buttons on light: 5.11:1 on #f5f5f7 */
	--etf-site-hairline: #d2d2d7;
	--etf-site-tint: rgba(0, 0, 0, 0.04);       /* hover */
	--etf-site-tint-press: rgba(0, 0, 0, 0.08); /* pointer-down */
	--etf-site-offwhite: #f5f5f7;
	--etf-site-card: #f5f5f7;
	--etf-site-cta: #0071e3;           /* primary button: white text 4.70:1 */
	--etf-site-cta-hover: #0066cc;     /* 5.56:1 */
	--etf-site-cta-press: #0058b0;     /* 6.95:1 */
	--etf-site-cta-2: var(--etf-site-link);
	/* Chrome material: the header bar and the floating mobile menu only (apple.com level), never stacked */
	--etf-site-chrome: rgba(251, 251, 253, 0.8);
	--etf-site-chrome-menu: rgba(251, 251, 253, 0.94);
	--etf-site-chrome-solid: #fbfbfd;
	--etf-site-chrome-blur: saturate(180%) blur(20px);
	--etf-site-chrome-line: rgba(0, 0, 0, 0.16);
	/* Motion: critically damped spring (damping 1.0, response 0.35 s), see src/css/tokens.css */
	--etf-site-ease: ease-out;
	--etf-site-dur: 0.5s;
	--etf-site-ease-press: ease-out;
	--etf-site-dur-press: 0.1s;
	scroll-padding-top: calc(var(--etf-site-bar) + 1rem); /* anchors and the skip-link target clear the bar */
}

@supports (transition-timing-function: linear(0, 1)) {
	:root {
		--etf-site-ease: linear(0, 0.075, 0.227, 0.39, 0.536, 0.656, 0.75, 0.821, 0.873, 0.911, 0.938, 0.957,
			0.971, 0.98, 0.986, 0.991, 0.994, 0.996, 0.997, 0.998, 1);
	}
}

body {
	background: #fff;
	color: var(--etf-site-text);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* Our controls give their own press feedback, so no grey tap box on iOS */
:where(.wp-site-blocks) :where(a, button, summary) {
	-webkit-tap-highlight-color: transparent;
}

:where(.wp-site-blocks) :where(a, button, summary):focus-visible {
	outline: 3px solid var(--etf-site-focus);
	outline-offset: 2px;
}

/* The parent theme outlines every :focus, mouse and touch included; keep the ring for keyboard focus only */
:where(.wp-site-blocks) :focus:not(:focus-visible) {
	outline: none;
}

.etf-site-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Core's skip link (first focusable element), shown as a solid capsule when focused */
.skip-link.screen-reader-text:focus {
	top: 0.5rem;
	left: 0.5rem;
	display: inline-flex;
	align-items: center;
	min-height: var(--etf-site-hit);
	padding: 0 1.25rem;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.24);
	color: var(--etf-site-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	outline: 3px solid var(--etf-site-focus);
	outline-offset: 2px;
}

/* Increased contrast: darker secondary text, solid hairlines, darker links (html:root outranks the
   global-styles :root); black sections and tiles get their own values in sections.css */
@media (prefers-contrast: more) {
	html:root {
		--etf-site-text-2: #424245;
		--etf-site-nav: #1d1d1f;
		--etf-site-hairline: #8e8e93;
		--etf-site-link: #004a99;
		--etf-site-chrome-line: #8e8e93;
	}
}