/* ==========================================================================
   Header component (always loaded)
   Layout: brand | nav (menu + CTA). Collapses to a hamburger at 1080px.
   Keep the 1080px breakpoint in sync with assets/js/navigation.js.
   ========================================================================== */

/* WordPress admin bar offset (32px desktop, 46px small screens) */
:root { --wt-adminbar: 0px; }
body.admin-bar { --wt-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --wt-adminbar: 46px; } }
/* Below 600px the admin bar scrolls away, so the header sticks to the very top once scrolled. */
@media (max-width: 600px) { body.admin-bar .wt-header.is-scrolled { --wt-adminbar: 0px; } }

.wt-header {
	position: fixed; top: var(--wt-adminbar); left: 0; right: 0; z-index: 100;
	height: var(--wt-header-h);
	background: transparent;
	transition: background-color 0.3s var(--wt-ease), box-shadow 0.3s var(--wt-ease);
}
.wt-header.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--wt-border), 0 10px 28px rgba(11, 23, 48, 0.06);
}
.wt-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1.5rem; overflow: hidden; }

/* Brand */
.wt-brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; text-decoration: none; color: var(--wt-navy); }
.wt-brand__mark { width: 40px; height: 40px; flex: none; }
.wt-brand__logo { max-height: 130px; width: auto; }
.wt-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.wt-brand__name { font-family: var(--wt-font-head); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; }
.wt-brand__sub { margin-top: 3px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; color: var(--wt-muted); }
.wt-brand--light, .wt-brand--light:hover { color: #fff; }
.wt-brand--light .wt-brand__sub { color: #9fb0d4; }

/* Desktop navigation. Scoped to the header so it styles WP menus and the fallback list alike. */
.wt-nav { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.wt-header .wt-menu, .wt-header .wt-menu li { list-style: none; margin: 0; padding: 0; }
.wt-header .wt-menu li a {
	position: relative; display: block; padding: 0.55rem 0.95rem;
	font-size: 0.93rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
	color: var(--wt-text); text-decoration: none; border-radius: 999px;
	transition: color 0.2s var(--wt-ease), background-color 0.2s var(--wt-ease);
}
/* .wt-header .wt-menu li a::after {
	content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px;
	border-radius: 50%; background: var(--wt-gold);
	transform: scale(0); transition: transform 0.25s var(--wt-ease);
} */
.wt-header .wt-menu li a:hover { color: var(--wt-primary); background: var(--wt-soft); }
.wt-header .wt-menu li a.is-active, .wt-header .wt-menu li.current-menu-item > a { color: var(--wt-primary); background: var(--wt-soft); }
.wt-header .wt-menu li a.is-active::after, .wt-header .wt-menu li.current-menu-item > a::after { transform: scale(1); }
.wt-nav__cta { flex: none; margin-left: 0.25rem; padding-left: 1.25rem; border-left: 1px solid var(--wt-border); }

/* Slightly tighter spacing on small laptops so nothing wraps or overflows */
@media (max-width: 1240px) {
	.wt-header .wt-menu li a { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
	.wt-nav { gap: 0.9rem; }
	.wt-nav__cta { padding-left: 0.9rem; }
}

/* Hamburger button (hidden on desktop) */
.wt-nav-toggle {
	display: none; position: relative; flex: none; width: 46px; height: 46px; padding: 0;
	align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--wt-border); border-radius: 12px; cursor: pointer;
	box-shadow: var(--wt-shadow-sm); transition: border-color 0.2s;
}
.wt-nav-toggle:hover { border-color: #b2c1f2; }
.wt-nav-toggle__bars { position: relative; display: block; width: 20px; height: 14px; }
.wt-nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--wt-navy); border-radius: 2px; transition: transform 0.28s var(--wt-ease), opacity 0.2s; }
.wt-nav-toggle__bars span:nth-child(1) { top: 0; }
.wt-nav-toggle__bars span:nth-child(2) { top: 6px; }
.wt-nav-toggle__bars span:nth-child(3) { top: 12px; }
.wt-header.is-open .wt-nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wt-header.is-open .wt-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.wt-header.is-open .wt-nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Tablet + mobile: slide-down panel */
@media (max-width: 1080px) {
	:root { --wt-header-h: 68px; }
	.wt-nav-toggle { display: inline-flex; }

	/* Solid header. No backdrop-filter here: it would trap the fixed panel inside the header bar. */
	.wt-header.is-open, .wt-header.is-scrolled {
		background: #fff;
		-webkit-backdrop-filter: none; backdrop-filter: none;
		box-shadow: 0 1px 0 var(--wt-border);
	}
	.wt-nav {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
		top: calc(var(--wt-header-h) + var(--wt-adminbar));
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.5rem;
		padding: 1rem 1.25rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		background: #fff; border-top: 1px solid var(--wt-border);
		opacity: 0; visibility: hidden; transform: translateY(-10px);
		transition: opacity 0.25s var(--wt-ease), transform 0.25s var(--wt-ease), visibility 0s linear 0.25s;
	}
	.wt-header.is-open .wt-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

	.wt-header .wt-menu { flex-direction: column; align-items: stretch; gap: 0.25rem; }
	.wt-header .wt-menu li a {
		display: flex; align-items: center; justify-content: space-between;
		padding: 1rem; font-size: 1.08rem; border-radius: var(--wt-radius); white-space: normal;
	}
	.wt-header .wt-menu li a::after {
		position: static; width: 8px; height: 8px; margin: 0 0.25rem 0 0; border-radius: 0; background: none;
		border-top: 2px solid currentColor; border-right: 2px solid currentColor;
		transform: rotate(45deg); opacity: 0.45;
	}
	.wt-header .wt-menu li a.is-active::after, .wt-header .wt-menu li.current-menu-item > a::after { transform: rotate(45deg); opacity: 1; }
	.wt-header .wt-menu li a:hover::after { opacity: 1; }
	.wt-nav__cta { margin: auto 0 0; padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--wt-border); }
	.wt-nav__cta .wt-btn { width: 100%; min-height: 54px; font-size: 1rem; }
}
@media (max-width: 380px) { .wt-brand__sub { display: none; } }

/* Without JavaScript the menu is shown as a simple wrapped list. */
html:not(.wt-js) .wt-nav-toggle { display: none; }
@media (max-width: 1080px) {
	html:not(.wt-js) .wt-header { position: static; height: auto; background: #fff; }
	html:not(.wt-js) .wt-header__inner { flex-wrap: wrap; padding-block: 0.75rem; }
	html:not(.wt-js) .wt-nav { position: static; opacity: 1; visibility: visible; transform: none; padding: 0; border: 0; flex-basis: 100%; }
	html:not(.wt-js) .wt-main > .wt-section:first-child { padding-top: 3rem; }
}
@media (max-width: 768px){
	.wt-brand__logo{max-height: 100px;}
}