/* ==========================================================================
   G&H PACK — Navigation System
   
   CRITICAL: WP Navigation block generates nested markup:
   nav.wp-block-navigation.gh-capsule
     > .wp-block-navigation__responsive-container
       > .wp-block-navigation__responsive-container-content
         > .wp-block-navigation-item
           > a.wp-block-navigation-item__content
   
   We must target ALL levels with !important to override WP defaults.
   ========================================================================== */

:root {
	--topbar-h: 72px;
	--nav-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ================================================================
   1. TOP BAR — Fixed, always transparent
   ================================================================ */
.gh-topbar {
	position: fixed;
	top: 15px; left: 0; right: 0;
	z-index: 1000;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	pointer-events: none;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: var(--topbar-h);
	padding: 0 30px !important;
}

.gh-topbar > * { pointer-events: auto; }

/* Logo — flush left */
.gh-topbar__logo {
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.gh-topbar__logo img,
.gh-topbar__logo .wp-block-site-logo img,
.gh-topbar__logo .custom-logo {
	height: 70px;
	width: auto;
	object-fit: contain;
	transition: filter 0.4s var(--nav-ease);
}

/* Hidden nav source — only used by JS to clone into dock on inner pages */
.gh-nav-source,
.gh-nav-source.wp-block-group,
div.gh-nav-source,
.wp-block-group.gh-nav-source {
	display: none !important;
	position: absolute !important;
	visibility: hidden !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
}

/* Nav dock (center) — vertically aligned with logo */
.gh-topbar__nav-dock {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: none !important;
	padding: 0 !important;
	z-index: 10;
	pointer-events: auto;
}

.gh-topbar__nav-dock.wp-block-group {
	margin: 0 !important;
	min-height: 0;
	gap: 0 !important;
}

.gh-topbar__nav-dock:not(:empty) {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Actions — flush right */
.gh-topbar__actions {
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* Language toggle */
.gh-topbar__lang {
	cursor: pointer;
	padding: 6px 14px;
	border: 1.5px solid rgba(44,62,107,0.18);
	border-radius: 9999px;
	transition: all 0.4s var(--nav-ease);
	margin: 0 !important;
}
.gh-topbar__lang:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent) !important;
}

/* CTA button */
.gh-topbar__cta .wp-block-button__link { transition: all 0.4s var(--nav-ease); }
.gh-topbar__cta .wp-block-button__link:hover { transform: translateY(-1px); }

/* Smooth transitions */
.gh-topbar, .gh-topbar__logo img, .gh-topbar__lang,
.gh-topbar__cta .wp-block-button__link, .gh-topbar__menu-btn span {
	transition: all 0.4s var(--nav-ease);
}

/* ================================================================
   1b. TOPBAR DARK MODE — .is-light
       Also auto-applies when gh-page-hero is present (inner pages)
   ================================================================ */
.gh-topbar.is-light .gh-topbar__logo img,
.gh-topbar.is-light .wp-block-site-logo img { filter: brightness(0) invert(1); }

/* Inner pages: topbar always light (hero is always dark) */
.gh-page-hero ~ .gh-topbar .gh-topbar__logo img,
.gh-page-hero ~ .gh-topbar .wp-block-site-logo img { filter: brightness(0) invert(1); }

.gh-topbar.is-light .gh-topbar__lang {
	color: rgba(255,255,255,0.8) !important;
	border-color: rgba(255,255,255,0.2);
}
.gh-topbar.is-light .gh-topbar__lang:hover {
	color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent);
}

.gh-topbar.is-light .gh-topbar__cta .wp-block-button__link {
	background: rgba(255,255,255,0.12) !important;
	color: #fff !important;
}
.gh-topbar.is-light .gh-topbar__cta .wp-block-button__link:hover {
	background: rgba(255,255,255,0.2) !important;
}

.gh-topbar.is-light .gh-topbar__menu-btn span { background: #fff; }


/* ================================================================
   2. GLASS CAPSULE — Wrapper
      The capsule-wrap is a wp:group block that sits after the hero
      in the DOM. We pull it up into the hero zone with negative margin
      and position it at the bottom of the viewport area.
   ================================================================ */
.gh-capsule-wrap,
.gh-capsule-wrap.wp-block-group {
	position: relative;
	z-index: 101;
	display: flex;
	justify-content: center;
	margin-top: -80px !important;
	margin-bottom: 20px !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	pointer-events: none;
	transition: opacity 0.4s var(--nav-ease), transform 0.4s var(--nav-ease);
}

.gh-capsule-wrap > * {
	pointer-events: auto;
}


/* ================================================================
   2b. GLASS CAPSULE — The pill itself
   ================================================================ */

/* The nav element — plain HTML version */
nav.gh-capsule,
.gh-topbar__nav-dock nav.gh-capsule {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 5px 6px !important;
	border-radius: 9999px !important;
	background: rgba(255,255,255,0.65) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,0.75) !important;
	box-shadow: 0 4px 24px rgba(44,62,107,0.08),
	            inset 0 1px 0 rgba(255,255,255,0.5) !important;
	white-space: nowrap !important;
	margin: 0 !important;
}

/* WP navigation block version (fallback if ref:4 is used) */
nav.wp-block-navigation.gh-capsule,
.gh-topbar__nav-dock nav.wp-block-navigation {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 5px 6px !important;
	border-radius: 9999px !important;
	background: rgba(255,255,255,0.65) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,0.75) !important;
	box-shadow: 0 4px 24px rgba(44,62,107,0.08),
	            inset 0 1px 0 rgba(255,255,255,0.5) !important;
	white-space: nowrap !important;
	margin: 0 !important;
	min-width: auto !important;
}

/* Individual links — plain HTML */
nav.gh-capsule a,
.gh-topbar__nav-dock nav.gh-capsule a {
	display: block;
	padding: 8px 18px;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 450;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: all 0.3s var(--nav-ease);
	white-space: nowrap;
	line-height: 1.3;
}

nav.gh-capsule a:hover,
.gh-topbar__nav-dock nav.gh-capsule a:hover {
	color: var(--wp--preset--color--accent);
	background: rgba(126,184,214,0.08);
}

/* Active state */
nav.gh-capsule a.on,
.gh-topbar__nav-dock nav.gh-capsule a.on {
	background: #fff;
	color: var(--wp--preset--color--navy);
	box-shadow: 0 2px 8px rgba(44,62,107,0.08);
}

/* WP nav block links (fallback) */
.gh-capsule .wp-block-navigation__responsive-container,
.gh-topbar__nav-dock .wp-block-navigation__responsive-container {
	display: contents !important;
	background: none !important;
	padding: 0 !important;
}

/* WP responsive container content — horizontal flex */
.gh-capsule .wp-block-navigation__responsive-container-content,
.gh-topbar__nav-dock .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 2px !important;
	align-items: center !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

/* WP nav items — remove list styling */
.gh-capsule .wp-block-navigation-item,
.gh-topbar__nav-dock .wp-block-navigation-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Individual nav links */
.gh-capsule .wp-block-navigation-item__content,
.gh-topbar__nav-dock .wp-block-navigation-item__content {
	display: block !important;
	padding: 8px 18px !important;
	border-radius: 9999px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.85rem !important;
	font-weight: 450 !important;
	color: var(--wp--preset--color--navy) !important;
	text-decoration: none !important;
	transition: all 0.3s var(--nav-ease) !important;
	white-space: nowrap !important;
	background: transparent !important;
	line-height: 1.3 !important;
}

.gh-capsule .wp-block-navigation-item__content:hover,
.gh-topbar__nav-dock .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent) !important;
	background: rgba(126,184,214,0.08) !important;
}

/* Active state — white pill */
.gh-capsule .current-menu-item .wp-block-navigation-item__content,
.gh-topbar__nav-dock .current-menu-item .wp-block-navigation-item__content {
	background: #fff !important;
	color: var(--wp--preset--color--navy) !important;
	box-shadow: 0 2px 8px rgba(44,62,107,0.08) !important;
}

/* Kill WP submenu icons / toggles / hamburger */
.gh-capsule .wp-block-navigation__submenu-icon,
.gh-capsule .wp-block-navigation__responsive-container-open,
.gh-capsule .wp-block-navigation__responsive-container-close,
.gh-topbar__nav-dock .wp-block-navigation__submenu-icon,
.gh-topbar__nav-dock .wp-block-navigation__responsive-container-open,
.gh-topbar__nav-dock .wp-block-navigation__responsive-container-close {
	display: none !important;
}


/* ================================================================
   2c. CAPSULE DARK MODE (when docked in light topbar over dark section)
   ================================================================ */

/* Plain HTML capsule — dark mode */
.gh-topbar.is-light .gh-topbar__nav-dock nav.gh-capsule {
	background: rgba(255,255,255,0.1) !important;
	border-color: rgba(255,255,255,0.15) !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important;
}

.gh-topbar.is-light .gh-topbar__nav-dock nav.gh-capsule a {
	color: rgba(255,255,255,0.7) !important;
}

.gh-topbar.is-light .gh-topbar__nav-dock nav.gh-capsule a:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.1) !important;
}

.gh-topbar.is-light .gh-topbar__nav-dock nav.gh-capsule a.on {
	background: rgba(255,255,255,0.15) !important;
	color: #fff !important;
}

/* WP navigation block capsule — dark mode (fallback) */
.gh-topbar.is-light .gh-topbar__nav-dock nav.wp-block-navigation {
	background: rgba(255,255,255,0.1) !important;
	border-color: rgba(255,255,255,0.15) !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important;
}

.gh-topbar.is-light .gh-topbar__nav-dock .wp-block-navigation-item__content {
	color: rgba(255,255,255,0.7) !important;
}

.gh-topbar.is-light .gh-topbar__nav-dock .wp-block-navigation-item__content:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.1) !important;
}

.gh-topbar.is-light .gh-topbar__nav-dock .current-menu-item .wp-block-navigation-item__content {
	background: rgba(255,255,255,0.15) !important;
	color: #fff !important;
}


/* ================================================================
   3. HAMBURGER — Matches prototype exactly
      Glass bg, 12px radius, mobile only
   ================================================================ */
.gh-topbar__menu-btn,
button[aria-label="Open Menu"] {
	width: 44px;
	height: 44px;
	background: rgba(44,62,107,0.06);
	border: 1px solid rgba(44,62,107,0.1);
	border-radius: 12px;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	cursor: pointer;
	z-index: 1001;
	transition: all 0.4s var(--nav-ease);
}

.gh-topbar__menu-btn:hover {
	background: rgba(44,62,107,0.1);
}

.gh-topbar__menu-btn span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--wp--preset--color--navy);
	border-radius: 2px;
	transition: all 0.4s var(--nav-ease);
	transform-origin: center;
}

/* X animation on open */
.gh-topbar__menu-btn.is-open span:nth-child(1) {
	transform: translateY(3.25px) rotate(45deg);
}
.gh-topbar__menu-btn.is-open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.gh-topbar__menu-btn.is-open span:nth-child(3) {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* When open — white bars, glass hover */
.gh-topbar__menu-btn.is-open {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.12);
}
.gh-topbar__menu-btn.is-open span {
	background: rgba(255,255,255,0.85) !important;
}
.gh-topbar__menu-btn.is-open:hover {
	background: rgba(255,255,255,0.14);
}

/* Dark section — light hamburger */
.gh-topbar.is-light .gh-topbar__menu-btn {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.1);
}
.gh-topbar.is-light .gh-topbar__menu-btn:hover {
	background: rgba(255,255,255,0.12);
}
.gh-topbar.is-light .gh-topbar__menu-btn span {
	background: rgba(255,255,255,0.85);
}


/* ================================================================
   4. OVERLAY MENU
   ================================================================ */
.gh-overlay-menu {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--wp--preset--color--navy);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 10vw;
	clip-path: circle(0% at calc(100% - 60px) 36px);
	transition: clip-path 0.8s var(--nav-ease);
	overflow: hidden;
}

.gh-overlay-menu.is-open {
	clip-path: circle(150% at calc(100% - 60px) 36px);
}

.gh-overlay-menu__links,
.gh-overlay-menu__nav {
	display: flex;
	flex-direction: column;
}

.gh-overlay-menu__link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 5rem);
	color: rgba(255,255,255,0.25);
	padding: 16px 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	text-decoration: none;
	transition: color 0.4s var(--nav-ease), padding-left 0.4s var(--nav-ease);
	opacity: 0;
	transform: translateY(40px);
	display: flex;
	align-items: baseline;
	gap: 0;
	white-space: nowrap;
}

.gh-overlay-menu.is-open .gh-overlay-menu__link {
	opacity: 1;
	transform: translateY(0);
	transition: color 0.4s var(--nav-ease), padding-left 0.4s var(--nav-ease),
	            opacity 0.7s var(--nav-ease), transform 0.7s var(--nav-ease);
}

.gh-overlay-menu__link:hover {
	color: rgba(255,255,255,0.95);
	padding-left: 20px;
}

.gh-overlay-menu__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--accent);
	margin-right: 16px;
	flex-shrink: 0;
	min-width: 28px;
}

.gh-overlay-menu__footer {
	position: absolute;
	bottom: 40px;
	left: 10vw; right: 10vw;
}

.gh-overlay-menu__footer p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: rgba(255,255,255,0.3);
	margin: 4px 0;
}

.gh-overlay-menu__footer a {
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	transition: color 0.3s var(--nav-ease);
}
.gh-overlay-menu__footer a:hover { color: var(--wp--preset--color--accent); }


/* ================================================================
   5. RESPONSIVE
   ================================================================ */
@media (min-width: 1025px) {
	.gh-topbar__menu-btn { display: none !important; }
	.gh-capsule-wrap { display: flex; }
	.gh-topbar__nav-dock { display: flex !important; visibility: visible !important; opacity: 1 !important; }
}

@media (max-width: 1024px) {
	.gh-topbar__menu-btn,
	button[aria-label="Open Menu"] { display: flex !important; }
	.gh-capsule-wrap,
	.gh-capsule-wrap.wp-block-group,
	div.gh-capsule-wrap { display: none !important; }
	.gh-topbar__nav-dock,
	.gh-topbar__nav-dock.wp-block-group,
	div.gh-topbar__nav-dock { display: none !important; visibility: hidden !important; }
	.gh-topbar__cta { display: none !important; }
	.gh-topbar__lang { display: none !important; }
	.gh-topbar .gh-capsule,
	.gh-topbar nav.wp-block-navigation,
	.gh-topbar .wp-block-navigation { display: none !important; }
	.gh-overlay-menu { padding: 0 24px; }
	.gh-overlay-menu__footer { left: 24px; right: 24px; }
}