/* ============================================================
   MASTHEAD & FOOTER
   File:  theme/rar-broadsheet/assets/css/components-masthead.css
   Owner: masthead-nav agent (P1 build).
   Integrator: this file needs ONE enqueue line in functions.php, e.g.
     wp_enqueue_style( 'rar-components-masthead',
       get_theme_file_uri( 'assets/css/components-masthead.css' ),
       array(), wp_get_theme()->get( 'Version' ) );
   Contract: docs/DESIGN-SYSTEM.md sections 3-5; docs/SPEC.md section 3.
   Palette only: paper #f4efe4 / paper-slip #faf6ea / paper-shade #eae3d2 /
   ink #1a1712 / red #8c1f13 (red is unused here). No motion in this file;
   hover states are instant ink changes, FX owns all animation.
   ============================================================ */

/* ---------- 0. Masthead frame: everything sits on paper ---------- */

.rar-masthead {
	background: transparent; /* no dark header band, ever (SPEC section 3) */
	color: var(--wp--preset--color--ink, #1a1712);
	padding: 21px 0 0;
}

/* ---------- 1. Ears row: dateline left, motto right ---------- */

.rar-masthead .rar-ears {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 26px;
	margin: 0 0 8px;
}

.rar-masthead .rar-ears > * {
	margin: 0;
	font-family: "Courier Prime", "Courier New", Courier, monospace;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1712);
}

.rar-masthead .rar-ears > *:last-child {
	margin-left: auto;
	text-align: right;
}

/* ---------- 2. Nameplate: live text, Chomsky, centered ---------- */

.rar-masthead .rar-nameplate {
	margin: 13px 0 8px;
	font-family: Chomsky, "Old English Text MT", "Times New Roman", serif;
	font-size: clamp(44px, 7vw, 92px);
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--wp--preset--color--ink, #1a1712);
}

.rar-masthead .rar-nameplate a {
	color: inherit;
	text-decoration: none;
}

.rar-masthead .rar-nameplate a:hover,
.rar-masthead .rar-nameplate a:focus-visible {
	text-decoration: none; /* the nameplate is page furniture, not a styled link */
}

/* ---------- 3. Folio line: small caps flanked by short rules ---------- */

.rar-masthead .rar-folio-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	margin: 0 0 13px;
	font-family: "Libre Caslon Display", "Playfair Display", Georgia, serif;
	font-variant-caps: small-caps;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--wp--preset--color--ink, #1a1712);
}

.rar-masthead .rar-folio-line::before,
.rar-masthead .rar-folio-line::after {
	content: "";
	flex: 0 1 55px;
	height: 1px;
	background: var(--wp--preset--color--ink, #1a1712);
}

/* ---------- 4. The Oxford rule: 3px rule, 3px gap, 1px rule ----------
   Canonical recipe lives in style.css (.rar-rule-oxford: border-top 3px
   + 3px gap + ::after 1px, 7px total; Gate A dedupe per DESIGN-SYSTEM
   section 3 "implement once"). This scoped rule adds NO geometry:
   height, position, and the ::after lower rule all come from the
   canonical class on the same element. What stays here only
   neutralizes core wp-block-separator styling (the element is an hr
   separator block; core print order relative to style.css is not
   guaranteed): the border reset repeats the canonical 3px value so a
   core border-top can never win, and background/opacity undo the
   separator defaults. width/margin are masthead-local layout. */

.rar-masthead .rar-rule-oxford {
	width: 100%;
	max-width: none;
	margin: 0 0 8px;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--ink, #1a1712); /* matches canonical; specificity armor only */
	background: none;
	opacity: 1;
}

/* ---------- 5. Nav row: all-caps Oswald, middot-separated ----------
   The block is set to never collapse into core's slide-out panel, so no
   core view script ships. The ul is width:max-content with auto inline
   margins: it centers when it fits and scrolls edge-to-edge when not.

   Below 760px this row is replaced by the top bar and index panel in
   section 6, which is our own markup and our own handler rather than
   core's overlay. The horizontal scroll behaviour here remains the
   no-JS fallback at those widths and is still what runs on a narrow
   window above 760px. */

.rar-masthead .rar-nav {
	background: none; /* no backgrounds on or behind the nav */
	margin: 0;
	padding: 4px 0 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	font-family: Oswald, "Archivo Narrow", "Arial Narrow", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rar-masthead .rar-nav::-webkit-scrollbar {
	display: none;
}

.rar-masthead .rar-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: max-content;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.rar-masthead .rar-nav li {
	display: flex;
	align-items: center;
	background: none;
}

.rar-masthead .rar-nav li + li::before {
	content: "\00B7"; /* middot separator, printer's furniture */
	margin: 0 13px;
	color: var(--wp--preset--color--ink, #1a1712);
}

.rar-masthead .rar-nav a {
	padding: 4px 0;
	color: var(--wp--preset--color--ink, #1a1712);
	background: none;
	text-decoration: none;
	white-space: nowrap;
}

.rar-masthead .rar-nav a:hover,
.rar-masthead .rar-nav a:focus-visible {
	text-decoration: underline; /* ink only; no color change, no motion */
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Active page: underlined, nothing else (SPEC section 3 item 5).
   aria-current is what core emits on the matching link; current-menu-item
   is core's belt-and-braces class on the li. */

.rar-masthead .rar-nav a[aria-current="page"],
.rar-masthead .rar-nav .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* ---------- 6. Mobile top bar + index panel (<= 760px) ----------
   The complaint this answers: below 760px the nav row in section 5
   scrolls horizontally with no affordance, so four of the six links are
   simply invisible. This adds a printer's furniture strip above the
   nameplate carrying a home glyph on the left and a MENU control on the
   right, and a drop-down index set like a newspaper's own index box:
   paper ground, hairline rules between entries, Oswald caps, no card,
   no shadow, no motion.

   Progressive enhancement contract. The bar ships with the `hidden`
   attribute on it and main.js section 6 removes that attribute only
   after it has cloned the nav links into the panel and wired the
   button. So every rule that reveals the bar, and the one that retires
   the scrolling nav row, is gated on :not([hidden]). With no JS the bar
   never appears and section 5's nav row stays exactly as it is: the
   fallback is today's behaviour, not a dead end.

   The ears row is hidden on mobile unconditionally (owner directive,
   2026-08-03): the dateline and the motto are the two least load
   bearing lines on a phone, and the folio line under the nameplate
   still carries a tagline. */

.rar-topbar {
	display: none;
}

@media (max-width: 760px) {

	.rar-masthead {
		padding-top: 0; /* the bar is the top of the sheet now */
	}

	/* Bar. Full bleed: .rar-paper carries 13px side padding below
	   1100px, so the negative margin lets the pinned strip reach both
	   screen edges instead of leaving gutters for content to scroll
	   through. Grain over paper keeps it newsprint rather than chrome.
	   z-index 30 clears the article furniture (max 3) and stays under
	   the subscribe dialog (90). */
	.rar-topbar:not([hidden]) {
		position: sticky;
		top: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 13px;
		min-height: 44px;
		margin: 0 -13px;
		padding: 0 13px;
		background-color: var(--wp--preset--color--paper, #f4efe4);
		background-image: var(--rar-grain);
		border-bottom: 1px solid var(--wp--preset--color--ink, #1a1712);
		color: var(--wp--preset--color--ink, #1a1712);
	}

	/* Both controls are 44px tall so the touch targets meet the sheet
	   edge to edge; the negative side padding keeps the glyph and the
	   label optically flush with the body measure. */
	.rar-topbar-home,
	.rar-topbar-menu {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		text-decoration: none;
		cursor: pointer;
	}

	.rar-topbar-menu {
		font-family: "Courier Prime", "Courier New", Courier, monospace;
		font-size: 12px;
		line-height: 1;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	/* Three ink rules, the same furniture the Oxford rule is made of.
	   Drawn with a border and two absolute children rather than a glyph
	   file: no icon font, no extra request. */
	.rar-burger {
		position: relative;
		display: block;
		width: 21px;
		height: 2px;
		background: currentColor;
	}

	.rar-burger::before,
	.rar-burger::after {
		content: "";
		position: absolute;
		left: 0;
		width: 21px;
		height: 2px;
		background: currentColor;
	}

	.rar-burger::before {
		top: -6px;
	}

	.rar-burger::after {
		top: 6px;
	}

	/* Index panel. Anchored to the bar (a sticky element is a positioned
	   element, so absolute children travel with it while pinned). The
	   3px lower rule is the Oxford rule's heavy half, closing the box
	   the way a printed index is closed. */
	.rar-index {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 13px;
		background-color: var(--wp--preset--color--paper, #f4efe4);
		background-image: var(--rar-grain);
		border-bottom: 3px solid var(--wp--preset--color--ink, #1a1712);
	}

	.rar-index[hidden] {
		display: none;
	}

	.rar-index ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.rar-index li + li {
		border-top: 1px solid var(--wp--preset--color--ink, #1a1712);
	}

	.rar-index a {
		display: block;
		padding: 15px 0;
		font-family: Oswald, "Archivo Narrow", "Arial Narrow", sans-serif;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--wp--preset--color--ink, #1a1712);
	}

	.rar-index a:hover,
	.rar-index a:focus-visible {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}

	.rar-index a[aria-current="page"] {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}

	/* Ears retire unconditionally at this width. The scrolling nav row
	   retires only once the bar is live, so a JS failure keeps it.
	   main.js section 6 re-parents the bar to .rar-paper for the sticky
	   to survive past the masthead, which leaves the nav row inside a
	   FOLLOWING SIBLING subtree rather than beside it: hence `~ *` and
	   then the descendant, which matches in both positions. */
	.rar-masthead .rar-ears {
		display: none;
	}

	.rar-topbar:not([hidden]) ~ .rar-nav,
	.rar-topbar:not([hidden]) ~ * .rar-nav {
		display: none;
	}

	/* Nameplate. "Republicans are Racists" wraps after the second word on
	   a phone, so the last word is given its own line deliberately and
	   set larger: the fold of a folded paper, where the name is the
	   thing you see first. Wrapping into per-word spans is done by
	   rar_nameplate_words() in functions.php, so the rule keys off the
	   last word rather than a hard-coded string. */
	.rar-masthead .rar-nameplate {
		margin-top: 21px;
	}

	.rar-nameplate-word:last-child {
		display: block;
		margin-top: 2px;
		font-size: clamp(56px, 17vw, 92px);
		line-height: 0.95;
	}
}

/* ---------- 7. Footer: hairline rule + two Courier lines ---------- */

.rar-footer {
	margin: 34px 0 0;
	padding: 0 0 26px;
	background: transparent;
	color: var(--wp--preset--color--ink, #1a1712);
	text-align: center;
}

.rar-footer .rar-rule {
	width: 100%;
	max-width: none;
	height: 0;
	margin: 0 0 13px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--ink, #1a1712);
	background: none;
	opacity: 1;
}

.rar-footer p {
	margin: 0 0 4px;
	font-family: "Courier Prime", "Courier New", Courier, monospace;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1a1712);
}

.rar-footer a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.rar-footer a:hover,
.rar-footer a:focus-visible {
	text-decoration-thickness: 2px; /* ink pressed harder; no color change */
}