/**
 * Site header styles: announcement bar, header, logo, primary nav,
 * and mobile hamburger toggle.
 *
 * Relies on the CSS custom properties defined on :root in
 * assets/css/base.css. All selectors are prefixed "bbp-" so they never
 * collide with the parent Hello Elementor theme's own header/footer CSS.
 */

/* Announcement bar
   ------------------------------------------------------------------ */
.bbp-announcement-bar {
	background: var(--bbp-gold);
	text-align: center;
	padding: 10px 20px;
}

.bbp-announcement-bar p {
	margin: 0;
	color: var(--bbp-announcement-text);
	font-family: var(--bbp-font-family);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Logo row — on desktop, deliberately NOT sticky (a sibling of
   .bbp-header below, not a shared wrapper around it) so only the nav bar
   pins on scroll; a sticky logo row ate too much viewport height there.
   On mobile it becomes sticky too, independently of .bbp-header — see
   the responsive block below for why they stay siblings rather than
   nesting under one wrapper. Same background as .bbp-header either way,
   so the two read as one continuous header until the page scrolls.
   ------------------------------------------------------------------ */
.bbp-header-logo-row {
	position: relative;
	background: var(--bbp-bg-header);
	text-align: center;
	padding: 28px 20px 22px;
}

.bbp-logo {
	display: inline-block;
	line-height: 0;
}

.bbp-logo img {
	height: 52px;
	width: auto;
	display: block;
	margin: 0 auto;
}

/* Header (nav bar) — the sticky element. Its containing block is the
   page's normal document flow (a sibling of <main>), which is tall
   enough for it to stay pinned for the full scroll, unlike the logo
   row above which isn't part of this element.
   ------------------------------------------------------------------ */
.bbp-header {
	background: var(--bbp-bg-header);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.bbp-header-inner {
	max-width: var(--bbp-container-width);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

/* Primary nav
   ------------------------------------------------------------------ */
.bbp-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.bbp-nav a {
	color: var(--bbp-text-white);
	font-family: var(--bbp-font-family);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bbp-nav a:hover,
.bbp-nav a:focus-visible {
	color: var(--bbp-gold);
}

/* Mobile nav toggle (hamburger)
   ------------------------------------------------------------------ */
.bbp-nav-toggle {
	display: none;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 22px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	background-color: transparent !important;
}

.bbp-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--bbp-text-white);
	border-radius: 1px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.bbp-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}

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

.bbp-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

/* Responsive
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
	.bbp-nav-toggle {
		display: flex;
	}

	.bbp-header-logo-row {
		padding: 20px 20px;
	}

	.bbp-logo img {
		height: 42px;
	}

	.bbp-header-inner {
		/* No longer holds the toggle (moved to .bbp-header-logo-row so it
		   shares that row with the logo) — just the collapsible dropdown
		   menu, which is position:absolute and needs no padding-driven
		   height of its own. Zero padding avoids an empty colored strip
		   between the logo row and the page content below it. */
		padding: 0;
	}

	/* Pin logo row + nav bar together as one unit (the announcement bar
	   above stays out of it, scrolling away normally). Each row stays
	   independently sticky rather than nesting under one wrapper (see the
	   comment in site-header.php) — .bbp-header-logo-row sticks at top:0,
	   and .bbp-header is offset by exactly the logo row's own height
	   (20px padding + 42px logo + 20px padding = 82px) so it stacks
	   directly below the stuck logo row instead of overlapping it. */
	.bbp-header-logo-row {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.bbp-header {
		top: 82px;
	}

	.bbp-nav {
		/* Absolutely positioned + full-viewport-width breakout (independent
		   of .bbp-header-inner's own horizontal padding, same technique
		   used elsewhere in this theme for full-bleed sections) so the
		   open menu overlays the page content below instead of pushing it
		   down — .bbp-header-inner's height (and so .bbp-header's) stays
		   fixed regardless of open/closed state. Anchored via
		   .bbp-header-inner's own position:relative. */
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		margin-top: 0;
		background: var(--bbp-bg-header);
		padding: 24px 20px;
		box-shadow: 0 16px 24px rgba(0, 0, 0, 0.35);
		z-index: 100;
	}

	.bbp-nav.is-open {
		display: block;
	}

	.bbp-nav.is-open ul {
		flex-direction: column;
		gap: 18px;
		align-items: center;
	}
}

@media (max-width: 480px) {
	.bbp-announcement-bar p {
		font-size: 11px;
		line-height: 1.5;
	}
}