/* BongoHive Design System - CSS Custom Properties */

:root {
	/* ============================================
	   COLORS
	   ============================================ */

	/* Neutrals */
	--bh-white: #ffffff;
	--bh-neutral-lightest: #f2f2f2;
	--bh-neutral-lighter: #d8d8d8;
	--bh-neutral-light: #b2b2b2;
	--bh-neutral: #7f7f7f;
	--bh-neutral-dark: #4c4c4c;
	--bh-neutral-darker: #191919;
	--bh-neutral-darkest: #000000;

	/* Fuel Yellow - Brand Accent */
	--bh-fy-lightest: #fdf7e9;
	--bh-fy-lighter: #fcefd3;
	--bh-fy-light: #f4c765;
	--bh-fuel-yellow: #f0af24;
	--bh-fy-dark: #c08c1c;
	--bh-fy-darker: #60460e;
	--bh-fy-darkest: #48340a;

	/* Shark - Brand Dark */
	--bh-shark-lightest: #e8e8e9;
	--bh-shark-lighter: #d1d2d4;
	--bh-shark-light: #606469;
	--bh-shark: #1d2229;
	--bh-shark-dark: #171b20;
	--bh-shark-darker: #0b0d10;
	--bh-shark-darkest: #080a0c;

	/* Semantic Colors */
	--bh-color-primary: var(--bh-shark);
	--bh-color-accent: var(--bh-fuel-yellow);
	--bh-color-text: var(--bh-shark);
	--bh-color-text-muted: var(--bh-shark-light);
	--bh-color-background: var(--bh-white);
	--bh-color-surface: var(--bh-neutral-lightest);
	--bh-color-border: var(--bh-neutral-lighter);

	/* Status colors (alerts, form states) */
	--bh-color-success: #2e7d32;
	--bh-color-success-bg: #e8f5e9;
	--bh-color-error: #c62828;
	--bh-color-error-bg: #ffebee;
	--bh-color-warning: var(--bh-fy-dark);
	--bh-color-warning-bg: var(--bh-fy-lightest);
	--bh-color-info: #1565c0;
	--bh-color-info-bg: #e3f2fd;

	/* ============================================
	   TYPOGRAPHY
	   ============================================ */

	--bh-font-heading: 'PT Sans', sans-serif;
	--bh-font-body: 'Ubuntu', sans-serif;

	/* Font Sizes */
	--bh-text-tiny: 12px;
	--bh-text-small: 14px;
	--bh-text-regular: 16px;
	--bh-text-medium: 18px;
	--bh-text-large: 22px;

	--bh-heading-6: 22px;
	--bh-heading-5: 28px;
	--bh-heading-4: 36px;
	--bh-heading-3: 44px;
	--bh-heading-2: 52px;
	--bh-heading-1: 72px;

	/* Font Weights */
	--bh-weight-regular: 400;
	--bh-weight-medium: 500;
	--bh-weight-bold: 700;

	/* Line Heights */
	--bh-line-height-tight: 1.2;
	--bh-line-height-snug: 1.3;
	--bh-line-height-normal: 1.4;
	--bh-line-height-relaxed: 1.5;

	/* Letter Spacing */
	--bh-tracking-heading: -1px;

	/* ============================================
	   SPACING
	   ============================================ */

	--bh-spacing-tiny: 8px;
	--bh-spacing-very-small: 12px;
	--bh-spacing-small: 24px;
	--bh-spacing-medium: 32px;
	--bh-spacing-section-s: 48px;
	--bh-spacing-section-m: 80px;
	--bh-spacing-section-l: 120px;

	/* ============================================
	   LAYOUT
	   ============================================ */

	--bh-container-width: 1280px;
	--bh-content-width: 800px;
	--bh-nav-height: 72px;

	/* ============================================
	   Z-INDEX HIERARCHY
	   ============================================ */

	--bh-z-base: 1;
	--bh-z-content: 10;
	--bh-z-dropdown: 900;        /* in-page content dropdowns */
	--bh-z-sticky: 990;
	--bh-z-header: 1000;
	--bh-z-header-dropdown: 1010; /* nav/header dropdowns — must sit above the header */
	--bh-z-overlay: 1050;
	--bh-z-modal: 1100;
	--bh-z-loader: 9999;

	/* ============================================
	   BORDER RADIUS
	   ============================================ */

	--bh-radius-none: 0px;
	--bh-radius-small: 4px;
	--bh-radius-medium: 8px;
	--bh-radius-large: 16px;
	--bh-radius-full: 999px;

	/* ============================================
	   SHADOWS
	   ============================================ */

	--bh-shadow-xxsmall: 0 1px 2px rgba(0, 0, 0, 0.05);
	--bh-shadow-xsmall: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
	--bh-shadow-small: 0 2px 4px -2px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
	--bh-shadow-medium: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
	--bh-shadow-large: 0 8px 8px -4px rgba(0, 0, 0, 0.03), 0 20px 24px -4px rgba(0, 0, 0, 0.08);
	--bh-shadow-xlarge: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
	--bh-shadow-xxlarge: 0 32px 64px -12px rgba(0, 0, 0, 0.14);

	/* ============================================
	   TRANSITIONS
	   ============================================ */

	--bh-transition-fast: 150ms ease;
	--bh-transition-normal: 250ms ease;
	--bh-transition-slow: 400ms ease;
}

/* ============================================
   BASE STYLES
   ============================================ */

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--bh-font-body);
	font-size: var(--bh-text-regular);
	line-height: var(--bh-line-height-relaxed);
	color: var(--bh-color-text);
	background-color: var(--bh-color-background);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bh-font-heading);
	font-weight: var(--bh-weight-bold);
	letter-spacing: var(--bh-tracking-heading);
	color: var(--bh-shark);
	margin-top: 0;
}

h1 {
	font-size: clamp(2.5rem, 5vw, var(--bh-heading-1));
	line-height: var(--bh-line-height-tight);
}

h2 {
	font-size: clamp(2rem, 4vw, var(--bh-heading-2));
	line-height: var(--bh-line-height-tight);
}

h3 {
	font-size: clamp(1.75rem, 3vw, var(--bh-heading-3));
	line-height: var(--bh-line-height-tight);
}

h4 {
	font-size: clamp(1.5rem, 2.5vw, var(--bh-heading-4));
	line-height: var(--bh-line-height-snug);
}

h5 {
	font-size: clamp(1.25rem, 2vw, var(--bh-heading-5));
	line-height: var(--bh-line-height-normal);
}

h6 {
	font-size: clamp(1.125rem, 1.5vw, var(--bh-heading-6));
	line-height: var(--bh-line-height-normal);
}

p {
	margin-top: 0;
	margin-bottom: var(--bh-spacing-small);
}

a {
	color: var(--bh-fuel-yellow);
	text-decoration: none;
	transition: color var(--bh-transition-fast);
}

a:hover,
a:focus {
	color: var(--bh-fy-dark);
}

/* Text utilities */
.text-tiny    { font-size: var(--bh-text-tiny); }
.text-small   { font-size: var(--bh-text-small); }
.text-regular { font-size: var(--bh-text-regular); }
.text-medium  { font-size: var(--bh-text-medium); }
.text-large   { font-size: var(--bh-text-large); }

.text-muted { color: var(--bh-color-text-muted); }

/* ============================================
   LAYOUT - container & sections
   ============================================ */

.bh-container {
	width: 100%;
	max-width: var(--bh-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 5vw, 2rem);
	padding-right: clamp(1rem, 5vw, 2rem);
}

.bh-section--small  { padding-top: var(--bh-spacing-section-s); padding-bottom: var(--bh-spacing-section-s); }
.bh-section--medium { padding-top: var(--bh-spacing-section-m); padding-bottom: var(--bh-spacing-section-m); }
.bh-section--large  { padding-top: var(--bh-spacing-section-l); padding-bottom: var(--bh-spacing-section-l); }

/* ============================================
   BUTTONS - Triple system (Primary / CTA / Outline)
   4 states: default, hover, active, disabled
   ============================================ */

.button,
.bh-btn,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bh-spacing-tiny);
	font-family: var(--bh-font-body);
	font-size: var(--bh-text-regular);
	font-weight: var(--bh-weight-medium);
	line-height: 1;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--bh-radius-medium);
	cursor: pointer;
	transition: background-color var(--bh-transition-fast),
		border-color var(--bh-transition-fast),
		color var(--bh-transition-fast),
		box-shadow var(--bh-transition-fast);
	text-decoration: none;
	min-height: 40px;
}

/* Primary Button (Shark / Dark) */
.button,
.bh-btn,
.bh-btn--primary,
input[type="submit"] {
	background-color: var(--bh-shark);
	color: var(--bh-white);
	border-color: var(--bh-shark);
}

.button:hover,
.bh-btn:hover,
.bh-btn--primary:hover,
input[type="submit"]:hover {
	background-color: var(--bh-shark-dark);
	border-color: var(--bh-shark-dark);
	color: var(--bh-white);
}

.button:active,
.bh-btn:active,
.bh-btn--primary:active,
input[type="submit"]:active {
	background-color: var(--bh-shark-darker);
	border-color: var(--bh-shark-darker);
}

.button:focus-visible,
.bh-btn:focus-visible,
input[type="submit"]:focus-visible {
	outline: 2px solid var(--bh-fuel-yellow);
	outline-offset: 2px;
}

.button:disabled,
.bh-btn:disabled,
.bh-btn--primary:disabled,
input[type="submit"]:disabled {
	background-color: var(--bh-neutral-light);
	border-color: var(--bh-neutral-light);
	color: var(--bh-neutral);
	cursor: not-allowed;
}

/* CTA / Accent Button (Fuel Yellow) */
.button--accent,
.bh-btn--cta,
.bh-btn--accent {
	background-color: var(--bh-fuel-yellow);
	border-color: var(--bh-fuel-yellow);
	color: var(--bh-shark);
}

.button--accent:hover,
.bh-btn--cta:hover,
.bh-btn--accent:hover {
	background-color: var(--bh-fy-dark);
	border-color: var(--bh-fy-dark);
	color: var(--bh-shark);
}

.button--accent:active,
.bh-btn--cta:active,
.bh-btn--accent:active {
	background-color: var(--bh-fy-darker);
	border-color: var(--bh-fy-darker);
	color: var(--bh-white);
}

.button--accent:disabled,
.bh-btn--cta:disabled,
.bh-btn--accent:disabled {
	background-color: var(--bh-fy-lighter);
	border-color: var(--bh-fy-lighter);
	color: var(--bh-neutral-light);
}

/* Outline Button */
.button--outline,
.bh-btn--outline {
	background-color: transparent;
	border-color: var(--bh-shark);
	color: var(--bh-shark);
}

.button--outline:hover,
.bh-btn--outline:hover {
	background-color: var(--bh-shark);
	color: var(--bh-white);
}

.button--outline:active,
.bh-btn--outline:active {
	background-color: var(--bh-shark-darker);
	border-color: var(--bh-shark-darker);
	color: var(--bh-white);
}

.button--outline:disabled,
.bh-btn--outline:disabled {
	background-color: transparent;
	border-color: var(--bh-neutral-light);
	color: var(--bh-neutral-light);
}

/* Outline Button - on dark backgrounds */
.bh-btn--outline-on-dark {
	background-color: transparent;
	border-color: var(--bh-white);
	color: var(--bh-white);
}

.bh-btn--outline-on-dark:hover {
	background-color: var(--bh-white);
	color: var(--bh-shark);
}

/* Button sizes */
.bh-btn--small { padding: 8px 16px; font-size: var(--bh-text-small); min-height: 32px; }
.bh-btn--large { padding: 16px 32px; font-size: var(--bh-text-medium); min-height: 48px; }

/* ============================================
   FORM INPUTS - 6 states from Figma
   default, focused, filled, error, success, disabled
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select,
.bh-input {
	font-family: var(--bh-font-body);
	font-size: var(--bh-text-regular);
	line-height: var(--bh-line-height-relaxed);
	padding: 12px 16px;
	border: 1px solid var(--bh-neutral-lighter);
	border-radius: var(--bh-radius-medium);
	background-color: var(--bh-white);
	color: var(--bh-shark);
	transition: border-color var(--bh-transition-fast),
		box-shadow var(--bh-transition-fast);
	width: 100%;
}

input:focus,
textarea:focus,
select:focus,
.bh-input:focus {
	outline: none;
	border-color: var(--bh-fuel-yellow);
	box-shadow: 0 0 0 3px var(--bh-fy-lightest);
}

input::placeholder,
textarea::placeholder {
	color: var(--bh-neutral-light);
}

/* Filled state - only target inputs with placeholder attribute */
.bh-input--filled,
input[placeholder]:not(:placeholder-shown),
textarea[placeholder]:not(:placeholder-shown) {
	border-color: var(--bh-neutral);
}

/* Error state */
.bh-input--error,
input.is-invalid,
input[aria-invalid="true"] {
	border-color: var(--bh-color-error);
}

.bh-input--error:focus,
input.is-invalid:focus,
input[aria-invalid="true"]:focus {
	border-color: var(--bh-color-error);
	box-shadow: 0 0 0 3px var(--bh-color-error-bg);
}

/* Success state */
.bh-input--success {
	border-color: var(--bh-color-success);
}

.bh-input--success:focus {
	border-color: var(--bh-color-success);
	box-shadow: 0 0 0 3px var(--bh-color-success-bg);
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled,
.bh-input:disabled {
	background-color: var(--bh-neutral-lightest);
	color: var(--bh-neutral-light);
	cursor: not-allowed;
}

label {
	display: block;
	font-weight: var(--bh-weight-medium);
	margin-bottom: var(--bh-spacing-tiny);
	color: var(--bh-shark);
}

.bh-field-help {
	display: block;
	margin-top: var(--bh-spacing-tiny);
	font-size: var(--bh-text-small);
	color: var(--bh-neutral);
}

.bh-field-error {
	display: block;
	margin-top: var(--bh-spacing-tiny);
	font-size: var(--bh-text-small);
	color: var(--bh-color-error);
	font-weight: var(--bh-weight-medium);
}

/* ============================================
   CARDS - shared base
   ============================================ */

.bh-card {
	display: flex;
	flex-direction: column;
	background-color: var(--bh-white);
	border-radius: var(--bh-radius-large);
	overflow: hidden;
	box-shadow: var(--bh-shadow-xsmall);
	transition: box-shadow var(--bh-transition-normal),
		transform var(--bh-transition-normal);
}

.bh-card:hover {
	box-shadow: var(--bh-shadow-medium);
	transform: translateY(-2px);
}

.bh-card--dark {
	background-color: var(--bh-shark);
	color: var(--bh-white);
}

.bh-card--dark h1,
.bh-card--dark h2,
.bh-card--dark h3,
.bh-card--dark h4,
.bh-card--dark h5,
.bh-card--dark h6 {
	color: var(--bh-white);
}

.bh-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--bh-neutral-lightest);
}

.bh-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bh-transition-slow);
}

.bh-card:hover .bh-card__media img {
	transform: scale(1.05);
}

.bh-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--bh-spacing-very-small);
	padding: var(--bh-spacing-small);
	flex: 1 1 auto;
}

.bh-card__eyebrow {
	font-size: var(--bh-text-tiny);
	font-weight: var(--bh-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bh-fy-dark);
}

.bh-card--dark .bh-card__eyebrow {
	color: var(--bh-fuel-yellow);
}

.bh-card__title {
	font-size: var(--bh-heading-6);
	line-height: var(--bh-line-height-normal);
	margin: 0;
}

.bh-card__excerpt {
	font-size: var(--bh-text-regular);
	color: var(--bh-color-text-muted);
	margin: 0;
}

.bh-card--dark .bh-card__excerpt {
	color: var(--bh-neutral-lighter);
}

.bh-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bh-spacing-very-small);
	margin-top: auto;
	padding-top: var(--bh-spacing-very-small);
	font-size: var(--bh-text-small);
	color: var(--bh-color-text-muted);
}

/* Image card variant — image-only, smaller body */
.bh-card--image .bh-card__body {
	padding: var(--bh-spacing-very-small) var(--bh-spacing-small);
}

/* Programme card variant — square media */
.bh-card--programme .bh-card__media {
	aspect-ratio: 1 / 1;
}

/* Event card — horizontal layout */
.bh-card--event {
	flex-direction: row;
	align-items: stretch;
}

.bh-card--event .bh-card__media {
	flex: 0 0 120px;
	aspect-ratio: 1 / 1;
}

/* Team / profile card — circular avatar */
.bh-card--team {
	text-align: center;
}

.bh-card--team .bh-card__media {
	aspect-ratio: 1 / 1;
}

/* Stat / metric card */
.bh-card--stat {
	padding: var(--bh-spacing-medium);
	gap: var(--bh-spacing-tiny);
}

.bh-card--stat .bh-card__value {
	font-family: var(--bh-font-heading);
	font-size: var(--bh-heading-3);
	font-weight: var(--bh-weight-bold);
	line-height: var(--bh-line-height-tight);
	letter-spacing: var(--bh-tracking-heading);
	color: var(--bh-shark);
	margin: 0;
}

.bh-card--stat .bh-card__label {
	font-size: var(--bh-text-small);
	color: var(--bh-color-text-muted);
	margin: 0;
}

.bh-card--stat.bh-card--dark .bh-card__value { color: var(--bh-white); }
.bh-card--stat.bh-card--dark .bh-card__label { color: var(--bh-neutral-lighter); }

.bh-card--stat.bh-card--accent {
	background-color: var(--bh-fuel-yellow);
}

.bh-card--stat.bh-card--accent .bh-card__value,
.bh-card--stat.bh-card--accent .bh-card__label {
	color: var(--bh-shark);
}

/* Testimonial card */
.bh-card--testimonial {
	padding: var(--bh-spacing-medium);
	gap: var(--bh-spacing-small);
}

.bh-card--testimonial .bh-card__quote {
	font-size: var(--bh-text-medium);
	font-style: italic;
	line-height: var(--bh-line-height-relaxed);
	color: var(--bh-shark);
	margin: 0;
}

.bh-card--testimonial.bh-card--dark .bh-card__quote { color: var(--bh-white); }

.bh-card--testimonial .bh-card__cite {
	display: flex;
	align-items: center;
	gap: var(--bh-spacing-very-small);
	font-style: normal;
}

.bh-card--testimonial .bh-card__cite img {
	width: 48px;
	height: 48px;
	border-radius: var(--bh-radius-full);
	object-fit: cover;
}

.bh-card--testimonial .bh-card__author {
	font-weight: var(--bh-weight-bold);
	color: var(--bh-shark);
}

.bh-card--testimonial.bh-card--dark .bh-card__author { color: var(--bh-white); }

.bh-card--testimonial .bh-card__role {
	font-size: var(--bh-text-small);
	color: var(--bh-color-text-muted);
}

/* Accent-bordered testimonial — left yellow rule */
.bh-card--testimonial.bh-card--accent-border {
	background-color: var(--bh-neutral-lightest);
	border-left: 4px solid var(--bh-fuel-yellow);
	box-shadow: none;
}

/* ============================================
   TAGS / BADGES
   ============================================ */

.bh-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-family: var(--bh-font-body);
	font-size: var(--bh-text-tiny);
	font-weight: var(--bh-weight-medium);
	line-height: 1.4;
	border-radius: var(--bh-radius-full);
	background-color: var(--bh-neutral-lightest);
	color: var(--bh-shark);
}

.bh-tag--accent  { background-color: var(--bh-fy-lightest); color: var(--bh-fy-darker); }
.bh-tag--success { background-color: var(--bh-color-success-bg); color: var(--bh-color-success); }
.bh-tag--error   { background-color: var(--bh-color-error-bg);   color: var(--bh-color-error); }
.bh-tag--warning { background-color: var(--bh-color-warning-bg); color: var(--bh-color-warning); }
.bh-tag--info    { background-color: var(--bh-color-info-bg);    color: var(--bh-color-info); }
.bh-tag--dark    { background-color: var(--bh-shark); color: var(--bh-white); }

.bh-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: var(--bh-text-tiny);
	font-weight: var(--bh-weight-bold);
	line-height: 1;
	border-radius: var(--bh-radius-full);
	background-color: var(--bh-fuel-yellow);
	color: var(--bh-shark);
}

.bh-badge--dot {
	min-width: 8px;
	width: 8px;
	height: 8px;
	padding: 0;
}

/* ============================================
   ALERTS / TOASTS
   ============================================ */

.bh-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--bh-spacing-very-small);
	padding: var(--bh-spacing-small);
	border-radius: var(--bh-radius-medium);
	border: 1px solid transparent;
	font-size: var(--bh-text-regular);
	line-height: var(--bh-line-height-relaxed);
}

.bh-alert__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.bh-alert__title {
	font-weight: var(--bh-weight-bold);
	margin: 0 0 4px;
}

.bh-alert__body { margin: 0; }

.bh-alert--success {
	background-color: var(--bh-color-success-bg);
	border-color: var(--bh-color-success);
	color: var(--bh-color-success);
}

.bh-alert--error {
	background-color: var(--bh-color-error-bg);
	border-color: var(--bh-color-error);
	color: var(--bh-color-error);
}

.bh-alert--warning {
	background-color: var(--bh-color-warning-bg);
	border-color: var(--bh-color-warning);
	color: var(--bh-color-warning);
}

.bh-alert--info {
	background-color: var(--bh-color-info-bg);
	border-color: var(--bh-color-info);
	color: var(--bh-color-info);
}

/* ============================================
   PAGE HEADER / BREADCRUMB
   ============================================ */

.bh-page-header {
	padding: var(--bh-spacing-section-m) 0;
	background-color: var(--bh-neutral-lightest);
}

.bh-page-header--dark {
	background-color: var(--bh-shark);
	color: var(--bh-white);
}

.bh-page-header--dark .bh-page-header__title,
.bh-page-header--dark .bh-page-header__lede {
	color: var(--bh-white);
}

.bh-page-header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bh-spacing-very-small);
}

.bh-page-header__title {
	margin: 0;
}

.bh-page-header__lede {
	font-size: var(--bh-text-medium);
	color: var(--bh-color-text-muted);
	max-width: 65ch;
	margin: 0;
}

.bh-page-header--dark .bh-page-header__lede { color: var(--bh-neutral-lighter); }

.bh-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bh-spacing-tiny);
	font-size: var(--bh-text-small);
	color: var(--bh-color-text-muted);
	list-style: none;
	margin: 0 0 var(--bh-spacing-very-small);
	padding: 0;
}

.bh-breadcrumbs li { display: inline-flex; align-items: center; }

.bh-breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--bh-spacing-tiny);
	color: var(--bh-neutral-light);
}

.bh-breadcrumbs a {
	color: var(--bh-color-text-muted);
}

.bh-breadcrumbs a:hover { color: var(--bh-fuel-yellow); }

.bh-breadcrumbs [aria-current="page"] {
	color: var(--bh-shark);
	font-weight: var(--bh-weight-medium);
}

.bh-page-header--dark .bh-breadcrumbs,
.bh-page-header--dark .bh-breadcrumbs a { color: var(--bh-neutral-lighter); }

.bh-page-header--dark .bh-breadcrumbs [aria-current="page"] { color: var(--bh-white); }

/* ============================================
   HERO patterns - centered (dark) & split (light)
   ============================================ */

.bh-hero {
	padding: var(--bh-spacing-section-l) 0;
	background-color: var(--bh-shark);
	color: var(--bh-white);
}

.bh-hero--light {
	background-color: var(--bh-white);
	color: var(--bh-shark);
}

.bh-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bh-spacing-medium);
}

.bh-hero--centered .bh-hero__inner {
	align-items: center;
	text-align: center;
}

.bh-hero--centered .bh-hero__lede,
.bh-hero--centered .bh-hero__title {
	max-width: 60ch;
}

.bh-hero--split .bh-hero__inner {
	flex-direction: row;
	align-items: center;
}

.bh-hero--split .bh-hero__copy,
.bh-hero--split .bh-hero__media {
	flex: 1 1 50%;
}

@media (max-width: 768px) {
	.bh-hero--split .bh-hero__inner { flex-direction: column; }
}

.bh-hero__title {
	font-size: clamp(2.5rem, 5vw, var(--bh-heading-1));
	line-height: var(--bh-line-height-tight);
	letter-spacing: var(--bh-tracking-heading);
	color: inherit;
	margin: 0;
}

.bh-hero__lede {
	font-size: var(--bh-text-large);
	line-height: var(--bh-line-height-relaxed);
	color: inherit;
	opacity: 0.85;
	margin: 0;
}

.bh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bh-spacing-very-small);
}

/* ============================================
   CTA Banner (Dark / Accent / Light)
   ============================================ */

.bh-cta-band {
	padding: var(--bh-spacing-section-m) clamp(1rem, 5vw, 2rem);
	border-radius: var(--bh-radius-large);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bh-spacing-medium);
	flex-wrap: wrap;
}

.bh-cta-band--dark   { background-color: var(--bh-shark);       color: var(--bh-white); }
.bh-cta-band--accent { background-color: var(--bh-fuel-yellow); color: var(--bh-shark); }
.bh-cta-band--light  { background-color: var(--bh-neutral-lightest); color: var(--bh-shark); }

.bh-cta-band__title {
	font-size: var(--bh-heading-3);
	line-height: var(--bh-line-height-tight);
	letter-spacing: var(--bh-tracking-heading);
	margin: 0;
	color: inherit;
}

.bh-cta-band__copy {
	max-width: 60ch;
	color: inherit;
}

.bh-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bh-spacing-very-small);
}

/* ============================================
   PAGINATION
   ============================================ */

.bh-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bh-spacing-tiny);
	list-style: none;
	margin: var(--bh-spacing-medium) 0;
	padding: 0;
}

.bh-pagination__item,
.bh-pagination a,
.bh-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 37px;
	height: 37px;
	padding: 0 8px;
	font-size: var(--bh-text-small);
	font-weight: var(--bh-weight-medium);
	color: var(--bh-shark);
	background-color: var(--bh-white);
	border: 1px solid var(--bh-neutral-lighter);
	border-radius: var(--bh-radius-medium);
	transition: background-color var(--bh-transition-fast),
		border-color var(--bh-transition-fast),
		color var(--bh-transition-fast);
}

.bh-pagination a:hover {
	background-color: var(--bh-neutral-lightest);
	border-color: var(--bh-neutral-light);
	color: var(--bh-shark);
}

.bh-pagination .current,
.bh-pagination [aria-current="page"] {
	background-color: var(--bh-shark);
	border-color: var(--bh-shark);
	color: var(--bh-white);
}

.bh-pagination .disabled {
	color: var(--bh-neutral-light);
	background-color: var(--bh-neutral-lightest);
	cursor: not-allowed;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */

.bh-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 var(--bh-spacing-medium);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--bh-neutral-lighter);
}

.bh-tabs__item {
	margin: 0;
}

.bh-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bh-spacing-tiny);
	padding: var(--bh-spacing-very-small) var(--bh-spacing-small);
	font-family: var(--bh-font-body);
	font-size: var(--bh-text-regular);
	font-weight: var(--bh-weight-medium);
	color: var(--bh-color-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--bh-transition-fast),
		border-color var(--bh-transition-fast);
}

.bh-tabs__link:hover {
	color: var(--bh-shark);
}

.bh-tabs__link[aria-selected="true"],
.bh-tabs__link.is-active {
	color: var(--bh-shark);
	border-bottom-color: var(--bh-fuel-yellow);
}

.bh-tab-panel {
	padding: var(--bh-spacing-medium) 0;
}

.bh-tab-panel[hidden] { display: none; }

/* ============================================
   ACCORDION / FAQ
   ============================================ */

.bh-accordion {
	border-top: 1px solid var(--bh-neutral-lighter);
}

.bh-accordion__item {
	border-bottom: 1px solid var(--bh-neutral-lighter);
}

.bh-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bh-spacing-small);
	width: 100%;
	padding: var(--bh-spacing-small) 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--bh-font-heading);
	font-size: var(--bh-heading-6);
	font-weight: var(--bh-weight-bold);
	line-height: var(--bh-line-height-normal);
	letter-spacing: var(--bh-tracking-heading);
	color: var(--bh-shark);
	text-align: left;
	cursor: pointer;
	min-height: 0;
}

.bh-accordion__trigger:hover {
	background: none;
	color: var(--bh-fy-dark);
}

.bh-accordion__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	transition: transform var(--bh-transition-fast);
}

.bh-accordion__trigger[aria-expanded="true"] .bh-accordion__icon {
	transform: rotate(45deg);
}

.bh-accordion__content {
	padding: 0 0 var(--bh-spacing-small);
	color: var(--bh-color-text-muted);
}

.bh-accordion__content[hidden] {
	display: none;
}

/* ============================================
   NAVIGATION (top bar)
   ============================================ */

.bh-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bh-spacing-small);
	min-height: var(--bh-nav-height);
	padding: var(--bh-spacing-very-small) 0;
	background-color: var(--bh-white);
	transition: background-color var(--bh-transition-normal),
		box-shadow var(--bh-transition-normal);
	position: relative;
	z-index: var(--bh-z-header);
}

.bh-nav--sticky {
	position: sticky;
	top: 0;
}

.bh-nav--dark {
	background-color: var(--bh-shark);
	color: var(--bh-white);
}

.bh-nav--scrolled {
	box-shadow: var(--bh-shadow-small);
}

.bh-nav__brand img,
.bh-nav__brand svg {
	display: block;
	max-height: 40px;
	width: auto;
}

.bh-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--bh-spacing-small);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-nav__link {
	font-family: var(--bh-font-body);
	font-size: var(--bh-text-small);
	font-weight: var(--bh-weight-medium);
	color: var(--bh-shark);
	text-decoration: none;
	padding: var(--bh-spacing-tiny) 0;
	border-bottom: 2px solid transparent;
	transition: border-color var(--bh-transition-fast),
		color var(--bh-transition-fast);
}

.bh-nav--dark .bh-nav__link { color: var(--bh-white); }

.bh-nav__link:hover,
.bh-nav__link[aria-current="page"] {
	color: var(--bh-shark);
	border-bottom-color: var(--bh-fuel-yellow);
}

.bh-nav--dark .bh-nav__link:hover,
.bh-nav--dark .bh-nav__link[aria-current="page"] {
	color: var(--bh-white);
}

/* ============================================
   FOOTER
   ============================================ */

.bh-footer {
	background-color: var(--bh-shark);
	color: var(--bh-neutral-lighter);
	padding: var(--bh-spacing-section-m) 0 var(--bh-spacing-medium);
}

.bh-footer h1, .bh-footer h2, .bh-footer h3,
.bh-footer h4, .bh-footer h5, .bh-footer h6 {
	color: var(--bh-white);
}

.bh-footer a {
	color: var(--bh-neutral-lighter);
}

.bh-footer a:hover {
	color: var(--bh-fuel-yellow);
}

.bh-footer__bottom {
	margin-top: var(--bh-spacing-medium);
	padding-top: var(--bh-spacing-small);
	border-top: 1px solid var(--bh-shark-light);
	font-size: var(--bh-text-small);
	color: var(--bh-shark-lighter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bh-spacing-very-small);
	justify-content: space-between;
	align-items: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background colors */
.bg-white            { background-color: var(--bh-white); }
.bg-shark            { background-color: var(--bh-shark); }
.bg-shark-dark       { background-color: var(--bh-shark-dark); }
.bg-fuel-yellow      { background-color: var(--bh-fuel-yellow); }
.bg-fy-lightest      { background-color: var(--bh-fy-lightest); }
.bg-neutral-lightest { background-color: var(--bh-neutral-lightest); }
.bg-neutral-lighter  { background-color: var(--bh-neutral-lighter); }

/* Text colors */
.color-white       { color: var(--bh-white); }
.color-shark       { color: var(--bh-shark); }
.color-fuel-yellow { color: var(--bh-fuel-yellow); }
.color-muted       { color: var(--bh-color-text-muted); }

/* Shadows */
.shadow-xxsmall { box-shadow: var(--bh-shadow-xxsmall); }
.shadow-xsmall  { box-shadow: var(--bh-shadow-xsmall); }
.shadow-small   { box-shadow: var(--bh-shadow-small); }
.shadow-medium  { box-shadow: var(--bh-shadow-medium); }
.shadow-large   { box-shadow: var(--bh-shadow-large); }
.shadow-xlarge  { box-shadow: var(--bh-shadow-xlarge); }
.shadow-xxlarge { box-shadow: var(--bh-shadow-xxlarge); }

/* Border radius */
.rounded-none   { border-radius: var(--bh-radius-none); }
.rounded-small  { border-radius: var(--bh-radius-small); }
.rounded-medium { border-radius: var(--bh-radius-medium); }
.rounded-large  { border-radius: var(--bh-radius-large); }
.rounded-full   { border-radius: var(--bh-radius-full); }

/* ============================================
   EMPTY CONTENT HANDLING
   Collapse known theme containers when empty.
   Scoped to theme-controlled classes only.
   ============================================ */

/* Theme sidebar/widget areas */
body:not(.elementor-editor-active) .widget-area:empty,
body:not(.elementor-editor-active) .sidebar:empty,
body:not(.elementor-editor-active) #sidebar:empty {
	display: none;
}

/* Theme footer social sections */
body:not(.elementor-editor-active) .footer .social-one:empty,
body:not(.elementor-editor-active) .footer .social-two:empty,
body:not(.elementor-editor-active) .footer .social-three:empty {
	display: none;
}

/* Theme-controlled plugin wrappers - opt-in via class */
body:not(.elementor-editor-active) .bh-shortcode-wrapper:empty,
body:not(.elementor-editor-active) .bh-plugin-section:empty,
body:not(.elementor-editor-active) .bh-collapse-if-empty:empty {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
}