/* ═══════════════════════════════════════════════════════════════════════════
   AMW CHROME — July 2027 (BrandAid / TBA)
   ---------------------------------------------------------------------------
   Site-wide layer: design tokens + the floating-pill header + the dark-mode
   prompt toast. Loaded on EVERY page, so every rule here is either namespaced
   (.site-header / .amw-theme-prompt) or a token declaration.

   WHY THE SCOPING: the source stylesheet on the review subsite
   (amw-theme-july2027) was written for a single-page child theme, so it styles
   bare `.button`, `.logo`, `.nav`, `a`, `img`, `svg`. Those names are already
   in use across this site — `.button` appears 17x in page/post content and in
   post-6-video-interviews-aged-care.html, `.logo` in the footer and
   coming-soon.php, `.eyebrow`/`.hero`/`.step`/`.feature` in page-aged-care,
   page-field-agents and home.html. Applying them globally would silently
   restyle those pages, so anything generic is scoped to `.site-header` here
   and the homepage-only sections live in amw-home-2027.css, which is enqueued
   just on is_front_page().

   Source: theme-july2027/style.css lines 20-43, 61-139, 141-174, 445-450, 488-490.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS  (BrandAid mockup — Amy / TBA)
   ═══════════════════════════════════════════════════════════ */
:root {
	--ink:        #1a0a2e;
	--ink-soft:   #3e3150;
	--purple:     #6d48c7;
	--purple-dark:#503aa8;
	--lilac:      #e8d5f5;
	--lilac-soft: #f5f0fa;
	--paper:      #fffdfb;
	--white:      #fff;
	--green:      #2d6a4f;
	--line:       #2d144124;
	--shadow:     0 30px 80px #2d14412e;
}
html[data-theme="dark"] {
	--ink:        #f8f3fc;
	--ink-soft:   #d7cce0;
	--paper:      #10091b;
	--white:      #1b1028;
	--line:       #e8d5f524;
	--shadow:     0 30px 80px #0000005c;
}

/* ═══════════════════════════════════════════════════════════
   PAGE BASE
   ═══════════════════════════════════════════════════════════ */

/* Anchor landings clear the floating pill (68px tall at top:18px). */
html { scroll-padding-top: 104px; }

/* The old fixed header reserved its own height with
   `body { padding-top: var(--amw-header-h) }` inside parts/header.html. That
   inline block is gone with the header it belonged to, so the reservation is
   restated here. The homepage is exempt — .hero carries 170px of top padding
   of its own, and doubling up would leave a gap under the pill. */
body:not(.amw-home) { padding-top: 104px; }

/* Light-mode page background. Also inherited from the retired header's inline
   <style>; kept at the same #f5f3ff so no existing page shifts colour. */
[data-theme="light"] body { background-color: #f5f3ff; }

/* ═══════════════════════════════════════════════════════════
   HEADER — floating pill
   ═══════════════════════════════════════════════════════════ */
.site-header {
	z-index: 9999;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 22px;
	justify-content: space-between;
	align-items: center;
	width: min(1180px, 100% - 36px);
	height: 68px;
	padding: 0 12px 0 22px;
	display: flex;
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: 0 10px 40px #2d144114;
}
@supports (color: color-mix(in lab, red, red)) {
	.site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); }
}

/* Nudge the fixed pill below the WP admin bar when signed in */
body.admin-bar .site-header { top: 50px; }

/* Base resets the pill relies on — scoped, so page content keeps its own link
   colour, underlines and inline image display.

   :where() so the scoping costs no specificity. These stand in for the bare
   `a {}` / `img, svg {}` rules of the source stylesheet and must keep losing to
   any single-class rule, exactly as those did. Written as plain
   `.site-header a` they'd score (0,1,1) and quietly outrank things like
   `.button{color:#fff}` — the same mistake that made the homepage download
   badges render dark-on-dark. */
:where(.site-header) a { color: inherit; text-decoration: none; }
:where(.site-header) a,
:where(.site-header) button { -webkit-tap-highlight-color: transparent; }
:where(.site-header) img,
:where(.site-header) svg { display: block; max-width: 100%; }

.site-header .logo { display: flex; align-items: center; }
.site-header .logo .amw-logo-img { width: 168px; height: auto; display: block; }
.site-header .logo .amw-logo-dark { display: none; }
[data-theme="light"] .site-header .logo .amw-logo-light { display: none; }
[data-theme="light"] .site-header .logo .amw-logo-dark { display: block; }

.site-header .nav { align-items: center; gap: 30px; font-size: 13px; font-weight: 600; display: flex; }
.site-header .nav a { position: relative; color: var(--ink); }
.site-header .nav a::after {
	content: "";
	background: var(--purple);
	height: 2px;
	transition: right .18s;
	position: absolute;
	bottom: -5px; left: 0; right: 100%;
}
.site-header .nav a:hover::after { right: 0; }

.site-header .header-actions { align-items: center; gap: 8px; display: flex; }
.site-header .button {
	background: var(--purple);
	color: #fff;
	border-radius: 999px;
	justify-content: center;
	align-items: center;
	gap: 14px;
	min-height: 54px;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 700;
	transition: transform .18s, background .18s;
	display: inline-flex;
	box-shadow: 0 14px 30px #6d48c73d;
}
.site-header .button:hover { background: var(--purple-dark); transform: translateY(-2px); }
.site-header .button-small { min-height: 44px; padding: 0 19px; font-size: 12px; }

.site-header .theme-toggle,
.site-header .menu-toggle {
	background: var(--lilac-soft);
	width: 44px; height: 44px;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	border: 0;
	border-radius: 50%;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.site-header .menu-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════
   DARK-MODE PROMPT TOAST  (inherited behaviour, restyled)
   ═══════════════════════════════════════════════════════════ */
.amw-theme-prompt {
	position: fixed; right: 24px; bottom: 24px; z-index: 10000;
	max-width: 360px;
	display: flex; align-items: center; gap: 12px;
	padding: 14px 14px 14px 18px;
	border-radius: 14px;
	font-size: 14px; font-weight: 500;
	color: rgba(255,255,255,0.9);
	background: rgba(15,8,24,0.96);
	border: 1px solid rgba(123,94,198,0.4);
	box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(123,94,198,0.1);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	animation: amwPromptIn .35s ease-out;
}
/* display:flex above would otherwise beat the UA's [hidden]{display:none} —
   without this the toast is visible from first paint and the JS `hidden=true`
   dismiss does nothing (the "close button didn't work" bug). */
.amw-theme-prompt[hidden] { display: none !important; }
.amw-theme-prompt-msg { line-height: 1.45; }
.amw-theme-prompt-close {
	flex-shrink: 0; background: none; border: none;
	color: rgba(255,255,255,0.55); cursor: pointer;
	font-size: 22px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.amw-theme-prompt-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
@keyframes amwPromptIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
[data-theme="light"] .amw-theme-prompt {
	background: rgba(255,255,255,0.97); color: #1a0a2e;
	border-color: rgba(80,58,168,0.25);
	box-shadow: 0 12px 40px rgba(80,58,168,0.18), 0 0 0 1px rgba(80,58,168,0.06);
}
[data-theme="light"] .amw-theme-prompt-close { color: rgba(26,10,46,0.5); }
[data-theme="light"] .amw-theme-prompt-close:hover { color: #1a0a2e; background: rgba(80,58,168,0.08); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — header only
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1050px) {
	.site-header .nav {
		border: 1px solid var(--line);
		background: var(--paper);
		box-shadow: var(--shadow);
		border-radius: 20px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 16px;
		display: none;
		position: fixed;
		top: 94px; left: 18px; right: 18px;
	}
	.site-header .nav.open { display: flex; }
	.site-header .nav a { border-bottom: 1px solid var(--line); padding: 15px 10px; }
	.site-header .nav a:last-child { border-bottom: 0; }
	.site-header .menu-toggle { display: inline-flex; }
	.site-header .menu-toggle span { background: currentColor; width: 18px; height: 2px; margin: 5px auto; display: block; }
}
@media (max-width: 720px) {
	.site-header { border-radius: 18px; width: calc(100% - 20px); height: 60px; padding-left: 14px; top: 10px; }
	body.admin-bar .site-header { top: 46px; }
	.site-header .logo .amw-logo-img { width: 138px; }
	.site-header .button-small { display: none; }
	.site-header .theme-toggle,
	.site-header .menu-toggle { width: 38px; height: 38px; }
	body:not(.amw-home) { padding-top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
	.site-header *,
	.amw-j27 * { scroll-behavior: auto !important; transition: none !important; }
}