/* ============================================================
   Site header, nav, brand
   ============================================================ */

.osw-header {
	/* Solid pure black, per request -- no ground-tint or blur-through. */
	background: #000;
	border-bottom: 1px solid var(--osw-line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.osw-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--osw-gap);
	min-height: 80px;
	/* 20% more again on top of the already-bumped clamp(0.65rem, 1.625vw, 1.1rem). */
	padding-block: clamp(0.78rem, 1.95vw, 1.32rem);
}

.osw-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--osw-ink);
}

/* Logo ~320px on desktop, scaling down fluidly while holding its ratio. The
   header bar just gained more vertical padding, so there's room for a
   bigger lockup without forcing the bar back open. */
.osw-brand__logo {
	width: clamp(220px, 24vw, 320px);
	height: auto;
}
.osw-brand__logo--light { display: none; }
.osw-brand__logo--dark  { display: block; }
[data-theme="light"] .osw-brand__logo--light { display: block; }
[data-theme="light"] .osw-brand__logo--dark  { display: none; }

/* Skip link -- visible only when focused */
.osw-skip:focus {
	position: fixed;
	top: 8px; left: 8px;
	width: auto; height: auto;
	padding: 0.6rem 1rem;
	margin: 0; clip: auto;
	background: var(--osw-red);
	color: #fff;
	z-index: 100;
	border-radius: 4px;
}

/* Screen-reader-only: visually hidden but present for assistive tech. Used by
   the skip link (until focused) and any other visually-hidden labels. */
.osw-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.osw-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }

/* WordPress menus arrive as nested lists. Strip the list chrome and lay the
   top level out inline; the fallback menu emits bare links and is unaffected. */
.osw-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.osw-nav li { list-style: none; margin: 0; padding: 0; position: relative; }

.osw-nav a {
	font-family: var(--osw-condensed);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--osw-step-3);
	font-weight: 600;
	text-decoration: none;
	color: var(--osw-ink);
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s, color 0.15s;
}
.osw-nav a:hover,
.osw-nav a[aria-current="page"] { border-color: var(--osw-red); }

/* Second-level dropdown */
.osw-nav .sub-menu,
.osw-nav .children {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 60;
	display: block;
	min-width: 11rem;
	padding: 0.35rem 0;
	background: var(--osw-panel);
	border: 1px solid var(--osw-line);
	border-radius: 8px;
	box-shadow: var(--osw-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.osw-nav li:hover > .sub-menu,
.osw-nav li:focus-within > .sub-menu,
.osw-nav li:hover > .children,
.osw-nav li:focus-within > .children {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.osw-nav .sub-menu a,
.osw-nav .children a {
	display: block;
	padding: 0.5rem 1rem;
	border-bottom: 0;
	white-space: nowrap;
	font-size: var(--osw-step-0);
}
.osw-nav .sub-menu a:hover,
.osw-nav .children a:hover { color: var(--osw-red); }

/* Social: one dropdown per network, listing each team's account. */
.osw-nav__social { display: flex; gap: 0.4rem; }
.osw-social { position: relative; }
.osw-social__btn {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--osw-ink);
	transition: color 0.15s;
}
.osw-social__btn:hover,
.osw-social__btn[aria-expanded="true"] { color: var(--osw-red); }
.osw-social__btn svg { width: 22px; height: 22px; fill: currentColor; }

.osw-social__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	min-width: 9rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--osw-panel);
	border: 1px solid var(--osw-line);
	border-radius: 8px;
	box-shadow: var(--osw-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.osw-social[data-open="true"] .osw-social__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.osw-social__menu a {
	display: block;
	padding: 0.5rem 1rem;
	font-family: var(--osw-condensed);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--osw-step-0);
	font-weight: 600;
	text-decoration: none;
	color: var(--osw-ink);
	white-space: nowrap;
	transition: color 0.15s, background 0.15s;
}
.osw-social__menu a:hover { color: var(--osw-red); background: color-mix(in srgb, var(--osw-ink) 6%, transparent); }

/* Theme toggle */
.osw-theme-toggle {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: none;
	border: 1px solid var(--osw-line);
	border-radius: 999px;
	cursor: pointer;
	color: var(--osw-ink);
	transition: border-color 0.15s, color 0.15s;
}
.osw-theme-toggle:hover { border-color: var(--osw-red); color: var(--osw-red); }
.osw-theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.osw-theme-toggle .osw-icon-sun  { display: block; }
.osw-theme-toggle .osw-icon-moon { display: none; }
[data-theme="light"] .osw-theme-toggle .osw-icon-sun  { display: none; }
[data-theme="light"] .osw-theme-toggle .osw-icon-moon { display: block; }

.osw-nav-toggle { display: none; }

/* Footer */
.osw-footer {
	border-top: 1px solid var(--osw-line);
	margin-top: clamp(3rem, 8vw, 6rem);
	padding-block: var(--osw-pad);
	color: var(--osw-ink-mute);
	font-size: var(--osw-step-0);
}
.osw-footer a { color: var(--osw-ink); }

/* Mobile nav */
@media (max-width: 820px) {
	.osw-brand__logo { width: clamp(210px, 60vw, 300px); }
	/* 30% more than the original clamp(0.6rem, 3vw, 1rem). */
	.osw-header__bar { min-height: 76px; padding-block: clamp(0.78rem, 3.9vw, 1.3rem); }

	/* Full-viewport scrim behind the panel; tapping it (the area below the
	   menu items) closes the menu. */
	.osw-nav::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
		z-index: -1;
	}
	.osw-nav[data-open="true"]::before { opacity: 1; visibility: visible; }

	.osw-nav {
		position: fixed;
		/* Full height so the empty area below the items is part of the nav and
		   catches a tap-to-close. The panel background is drawn only behind the
		   content via a wrapper, leaving the lower region showing the scrim. */
		inset: 76px 0 0 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		background: transparent;
		padding: 0;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.28s ease, opacity 0.22s ease, visibility 0.28s;
	}
	/* The visible panel: background + border sit on the list and social block,
	   not the whole nav, so the area beneath reads as the tappable scrim. */
	.osw-nav > ul,
	.osw-nav > .osw-nav__social {
		background: var(--osw-panel);
		padding-inline: var(--osw-pad);
	}
	.osw-nav > ul { padding-top: 0.5rem; }
	.osw-nav > .osw-nav__social {
		padding-bottom: var(--osw-pad);
		border-bottom: 1px solid var(--osw-line);
		box-shadow: 0 20px 40px -24px rgba(0,0,0,0.6);
	}
	.osw-nav[data-open="true"] {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.osw-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.osw-nav li {
		width: 100%;
		/* A hairline divider between each item. */
		border-bottom: 1px solid var(--osw-line);
	}

	/* Each row fades and slides up in sequence when the menu opens. */
	.osw-nav[data-open="true"] > ul > li,
	.osw-nav[data-open="true"] > .osw-nav__social {
		animation: osw-nav-in 0.32s ease both;
	}
	.osw-nav[data-open="true"] > ul > li:nth-child(1) { animation-delay: 0.04s; }
	.osw-nav[data-open="true"] > ul > li:nth-child(2) { animation-delay: 0.08s; }
	.osw-nav[data-open="true"] > ul > li:nth-child(3) { animation-delay: 0.12s; }
	.osw-nav[data-open="true"] > ul > li:nth-child(4) { animation-delay: 0.16s; }
	.osw-nav[data-open="true"] > ul > li:nth-child(5) { animation-delay: 0.20s; }
	.osw-nav[data-open="true"] > ul > li:nth-child(6) { animation-delay: 0.24s; }

	@keyframes osw-nav-in {
		from { opacity: 0; transform: translateY(10px); }
		to   { opacity: 1; transform: none; }
	}

	.osw-nav a {
		font-size: var(--osw-step-4);
		padding: 0.9rem 0.2rem;
		width: 100%;
		border-bottom: 0;
	}
	.osw-nav .sub-menu,
	.osw-nav .children {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		min-width: 0;
	}
	.osw-nav .sub-menu li,
	.osw-nav .children li { border-bottom: 0; }
	.osw-nav .sub-menu a,
	.osw-nav .children a {
		font-size: var(--osw-step-2);
		padding: 0.5rem 0.2rem;
		color: var(--osw-ink-mute);
	}
	.osw-nav__social { margin-top: 1.25rem; }

	/* Hamburger that morphs into an X when the menu is open. */
	.osw-nav-toggle {
		display: grid;
		place-items: center;
		width: 44px; height: 44px;
		background: none; border: 0; cursor: pointer;
		z-index: 60;
	}
	.osw-nav-toggle span,
	.osw-nav-toggle span::before,
	.osw-nav-toggle span::after {
		content: ""; display: block;
		width: 26px; height: 2px; background: var(--osw-ink);
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.osw-nav-toggle span::before { transform: translateY(-8px); }
	.osw-nav-toggle span::after  { transform: translateY(6px); }

	/* Open state: top and bottom bars cross, middle disappears. */
	.osw-nav-toggle[aria-expanded="true"] span { background: transparent; }
	.osw-nav-toggle[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); }
	.osw-nav-toggle[aria-expanded="true"] span::after  { transform: translateY(0) rotate(-45deg); }
}