/* ==========================================================================
   NAVIGATION STATES 03, 04, 09, 10, 11, 12

   The navigation spec lists twelve header states. Six shipped in the static
   handoff; these are the other six, which the spec flags as specified and
   unbuilt. Everything here is new code, which is why it is in its own file
   rather than mixed into the handed-off stylesheet.

   No new breakpoints: 900px and 760px are the two the design system already
   uses to divide desktop, tablet and phone. No new colours: every value is an
   existing token, so these states re-skin with the rest of the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   03 · MEGA MENU
   A full-bleed panel under the header. The handed-off .mega grid is reused
   verbatim; only the positioning is new.
   -------------------------------------------------------------------------- */

.megawrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 190;
	padding: 0 var(--s5);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	pointer-events: none;
}

.megawrap[data-open="true"] {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.megawrap > .mega {
	max-width: var(--container);
	margin: 0 auto;
}

/* The first link in each column is the most-read item, per the spec. */
.megawrap .mega a[aria-current="page"] {
	color: var(--accent);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.megawrap {
		transition: none;
	}
}

/* The panel is a desktop affordance; below 900px the drawer takes over. */
@media (max-width: 900px) {
	.megawrap {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   04 · SEARCH FOCUS AND TYPE-AHEAD
   The field expands into a second header row; the suggestion panel is
   width-matched and right-aligned to it.
   -------------------------------------------------------------------------- */

.hdrsearch {
	position: relative;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--s3);
	flex: 0 1 520px;
	min-width: 0;
}

.hdrsearch .searchframe {
	flex: 1;
	box-shadow: none;
	padding: 6px;
	min-width: 0;
}

.hdrsearch .searchinner .sq {
	width: 36px;
	height: 36px;
	font-size: 16px;
}

.hdrsearch input[type="search"] {
	padding: 9px 0;
	font-size: 15px;
}

.typeahead {
	position: absolute;
	top: calc(100% + var(--s3));
	right: 0;
	width: 100%;
	max-width: 520px;
	z-index: 195;
	margin: 0;
}

.typeahead[hidden] {
	display: none;
}

.typeahead .fac[aria-selected="true"] {
	background: var(--paper-2);
	color: var(--ink);
}

/*
 * The safety shortcut is pinned to the bottom of the panel regardless of the
 * query. A reader who is searching because someone is unwell must not have to
 * phrase the query correctly to be routed.
 */
.typeahead .safetypin {
	padding: var(--s4);
	margin-top: var(--s4);
	border: 1px solid var(--risk-line);
	background: var(--risk-bg);
	border-radius: var(--r-sm);
}

.typeahead .safetypin a {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 13.5px/1.4 var(--ui);
	color: var(--risk);
	text-decoration: none;
}

@media (max-width: 900px) {
	.hdrsearch {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   09 and 10 · DRAWER LEVELS TWO AND THREE
   The handed-off .drawer panel becomes a real slide-in. Levels are sibling
   panels translated across a single track, so Back is a transform and not a
   re-render.
   -------------------------------------------------------------------------- */

.mhdrawer {
	position: fixed;
	inset: 0;
	z-index: 240;
	display: none;
}

.mhdrawer[data-open="true"] {
	display: block;
}

.mhdrawer .scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .48);
	border: 0;
	padding: 0;
	width: 100%;
	cursor: pointer;
}

.mhdrawer .track {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(412px, 92vw);
	background: var(--card);
	overflow: hidden;
	display: grid;
	grid-template-columns: 100% 100% 100%;
	transition: transform .2s ease;
	box-shadow: var(--sh-pill);
}

.mhdrawer[data-level="1"] .track { transform: translateX(0); }
.mhdrawer[data-level="2"] .track { transform: translateX(-100%); }
.mhdrawer[data-level="3"] .track { transform: translateX(-200%); }

.mhdrawer .drawer {
	border: 0;
	border-radius: 0;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* The level header: Back on the left, Close always reachable on the right. */
.mhdrawer .dh button {
	background: none;
	border: 0;
	padding: 6px;
	margin: -6px;
	cursor: pointer;
	color: inherit;
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mhdrawer .dh .dclose {
	color: var(--ink-2);
	font-size: 20px;
	margin-left: auto;
}

.mhdrawer .dr {
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font: 500 15px/1.3 var(--ui);
}

@media (prefers-reduced-motion: reduce) {
	.mhdrawer .track {
		transition: none;
	}
}

@media (min-width: 901px) {
	.mhdrawer {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   11 · SEARCH OVERLAY
   Replaces the header entirely rather than sitting under it, so the on-screen
   keyboard still leaves room for four results.
   -------------------------------------------------------------------------- */

.searchoverlay {
	position: fixed;
	inset: 0;
	z-index: 250;
	background: var(--paper);
	display: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.searchoverlay[data-open="true"] {
	display: block;
}

.searchoverlay .drawer {
	border: 0;
	border-radius: 0;
	background: var(--paper);
}

.searchoverlay .dh {
	gap: var(--s3);
	position: sticky;
	top: 0;
	background: var(--card);
	z-index: 1;
}

.searchoverlay .dh .searchframe {
	flex: 1;
	box-shadow: none;
	padding: 5px;
	min-width: 0;
}

.searchoverlay .dh input[type="search"] {
	padding: 8px 0;
	font-size: 15px;
}

.searchoverlay .dh .oclose {
	background: none;
	border: 0;
	cursor: pointer;
	font: 600 13px/1 var(--ui);
	color: var(--ink-2);
	flex: none;
	padding: 8px;
}

.searchoverlay .safetypin {
	margin: var(--s4);
	padding: var(--s4);
	background: var(--risk-bg);
	border: 1px solid var(--risk-line);
	border-radius: var(--r-sm);
}

.searchoverlay .safetypin a {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 13.5px/1.4 var(--ui);
	color: var(--risk);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   12 · STICKY "ON THIS PAGE"
   Article templates only, pinned to the bottom edge, expanding upward into the
   full contents list. It sits above the sticky safety bar in the stack but
   never covers it: the safety route stays the last thing on screen.
   -------------------------------------------------------------------------- */

.onthispage {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: none;
	background: var(--card);
	border-top: 1px solid var(--rule);
}

.onthispage .otbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 12px var(--s4);
	text-align: left;
	font: inherit;
	color: inherit;
}

.onthispage .otlab {
	display: block;
	font: 600 10.5px/1 var(--ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 5px;
}

.onthispage .otcur {
	display: block;
	font: 600 14px/1.3 var(--ui);
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.onthispage .otchev {
	font-size: 20px;
	color: var(--ink-2);
	flex: none;
	transition: transform .16s ease;
}

.onthispage[data-open="true"] .otchev {
	transform: rotate(180deg);
}

.onthispage .otlist {
	display: none;
	max-height: 52vh;
	overflow-y: auto;
	border-top: 1px solid var(--rule);
}

.onthispage[data-open="true"] .otlist {
	display: block;
}

.onthispage .otlist a {
	display: block;
	padding: 13px var(--s4);
	border-bottom: 1px solid var(--rule);
	font: 500 14.5px/1.4 var(--ui);
	color: var(--ink-2);
	text-decoration: none;
	min-height: 48px;
}

.onthispage .otlist a[aria-current="true"] {
	color: var(--ink);
	font-weight: 600;
	background: var(--paper-2);
}

/*
 * Below 760px the sticky safety bar is also on screen. The contents bar sits
 * directly above it rather than over it, and the page gets bottom padding for
 * both, so neither ever covers the end of the article.
 */
@media (max-width: 900px) {
	.onthispage.has-toc {
		display: block;
	}
}

@media (max-width: 760px) {
	.onthispage.has-toc {
		bottom: var(--mh-stickybar-h, 0px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.onthispage .otchev,
	.onthispage .otlist {
		transition: none;
	}
}