/* =====================================================================
   Securinvest — header.css
   Base header anatomy + responsive scaffolding (Stage 2D).
   All rules are scoped to .si-site-header so they don't bleed into the
   parent (twentytwentyfive) chrome. Mega-panel layout/visuals are
   Stage 2E; ACF data population is Stage 2F; mobile drawer is §7.
   ===================================================================== */

/* Sticky bar */
.si-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--si-border);
	font-family: var(--si-font-body);
}

.si-site-header .nav-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

.si-site-header .main-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 86px;
	gap: 24px;
}

/* Brand block — logo SVG + hidden tagline (kept for SEO/screen-readers).
   The mint ">" separator and the wordmark itself live inside the SVG. */
.si-site-header .brand {
	flex-shrink: 0;
	min-width: 0;
	max-width: 190px;
}
.si-site-header .brand .brand-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--si-blue);
	cursor: pointer;
}
/* Aspect-ratio-safe: cap BOTH axes and keep width/height auto so the image
   scales to its natural ratio (logo is 250x36, ~6.94:1). Locking height while
   capping width — the previous rule — crushed it into the 180x40 box. */
.si-site-header .brand .brand-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 34px;
}
.si-site-header .brand .brand-tagline {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Primary nav row */
.si-site-header .nav-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.si-site-header .nav-item {
	position: relative;
}
.si-site-header .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: 10px;
	font-family: var(--si-font-display);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--si-blue);
	text-decoration: none;
	position: relative;
	z-index: 2;
	transition: background 0.2s ease, color 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
}
.si-site-header .nav-link:hover,
.si-site-header .nav-item:hover > .nav-link,
.si-site-header .nav-item:focus-within > .nav-link {
	background: #f5f3ff;
}
.si-site-header .nav-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--si-mint);
}
.si-site-header .nav-link .caret {
	font-size: 0.7rem;
	color: var(--si-grey);
	transition: transform 0.2s ease;
}
.si-site-header .nav-item:hover > .nav-link .caret,
.si-site-header .nav-item:focus-within > .nav-link .caret {
	transform: rotate(180deg);
}

/* Right-hand actions */
.si-site-header .nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	white-space: nowrap;
}
.si-site-header .nav-phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-family: var(--si-font-display);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--si-blue);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease;
}
.si-site-header .nav-phone:hover,
.si-site-header .nav-phone:focus-visible {
	color: var(--si-mint);
	outline: none;
}

/* Primary CTA — scoped to the header so it doesn't fight core/button rules */
.si-site-header .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var(--si-font-display);
	font-size: 0.93rem;
	font-weight: 800;
	border: 1px solid transparent;
	transition: background 0.2s ease, color 0.2s ease,
		transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}
.si-site-header .btn:hover {
	transform: translateY(-1px);
}
.si-site-header .btn-primary {
	background: var(--si-blue);
	color: var(--si-white);
	box-shadow: 0 10px 24px rgba(34, 8, 113, 0.16);
}
.si-site-header .btn-primary:hover,
.si-site-header .btn-primary:focus-visible {
	background: var(--si-mint);
	color: var(--si-blue);
	outline: none;
}

/* Paid-advertising landing pages: brand + phone only.
   Detected server-side (template=landing.php + slug `*-landing`) and rendered
   with `.si-site-header--minimal` on the <header>. No nav-primary, no Book CTA,
   no hamburger/drawer — so the rules just style the phone link at every viewport.
   .main-nav already uses justify-content: space-between, so brand sits left and
   .nav-actions--minimal sits right with no extra layout. */
.si-site-header--minimal .nav-actions {
	gap: 0;
}
.si-site-header--minimal .nav-phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-family: var(--si-font-display);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--si-blue);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}
.si-site-header--minimal .nav-phone:hover,
.si-site-header--minimal .nav-phone:focus-visible {
	color: var(--si-mint);
	outline: none;
}
@media (max-width: 768px) {
	.si-site-header--minimal .nav-phone {
		font-size: 0.95rem;
		min-height: 40px;
	}
}

/* Responsive — wrapper / nav-row only.
   Mega-panel breakpoints come in Stage 2E; the mobile drawer is §7. */
@media (max-width: 1440px) {
	.si-site-header .nav-wrap { max-width: 1280px; }
}
@media (max-width: 1280px) {
	.si-site-header .main-nav { gap: 18px; }
	.si-site-header .nav-link {
		padding: 8px 6px;
		font-size: 0.8rem;
		gap: 4px;
	}
}
@media (max-width: 1180px) {
	.si-site-header .main-nav { gap: 14px; }
	.si-site-header .nav-link {
		padding: 7px 5px;
		font-size: 0.77rem;
	}
}
@media (max-width: 1100px) {
	.si-site-header .nav-primary { display: none; }
	.si-site-header .main-nav { justify-content: space-between; }
	.si-site-header .brand .brand-logo { max-height: 36px; }
}
@media (max-width: 768px) {
	.si-site-header .nav-wrap { padding: 0 16px; }
	.si-site-header .main-nav {
		min-height: 72px;
		gap: 12px;
	}
	.si-site-header .brand .brand-logo { max-height: 32px; max-width: 150px; }
	.si-site-header .btn-primary {
		min-height: 40px;
		padding: 0 14px;
		font-size: 0.86rem;
	}
	/* Phone link is duplicated inside the mobile drawer; hide it from the
	   top bar at the narrowest width so the brand + Book CTA + hamburger
	   don't crowd. The minimal header (`--minimal`) keeps the phone visible
	   here — that's the only nav element it has. */
	.si-site-header:not(.si-site-header--minimal) .nav-phone { display: none; }
}
@media (max-width: 1180px) and (min-width: 769px) {
	.si-site-header:not(.si-site-header--minimal) .nav-phone {
		font-size: 0.88rem;
		padding: 0 4px;
	}
}