/**
 * BBW Core — reusable visual language.
 *
 * Base layer for the whole site: every class is namespaced `bbw-` and every
 * design decision lives in the `--bbw-*` tokens below. Page-specific layouts
 * (e.g. the home) build on top of this file, never the other way around.
 *
 * Conventions
 *  - Naming: BEM-ish (`.bbw-block__element--modifier`), states as `.is-*`.
 *  - Mobile-first: base rules are the mobile layout; enhance at
 *    640px / 900px / 1180px (same breakpoints as the legacy stylesheet).
 *  - No dependencies: no Kadence, no frameworks, no external fonts.
 *
 * Index
 *  1. Tokens
 *  2. Layout primitives (container, section, section head)
 *  3. Buttons and text links
 *  4. Badges and chips
 *  5. Cards
 *  6. Rails (Netflix-style horizontal carousels)
 *  7. Header and navigation
 *  8. Footer
 *  9. Motion and accessibility
 */

/* ------------------------------------------------------------------ *
 * 0. Fonts — self-hosted variable WOFF2 (latin subset)
 * ------------------------------------------------------------------ */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
}

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Color — deep navy cinematic palette (must read as BLUE, not black). */
	--bbw-ink: #f2f6fc;
	--bbw-ink-muted: #8ca0bc;
	--bbw-ink-soft: #9db0cc;
	--bbw-bg: #0a1830;
	--bbw-bg-deep: #081327;
	--bbw-panel: #0f1f38;
	--bbw-panel-raised: #16294a;
	--bbw-line: rgba(157, 176, 204, 0.18);
	--bbw-line-strong: rgba(157, 176, 204, 0.34);
	--bbw-accent: #1e7fff;
	--bbw-accent-bright: #4d9aff;
	--bbw-teal: #2dd4c4;
	--bbw-gold: #f2b84b;
	--bbw-scrim: linear-gradient(180deg, rgba(10, 24, 48, 0) 30%, rgba(8, 19, 39, 0.9) 100%);

	/* Bridge: re-point the legacy main.css tokens at the new palette so
	 * pre-bbw templates inherit the navy look until they are redesigned. */
	--color-ink: #f2f6fc;
	--color-muted: #8ca0bc;
	--color-soft: #9db0cc;
	--color-bg: #0a1830;
	--color-bg-deep: #081327;
	--color-panel: #0f1f38;
	--color-line: rgba(157, 176, 204, 0.18);
	--color-line-strong: rgba(157, 176, 204, 0.34);
	--color-blue: #1e7fff;
	--color-blue-bright: #4d9aff;
	--color-teal: #2dd4c4;
	--color-gold: #f2b84b;

	/* Typography — Space Grotesk for display, Inter for text. */
	--bbw-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bbw-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
	--bbw-text-xs: 0.75rem;
	--bbw-text-sm: 0.875rem;
	--bbw-text-md: 1rem;
	--bbw-text-lg: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
	--bbw-text-xl: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
	--bbw-text-2xl: clamp(2rem, 1.5rem + 3vw, 3.4rem);

	/* Spacing scale. */
	--bbw-space-1: 0.25rem;
	--bbw-space-2: 0.5rem;
	--bbw-space-3: 0.75rem;
	--bbw-space-4: 1rem;
	--bbw-space-5: 1.5rem;
	--bbw-space-6: 2rem;
	--bbw-space-7: 3rem;
	--bbw-space-8: 4.5rem;

	/* Shape and elevation. */
	--bbw-radius-sm: 8px;
	--bbw-radius: 14px;
	--bbw-radius-lg: 20px;
	--bbw-radius-pill: 999px;
	--bbw-shadow: 0 18px 40px rgba(4, 10, 24, 0.5);
	--bbw-shadow-lift: 0 24px 55px rgba(4, 10, 24, 0.68);

	/* Layout. */
	--bbw-gutter: 1rem;
	--bbw-content: 1240px;
	--bbw-wide: 1480px;
	--bbw-header-h: 64px;

	/* Motion. */
	--bbw-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--bbw-speed: 220ms;
}

@media (min-width: 640px) {
	:root {
		--bbw-gutter: 1.4rem;
	}
}

@media (min-width: 900px) {
	:root {
		--bbw-gutter: 2rem;
		--bbw-header-h: 72px;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Base and layout primitives
 * ------------------------------------------------------------------ */

/* Loaded after main.css on purpose: re-ground the whole site on the navy
 * palette and the Inter/Space Grotesk pairing. */
body {
	background: var(--bbw-bg);
	color: var(--bbw-ink);
	font-family: var(--bbw-font);
}

h1,
h2,
h3,
h4 {
	font-family: var(--bbw-font-display);
}

/* Defensive guard: interactive bbw- components must never underline on
 * hover/focus, no matter what global anchor styles other stylesheets add. */
a.bbw-card__link,
a.bbw-card__link:hover,
a.bbw-card__link:focus,
a.bbw-chip,
a.bbw-chip:hover,
a.bbw-chip:focus,
a.bbw-btn,
a.bbw-btn:hover,
a.bbw-btn:focus,
a.bbw-link-more,
a.bbw-link-more:hover,
a.bbw-link-more:focus {
	text-decoration: none;
}

.bbw-container {
	width: min(var(--bbw-content), 100% - var(--bbw-gutter) * 2);
	margin-inline: auto;
}

.bbw-container--wide {
	width: min(var(--bbw-wide), 100% - var(--bbw-gutter) * 2);
}

/* Tighter vertical rhythm: the home should feel dense, not airy. */
.bbw-section {
	padding-block: var(--bbw-space-6);
}

@media (min-width: 900px) {
	.bbw-section {
		padding-block: var(--bbw-space-7);
	}
}

.bbw-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbw-space-2) var(--bbw-space-4);
	margin-bottom: var(--bbw-space-4);
}

.bbw-section__title {
	margin: 0;
	font-family: var(--bbw-font-display);
	font-size: var(--bbw-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bbw-ink);
}

.bbw-section__kicker {
	display: block;
	margin-bottom: var(--bbw-space-1);
	font-size: var(--bbw-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bbw-accent-bright);
}

/* ------------------------------------------------------------------ *
 * 3. Buttons and text links
 * ------------------------------------------------------------------ */

.bbw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bbw-space-2);
	padding: 0.78em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--bbw-radius-pill);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bbw-speed) var(--bbw-ease),
		border-color var(--bbw-speed) var(--bbw-ease),
		transform var(--bbw-speed) var(--bbw-ease);
}

.bbw-btn:focus-visible {
	outline: 2px solid var(--bbw-accent-bright);
	outline-offset: 2px;
}

/* display: inline-flex above would defeat the hidden attribute (JS hides the
 * load-more button with it once the pool is exhausted). */
.bbw-btn[hidden] {
	display: none;
}

.bbw-btn--primary {
	background: var(--bbw-accent);
	color: #fff;
}

.bbw-btn--primary:hover {
	background: var(--bbw-accent-bright);
	color: #fff;
	transform: translateY(-1px);
}

.bbw-btn--ghost {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--bbw-line-strong);
	color: var(--bbw-ink);
	backdrop-filter: blur(6px);
}

.bbw-btn--ghost:hover {
	border-color: var(--bbw-ink-soft);
	background: rgba(242, 246, 252, 0.12);
	color: var(--bbw-ink);
}

/* Premium variant: dark raised surface with a gold edge — used for the
 * "Watch in 4K" hand-off to LovExplor. Gold stays scarce on purpose. */
.bbw-btn--premium {
	background: var(--bbw-panel-raised);
	border-color: rgba(242, 184, 75, 0.55);
	color: var(--bbw-gold);
}

.bbw-btn--premium:hover {
	background: var(--bbw-gold);
	border-color: var(--bbw-gold);
	color: var(--bbw-bg-deep);
	transform: translateY(-1px);
}

/* "View all …" section links: visual pill with an animated arrow. */
.bbw-link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--bbw-space-2);
	padding: 0.55em 1.2em;
	border: 1px solid var(--bbw-line-strong);
	border-radius: var(--bbw-radius-pill);
	background: rgba(30, 127, 255, 0.1);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-sm);
	font-weight: 600;
	color: var(--bbw-ink);
	text-decoration: none;
	transition: background-color var(--bbw-speed) var(--bbw-ease),
		border-color var(--bbw-speed) var(--bbw-ease),
		color var(--bbw-speed) var(--bbw-ease);
}

.bbw-link-more::after {
	content: "\2192"; /* → */
	color: var(--bbw-accent-bright);
	transition: transform var(--bbw-speed) var(--bbw-ease);
}

.bbw-link-more--external::after {
	content: "\2197"; /* ↗ */
}

.bbw-link-more:hover {
	background: var(--bbw-accent);
	border-color: var(--bbw-accent);
	color: #fff;
}

.bbw-link-more:hover::after {
	color: #fff;
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ *
 * 4. Badges and chips
 * ------------------------------------------------------------------ */

/* 4K badge: used sparingly, only where footage of the place exists. */
.bbw-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.55em;
	border-radius: var(--bbw-radius-sm);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.bbw-badge--4k {
	background: rgba(8, 19, 39, 0.72);
	border: 1px solid var(--bbw-line-strong);
	color: var(--bbw-gold);
	backdrop-filter: blur(4px);
}

/* Position helper: badge pinned to a media corner. */
.bbw-badge--corner {
	position: absolute;
	top: var(--bbw-space-3);
	right: var(--bbw-space-3);
	z-index: 2;
}

.bbw-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--bbw-space-2);
	padding: 0.7em 1.4em;
	border: 1px solid var(--bbw-line-strong);
	border-radius: var(--bbw-radius-pill);
	background: var(--bbw-panel);
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-sm);
	font-weight: 600;
	color: var(--bbw-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--bbw-speed) var(--bbw-ease),
		background-color var(--bbw-speed) var(--bbw-ease),
		color var(--bbw-speed) var(--bbw-ease),
		transform var(--bbw-speed) var(--bbw-ease);
}

.bbw-chip:hover {
	border-color: var(--bbw-teal);
	background: rgba(45, 212, 196, 0.12);
	color: var(--bbw-ink);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * 5. Cards
 * ------------------------------------------------------------------ */

.bbw-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--bbw-radius);
	background: var(--bbw-panel);
	box-shadow: var(--bbw-shadow);
	transition: transform var(--bbw-speed) var(--bbw-ease),
		box-shadow var(--bbw-speed) var(--bbw-ease);
}

.bbw-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bbw-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bbw-bg-deep);
}

.bbw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform calc(var(--bbw-speed) * 2) var(--bbw-ease);
}

.bbw-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bbw-scrim);
	pointer-events: none;
}

.bbw-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--bbw-space-4);
}

.bbw-card__title {
	margin: 0;
	font-family: var(--bbw-font-display);
	font-size: var(--bbw-text-md);
	font-weight: 600;
	color: var(--bbw-ink);
	line-height: 1.25;
}

.bbw-card__tag {
	display: block;
	margin-top: var(--bbw-space-1);
	font-size: var(--bbw-text-xs);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bbw-ink-muted);
}

/* Netflix-style hover: the card grows slightly and lifts. */
.bbw-card:hover,
.bbw-card:focus-within {
	transform: scale(1.045);
	box-shadow: var(--bbw-shadow-lift);
	z-index: 3;
}

.bbw-card:hover .bbw-card__media img,
.bbw-card:focus-within .bbw-card__media img {
	transform: scale(1.06);
}

/* Creator variant: portrait avatar card, never carries a 4K badge. */
.bbw-card--creator {
	text-align: center;
	background: transparent;
	box-shadow: none;
}

.bbw-card--creator .bbw-card__media {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid var(--bbw-line);
	transition: border-color var(--bbw-speed) var(--bbw-ease);
}

.bbw-card--creator .bbw-card__media::after {
	content: none;
}

.bbw-card--creator .bbw-card__body {
	position: static;
	padding: var(--bbw-space-3) var(--bbw-space-1) 0;
}

.bbw-card--creator .bbw-card__tag {
	text-transform: none;
	letter-spacing: 0;
}

.bbw-card--creator:hover,
.bbw-card--creator:focus-within {
	transform: scale(1.05);
	box-shadow: none;
}

.bbw-card--creator:hover .bbw-card__media,
.bbw-card--creator:focus-within .bbw-card__media {
	border-color: var(--bbw-accent-bright);
}

/* ------------------------------------------------------------------ *
 * 6. Rails — Netflix-style horizontal carousels
 * ------------------------------------------------------------------ *
 * Markup contract (behavior comes from the theme's main.js):
 *   <div class="bbw-rail" data-rail>
 *     <button class="bbw-rail__arrow bbw-rail__arrow--prev" data-rail-prev>
 *     <ul class="bbw-rail__track" data-rail-track> <li class="bbw-rail__item">…
 *     <button class="bbw-rail__arrow bbw-rail__arrow--next" data-rail-next>
 */

.bbw-rail {
	position: relative;
}

.bbw-rail__track {
	display: flex;
	gap: var(--bbw-space-4);
	margin: 0;
	padding: var(--bbw-space-2) 0 var(--bbw-space-4);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* no visible scrollbar */
}

.bbw-rail__track::-webkit-scrollbar {
	display: none;
}

/* Drag contract with main.js: while pointer-dragging it sets .is-dragging
 * and drives scrollLeft directly — snap must be released or every move
 * re-snaps and the drag jumps card by card. */
.bbw-rail__track {
	cursor: grab;
}

.bbw-rail__track.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
	cursor: grabbing;
}

.bbw-rail__item {
	flex: 0 0 min(72vw, 300px);
	scroll-snap-align: start;
}

.bbw-rail__item--creator {
	flex-basis: min(44vw, 190px);
}

/* Double-row variant: two stacked rows that scroll as one rail (denser
 * sections, e.g. Destinations). Same arrows/drag behavior from main.js. */
.bbw-rail__track--double {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: min(72vw, 300px);
}

.bbw-rail__track--double .bbw-rail__item {
	flex: none;
	width: 100%;
}

/* Side arrows, vertically centered over the track. Hidden on touch layouts
 * (native swipe) and shown from the desktop breakpoint. */
.bbw-rail__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 60px;
	height: 60px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bbw-line-strong);
	border-radius: 50%;
	background: rgba(8, 19, 39, 0.88);
	color: var(--bbw-ink);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--bbw-shadow);
	backdrop-filter: blur(6px);
	transition: background-color var(--bbw-speed) var(--bbw-ease),
		border-color var(--bbw-speed) var(--bbw-ease),
		opacity var(--bbw-speed) var(--bbw-ease),
		transform var(--bbw-speed) var(--bbw-ease);
}

.bbw-rail__arrow:hover {
	background: var(--bbw-accent);
	border-color: var(--bbw-accent);
	transform: translateY(-50%) scale(1.06);
}

.bbw-rail__arrow:focus-visible {
	outline: 2px solid var(--bbw-accent-bright);
	outline-offset: 2px;
}

.bbw-rail__arrow[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

.bbw-rail__arrow--prev {
	left: calc(var(--bbw-space-3) * -1);
}

.bbw-rail__arrow--next {
	right: calc(var(--bbw-space-3) * -1);
}

@media (min-width: 900px) {
	.bbw-rail__arrow {
		display: inline-flex;
	}

	/* Leave breathing room so scaled-up cards are not clipped. */
	.bbw-rail__track {
		padding-block: var(--bbw-space-3) var(--bbw-space-5);
	}
}

/* ------------------------------------------------------------------ *
 * 7. Header and navigation
 * ------------------------------------------------------------------ *
 * The mobile panel reuses main.js behaviors: [data-nav-toggle] toggles
 * .is-open on [data-site-nav] and .nav-open on <body>. Submenus are handled
 * by bbw-nav.js (click/keyboard) plus CSS hover on desktop.
 */

.bbw-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: transparent;
	transition: background-color var(--bbw-speed) var(--bbw-ease),
		border-color var(--bbw-speed) var(--bbw-ease);
	border-bottom: 1px solid transparent;
}

.bbw-header.is-scrolled {
	background: rgba(10, 24, 48, 0.94);
	border-bottom-color: var(--bbw-line);
	backdrop-filter: blur(10px);
}

.bbw-header__inner {
	display: flex;
	align-items: center;
	gap: var(--bbw-space-4);
	min-height: var(--bbw-header-h);
	width: min(var(--bbw-wide), 100% - var(--bbw-gutter) * 2);
	margin-inline: auto;
}

.bbw-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--bbw-space-2);
	margin-right: auto;
	font-family: var(--bbw-font);
	text-decoration: none;
}

.bbw-header__brand .custom-logo {
	max-height: 44px;
	width: auto;
}

.bbw-header__brand-mark {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--bbw-accent), var(--bbw-teal));
	color: #fff;
	font-size: var(--bbw-text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
}

.bbw-header__brand-name {
	color: var(--bbw-ink);
	font-weight: 700;
	font-size: var(--bbw-text-md);
	white-space: nowrap;
}

.bbw-header__cta {
	display: none;
}

/* Hamburger (mobile). */
.bbw-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 1px solid var(--bbw-line);
	border-radius: var(--bbw-radius-sm);
	background: transparent;
	cursor: pointer;
}

.bbw-header__toggle span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--bbw-ink);
	transition: transform var(--bbw-speed) var(--bbw-ease),
		opacity var(--bbw-speed) var(--bbw-ease);
}

.bbw-header__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.bbw-header__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.bbw-header__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Nav: mobile-first as a slide-down panel. */
.bbw-nav {
	position: fixed;
	inset: var(--bbw-header-h) 0 auto 0;
	z-index: 39;
	max-height: calc(100dvh - var(--bbw-header-h));
	overflow-y: auto;
	padding: var(--bbw-space-4) var(--bbw-gutter) var(--bbw-space-6);
	background: rgba(10, 24, 48, 0.98);
	border-bottom: 1px solid var(--bbw-line);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--bbw-speed) var(--bbw-ease),
		transform var(--bbw-speed) var(--bbw-ease),
		visibility 0s linear var(--bbw-speed);
}

.bbw-nav.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0s;
}

.bbw-nav__list,
.bbw-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbw-nav__list > li {
	border-bottom: 1px solid var(--bbw-line);
}

.bbw-nav__list a {
	display: block;
	padding: var(--bbw-space-3) 0;
	font-family: var(--bbw-font);
	font-size: var(--bbw-text-md);
	font-weight: 600;
	color: var(--bbw-ink);
	text-decoration: none;
}

.bbw-nav__list a:hover {
	color: var(--bbw-accent-bright);
}

/* Submenu toggle button (injected/enhanced by bbw-nav.js). */
.bbw-nav__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbw-space-2);
}

.bbw-nav__sub-toggle {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--bbw-radius-sm);
	background: transparent;
	color: var(--bbw-ink-muted);
	cursor: pointer;
	transition: transform var(--bbw-speed) var(--bbw-ease);
}

.bbw-nav__sub-toggle::before {
	content: "\25BE"; /* ▾ */
	font-size: 0.9rem;
}

.bbw-nav__sub-toggle:focus-visible {
	outline: 2px solid var(--bbw-accent-bright);
	outline-offset: 2px;
}

.bbw-nav li.menu-item-has-children.is-open > .bbw-nav__item-row .bbw-nav__sub-toggle {
	transform: rotate(180deg);
	color: var(--bbw-ink);
}

/* Mobile: submenus collapse as an accordion. */
.bbw-nav .sub-menu {
	display: none;
	padding-left: var(--bbw-space-4);
	padding-bottom: var(--bbw-space-2);
}

.bbw-nav li.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.bbw-nav .sub-menu a {
	padding: var(--bbw-space-2) 0;
	font-size: var(--bbw-text-sm);
	font-weight: 500;
	color: var(--bbw-ink-soft);
}

.bbw-nav__panel-cta {
	margin-top: var(--bbw-space-4);
}

/* Desktop: inline nav with hover dropdowns. */
@media (min-width: 900px) {
	.bbw-header__toggle {
		display: none;
	}

	.bbw-header__cta {
		display: inline-flex;
	}

	.bbw-nav {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: transparent;
		border: 0;
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.bbw-nav__panel-cta {
		display: none;
	}

	.bbw-nav__list {
		display: flex;
		align-items: center;
		gap: var(--bbw-space-2);
	}

	.bbw-nav__list > li {
		position: relative;
		border-bottom: 0;
	}

	.bbw-nav__list > li > .bbw-nav__item-row > a,
	.bbw-nav__list > li > a {
		padding: var(--bbw-space-2) var(--bbw-space-3);
		font-size: var(--bbw-text-sm);
		border-radius: var(--bbw-radius-sm);
	}

	.bbw-nav__sub-toggle {
		width: 26px;
		height: 26px;
	}

	.bbw-nav .sub-menu {
		display: block;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		min-width: 230px;
		padding: var(--bbw-space-2);
		border: 1px solid var(--bbw-line);
		border-radius: var(--bbw-radius);
		background: rgba(15, 31, 56, 0.98);
		box-shadow: var(--bbw-shadow);
		backdrop-filter: blur(12px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--bbw-speed) var(--bbw-ease),
			transform var(--bbw-speed) var(--bbw-ease),
			visibility 0s linear var(--bbw-speed);
	}

	.bbw-nav li.menu-item-has-children:hover > .sub-menu,
	.bbw-nav li.menu-item-has-children:focus-within > .sub-menu,
	.bbw-nav li.menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.bbw-nav .sub-menu a {
		padding: var(--bbw-space-2) var(--bbw-space-3);
		border-radius: var(--bbw-radius-sm);
		white-space: nowrap;
	}

	.bbw-nav .sub-menu a:hover {
		background: rgba(30, 127, 255, 0.14);
		color: var(--bbw-ink);
	}
}

/* Lock body scroll while the mobile panel is open (class set by main.js). */
body.nav-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 8. Footer
 * ------------------------------------------------------------------ */

.bbw-footer {
	border-top: 1px solid var(--bbw-line);
	background: var(--bbw-bg-deep);
	padding-block: var(--bbw-space-7) var(--bbw-space-5);
	font-family: var(--bbw-font);
}

.bbw-footer__grid {
	display: grid;
	gap: var(--bbw-space-6);
}

.bbw-footer__brand-name {
	display: inline-block;
	margin-bottom: var(--bbw-space-2);
	font-size: var(--bbw-text-lg);
	font-weight: 700;
	color: var(--bbw-ink);
	text-decoration: none;
}

.bbw-footer__tagline {
	margin: 0;
	max-width: 34ch;
	color: var(--bbw-ink-muted);
	font-size: var(--bbw-text-sm);
	line-height: 1.6;
}

.bbw-footer__social {
	display: flex;
	gap: var(--bbw-space-3);
	margin-top: var(--bbw-space-4);
}

.bbw-footer__social a {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--bbw-line);
	border-radius: 50%;
	color: var(--bbw-ink-soft);
	transition: border-color var(--bbw-speed) var(--bbw-ease),
		color var(--bbw-speed) var(--bbw-ease);
}

.bbw-footer__social a:hover {
	border-color: var(--bbw-accent-bright);
	color: var(--bbw-accent-bright);
}

.bbw-footer__social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.bbw-footer__col-title {
	margin: 0 0 var(--bbw-space-3);
	font-size: var(--bbw-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bbw-ink-muted);
}

.bbw-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bbw-space-2);
}

.bbw-footer__col a {
	color: var(--bbw-ink-soft);
	font-size: var(--bbw-text-sm);
	text-decoration: none;
}

.bbw-footer__col a:hover {
	color: var(--bbw-accent-bright);
}

/* Editor-assigned footer menu renders below the hardcoded lists. */
.bbw-footer__menu {
	margin-top: var(--bbw-space-2);
}

.bbw-footer__identity {
	margin-top: var(--bbw-space-6);
	padding-top: var(--bbw-space-4);
	border-top: 1px solid var(--bbw-line);
	color: var(--bbw-ink-muted);
	font-size: var(--bbw-text-xs);
	line-height: 1.6;
}

@media (min-width: 640px) {
	.bbw-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.bbw-footer__grid {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}
}

/* ------------------------------------------------------------------ *
 * 9. Motion and accessibility
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bbw-card,
	.bbw-card__media img,
	.bbw-rail__track,
	.bbw-nav,
	.bbw-nav .sub-menu,
	.bbw-btn,
	.bbw-link-more::after {
		transition: none;
		scroll-behavior: auto;
	}

	.bbw-card:hover,
	.bbw-card:focus-within,
	.bbw-card:hover .bbw-card__media img,
	.bbw-card:focus-within .bbw-card__media img {
		transform: none;
	}
}