/* ────────────────────────────────────────────────────────────────────────
 * Insights Child — menu.css
 *
 * Topbar + Wellington-style side-drawer overlay menu.
 * Loaded site-wide (see functions.php → insights_enqueue_menu_assets).
 *
 * Brand tokens (--crimson, --crimson-bright, --cream, --ink, --paper) are
 * declared by homepage.css / footer.css / hero.css. Local fallbacks below
 * for pages where those stylesheets may not load (e.g. dashboard previews).
 * ───────────────────────────────────────────────────────────────────── */

:root {
	/* Defensive local copies — only used if no other stylesheet has set them. */
	--crimson: #8B1A1A;
	--crimson-bright: #E8192C;
	--crimson-deep: #5C1010;
	--charcoal: #2D2D2D;
	--cream: #FFFFFF;
	--ink: #1a1a1a;
	--line: rgba(26, 26, 26, 0.08);
	--line-hi: rgba(26, 26, 26, 0.14);
	--text-dim: rgba(26, 26, 26, 0.68);
}

/* Site-wide background — overrides Astra's #f5f0eb body / container colour. */
body,
body.ast-separate-container,
.ast-separate-container {
	background-color: #FFFFFF;
}

/* ──────────────────────────────────────────────────────────────
 * 1. TOPBAR — sticky, logo + hamburger only
 * ────────────────────────────────────────────────────────────── */
.topbar {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--cream);
	border-bottom: 1px solid transparent;
	transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.topbar.scrolled {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-color: var(--line);
	box-shadow: 0 6px 24px -10px rgba(26, 26, 26, 0.10);
}
.topbar-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 32px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.topbar-logo {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.topbar-logo img {
	height: 52px;
	width: auto;
	display: block;
}
.topbar-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Hamburger button */
.menu-btn {
	width: 64px;
	height: 64px;
	background: transparent;
	border: 1px solid var(--line-hi);
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease;
	position: relative;
}
.menu-btn:hover { background: var(--ink); border-color: var(--ink); }
.menu-btn:hover .menu-btn-bar { background: var(--cream); }
.menu-btn:focus-visible {
	outline: 2px solid var(--crimson);
	outline-offset: 3px;
}
.menu-btn-bars {
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: flex-end;
	width: 26px;
}
.menu-btn-bar {
	display: block;
	height: 1.5px;
	background: var(--ink);
	transition: background 0.25s ease, width 0.25s ease;
}
.menu-btn-bar:nth-child(1) { width: 26px; }
.menu-btn-bar:nth-child(2) { width: 18px; }
.menu-btn-bar:nth-child(3) { width: 26px; }
.menu-btn:hover .menu-btn-bar:nth-child(2) { width: 26px; }

/* ──────────────────────────────────────────────────────────────
 * 2. SIDE-DRAWER OVERLAY
 *     Wellington-style two-panel slide-in.
 * ────────────────────────────────────────────────────────────── */
.overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
}
.overlay.open { pointer-events: auto; }

.overlay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.45);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.overlay.open .overlay-backdrop { opacity: 1; }

/* MAIN PANEL — slides in from right, holds level-1 list */
.overlay-main {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50vw;
	background: #FFFFFF;
	color: var(--ink);
	transform: translateX(100%);
	transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1);
	display: flex;
	flex-direction: column;
	padding: 168px 88px 56px 88px; /* top bumped 96→168 so Welcome sits well clear of the logo — Andre 2026-05-20 */
	overflow-y: auto;
}
.overlay.open .overlay-main { transform: translateX(0); }
.overlay.sub-open .overlay-main { transform: translateX(-100%); }

/* SUB PANEL — slides in from right edge.
   Frosted-glass treatment: semi-transparent fill + backdrop blur so the
   background bleeds through subtly. Two themes only:
     • crimson-bright (#E8192C)  – primary accent
     • slate         (#5C7A8F)   – calmer alternate
   The legacy crimson / crimson-deep / charcoal / cream themes were
   retired 2026-05-19 per Barbara's feedback (too dark, low contrast). */
.overlay-sub-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50vw;
	background: rgba(232, 25, 44, 0.88); /* crimson-bright @ 88% */
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	backdrop-filter: blur(22px) saturate(140%);
	color: #FFFFFF;
	transform: translateX(100%);
	transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1), background-color 0.5s ease;
	padding: 140px 88px 56px 64px;
	overflow-y: auto;
}
.overlay.sub-open .overlay-sub-panel { transform: translateX(0); }

/* Two active themes — driven by data-theme on the overlay. */
.overlay[data-theme="crimson-bright"] .overlay-sub-panel,
.overlay[data-theme="crimson"]        .overlay-sub-panel,
.overlay[data-theme="crimson-deep"]   .overlay-sub-panel {
	background: rgba(232, 25, 44, 0.88);
	color: #FFFFFF;
}
.overlay[data-theme="slate"]    .overlay-sub-panel,
.overlay[data-theme="charcoal"] .overlay-sub-panel,
.overlay[data-theme="cream"]    .overlay-sub-panel,
.overlay[data-theme="gold"]     .overlay-sub-panel,
.overlay[data-theme="grey"]     .overlay-sub-panel,
.overlay[data-theme="ink"]      .overlay-sub-panel {
	background: rgba(92, 122, 143, 0.88); /* slate @ 88% */
	color: #FFFFFF;
}

/* Reduced-motion / older-browser fallback: drop the blur and bump
   alpha so the panel still reads cleanly without backdrop-filter. */
@supports not (backdrop-filter: blur(1px)) {
	.overlay-sub-panel { background: rgba(232, 25, 44, 0.96); }
	.overlay[data-theme="slate"]    .overlay-sub-panel,
	.overlay[data-theme="charcoal"] .overlay-sub-panel,
	.overlay[data-theme="cream"]    .overlay-sub-panel,
	.overlay[data-theme="gold"]     .overlay-sub-panel,
	.overlay[data-theme="grey"]     .overlay-sub-panel,
	.overlay[data-theme="ink"]      .overlay-sub-panel {
		background: rgba(92, 122, 143, 0.96);
	}
}

/* Close button — colour adapts to whichever panel is on top.
   High specificity + !important to defeat Astra's default button
   background (orange/accent) on every state. */
button.overlay-close,
button.overlay-close:hover,
button.overlay-close:focus,
button.overlay-close:active {
	position: absolute;
	top: 32px;
	right: 40px;
	width: 48px;
	height: 48px;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	cursor: pointer;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	color: currentColor;
	z-index: 5;
	transition: transform 0.25s ease, color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}
button.overlay-close:hover { transform: rotate(90deg); }
button.overlay-close:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px;
	border-radius: 4px;
}
/* Glyph colour adapts to the panel underneath — using brand tones
   rather than plain black/white so the X reads as part of the system.
   Crimson against the white main panel; warm cream against every
   coloured sub-panel; crimson again on the cream sub-panel theme. */
body .overlay .overlay-main .overlay-close                  { color: #8B1A1A !important; } /* crimson */
body .overlay .overlay-sub-panel .overlay-close             { color: #F5F0EB !important; } /* warm cream */
body .overlay[data-theme="cream"] .overlay-sub-panel .overlay-close { color: #8B1A1A !important; }

/* Subtle hover backdrop — circle of current colour at low alpha so the
   X gets a visible "press target" feel and never disappears into bg. */
button.overlay-close::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: -1;
}
button.overlay-close:hover::before,
button.overlay-close:focus-visible::before { opacity: 0.10; }

/* LEVEL-1 LIST */
.overlay-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.overlay-item {
	position: relative;
	opacity: 0;
	transform: translateX(28px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.overlay.open .overlay-item { opacity: 1; transform: translateX(0); }
.overlay.open .overlay-item:nth-child(1) { transition-delay: 0.65s; }
.overlay.open .overlay-item:nth-child(2) { transition-delay: 0.78s; }
.overlay.open .overlay-item:nth-child(3) { transition-delay: 0.91s; }
.overlay.open .overlay-item:nth-child(4) { transition-delay: 1.04s; }
.overlay.open .overlay-item:nth-child(5) { transition-delay: 1.17s; }
.overlay.open .overlay-item:nth-child(6) { transition-delay: 1.30s; }
.overlay.open .overlay-item:nth-child(7) { transition-delay: 1.43s; }
.overlay.open .overlay-item:nth-child(8) { transition-delay: 1.56s; }

.overlay-link {
	display: block;
	padding: 24px 0;
	font-family: 'Jost', sans-serif;
	font-size: clamp(24px, 2.5vw, 34px);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--ink);
	cursor: pointer;
	transition: padding-left 0.3s ease, color 0.25s ease;
	position: relative;
	text-decoration: none;
}
.overlay-link:hover,
.overlay-link:focus-visible { padding-left: 12px; }
.overlay-link:focus-visible {
	outline: 2px solid var(--crimson);
	outline-offset: 6px;
	border-radius: 2px;
}

/* Current page indicator — server-side via .is-current class. The crimson
   text colour signals the active section; the visual dot was reading as
   a stray "." so it's been removed. The .is-current marker still slides
   in via the existing .marker rules. */
.overlay-item.is-current .overlay-link {
	color: var(--crimson);
}

/* Gold/dark-tan theme for the Portals sub-panel (differentiates from the
   editorial crimson/charcoal/cream sections). */
.overlay[data-theme="gold"] .overlay-sub-panel {
	background: #6B5337;
	color: #FFFFFF;
}
/* Active marker — coloured sliver to the left of hovered item */
.overlay-item .marker {
	position: absolute;
	left: -88px;
	top: 50%;
	width: 56px;
	height: 56px;
	background: var(--crimson);
	transform: translateY(-50%) scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.65, 0, 0.25, 1), background-color 0.3s ease;
	pointer-events: none;
}
/* Markers — match the simplified two-theme system. Any legacy data-theme
   value collapses to either Crimson Bright or Slate. */
.overlay-item[data-theme="crimson"] .marker,
.overlay-item[data-theme="crimson-deep"] .marker,
.overlay-item[data-theme="crimson-bright"] .marker { background: #E8192C; }
.overlay-item[data-theme="slate"] .marker,
.overlay-item[data-theme="charcoal"] .marker,
.overlay-item[data-theme="cream"] .marker,
.overlay-item[data-theme="gold"] .marker,
.overlay-item[data-theme="grey"] .marker,
.overlay-item[data-theme="ink"] .marker            { background: #5C7A8F; }
.overlay-item.active .marker { transform: translateY(-50%) scaleX(1); }

/* SECONDARY UTILITY LINKS (bottom of main panel) */
.overlay-utility {
	margin-top: auto;
	padding-top: 48px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 32px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s ease 1.7s, transform 0.9s ease 1.7s;
}
.overlay.open .overlay-utility { opacity: 1; transform: translateY(0); }
.overlay-utility a {
	font-size: 17.75px; /* +~27% over previous 14px — Barbara 2026-05-19 (side-drawer utility links: Vacancies, Term Dates, etc.) */
	font-weight: 500;
	color: var(--text-dim);
	transition: color 0.25s ease;
	text-decoration: none;
}
.overlay-utility a:hover,
.overlay-utility a:focus-visible { color: var(--crimson); }
/* IEP label is long — let it span both columns so it stays on one line. */
.overlay-utility a[href*="insights-education-partnership"] {
	grid-column: 1 / -1;
	white-space: nowrap;
}

/* SUB PANEL CONTENT */
.overlay-sub-title {
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 700;
	color: #FFFFFF;
	opacity: 1;
	margin-bottom: 32px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}
.overlay-sub-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.overlay-sub-list li {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.overlay.sub-open .overlay-sub-list li { opacity: 1; transform: translateY(0); }
.overlay.sub-open .overlay-sub-list li:nth-child(1) { transition-delay: 0.55s; }
.overlay.sub-open .overlay-sub-list li:nth-child(2) { transition-delay: 0.68s; }
.overlay.sub-open .overlay-sub-list li:nth-child(3) { transition-delay: 0.81s; }
.overlay.sub-open .overlay-sub-list li:nth-child(4) { transition-delay: 0.94s; }
.overlay.sub-open .overlay-sub-list li:nth-child(5) { transition-delay: 1.07s; }
.overlay.sub-open .overlay-sub-list li:nth-child(6) { transition-delay: 1.20s; }
.overlay.sub-open .overlay-sub-list li:nth-child(7) { transition-delay: 1.33s; }

.overlay-sub-list a {
	display: block;
	padding: 16px 0;
	font-family: 'Jost', sans-serif;
	font-size: clamp(17px, 1.4vw, 22px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: inherit;
	transition: padding-left 0.3s ease, text-decoration 0.2s ease;
	text-decoration: underline transparent;
	text-underline-offset: 6px;
}
.overlay-sub-list a:hover,
.overlay-sub-list a:focus-visible {
	padding-left: 8px;
	text-decoration-color: currentColor;
}

/* Disabled items (rendered when a sub-item or utility link has no URL) —
   visually faded, no hover affordance, no pointer cursor. They're never
   focusable and clicking them does nothing because there's no href. */
.overlay-sub-list a.is-disabled,
.overlay-utility a.is-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}
.overlay-sub-list a.is-disabled:hover,
.overlay-utility a.is-disabled:hover {
	padding-left: 0;
	text-decoration: none;
}

/* Logo inside overlay (main panel only) */
.overlay-logo {
	position: absolute;
	top: 32px;
	left: 88px;
	z-index: 5;
	text-decoration: none;
	color: var(--ink);
}
.overlay-logo img {
	height: 60px;
	width: auto;
	max-width: 320px;
	object-fit: contain;
	display: block;
}
.overlay-logo-text {
	font-family: 'Jost', sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Lock the body scroll when the overlay is open — JS sets body overflow,
 * but the rule below catches any case where it isn't set yet. */
body.menu-open { overflow: hidden; }

/* ──────────────────────────────────────────────────────────────
 * 3. RESPONSIVE — phone/tablet
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.topbar-inner { padding: 18px 22px 14px; }
	.menu-btn { width: 56px; height: 56px; }
	.topbar-logo img { height: 42px; }

	.overlay-main,
	.overlay-sub-panel {
		width: 100vw;
		padding: 96px 28px 32px 28px;
	}
	.overlay-sub-panel { padding-top: 120px; }
	.overlay.sub-open .overlay-main { transform: translateX(-100%); }
	.overlay-close { top: 18px; right: 18px; }
	.overlay-logo { top: 22px; left: 28px; }
	.overlay-logo img { height: 48px; }
	.overlay-item .marker { left: -28px; width: 16px; height: 36px; }
	.overlay-utility { grid-template-columns: 1fr; gap: 8px; }
	.overlay-link { font-size: 28px; padding: 10px 0; }
}

/* ──────────────────────────────────────────────────────────────
 * 3b. IMAGE REVEAL MASKS — Wellington-style scroll-in
 *     Elements with .reveal-mask start fully clipped from the right.
 *     When they enter the viewport, the IntersectionObserver in
 *     menu.js adds .in → the clip-path animates open, revealing the
 *     image like a curtain. Used on hero photos, story cards, etc.
 * ────────────────────────────────────────────────────────────── */
.reveal-mask {
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
	transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.25, 1),
	            -webkit-clip-path 1.2s cubic-bezier(0.65, 0, 0.25, 1);
	will-change: clip-path;
}
.reveal-mask.in {
	clip-path: inset(0);
	-webkit-clip-path: inset(0);
}
/* Variants — direction of the reveal sweep. Default is left-to-right. */
.reveal-mask--up {
	clip-path: inset(100% 0 0 0);
	-webkit-clip-path: inset(100% 0 0 0);
}
.reveal-mask--up.in {
	clip-path: inset(0);
	-webkit-clip-path: inset(0);
}

/* Slow zoom-in reveal — subtle scale-down + fade. Editorial hero feel. */
.reveal-zoom {
	transform: scale(1.08);
	opacity: 0;
	transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1),
	            opacity 1.1s ease-out;
	will-change: transform, opacity;
}
.reveal-zoom.in {
	transform: scale(1);
	opacity: 1;
}

/* Word-by-word fade-up — split is done by JS (splitWords()).
 * Each .word receives an inline transition-delay so stagger works
 * regardless of inline tag nesting (<em>, <strong>). */
.reveal-words .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(42px);
	transition: opacity 1.6s ease, transform 1.6s ease;
	will-change: opacity, transform;
}
.reveal-words.in .word {
	opacity: 1;
	transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────
 * 4. REDUCED MOTION
 * ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.overlay-main,
	.overlay-sub-panel,
	.overlay-item,
	.overlay-sub-list li,
	.overlay-utility,
	.overlay-item .marker,
	.overlay-link,
	.overlay-close {
		transition-duration: 0.001ms !important;
	}
	.reveal-mask,
	.reveal-mask.in,
	.reveal-mask--up,
	.reveal-mask--up.in {
		clip-path: none !important;
		-webkit-clip-path: none !important;
		transition: none !important;
	}
}