/**
 * GPP Chrome — frosted header island
 *
 * Site-wide. The UiCore header is one component shared by every page, so this
 * is the only stylesheet in the plugin that is not front-page scoped.
 *
 * Three changes:
 *   1. Always sticky. UiCore's "smart sticky" hides the header on scroll-down.
 *   2. Floating island rather than a full-width bar.
 *   3. Frosted dark glass, with the white logo and white links locked in every
 *      scroll state.
 *
 * On (3): the header ships transparent with NO background of its own, and on
 * scroll UiCore swaps to its solid skin — gold logo, dark links — but there is
 * still nothing painted behind them. Over the dark hero video that skin is
 * close to invisible. Giving the header a real surface is what fixes it; the
 * frosted look is how it earns its place.
 *
 * On !important: used only where measured necessary. UiCore compiles literal
 * pixel values into its stylesheet for the menu row height and paints the
 * logo swap with its own specificity, so those declarations cannot be won on
 * specificity alone. Everything reachable through a design token is set as a
 * token instead — see the custom properties below.
 *
 * @package GPP_Hero_Scroll
 */

/* -------------------------------------------------------------------------
 * Tokens — retune the island from here
 * ---------------------------------------------------------------------- */

/*
 * Site-wide corner radius.
 *
 * One number for every "rounded rectangle" surface in the brand chrome. The
 * header island is the only consumer in this stylesheet, but the token lives
 * on :root rather than on #wrapper-navbar so components OUTSIDE the header can
 * read it too.
 *
 * Current external consumer: the Contact page's Forminator field radius, set
 * in the Elementor shortcode widget's Custom CSS (page 56, element f85e4ee) as
 * `var(--gpp-radius, 15px)`. That styling belongs to the page, not here - see
 * Header_Island_Architecture section 10 - but it reads this number so the form
 * and the navbar cannot drift apart. Changing the value here changes both.
 */
:root {
	--gpp-radius: 15px;
}

#wrapper-navbar {

	/* UiCore's own header tokens. These DO cascade, so no !important needed. */
	--uicore-header--logo-h: 38px;
	--uicore-header--logo-padding: 0px;

	/*
	 * Header text colour, at the source.
	 *
	 * UiCore flips this token to the headline colour (#000) when it adds
	 * `uicore-scrolled`, because it expects its own light solid skin to be
	 * behind the text by then. On a dark glass island that turns links black
	 * on near-black.
	 *
	 * Pinning the token white fixes every consumer at once — the main menu,
	 * the custom header area (which is where the Contact link lives, NOT in
	 * ul.uicore-menu), and the hover state. That is why this is a token and
	 * not a pile of per-element colour overrides: the theme rule that reads
	 * it carries no !important, so the variable is the clean lever.
	 */
	--uicore-header--menu-typo-c: #ffffff;
	--uicore-header--menu-typo-ch: #ffffff;

	/* Ours. */
	--gpp-island-inset: 18px;
	--gpp-island-row: 50px;
	--gpp-island-max: 1240px;

	/*
	 * Corner radius. 15px at client request — a rounded rectangle rather than
	 * the original full pill (999px). Reads the shared token above so the
	 * header and the Contact form cannot drift apart.
	 */
	--gpp-island-radius: var(--gpp-radius);

	/*
	 * Vertical padding, desktop only. The island's height is otherwise set by
	 * its tallest child (the 50px menu row), so this is the lever for making
	 * the bar taller without touching the row or the logo. 10px → 72px overall.
	 *
	 * Mobile keeps its own tighter padding in the breakpoint below; the client
	 * asked to grow the desktop bar only.
	 */
	--gpp-island-pad-y: 10px;

	/*
	 * Logo size. NOT a height — see the branding rule below for why. 1.2
	 * renders the logo at ~178x46 inside a 52px island.
	 */
	--gpp-logo-scale: 1.2;
	/*
	 * 0.72, not the 0.55 that looks nicer over the hero video. The island is
	 * site-wide, so its worst case is white nav text over a white inner page:
	 * at 0.55 the effective surface is #7C7C7C and white text lands at
	 * 4.17:1 — under WCAG AA. At 0.72 the surface is #545454 and the worst
	 * case becomes 7.57:1. Over darker backgrounds it only improves.
	 * Do not lower this without re-running the contrast maths.
	 */
	--gpp-island-bg: rgba(17, 17, 17, 0.72);
	--gpp-island-border: rgba(255, 255, 255, 0.14);
	--gpp-island-blur: blur(20px) saturate(150%);
}

/* -------------------------------------------------------------------------
 * 1. Always sticky
 *
 * `ui-smart-sticky` adds `ui-hide` on scroll-down. The theme's rule, from
 * uicore-framework/includes/extra/style/non-critical-header-css.php (emitted
 * only when header_sticky is true), sets THREE things across TWO selectors:
 *
 *   .ui-hide                        { pointer-events: none }
 *   .ui-hide .uicore-header-wrapper { transform: translate3d(0,-35px,0);
 *                                     opacity: 0;
 *                                     pointer-events: none }
 *
 * All three have to be neutralised, on both selectors.
 *
 * 1.2.0 through 1.6.1 reverted only transform and opacity. The header was then
 * visible but click-through for as long as the theme considered it hidden —
 * nav links dead from the first scroll down until the next time the theme
 * dropped the class. Worse than the original behaviour, which at least hid a
 * header it had disabled.
 *
 * The lesson, recorded because it generalises: when you neutralise a state
 * class, neutralise EVERY property it sets, not just the ones you can see.
 * A half-reverted state is a new bug, not a partial fix.
 *
 * There is no separate smart-sticky toggle to turn off in the theme panel —
 * that whole CSS block is gated on header_sticky, so disabling it would give
 * up sticky entirely. Neutralising in CSS is the only lever.
 * ---------------------------------------------------------------------- */

#wrapper-navbar.ui-hide,
#wrapper-navbar.ui-hide .uicore-header-wrapper {
	pointer-events: auto !important;
}

#wrapper-navbar.ui-hide .uicore-header-wrapper {
	transform: none !important;
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
 * 1b. Kill the theme's full-width solid-header skin
 *
 * UiCore paints its scrolled header state with a pseudo-element on the
 * wrapper — `content: ""`, `background: #F5F5F5`, `position: absolute`,
 * `inset: 0`, `z-index: -1`, full viewport width — and fades its opacity in
 * as you scroll. With the island in place that reads as a grey bar spanning
 * the screen behind the pill. The island is the header's surface now, so the
 * theme's own surface has to go.
 *
 * The wrapper's box-shadow is part of the same skin and animates alongside
 * it; left alone it becomes a full-width hairline under the band.
 * ---------------------------------------------------------------------- */

#wrapper-navbar .uicore-header-wrapper::before {
	display: none !important;
}

#wrapper-navbar .uicore-header-wrapper {
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
 * 2 + 3. The island
 *
 * Note margin-top rather than `top` on the wrapper: the wrapper is absolutely
 * positioned and something in the theme wins `top` even against !important,
 * so the offset is taken on the island itself, which is unopposed.
 * ---------------------------------------------------------------------- */

#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
	margin-top: var(--gpp-island-inset);
	max-width: min(var(--gpp-island-max), calc(100vw - 2 * var(--gpp-island-inset)));
	border: 1px solid var(--gpp-island-border);
	border-radius: var(--gpp-island-radius);
	background: var(--gpp-island-bg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);

	/* Theme sets its own inline padding at a specificity this cannot beat. */
	padding-block: var(--gpp-island-pad-y) !important;
	padding-inline: 30px !important;

	-webkit-backdrop-filter: var(--gpp-island-blur);
	backdrop-filter: var(--gpp-island-blur);
}

/*
 * Without backdrop-filter the translucent fill alone leaves white nav text on
 * whatever happens to be behind it. Go opaque instead of pretty.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
		background: rgba(17, 17, 17, 0.9);
	}
}

/* Collapse the 96px bar to an island-height row. */
#wrapper-navbar .uicore-header-wrapper .uicore-nav-menu {
	height: var(--gpp-island-row) !important;
	min-height: 0 !important;
}

#wrapper-navbar .uicore-header-wrapper ul.uicore-menu,
#wrapper-navbar .uicore-header-wrapper ul.uicore-menu > li {
	height: var(--gpp-island-row) !important;
}

/*
 * Scoped to TOP-LEVEL items only. The dropdown panels are white with dark
 * text — a blanket white would make them unreadable.
 *
 * The colour here is now a belt-and-braces guard; the menu-typo token above
 * is what actually drives link colour, including the Contact link in the
 * custom area, which this selector never reached.
 */
#wrapper-navbar .uicore-header-wrapper ul.uicore-menu > li > a {
	height: var(--gpp-island-row) !important;
	line-height: var(--gpp-island-row) !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * Logo size — why this is a transform and not a height
 *
 * The theme sizes the logo through an inheritance chain that cannot be
 * overridden from a stylesheet:
 *
 *   .uicore-branding            { height: var(--uicore-header--logo-h) }
 *   .uicore-branding a          { height: inherit }   <- display:inline
 *   .uicore-branding a .uicore-logo { height: inherit; width: auto;
 *                                     position: absolute; inset: 0 }
 *
 * The anchor is an inline box, so height never applies to it, and the image
 * ends up pinned at 38px whatever the token says. Verified the hard way: with
 * this stylesheet fully disabled and the theme's own `header_logo_h` set to
 * 75, the logo still rendered 38px. `height` on the image is immovable —
 * inline `!important` does not shift it — while `position` and `width` from
 * the very same rule apply normally.
 *
 * So the logo is scaled instead. This is safe rather than lazy: the source
 * PNG is 500x135 displayed at 148x38, roughly 3x of headroom, so scaling to
 * ~178x46 costs no sharpness. transform-origin keeps it locked to the left
 * edge of the island.
 *
 * If UiCore ever fixes that inline anchor, replace this with a height.
 * ---------------------------------------------------------------------- */

#wrapper-navbar .uicore-header-wrapper .uicore-branding {
	transform: scale(var(--gpp-logo-scale));
	transform-origin: left center;
}

/*
 * Lock the white logo. UiCore cross-fades `.uicore-main` (gold, for the solid
 * skin) against `.uicore-second` (white, for transparent). The island is dark
 * in every state, so the white one always wins.
 */
#wrapper-navbar .uicore-logo.uicore-main,
#wrapper-navbar .uicore-logo.uicore-mobile-main {
	opacity: 0 !important;
}

#wrapper-navbar .uicore-logo.uicore-second,
#wrapper-navbar .uicore-logo.uicore-mobile-second {
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
 * Narrow viewports — tighter inset, full-width-ish island
 * ---------------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	#wrapper-navbar {
		--gpp-island-inset: 12px;

		/*
		 * The island is proportionally chunkier on a phone than on a desktop
		 * at the same numbers, so both come down. Logo scale returns to 1
		 * because the desktop bump exists to enlarge a 38px logo inside a
		 * 50px row; on a 42px row it would overflow.
		 */
		--gpp-island-row: 36px;
		--gpp-logo-scale: 1;

		--uicore-header--logo-h: 30px;

		/*
		 * The actual cause of the oversized mobile island.
		 *
		 * Measured at 500px: the island was 97px tall, and it was not the
		 * logo — `.uicore-custom-area.uicore-only-mobile` (the Contact link
		 * beside the burger) was 95px on its own, because it inherits the
		 * theme's menu line-height token, which is 95px. Tying the token to
		 * the island row collapses it. The desktop menu is in the drawer at
		 * this breakpoint, so nothing else reads it here.
		 */
		--uicore-header--menu-typo-h: var(--gpp-island-row);
	}

	/* Belt and braces for the same thing, in case the token is bypassed. */
	#wrapper-navbar .uicore-mobile-head-right,
	#wrapper-navbar .uicore-custom-area.uicore-only-mobile {
		height: var(--gpp-island-row) !important;
	}

	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
		padding-block: 6px !important;
		padding-inline: 16px !important;
	}

	/*
	 * Sticky on mobile — done with `fixed` on the wrapper, not `sticky` on
	 * the navbar.
	 *
	 * UiCore turns its own sticky off below 1025px:
	 *   @media (max-width:1025px){ .uicore-navbar.uicore-sticky{position:relative} }
	 *
	 * v1.4.0 simply forced `position: sticky` back on. The header then stayed
	 * put but the hamburger stopped responding once scrolled — a zero-height
	 * sticky parent whose only child is absolutely positioned is fragile for
	 * hit-testing, and it fights whatever the theme disabled sticky for.
	 *
	 * Fixing the wrapper instead sidesteps the theme's machinery entirely:
	 * the island becomes an ordinary fixed element with its own stacking
	 * context and nothing overlapping it, which is both simpler and reliably
	 * clickable. The navbar is left as the theme wants it.
	 */
	#wrapper-navbar .uicore-header-wrapper {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		z-index: 999;
	}

	/* Belt and braces: nothing in the island should be click-through. */
	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container,
	#wrapper-navbar .uicore-toggle {
		pointer-events: auto !important;
	}

	/*
	 * Logged-in admins only. WordPress switches the admin bar to
	 * `position: fixed` on small screens and grows it to 46px, so a header
	 * fixed at top:0 sits underneath it and the burger becomes unclickable —
	 * confirmed with elementFromPoint returning `a.ab-item` over the burger.
	 * Visitors never see this; the `.admin-bar` scope keeps it that way.
	 */
	body.admin-bar #wrapper-navbar .uicore-header-wrapper {
		top: 32px !important;
	}
}

@media ( max-width: 782px ) {

	body.admin-bar #wrapper-navbar .uicore-header-wrapper {
		top: 46px !important;
	}
}

/* -------------------------------------------------------------------------
 * Mobile drawer — the hamburger panel
 *
 * `.uicore-navigation-wrapper` is NOT inside #wrapper-navbar; it is a
 * body-level sibling under .uicore-body-content, so none of the island
 * scoping above reaches it. The theme paints it solid white:
 *
 *   @media only screen and (max-width:1025px){
 *     .uicore-navigation-wrapper{ background: var(--uicore-white-color) }
 *   }
 *
 * Matching it to the island means glass plus white text.
 *
 * The tint is 0.85 rather than the island's 0.72: this is a full-screen
 * panel over arbitrary page content, and at 0.85 over white the surface is
 * ~#3D3D3D, keeping white menu text around 10:1.
 * ---------------------------------------------------------------------- */

.uicore-navigation-wrapper {

	/* Space above the logo / close row. */
	--gpp-drawer-top: 26px;

	/* Space between that row and the first menu link. */
	--gpp-drawer-gap: 16px;

	background: rgba(17, 17, 17, 0.85) !important;

	-webkit-backdrop-filter: blur(24px) saturate(140%);
	backdrop-filter: blur(24px) saturate(140%);
}

.uicore-navigation-wrapper,
.uicore-navigation-wrapper a,
.uicore-navigation-wrapper .uicore-menu li > a,
.uicore-navigation-wrapper .uicore-custom-area,
.uicore-navigation-wrapper .uicore-custom-area a {
	color: #fff !important;
}

/*
 * The close button. Its X is drawn from three 2px <span class="bar"> spans
 * coloured with background-color, not `color`, so the white-text rule above
 * never touched them — they stayed black on the dark panel.
 *
 * Scoped to the drawer: the identical component in the header is already
 * white, driven by the menu-typo token.
 */
.uicore-navigation-wrapper .uicore-toggle .bar {
	background-color: #fff !important;
}

/*
 * The drawer logo is swapped to the theme's light logo from PHP — see
 * Assets::add_drawer_logo_style(). It cannot be done here because the
 * drawer holds only the dark logo image, so the file itself has to change
 * and the URL comes from the theme's own setting.
 */

/*
 * Top breathing room.
 *
 * v1.4.0 padded `.uicore-navigation-content` — the menu list — but the panel's
 * cramped element is the row ABOVE it holding the logo and the close button,
 * which sat hard against the top edge. That row is the wrapper's first child.
 * Padding it moves the whole panel down; the smaller pad on the list keeps the
 * gap between the logo row and the first link.
 *
 * box-sizing keeps the added padding inside the theme's
 * `height: calc(100% - 68px)` rather than pushing the panel into overflow.
 */
.uicore-navigation-wrapper > .uicore-container {
	box-sizing: border-box;
	padding-top: var(--gpp-drawer-top) !important;
}

.uicore-navigation-wrapper .uicore-navigation-content {
	box-sizing: border-box;
	padding-top: var(--gpp-drawer-gap);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.uicore-navigation-wrapper {
		background: rgba(17, 17, 17, 0.97) !important;
	}
}

@media ( prefers-reduced-transparency: reduce ) {

	.uicore-navigation-wrapper {
		background: rgba(17, 17, 17, 0.97) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion / reduced transparency
 *
 * Some users set a system preference against transparency effects. Honour it
 * with a solid surface rather than the blur.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-transparency: reduce ) {

	#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
		background: rgba(17, 17, 17, 0.95);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}