/**
 * Layout - topbar, header, navigation, hero bands, content shells, footer.
 */

.bp-container {
	max-width: var(--bp-container);
	margin: 0 auto;
	padding: 0 var(--bp-s5);
}
.bp-container--narrow { max-width: var(--bp-container-narrow); }

.site-main { min-height: 50vh; }

/* ------------------------------------------------------------------ */
/* Topbar                                                              */
/* ------------------------------------------------------------------ */
.topbar {
	background: var(--bp-ink);
	color: var(--bp-muted-on-navy);
	font-size: var(--bp-text-xs);
	min-height: var(--bp-topbar-h);
	display: flex;
	align-items: center;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bp-s4);
	width: 100%;
}
.topbar__trust { display: flex; align-items: center; gap: var(--bp-s2); white-space: nowrap; overflow: hidden; }
.topbar__trust span + span::before {
	content: '\00b7';
	margin: 0 var(--bp-s2);
	color: var(--bp-faint-on-navy);
}
.topbar__meta { display: flex; align-items: center; gap: var(--bp-s3); }
.topbar__link,
.topbar__cart {
	color: #c0c5e0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}
.topbar__link:hover,
.topbar__cart:hover { color: var(--bp-white); }
.topbar__sep { color: #3a3f65; }
.topbar__cart-contents { display: inline-flex; align-items: center; gap: 6px; }
.topbar__cart-count {
	background: var(--bp-royal);
	color: var(--bp-white);
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: var(--bp-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}
@media (max-width: 700px) {
	.topbar__trust { display: none; }
	.topbar__inner { justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.site-header {
	background: var(--bp-white);
	position: sticky;
	top: 0;
	z-index: 900;
	box-shadow: 0 1px 0 var(--bp-border);
	transition: box-shadow var(--bp-med) var(--bp-ease);
}
.site-header.is-stuck { box-shadow: 0 2px 20px rgba(15, 18, 53, 0.1); }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bp-s5);
	min-height: var(--bp-header-h);
	padding-top: var(--bp-s3);
	padding-bottom: var(--bp-s3);
}

/* Respect the WP admin bar when sticky (32px desktop, 46px <=782px;
   below 600px the bar scrolls away so no offset is needed). */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

/* Brand - retains the "Buy Private [Plates]" mark with the yellow band */
.brand { display: inline-flex; align-items: center; gap: var(--bp-s3); flex-shrink: 0; }
.brand img { max-height: 44px; width: auto; }
.brand__word {
	font-size: var(--bp-text-xl);
	font-weight: 700;
	color: var(--bp-navy);
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.brand__word em { font-style: italic; font-weight: 500; }
.brand__word mark {
	background: var(--bp-plate-yellow);
	color: var(--bp-plate-ink);
	padding: 2px 8px 3px;
	border-radius: 3px;
	transform: skewX(-6deg);
	display: inline-block;
	font-style: normal;
}

/* Primary nav */
.nav-primary { display: flex; align-items: center; }
.nav-primary ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--bp-s2); }
.nav-primary li { margin: 0; position: relative; }
.nav-primary a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bp-text-soft);
	font-size: 15px;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: var(--bp-radius-sm);
	transition: color var(--bp-fast) var(--bp-ease), background var(--bp-fast) var(--bp-ease);
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a {
	color: var(--bp-navy);
	background: var(--bp-royal-soft);
}
.nav-primary .menu-item-has-children > a::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--bp-fast) var(--bp-ease);
}
.nav-primary .menu-item-has-children.is-open > a::after,
.nav-primary .menu-item-has-children:hover > a::after { transform: rotate(225deg) translateY(-1px); }

/* Dropdowns */
.nav-primary .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 230px;
	background: var(--bp-white);
	border-radius: var(--bp-radius-sm);
	box-shadow: var(--bp-shadow-dropdown);
	border: 1px solid var(--bp-border);
	padding: var(--bp-s2);
	display: block;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--bp-fast) var(--bp-ease),
		transform var(--bp-fast) var(--bp-ease),
		visibility var(--bp-fast);
	z-index: 950;
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu,
.nav-primary li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-primary .sub-menu li { width: 100%; }
.nav-primary .sub-menu a {
	display: block;
	width: 100%;
	padding: 10px 14px;
	font-size: var(--bp-text-sm);
	border-radius: 6px;
}
.nav-primary .sub-menu a::after { content: none !important; }

/* Header CTA */
.header-cta { flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--bp-border-strong);
	border-radius: var(--bp-radius-sm);
	width: 46px;
	height: 42px;
	padding: 0;
	line-height: 0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	display: block;
	width: 22px;
	height: 2.5px;
	background: var(--bp-navy);
	border-radius: 2px;
	transition: transform var(--bp-med) var(--bp-ease), opacity var(--bp-med) var(--bp-ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bars::after { position: absolute; top: 7px; left: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.nav-toggle { display: inline-flex; }
	.header-cta { display: none; }
	.nav-primary {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bp-white);
		border-top: 1px solid var(--bp-border);
		box-shadow: 0 18px 30px rgba(15, 18, 53, 0.14);
		display: none;
		padding: var(--bp-s3) var(--bp-s5) var(--bp-s5);
		max-height: calc(100vh - var(--bp-header-h));
		overflow-y: auto;
	}
	.nav-primary.is-open { display: block; }
	.nav-primary ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-primary a { width: 100%; padding: 13px 10px; font-size: var(--bp-text-base); justify-content: space-between; }
	.nav-primary .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--bp-border);
		border-radius: 0;
		margin: 0 0 var(--bp-s2) var(--bp-s3);
		padding: 0 0 0 var(--bp-s2);
		display: none;
	}
	.nav-primary li.is-open > .sub-menu { display: block; }
	.nav-primary__mobile-cta { display: block; margin-top: var(--bp-s4); }
	body.nav-open { overflow: hidden; }
}

/* Buttons inside the nav keep button colours - the nav link colour and
   hover-tint rules must never win over .btn. */
.nav-primary a.btn,
.nav-primary a.btn:hover {
	color: var(--bp-white);
	background: var(--bp-red);
	justify-content: center;
}
.nav-primary a.btn:hover { background: var(--bp-red-deep); }
@media (min-width: 961px) {
	.nav-primary__mobile-cta { display: none; }
}

/* ------------------------------------------------------------------ */
/* Hero bands (page titles, archives, single post headers)             */
/* ------------------------------------------------------------------ */
.band {
	background: var(--bp-navy);
	color: var(--bp-white);
	padding: var(--bp-s7) 0;
}
.band--tight { padding: var(--bp-s6) 0; }
.band__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--bp-s2);
	color: var(--bp-muted-on-navy);
	font-size: var(--bp-text-sm);
	margin-bottom: var(--bp-s3);
}
.band__eyebrow a { color: var(--bp-muted-on-navy); }
.band__eyebrow a:hover { color: var(--bp-white); }
.band h1 { color: var(--bp-white); margin-bottom: 0; }
.band__sub { color: var(--bp-muted-on-navy); margin: var(--bp-s3) 0 0; max-width: 640px; }
.band--center { text-align: center; }
.band--center .band__sub { margin-left: auto; margin-right: auto; }
.band__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bp-s4);
	margin-top: var(--bp-s4);
	color: var(--bp-faint-on-navy);
	font-size: 13px;
}
@media (max-width: 640px) {
	.band { padding: var(--bp-s6) 0; }
}

/* Content shells */
.section { padding: var(--bp-s7) 0; }
.section--flush-top { padding-top: var(--bp-s6); }

.layout-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--bp-s6);
	align-items: start;
}
@media (max-width: 960px) {
	.layout-sidebar { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer {
	background: var(--bp-ink);
	color: var(--bp-muted-on-navy);
	font-size: var(--bp-text-sm);
}
.site-footer a { color: var(--bp-muted-on-navy); }
.site-footer a:hover { color: var(--bp-white); }

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: var(--bp-s6);
	padding: var(--bp-s7) 0 var(--bp-s6);
}
.footer-col h4 {
	color: var(--bp-white);
	font-size: var(--bp-text-base);
	font-weight: 600;
	margin-bottom: var(--bp-s4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--bp-s2); }
.footer-brand__blurb { line-height: var(--bp-leading-normal); margin: var(--bp-s3) 0 var(--bp-s4); }
.footer-brand .brand__word { color: var(--bp-white); }

.footer-legal {
	border-top: 1px solid #1e2456;
	padding: var(--bp-s5) 0;
	text-align: center;
	font-size: var(--bp-text-xs);
	color: #8a90b3;
	display: grid;
	gap: var(--bp-s2);
}
.footer-legal a { color: var(--bp-royal); }
.footer-legal a:hover { color: #7a92f0; }
.footer-legal__disclaimer { max-width: 820px; margin: 0 auto; }

@media (max-width: 960px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; gap: var(--bp-s5); }
}

/* Back to top */
.to-top {
	position: fixed;
	right: var(--bp-s5);
	bottom: var(--bp-s5);
	z-index: 800;
	width: 42px;
	height: 42px;
	border-radius: var(--bp-radius-pill);
	border: 0;
	background: var(--bp-navy);
	color: var(--bp-white);
	box-shadow: var(--bp-shadow-card-hover);
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--bp-med) var(--bp-ease), transform var(--bp-med) var(--bp-ease), visibility var(--bp-med);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--bp-royal); }

/* ── Nested dropdowns (2nd-level submenu items) ──
   The theme originally styled one dropdown level only; a nested
   .sub-menu inherited the top-level positioning and rendered on top
   of its parent panel. Desktop: side flyout opening to the right,
   with a right-pointing chevron on the parent row (re-established
   over the dropdown-wide chevron reset). Mobile (<=960px) needs
   nothing: the static/indented sub-menu rules and the JS is-open
   toggle already cascade to any depth. */
@media (min-width: 961px) {
	.nav-primary .sub-menu .menu-item-has-children { position: relative; }
	.nav-primary .sub-menu .sub-menu {
		top: -9px; /* first child aligns with its parent row */
		left: calc(100% + 6px);
	}
	.nav-primary .sub-menu .menu-item-has-children > a {
		position: relative;
		padding-right: 30px;
	}
	.nav-primary .sub-menu .menu-item-has-children > a::after {
		content: '' !important;
		position: absolute;
		right: 13px;
		top: 50%;
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-50%) rotate(-45deg); /* points right */
		transition: transform var(--bp-fast) var(--bp-ease);
	}
	.nav-primary .sub-menu .menu-item-has-children:hover > a::after {
		transform: translateY(-50%) rotate(-45deg) translate(2px, 2px);
	}
}

/* ── Highlighted "tool" menu items ──
   Ticked via the checkbox in Appearance > Menus. Works inside desktop
   dropdowns, nested flyouts, and the mobile accordion (same markup).
   Consecutive highlighted siblings merge into one dashed group: the
   follower drops its top edge, and :has() (safe to degrade) removes
   the leader's bottom rounding. */
.nav-primary .sub-menu .menu-item-highlight {
	background: #f5f3ff;
	border: 1.5px dashed rgba(124, 58, 237, 0.55);
	border-radius: 10px;
	margin-top: 8px;
	padding: 2px;
}
.nav-primary .sub-menu .menu-item-highlight + .menu-item-highlight {
	margin-top: 0;
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.nav-primary .sub-menu .menu-item-highlight:has(+ .menu-item-highlight) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.nav-primary .sub-menu .menu-item-highlight > a {
	border-radius: 7px;
}
.nav-primary .sub-menu .menu-item-highlight > a:hover {
	background: rgba(124, 58, 237, 0.12);
}

/* Dropdown panels size to their content: the panel grows so the
   longest item stays on one line, capped so a verbose label can
   still wrap rather than running across the screen. Desktop only —
   the mobile accordion is full-width and static. */
@media (min-width: 961px) {
	.nav-primary .sub-menu {
		width: max-content;
		min-width: 220px;
		max-width: 360px;
	}
}