/* AtlasLaunch: the design-system variables, read from theme.json presets. Change colours in
   Appearance > Editor > Styles (or a style variation), never here. */
body, .editor-styles-wrapper {
	--bg: var(--wp--preset--color--base);
	--surface: var(--wp--preset--color--surface);
	--surface-sunken: var(--wp--preset--color--surface-sunken);
	--line: var(--wp--preset--color--line);
	--line-strong: var(--wp--preset--color--line-strong);
	--ink: var(--wp--preset--color--contrast);
	--text: var(--wp--preset--color--body);
	--muted: var(--wp--preset--color--muted);
	--brand: var(--wp--preset--color--brand);
	--brand-ink: var(--wp--preset--color--brand-ink);
	--on-brand: var(--wp--preset--color--on-brand);
	--brand-soft: var(--wp--preset--color--brand-soft);
	--accent: var(--wp--preset--color--accent);
	--navy: var(--wp--preset--color--navy);
	--on-navy: var(--wp--preset--color--on-navy);
	--success: var(--wp--preset--color--success);
	--success-soft: var(--wp--preset--color--success-soft);
	--warning: var(--wp--preset--color--warning);
	--warning-soft: var(--wp--preset--color--warning-soft);
	--danger: var(--wp--preset--color--danger);
	--danger-soft: var(--wp--preset--color--danger-soft);
	--focus: var(--wp--custom--focus);
	--star: #c98500;
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 56px;
	--space-8: 80px;
	--space-9: 112px;
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-xl: var(--wp--custom--radius--xl);
	--radius-2xl: var(--wp--custom--radius--2xl);
	--radius-full: var(--wp--custom--radius--full);
	--shadow-card: var(--wp--preset--shadow--card);
	--shadow-raised: var(--wp--preset--shadow--raised);
}

/* Block helpers: classes the patterns add to core blocks. */
.wp-block-group.atl-card { gap: var(--space-3); }
.wp-block-group.atl-card > * { margin-block: 0; }
.atl-eyebrow.wp-block-paragraph, p.atl-eyebrow { margin-bottom: 0; }
.wp-block-post-terms.atl-type a { color: inherit; text-decoration: none; }
.wp-block-details summary { font-family: var(--font-display); font-weight: 700; color: var(--ink); cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: var(--space-3); }
/* Sticky header. The template part's own <header> is the sticky element: the bar inside it is exactly
   as tall as the part, so a sticky bar there would never move. The blur sits on a ::before layer,
   never on the bar itself, because backdrop-filter makes an element the containing block of its
   position:fixed children and would trap the phone menu overlay and the mini-cart drawer inside it. */
header.wp-block-template-part:has(> .atl-sticky-header) { position: sticky; top: 0; z-index: 30; }
body.admin-bar header.wp-block-template-part:has(> .atl-sticky-header) { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar header.wp-block-template-part:has(> .atl-sticky-header) { top: 0; } }
.atl-sticky-header { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); }
.atl-sticky-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); pointer-events: none; }
.atl-hero-panel { border-radius: var(--radius-2xl); box-shadow: var(--shadow-raised); }
.atl-sticky-header .wp-block-search__button { padding: 10px; min-width: 40px; min-height: 40px; }
.wp-block-image.atl-hero-panel img { width: 100%; height: auto; }
.atl-card .atl-tile { color: var(--p-ink, var(--brand-ink)); font-weight: 700; }
.atl-stat-number { font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1; }

/* Accessibility: a visible focus ring everywhere, links in text underlined, motion only when wanted. */
/* Not in :where(): plugin styles that remove the outline (outline: none) must not win. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(input, select, textarea):focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Automatic dark mode: visitors whose device asks for a dark screen get the Dark style's colours.
   The brand colour stays the site's own; only its text shade and tint are lightened for dark
   backgrounds. Switch it off with add_filter( 'atlaslaunch_auto_dark', '__return_false' ) in a child
   theme or plugin (that adds the body class atl-no-auto-dark), or add that class yourself. The editor
   canvas is never changed. */
@media (prefers-color-scheme: dark) {
	body:not(.atl-no-auto-dark):not(.editor-styles-wrapper) {
		color-scheme: dark;
		--wp--preset--color--base: #070d1c;
		--wp--preset--color--surface: #0e172c;
		--wp--preset--color--surface-sunken: #0b1a36;
		--wp--preset--color--line: #1f2b45;
		--wp--preset--color--line-strong: #5d6b86;
		--wp--preset--color--contrast: #eef3fb;
		--wp--preset--color--body: #c3ccdb;
		--wp--preset--color--muted: #93a0b5;
		--wp--preset--color--brand-ink: color-mix(in srgb, var(--wp--preset--color--brand) 50%, #ffffff);
		--wp--preset--color--brand-soft: color-mix(in srgb, var(--wp--preset--color--brand) 22%, #0e172c);
		--wp--preset--color--navy: #101c3d;
		--wp--preset--color--on-navy: #ffffff;
		--wp--preset--color--success: #4fd18b;
		--wp--preset--color--success-soft: #0d2a1c;
		--wp--preset--color--warning: #f2c45a;
		--wp--preset--color--warning-soft: #2e2410;
		--wp--preset--color--danger: #ff8a80;
		--wp--preset--color--danger-soft: #331414;
		--wp--preset--shadow--card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.25);
		--wp--preset--shadow--raised: 0 2px 4px rgba(0,0,0,0.35), 0 18px 40px rgba(0,0,0,0.4);
		--wp--custom--focus: #ffffff;
		--star: #f2c45a;
	}
}