/**
 * Shared Figma finishing rules.
 *
 * This file is intentionally loaded after the legacy theme stylesheet. Keep
 * the selectors limited to shared typography, header, navigation, and footer.
 */

/* Gotham Book ships with the theme but the legacy font map omitted weight 400.
 * Register it once for every Figma-authored module that calls for Book. */
@font-face {
	font-display: swap;
	font-family: "Gotham Book";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Gotham-Book.woff2") format("woff2"),
		url("../fonts/Gotham-Book.woff") format("woff");
}

/* The legacy font map registers exactly one Gotham italic face - Light Italic at
 * weight 300. CSS matches font-style before font-weight, so any italic request in
 * the "Gotham" family resolves to that Light face no matter the weight asked for,
 * silently rendering Figma's Black Italic runs at the lightest weight on the page.
 * Exposing Black through its own single-face family removes the wrong-weight match:
 * an italic request finds only the 900 upright and is obliqued from it. */
@font-face {
	font-display: swap;
	font-family: "Gotham Black";
	font-style: normal;
	font-weight: 900;
	src: url("../fonts/Gotham-Black.woff2") format("woff2"),
		url("../fonts/Gotham-Black.woff") format("woff");
}

/* Shared Work-introduction typography. These are deliberately global to every
 * Work case study; route geometry remains in the route-specific final files. */
.work-sample .work-about .title {
	font-family: "Gotham", sans-serif;
	font-weight: 700;
}

/* Work body copy intentionally stays on production's Gotham Light. Figma
 * (including 324:675, the design production was built from) specifies Gotham
 * Book, but the Book face was never registered in the original build, so the
 * live site has always rendered Light. Applying Book here changed the look of
 * every existing Work page, which is out of scope for this engagement. The
 * Book face remains registered below and is used only by the new homepage
 * Latest News module. Revisit as a deliberate, approved typography change. */

/* Campaign-platform runs ("For the Ones Who Cared for You", "Look Closer") are
 * Gotham Black Italic in Figma. The "Gotham" family registers only ONE italic
 * face - Light Italic at weight 300 - and CSS matches font-style before
 * font-weight, so italic+900 resolves to Light Italic and is then synthetically
 * emboldened, which reads as not-bold. Resolving through the Black-only family
 * keeps the authored weight and lets the browser synthesize just the slant.
 * Mirrors the homepage treatment in home-news.css. */
.work-sample .work-about .desc strong,
.work-sample .work-about .desc b,
.work-sample .work-about .work-about__right strong,
.work-sample .work-about .work-about__right b {
	font-family: "Gotham Black", "Gotham", sans-serif;
	font-weight: 900;
}

/* Mirrors production's real header heights so the menu's viewport calc stays
 * correct: 96px from 751px up, 80px below. No visual header change. */
.header {
	--seiden-header-height: 96px;
}

/* Reset native button chrome without changing the established burger box. */
.header .header__burger {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

.header .logo:focus-visible,
.header .header__burger:focus-visible,
.header__menu a:focus-visible {
	outline: 3px solid #ffcf61;
	outline-offset: 4px;
}

/* The menu begins below the fixed header, so only the remaining viewport is usable. */
/* Production sizes the open menu at 100vh starting below the fixed header, so
 * the panel deliberately overshoots the viewport. That overshoot is what keeps
 * the screen fully covered when mobile browser chrome hides and the visible
 * area grows past innerHeight; an exact calc() fit leaves a strip of the page
 * showing at the bottom. Production's sizing is kept as-is - only scrolling is
 * added, which is inert unless the links exceed the panel. */
.header__menu {
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * main.js measures the disappearing scrollbar before it locks the page.
 * Compensate the document and the viewport-fixed header independently so the
 * authored header controls remain stationary while the scrollbar disappears.
 */
body.hidden {
	margin-right: 0;
	padding-right: var(--seiden-scrollbar-compensation, 0px);
}

body.hidden .header > .container {
	padding-right: var(--seiden-header-padding-inline-end);
}

@media (max-width: 750px) {
	.header {
		--seiden-header-height: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header,
	.header .header__burger span,
	.header .header__burger::before,
	.header .header__burger::after {
		transition: none;
	}
}