/*
 * App shell chrome: same accessible design tokens as the AdvicePro referral
 * form (Atkinson Hyperlegible, teal/clay palette, dark mode), applied at
 * body/:root level since this template owns the whole page, not just a
 * shortcode's subtree. `color-scheme` is declared per theme branch so
 * native control chrome (selects, date pickers) never mismatches the
 * page's own palette — see advicepro-digital-referrals/assets/css/form.css
 * for the same fix applied to the form itself.
 */
:root {
	--aha-teal: #233588;
	--aha-teal-dark: #1a2766;
	--aha-btn: #233588;
	--aha-btn-hover: #1a2766;
	--aha-paper: #fafbfc;
	--aha-card: #ffffff;
	--aha-border: #dcd9d2;
	--aha-text: #2b2f31;
	--aha-text-soft: #5a5f61;
	--aha-focus: #d02628;
	--aha-radius: 10px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--aha-paper: #1c1d1d;
		--aha-card: #262828;
		/* --aha-border: #3d3f3f; */
		--aha-text: #eeeeec;
		--aha-text-soft: #b7b9b7;
		--aha-focus: #ef5254;
		--aha-btn: #3a4ea3;
		--aha-btn-hover: #4e60ae;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--aha-paper: #1c1d1d;
	--aha-card: #262828;
	/* --aha-border: #3d3f3f; */
	--aha-text: #eeeeec;
	--aha-text-soft: #b7b9b7;
	--aha-focus: #ef5254;
	--aha-btn: #3a4ea3;
	--aha-btn-hover: #4e60ae;
	color-scheme: dark;
}

html,
body.aha-app-shell {
	height: 100%;
}
body.aha-app-shell {
	margin: 0;
	background: var(--aha-paper);
	color: var(--aha-text);
	font-family: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
	line-height: 1.5;
	font-size: 17px;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.aha-app-shell,
body.aha-app-shell *,
body.aha-app-shell *::before,
body.aha-app-shell *::after {
	box-sizing: border-box;
}
/* Theme colour rules leak in via the same type-selector-beats-inheritance
   quirk documented in the referral form's CSS — pin it down explicitly. */
body.aha-app-shell h1,
body.aha-app-shell h2,
body.aha-app-shell h3,
body.aha-app-shell p,
body.aha-app-shell span {
	color: inherit;
}

body.aha-app-shell input:focus-visible,
body.aha-app-shell select:focus-visible,
body.aha-app-shell textarea:focus-visible,
body.aha-app-shell button:focus-visible,
body.aha-app-shell a:focus-visible,
body.aha-app-shell [tabindex]:focus-visible {
	outline: 3px solid var(--aha-focus);
	outline-offset: 2px;
}

.aha-shell-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 50;
	background: var(--aha-card);
	/* Astra's own global CSS borders bare header/footer elements; an absent
	   declaration here wouldn't override that, so this has to be explicit. */
	border-bottom: none;
	padding: 14px 20px;
}
.aha-shell-row {
	max-width: 700px;
	margin: 0 auto;
	display: grid;
	/* Equal-width outer columns keep the logo genuinely centred regardless of
	   the switch's width, rather than just left-aligned next to it. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}
.aha-shell-spacer {
	visibility: hidden;
}
.aha-shell-brand {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	color: inherit;
	text-decoration: none;
	font-weight: 700;
}
.aha-shell-brand img {
	display: block;
	height: 60px;
	width: auto;
}

/* Toggle switch: tucked into the corner, minimal footprint. */
.aha-theme-switch {
	justify-self: end;
	background: transparent;
	border: none;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	line-height: 0;
}
.aha-theme-switch-track {
	display: block;
	width: 46px;
	height: 24px;
	border-radius: 999px;
	background: var(--aha-border);
	position: relative;
	transition: background-color 0.15s ease;
}
/* Sun/moon glyph lives on the thumb itself (not fixed in the track) so it's
   never obscured by the thumb sliding over it — only one icon shows at a
   time, matching whichever state is active. */
.aha-theme-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.aha-theme-switch-thumb::before {
	content: "\2600";
	font-size: 12px;
	line-height: 1;
	color: var(--aha-text-soft);
}
:root[data-theme="dark"] .aha-theme-switch-thumb::before,
.aha-theme-switch[aria-checked="true"] .aha-theme-switch-thumb::before {
	content: "\263E";
}
/* Keyed off the pre-paint `data-theme` attribute (not just the button's own
   `aria-checked`, which JS only sets after DOMContentLoaded) so the switch
   never flashes the wrong position/colour on load in dark mode. */
:root[data-theme="dark"] .aha-theme-switch-track,
.aha-theme-switch[aria-checked="true"] .aha-theme-switch-track {
	background: var(--aha-teal);
}
:root[data-theme="dark"] .aha-theme-switch-thumb,
.aha-theme-switch[aria-checked="true"] .aha-theme-switch-thumb {
	transform: translateX(22px);
}

.aha-shell-main {
	max-width: 560px;
	margin: 0 auto;
	padding: 0px 20px 60px;
}

.aha-shell-footer {
	/* Astra's own global CSS borders bare header/footer elements; an absent
	   declaration here wouldn't override that, so this has to be explicit. */
	border-top: none;
	padding: 26px 20px 40px;
	text-align: center;
	color: var(--aha-text-soft);
	font-size: 0.85rem;
}

/* Neutralises WP core's default .wp-block-table td/th border — the actual
   source of the "black border", from the shortcode being pasted into a
   Table block instead of a plain paragraph/shortcode block. */
.aha-shell-main .wp-block-table td,
.aha-shell-main .wp-block-table th {
	border: none;
	padding: 0;
}