/**
 * header.css — live strip, top bar, search bar, mega panel.
 *
 * The header is the one piece of chrome on every page, so it stays lean:
 * no sticky positioning cost on mobile, no layout shift as the live strip
 * refreshes (values are server-rendered first, then replaced in place).
 */

/* ---------- Live data strip ---------- */

/*
 * Light, not a black strip. The whole header is now white with hairline
 * divisions — the numbers still read at a glance because they are set bold
 * against muted labels, which is what separated them on the dark ground too.
 */
.ils-live-strip {
	display: flex;
	gap: var(--ils-sp-4);
	align-items: center;
	overflow-x: auto;
	padding: var(--ils-sp-2) var(--ils-gutter);
	border-bottom: var(--ils-border-hairline);
	background: var(--ils-bg);
	color: var(--ils-fg);
	font-size: var(--ils-fs-xs);
	white-space: nowrap;
	scrollbar-width: none;
}

.ils-live-strip::-webkit-scrollbar {
	display: none;
}

.ils-live-strip__tile {
	display: flex;
	gap: var(--ils-sp-1);
	align-items: center;
	flex: 0 0 auto;
}

.ils-live-strip__label {
	color: var(--ils-fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ils-live-strip__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* The AA-passing greens and reds, now that the ground is white. */
.ils-live-strip__change--up {
	color: var(--ils-up);
}

.ils-live-strip__change--down {
	color: var(--ils-down);
}

.ils-live-strip__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ils-live);
	animation: ils-pulse 2s ease-in-out infinite;
}

@keyframes ils-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.ils-live-strip__live-dot {
		animation: none;
	}
}

/* ---------- Utility bar ---------- */

/*
 * The thin strip above the masthead: date and edition left, account right.
 * Hidden below tablet — on a phone the vertical space is worth more than the
 * date, and the account control is repeated as an icon in the masthead.
 */
.ils-utility-bar {
	display: none;
	border-bottom: var(--ils-border-hairline);
	background: var(--ils-bg);
	color: var(--ils-fg);
}

.ils-utility-bar__inner {
	display: flex;
	gap: var(--ils-sp-4);
	align-items: center;
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: var(--ils-sp-2) var(--ils-gutter);
	font-size: var(--ils-fs-xs);
}

.ils-utility-bar__date {
	margin: 0;
	color: var(--ils-fg-muted);
}

.ils-utility-bar__editions {
	display: flex;
	gap: var(--ils-sp-3);
}

.ils-utility-bar__edition,
.ils-utility-bar__link {
	color: var(--ils-gray-600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ils-utility-bar__edition:hover,
.ils-utility-bar__link:hover {
	color: var(--ils-red);
}

/*
 * Set client-side from the cookie by inc/edition.php, so the server always
 * ships aria-pressed="false" and the HTML stays identical for every visitor.
 */
.ils-utility-bar__edition[aria-pressed="true"] {
	color: var(--ils-fg);
	box-shadow: inset 0 -2px 0 var(--ils-red);
}

.ils-utility-bar__account {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: center;
	margin-left: auto;
}

/* An outlined button rather than a filled red one. */
.ils-utility-bar__cta {
	padding: 0.35em 0.9em;
	border: 1px solid var(--ils-red);
	color: var(--ils-red);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ils-utility-bar__cta:hover {
	background: var(--ils-red);
	color: var(--ils-white);
	text-decoration: none;
}

/* ---------- Masthead ---------- */

.ils-top-bar {
	border-bottom: var(--ils-border-hairline);
	background: var(--ils-bg);
}

.ils-top-bar__inner {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: center;
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: var(--ils-sp-3) var(--ils-gutter);
}

.ils-top-bar__logo {
	flex: 0 0 auto;
}

.ils-top-bar__logo img {
	display: block;
	width: auto;
	height: 42px;
}

/* Inline categories are desktop-only; on mobile everything lives under Sections. */
.ils-top-bar__cats {
	display: none;
}

.ils-top-bar__cats ul {
	display: flex;
	gap: var(--ils-sp-4);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ils-top-bar__cats a {
	position: relative;
	display: block;
	padding: var(--ils-sp-2) 0;
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/*
 * The underline is drawn on a pseudo-element rather than with border-bottom so
 * it can animate from nothing without the link shifting by a pixel on hover.
 */
.ils-top-bar__cats a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--ils-red);
	transform: scaleX(0);
	transition: transform var(--ils-transition);
}

.ils-top-bar__cats a:hover::after,
.ils-top-bar__cats a[aria-current="page"]::after {
	transform: scaleX(1);
}

.ils-top-bar__cats a:hover {
	text-decoration: none;
}

.ils-top-bar__more {
	display: flex;
	gap: var(--ils-sp-2);
	align-items: center;
	padding: var(--ils-sp-2);
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

/* A three-line burger drawn with one element and two shadows. */
.ils-top-bar__burger,
.ils-top-bar__burger::before,
.ils-top-bar__burger::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--ils-transition), opacity var(--ils-transition);
}

.ils-top-bar__burger {
	position: relative;
}

.ils-top-bar__burger::before,
.ils-top-bar__burger::after {
	content: "";
	position: absolute;
	left: 0;
}

.ils-top-bar__burger::before {
	top: -6px;
}

.ils-top-bar__burger::after {
	top: 6px;
}

/* Burger becomes a cross while the panel is open. */
.ils-top-bar__more[aria-expanded="true"] .ils-top-bar__burger {
	background: transparent;
}

.ils-top-bar__more[aria-expanded="true"] .ils-top-bar__burger::before {
	top: 0;
	transform: rotate(45deg);
}

.ils-top-bar__more[aria-expanded="true"] .ils-top-bar__burger::after {
	top: 0;
	transform: rotate(-45deg);
}

.ils-top-bar__more-label {
	display: none;
}

.ils-top-bar__actions {
	display: flex;
	gap: var(--ils-sp-1);
	align-items: center;
	margin-left: auto;
}

.ils-top-bar__icon-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ils-top-bar__icon-btn:hover {
	color: var(--ils-red);
}

/* The account icon duplicates the utility bar, which is hidden on mobile. */
.ils-top-bar__account {
	display: grid;
}

/* ---------- Section nav ---------- */

/*
 * The full map of the paper in one dense row. It scrolls horizontally on narrow
 * screens rather than wrapping to three lines or collapsing into a burger: a
 * reader can still swipe to any section, and the masthead keeps its height.
 */
.ils-section-nav {
	border-bottom: var(--ils-border-hairline);
	background: var(--ils-bg);
	color: var(--ils-fg);
}

.ils-section-nav__inner {
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: 0 var(--ils-gutter);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ils-section-nav__inner::-webkit-scrollbar {
	display: none;
}

.ils-section-nav__list {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.ils-section-nav__list a,
.ils-section-nav__link {
	position: relative;
	display: block;
	padding: var(--ils-sp-3);
	color: var(--ils-gray-700);
	font-size: var(--ils-fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ils-section-nav__list a:hover,
.ils-section-nav__link:hover {
	color: var(--ils-red);
	text-decoration: none;
}

/* The current section gets a red underline — a line, not a filled tab. */
.ils-section-nav__list a[aria-current="page"],
.ils-section-nav__link[aria-current="page"],
.ils-section-nav__list .current-menu-item > a {
	color: var(--ils-fg);
	box-shadow: inset 0 -3px 0 var(--ils-red);
}

/* ---------- Hot Topics ---------- */

.ils-hot-topics {
	border-bottom: var(--ils-border-hairline);
	background: var(--ils-bg);
}

.ils-hot-topics__inner {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: baseline;
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: var(--ils-sp-3) var(--ils-gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.ils-hot-topics__inner::-webkit-scrollbar {
	display: none;
}

.ils-hot-topics__label {
	flex: 0 0 auto;
	color: var(--ils-red);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ils-hot-topics__list {
	display: flex;
	gap: var(--ils-sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.ils-hot-topics__item + .ils-hot-topics__item {
	padding-left: var(--ils-sp-4);
	border-left: 1px solid var(--ils-rule);
}

.ils-hot-topics__item a {
	font-size: var(--ils-fs-sm);
	font-weight: 600;
}

.ils-hot-topics__item a:hover {
	color: var(--ils-red);
}

/* ---------- Search bar ---------- */

.ils-search-bar {
	border-bottom: var(--ils-border-hairline);
	background: var(--ils-gray-100);
}

.ils-search-bar__inner {
	display: flex;
	gap: var(--ils-sp-2);
	align-items: center;
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: var(--ils-sp-3) var(--ils-gutter);
}

.ils-search-bar__inner form {
	display: flex;
	flex: 1;
	gap: var(--ils-sp-2);
}

.ils-search-bar__input {
	flex: 1;
	padding: var(--ils-sp-3);
	border: 1px solid var(--ils-rule-strong);
	background: var(--ils-white);
	font: inherit;
	font-size: var(--ils-fs-md);
}

.ils-search-bar__submit {
	display: grid;
	place-items: center;
	padding: 0 var(--ils-sp-4);
	background: var(--ils-red);
	color: var(--ils-white);
}

.ils-search-bar__close {
	padding: var(--ils-sp-2);
}

/* ---------- Mega panel ---------- */

.ils-mega-panel {
	position: relative;
	z-index: var(--ils-z-panel);
	border-bottom: var(--ils-accent-line);
	background: var(--ils-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ils-mega-panel__inner {
	max-width: var(--ils-max-width);
	margin: 0 auto;
	padding: var(--ils-sp-5) var(--ils-gutter);
}

.ils-mega-panel__rule {
	margin: var(--ils-sp-4) 0;
}

/* Edition switcher */
.ils-mega-panel__editions {
	display: flex;
	gap: var(--ils-sp-2);
	flex-wrap: wrap;
}

.ils-edition-btn {
	padding: var(--ils-sp-2) var(--ils-sp-4);
	border: 1px solid var(--ils-rule-strong);
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ils-edition-btn:hover {
	border-color: var(--ils-red);
	color: var(--ils-red);
	text-decoration: none;
}

/*
 * The active edition is set by the inline script in inc/edition.php, which
 * reads the cookie and flips aria-pressed client-side. The server always ships
 * aria-pressed="false", so the page stays byte-identical for every visitor.
 */
.ils-edition-btn[aria-pressed="true"] {
	border-color: var(--ils-red);
	color: var(--ils-red);
	box-shadow: inset 0 -2px 0 var(--ils-red);
}

/* Column groups (shared with the footer) */
.ils-col-groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ils-sp-5);
}

.ils-col-group__title {
	margin-bottom: var(--ils-sp-2);
	padding: var(--ils-sp-2) 0;
	border-top: var(--ils-accent-line);
	font-family: var(--ils-font-sans);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ils-col-group__list li + li {
	margin-top: var(--ils-sp-2);
}

.ils-col-group__list a {
	color: var(--ils-gray-600);
	font-size: var(--ils-fs-sm);
}

/* Follow row */
.ils-mega-panel__follow {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: center;
	flex-wrap: wrap;
}

.ils-mega-panel__follow-label {
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ils-mega-panel__close {
	position: absolute;
	top: var(--ils-sp-3);
	right: var(--ils-gutter);
	padding: var(--ils-sp-2);
}

/* ---------- Tablet ---------- */

@media (min-width: 48em) {
	.ils-col-groups {
		grid-template-columns: repeat(3, 1fr);
	}

	.ils-utility-bar {
		display: block;
	}

	.ils-top-bar__more-label {
		display: inline;
	}

	.ils-top-bar__logo img {
		height: 50px;
	}
}

/* ---------- Desktop ---------- */

@media (min-width: 64em) {
	.ils-top-bar__cats {
		display: block;
		margin-left: var(--ils-sp-4);
	}

	/*
	 * The account icon is the mobile stand-in for the utility bar's Sign in /
	 * Register pair. Once that bar is showing its full width, the icon is a
	 * duplicate control pointing at the same place.
	 */
	.ils-top-bar__account {
		display: none;
	}

	.ils-col-groups {
		grid-template-columns: repeat(6, 1fr);
	}
}