/* ==========================================================================
   Broker Built Digital — core
   Design tokens, page shell, header, footer and the primitives every page
   shares. Loaded on every request; page-*.css layers on top.

   Previously each of the six pages carried its own inline copy of most of
   this, so the tokens had already drifted apart between pages and nothing
   could be cached across a visit.
   ========================================================================== */

:root {
	--navy: #0b1726;
	--ink: #142536;
	--ivory: #f5f0e8;
	--gold: #d9ac62;
	--gold-2: #edc989;
	/* Darker gold for text on the ivory background — the display gold above
	   only reaches ~1.9:1 there, which fails WCAG AA for body copy. */
	--gold-ink: #896638;
	--blush: #dfb9ae;
	--line: rgba(20, 37, 54, 0.15);

	--sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gutter: clamp(22px, 8vw, 128px);
	--gutter-tight: clamp(22px, 5vw, 76px);
	--section-y: clamp(80px, 10vw, 140px);
	--maxw: 1180px;

	--product-gather: #dcc5a6;
	--product-advice: #d8b7af;
	--product-manage: #a9c3c7;
	--product-review: #d3c7bc;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* The header is fixed, so anchor targets must stop clear of it or the
	   section heading lands underneath the menu. */
	scroll-padding-top: 110px;
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: 86px;
	}
}

body {
	margin: 0;
	background: var(--ivory);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

img,
svg {
	max-width: 100%;
}

.bbd-shell {
	overflow-x: clip;
}

.bbd-main {
	display: block;
}

.bbd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Keyboard users get a visible way past the navigation. */
.bbd-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--gold);
	color: var(--navy);
	font: 700 13px var(--display);
	transition: top 0.2s;
}

.bbd-skip-link:focus {
	top: 16px;
}

:where(a, button, label, input, [tabindex]):focus-visible {
	outline: 2px solid var(--gold-2);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Fixed, so the navigation stays reachable. The homepage is seven full-height
   sections; previously the menu scrolled away and the only route back to the
   products was scrolling to the top. */
.bbd-header {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px var(--gutter-tight);
	color: #fff;
	background: var(--navy);
	transition: background-color .3s, padding .3s;
}

/* Pages that open on a dark hero let it show through — until you scroll. */
.bbd-header--overlay:not(.is-stuck) {
	background: transparent;
}

.bbd-header.is-stuck {
	padding-top: 16px;
	padding-bottom: 16px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* Keep the fixed header clear of the WordPress admin bar when logged in. */
.admin-bar .bbd-header {
	top: 32px;
}

.bbd-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	font: 700 14px var(--display);
	letter-spacing: -0.02em;
}

.bbd-brand em {
	font-style: normal;
	font-weight: 500;
	color: var(--blush);
}

.bbd-brand-mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 30px;
	color: var(--gold);
}

.bbd-brand-mark svg {
	display: block;
	width: 36px;
	height: 28px;
	overflow: visible;
}

.bbd-brand-mark path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bbd-nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.1vw, 30px);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
}

.bbd-nav a {
	transition: color 0.25s;
}

.bbd-nav a:hover,
.bbd-nav a[aria-current="page"] {
	color: var(--gold-2);
}

.bbd-nav-cta {
	padding: 11px 16px;
	border: 1px solid rgba(217, 172, 98, 0.75);
	color: #fff;
}

.bbd-nav-cta span {
	margin-left: 12px;
	color: var(--gold-2);
}

/* --------------------------------------------------------------------------
   Products dropdown

   The four products had no route from the navigation at all — only the
   homepage product grid or a typed URL.
   -------------------------------------------------------------------------- */

.bbd-nav-group {
	position: relative;
	display: flex;
	align-items: center;
}

.bbd-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .25s;
}

.bbd-nav-trigger:hover,
.bbd-nav-group.is-open .bbd-nav-trigger,
.bbd-nav-group.is-current-section .bbd-nav-trigger {
	color: var(--gold-2);
}

.bbd-nav-caret {
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s;
}

.bbd-nav-group.is-open .bbd-nav-caret {
	transform: translateY(1px) rotate(-135deg);
}

.bbd-submenu {
	position: absolute;
	top: calc(100% + 18px);
	left: 50%;
	translate: -50% 0;
	display: grid;
	gap: 2px;
	min-width: 232px;
	padding: 10px;
	background: #10202f;
	border: 1px solid rgba(217, 172, 98, .24);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}

.bbd-nav-group.is-open .bbd-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Bridges the gap between trigger and panel so the pointer can cross it. */
.bbd-submenu::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 0;
	right: 0;
	height: 18px;
}

.bbd-submenu a {
	display: grid;
	gap: 1px;
	padding: 10px 12px;
	border-bottom: 0;
	transition: background-color .18s;
}

.bbd-submenu a:hover,
.bbd-submenu a:focus-visible {
	background: rgba(255, 255, 255, .06);
}

.bbd-submenu a[aria-current="page"] {
	background: rgba(217, 172, 98, .14);
	box-shadow: inset 2px 0 0 var(--gold);
}

.bbd-submenu b {
	font: 600 13px var(--display);
	letter-spacing: -.01em;
	color: #fff;
}

.bbd-submenu small {
	font-size: 11px;
	color: rgba(255, 255, 255, .58);
}

/* Current page marker on top-level links. */
.bbd-nav a[aria-current="page"] {
	color: var(--gold-2);
}

/* 44px minimum so it is a comfortable thumb target. */
.bbd-menu-toggle {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.bbd-menu-toggle span {
	display: block;
	width: 24px;
	height: 1px;
	margin: 5px;
	background: currentColor;
}

/* --------------------------------------------------------------------------
   Header variants

   The header is white text on a transparent overlay, which only works where
   the top of the page is dark. Home, CaseGather and CaseAdvice open on a navy
   hero; CaseManage and CaseReview open on teal and stone, and Contact opens on
   ivory. Before these six pages shared a header they each solved this
   themselves — the two product pages carried a solid navy bar, and Contact had
   a light sticky bar with navy text. Unifying the header dropped that, leaving
   white-on-pastel at 1.6:1 and white-on-ivory at 1.1:1.
   -------------------------------------------------------------------------- */

/* Light hero: the header carries its own navy so the overlay still reads. */
.bbd-page-casemanage .bbd-header,
.bbd-page-casereview .bbd-header {
	background: var(--navy);
}

/* Contact opens on ivory, so the bar goes light and the text goes dark. */
.bbd-page-contact .bbd-header {
	position: sticky;
	background: rgba(244, 239, 235, .92);
	backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.bbd-page-contact .bbd-brand em {
	color: var(--gold-ink);
}

.bbd-page-contact .bbd-nav {
	color: rgba(20, 37, 54, .72);
}

.bbd-page-contact .bbd-nav a:hover,
.bbd-page-contact .bbd-nav a[aria-current="page"] {
	color: var(--gold-ink);
}

.bbd-page-contact .bbd-nav-cta {
	color: var(--ink);
	border-color: rgba(137, 102, 56, .6);
}

.bbd-page-contact .bbd-nav-cta span {
	color: var(--gold-ink);
}

@media (max-width: 900px) {
	/* The drop-down panel is navy on every page, so its contents stay light. */
	.bbd-page-contact .bbd-nav {
		color: rgba(255, 255, 255, .74);
	}

	.bbd-page-contact .bbd-nav-cta {
		color: #fff;
		border-color: rgba(217, 172, 98, .75);
	}

	.bbd-page-contact .bbd-nav-cta span,
	.bbd-page-contact .bbd-nav a:hover {
		color: var(--gold-2);
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.bbd-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 30px var(--gutter-tight);
	background: var(--navy);
	color: #fff;
}

.bbd-footer > div {
	display: flex;
	gap: 25px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.48);
}

.bbd-footer > div a {
	color: rgba(255, 255, 255, 0.78);
}

.bbd-footer > div a:hover {
	color: var(--gold-2);
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.bbd-section {
	padding: var(--section-y) var(--gutter);
}

.bbd-section-ivory {
	background: var(--ivory);
}

.bbd-section-navy {
	background: var(--navy);
	color: #fff;
}

.bbd-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-2);
}

.bbd-section-ivory .bbd-kicker {
	color: var(--gold-ink);
	font-weight: 800;
}

.bbd-button {
	display: inline-flex;
	align-items: center;
	padding: 15px 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bbd-button span {
	margin-left: 12px;
}

.bbd-button-gold {
	background: var(--gold);
	color: var(--navy);
}

.bbd-button-navy {
	background: var(--navy);
	color: #fff;
}

.bbd-button-navy span {
	color: var(--gold-2);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.bbd-header {
		padding: 21px 22px;
	}

	.bbd-menu-toggle {
		display: block;
		position: relative;
		z-index: 12;
	}

	.bbd-nav {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 80px 22px 28px;
		background: var(--navy);
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	.bbd-nav.is-open {
		display: flex;
	}

	.bbd-nav a {
		padding: 13px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.bbd-nav .bbd-nav-cta {
		margin-top: 18px;
		padding: 14px;
		text-align: center;
		border-bottom: 0;
	}

	/* The dropdown becomes an inline accordion inside the drop panel. */
	.bbd-nav-group {
		display: block;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.bbd-nav-trigger {
		justify-content: space-between;
		width: 100%;
		min-height: 46px;
		font-size: 13px;
	}

	.bbd-submenu {
		position: static;
		translate: none;
		display: none;
		min-width: 0;
		margin: 0 0 12px;
		padding: 4px 0 4px 14px;
		background: transparent;
		border: 0;
		border-left: 1px solid rgba(217, 172, 98, .4);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bbd-nav-group.is-open .bbd-submenu {
		display: grid;
	}

	.bbd-submenu::before {
		content: none;
	}

	.bbd-submenu a {
		min-height: 46px;
		align-content: center;
		border-bottom: 0;
	}
}

/* Stops the page scrolling behind the open mobile menu. */
body.bbd-menu-open {
	overflow: hidden;
}

@media (max-width: 782px) {
	.admin-bar .bbd-header {
		top: 46px;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 15px;
	}

	.bbd-brand {
		font-size: 12px;
	}

	.bbd-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 25px;
	}

	.bbd-footer > div {
		flex-wrap: wrap;
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}