/*
 * Shared header for the canvas-style page templates
 * (template-parts/contact-figma-header.php).
 *
 * Loaded on every template that adds the gs-canvas body class
 * (template-contact-figma.php, template-seo-audit.php). Depends on the
 * :root --gs-* tokens and the .gs-btn styles from the template stylesheet,
 * which is why it is enqueued after it. Paired with js/contact-figma-header.js.
 *
 * Desktop: Figma 37372:6804 (pill) + 37373:6876 (dropdown)
 * Mobile:  Figma 37374:6943 (closed) + 37376:7028 (open), full-screen menu, drawers
 */

/* ---------- Standalone base ---------- */
/*
 * The two page templates hand the header these through their own stylesheet
 * and their .gs-page wrapper. As a global header it renders on pages that load
 * neither, so it carries its own copy. Both rules are scoped to the header and
 * the mobile menu, so nothing here can reach page content.
 *
 * Every palette token above also carries an inline fallback for the same
 * reason: on a page template they resolve to the page palette, anywhere else
 * they fall back to the identical values.
 */
.gs-canvas .gs-header,
.gs-canvas .gs-header *,
.gs-canvas .gs-header *::before,
.gs-canvas .gs-header *::after,
.gs-canvas .gs-mobile-menu,
.gs-canvas .gs-mobile-menu *,
.gs-canvas .gs-mobile-menu *::before,
.gs-canvas .gs-mobile-menu *::after {
	box-sizing: border-box;
}

.gs-canvas .gs-header a,
.gs-canvas .gs-mobile-menu a {
	text-decoration: none;
}

/* ---------- Header ---------- */
/* Figma nodes 37372:6804 (pill) and 37373:6876 (dropdown panel) */

.gs-canvas .gs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 24px 0;
}

/* ---------- Colour scheme ---------- */
/*
 * The header owns the handful of colour tokens it actually uses, so it can be
 * re-themed on its own without touching the rest of the page. The defaults
 * below point straight at the page palette, so the header renders exactly as
 * it always has; a light theme only has to re-point these on .gs-header.
 *
 * --gs-orange is deliberately not listed: the "Let's talk" button stays orange
 * in every theme.
 *
 * The mobile menu and its drawers are SIBLINGS of <header>, not children, so
 * they never inherit these and always stay on the page's dark palette. That is
 * intentional, since the menu is a full-screen dark overlay.
 */
.gs-canvas .gs-header {
	--gs-header-tint: rgba(255, 255, 255, 0.05);
	--gs-header-surface: var(--gs-bg, #131419);
	--gs-header-hover-bg: var(--gs-card, #20222b);
	--gs-header-border: var(--gs-outline, #333333);
	--gs-header-fg: var(--gs-text-hi, #f8f8f8);
	--gs-header-fg-muted: var(--gs-text-med, #d0d0d0);

	/* Logo mark. The SVG is inlined by gs_contact_figma_icon() so these reach
	   its fills; assets/media/logo-mark.svg carries the same values as
	   fallbacks. The two orange tones read on light and dark alike, so a light
	   theme normally only needs to re-point the ink pair. */
	--gs-logo-mark: #ff7f00;
	--gs-logo-detail: #ffbd59;
	--gs-logo-ink: #ffe5bd;
	--gs-logo-ink-edge: #ffffff;
}

/* ---------- Light theme ---------- */
/*
 * Applied by contact-figma-header.js when the section under the header opts in
 * with data-header-theme="light". The :not() keeps it off while the mobile menu
 * is open, where the header sits on a dark overlay and must stay dark.
 *
 * The logo tokens are deliberately not re-pointed: the mark keeps its cream ink
 * and white edge in both themes.
 */
.gs-canvas .gs-header[data-theme="light"]:not(.is-menu-open) {
	--gs-header-tint: rgba(255, 255, 255, 0.25);
	--gs-header-border: #dcdfe4;
	--gs-header-fg-muted: #1f2937;

	/* Not specified with the rest; derived so the remaining header states have
	   somewhere sensible to land. --gs-header-fg is the hover/open label colour,
	   one step darker than the resting label. --gs-header-surface backs the
	   dropdown panel. --gs-header-hover-bg is the chip behind a hovered item. */
	--gs-header-fg: #111827;
	--gs-header-surface: #ffffff;
	--gs-header-hover-bg: rgba(31, 41, 55, 0.08);
}

/* ---------- Sticky offset ---------- */
/*
 * The header is a direct child of .gs-page rather than of .gs-hero, so it
 * stays pinned for the whole document instead of unpinning as soon as the
 * hero scrolls past. It is still in normal flow, so it takes its own height
 * at the top of the page.
 *
 * To keep every box exactly where it was when the header lived inside the
 * hero, the hero is pulled back up by that height and given the same amount
 * of top padding. That matters most for the .gs-glow--hero-* backgrounds,
 * which are absolutely positioned against the hero's top edge and clipped by
 * its overflow.
 *
 * --gs-header-h must equal the rendered header height:
 *   24 padding + (1 border + 15 padding + 49 logo + 15 + 1) + 24 = 129px
 *   640px down: 12 + (1 + 12 + 48 CTA button + 12 + 1) + 12 = 98px
 * contact-figma-header.js measures the header on load and on resize and
 * publishes the real value, so these only have to hold for the first paint.
 */
.gs-canvas {
	--gs-header-h: 129px;
}

@media (max-width: 640px) {
	.gs-canvas {
		--gs-header-h: 98px;
	}
}

.gs-canvas .gs-page > .gs-hero {
	margin-top: calc(-1 * var(--gs-header-h));
	padding-top: var(--gs-header-h);
}

/* ---------- Admin bar ---------- */
/*
 * For logged-in users WordPress pins its toolbar over the top of the viewport
 * and pushes the document down by the same amount. A header stuck at top: 0
 * therefore slides under the toolbar and loses the 24px of clear space it has
 * at the top of the page, so pin it below the toolbar instead and the gap
 * above the pill stays the same pinned as it is at rest.
 *
 * WordPress only keeps the toolbar fixed above 600px. At 600px and below it
 * switches to position: absolute and lets it scroll away with the page, so
 * the offset goes back to 0 there.
 *
 * Logged-out visitors never get the toolbar and are unaffected.
 */
.gs-canvas.admin-bar .gs-header {
	top: var( --wp-admin--admin-bar--height, 32px );
}

@media screen and (max-width: 600px) {
	.gs-canvas.admin-bar .gs-header {
		top: 0;
	}
}

/* Pill container */
.gs-canvas .gs-header__inner {
	max-width: 1280px;
	width: calc(100% - 48px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 15px 15px 30px;
	background: var(--gs-header-tint);
	border: 1px solid var(--gs-header-border);
	border-radius: 100px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Burger + logo group (burger only shows on mobile) */
.gs-canvas .gs-header__lead {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 15px;
	flex-shrink: 0;
}

.gs-canvas .gs-burger {
	display: none;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	padding: 0 15px;
	border: 0;
	border-right: 1px solid var(--gs-header-border);
	background: transparent;
	color: var(--gs-header-fg-muted);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.gs-canvas .gs-burger__close { display: none; }
.gs-canvas .gs-header.is-menu-open .gs-burger__open { display: none; }
.gs-canvas .gs-header.is-menu-open .gs-burger__close { display: block; }

/* Logo mark (G only) */
.gs-canvas .gs-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.gs-canvas .gs-header__logo svg {
	display: block;
	width: 38px;
	height: 49px;
}

/* Nav */
.gs-canvas .gs-header__nav {
	display: flex;
	align-items: center;
}

.gs-canvas .gs-nav {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-canvas .gs-nav__li {
	position: relative;
}

/* The resting link colours are scoped through .gs-header on purpose. The
   template stylesheets reset every link inside the page wrapper with
   `.gs-<template> .gs-page a { color: inherit }`, which outranks a plain
   `.gs-canvas .gs-nav-item` and would leave these two rules dead, pinning the
   nav to the inherited body colour in every theme. The extra class wins the
   cascade so the tokens above are actually what paints. Hover and focus
   already carry an extra pseudo-class, so they were never affected. */
.gs-canvas .gs-header .gs-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 32px;
	font-family: var(--gs-font-body, 'DM Sans', sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	color: var(--gs-header-fg-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.gs-canvas .gs-nav-item:hover,
.gs-canvas .gs-nav-item:focus-visible {
	color: var(--gs-header-fg);
	background: var(--gs-header-hover-bg);
}

.gs-canvas .gs-nav-item__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.gs-canvas .gs-nav__li--has-dropdown.is-open .gs-nav-item,
.gs-canvas .gs-nav__li--has-dropdown:hover .gs-nav-item {
	color: var(--gs-header-fg);
}

.gs-canvas .gs-nav__li--has-dropdown.is-open .gs-nav-item__icon,
.gs-canvas .gs-nav__li--has-dropdown:hover .gs-nav-item__icon {
	transform: rotate(180deg);
}

/* Dropdown panel */
.gs-canvas .gs-dropdown {
	position: absolute;
	/* 15px = pill bottom padding, 10px = gap below the pill (Figma) */
	top: calc(100% + 25px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 170px;
	margin: 0;
	padding: 10px;
	list-style: none;
	border: 1px solid var(--gs-header-border);
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Hover bridge so the cursor can cross the 25px gap without closing */
.gs-canvas .gs-dropdown::before {
	content: '';
	position: absolute;
	top: -26px;
	left: 0;
	right: 0;
	height: 26px;
}

/* Opaque backing layer (same size as the panel) so items stay legible
   over bright sections; the 5% white tint sits on top of #131419 */
.gs-canvas .gs-dropdown::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(var(--gs-header-tint), var(--gs-header-tint)), var(--gs-header-surface);
}

.gs-canvas .gs-nav__li--has-dropdown.is-open .gs-dropdown,
.gs-canvas .gs-nav__li--has-dropdown:hover .gs-dropdown,
.gs-canvas .gs-nav__li--has-dropdown:focus-within .gs-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.gs-canvas .gs-header .gs-dropdown__item {
	display: block;
	padding: 8px 12px;
	border-radius: 32px;
	font-family: var(--gs-font-body, 'DM Sans', sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	color: var(--gs-header-fg-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.gs-canvas .gs-dropdown__item:hover,
.gs-canvas .gs-dropdown__item:focus-visible {
	color: var(--gs-header-fg);
	background: var(--gs-header-hover-bg);
}

/* Header CTA (inherits .gs-btn / .gs-btn--primary) */
.gs-canvas .gs-header .gs-btn {
	flex-shrink: 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	border: 0;
	border-radius: 32px;
	font-family: var(--gs-font-body, 'DM Sans', sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.gs-canvas .gs-header .gs-btn--primary {
	background: var(--gs-orange, #b2582e);
	color: #fff;
}

.gs-canvas .gs-header .gs-btn--primary:hover {
	background: #c96a3b;
}

/* ---------- Mobile menu (full screen) ---------- */

.gs-canvas .gs-mobile-menu {
	position: fixed;
	inset: 0;
	/* Above the floating mobile CTA and any plugin overlays */
	z-index: 10000;
	background: var(--gs-bg, #131419);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.gs-canvas .gs-mobile-menu.is-open {
	opacity: 1;
}

.gs-canvas .gs-mobile-menu__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: calc(var(--gs-header-h, 96px) + 24px) 24px calc(28px + env(safe-area-inset-bottom));
	overflow-y: auto;
}

.gs-canvas .gs-mnav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-canvas .gs-mnav__row {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	align-items: center;
	width: 100%;
	min-height: 60px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--gs-outline, #333333);
	background: transparent;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--gs-font-body, 'DM Sans', sans-serif);
}

.gs-canvas .gs-mnav__num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: var(--gs-outline-hi, #595959);
	padding-top: 2px;
}

.gs-canvas .gs-mnav__label {
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--gs-text-hi, #f8f8f8);
}

.gs-canvas .gs-mnav__chev {
	color: var(--gs-text-low, #b5b5b5);
}

.gs-canvas .gs-mobile-menu__footer {
	margin-top: auto;
	padding-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.gs-canvas .gs-mobile-menu__secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	border: 1px solid var(--gs-outline, #333333);
	border-radius: 12px;
	color: var(--gs-text-hi, #f8f8f8);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.gs-canvas .gs-mobile-menu__socials {
	display: flex;
	gap: 10px;
}

.gs-canvas .gs-mobile-menu__social {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gs-outline, #333333);
	border-radius: 12px;
	color: var(--gs-text-med, #d0d0d0);
}

/* ---------- Drawer (slide-up sheet for nested items) ---------- */

.gs-canvas .gs-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10010;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.gs-canvas .gs-drawer-backdrop.is-open {
	opacity: 1;
}

.gs-canvas .gs-drawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10011;
	min-height: 320px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
	background: var(--gs-fg, #1a1c22);
	border-top: 1px solid var(--gs-outline, #333333);
	border-radius: 20px 20px 0 0;
	transform: translateY(100%);
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.gs-canvas .gs-drawer.is-open {
	transform: translateY(0);
}

.gs-canvas .gs-drawer__handle {
	width: 36px;
	height: 4px;
	margin: 0 auto 16px;
	border-radius: 2px;
	background: var(--gs-outline-hi, #595959);
	flex-shrink: 0;
}

.gs-canvas .gs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-shrink: 0;
	touch-action: none;
}

.gs-canvas .gs-drawer__title {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.gs-canvas .gs-drawer__num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: var(--gs-orange, #b2582e);
}

.gs-canvas .gs-drawer__label {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--gs-text-hi, #f8f8f8);
}

.gs-canvas .gs-drawer__close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--gs-outline, #333333);
	border-radius: 10px;
	background: transparent;
	color: var(--gs-text-med, #d0d0d0);
	cursor: pointer;
}

.gs-canvas .gs-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
}

.gs-canvas .gs-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 54px;
	border-bottom: 1px solid var(--gs-outline, #333333);
	font-size: 19px;
	font-weight: 500;
	color: var(--gs-text-hi, #f8f8f8);
	text-decoration: none;
}

.gs-canvas .gs-drawer__list li:last-child .gs-drawer__row {
	border-bottom: 0;
}

.gs-canvas .gs-drawer__row svg {
	color: var(--gs-text-low, #b5b5b5);
	flex-shrink: 0;
}

/* Mobile menu and drawers only exist below the desktop breakpoint */
@media (min-width: 1024px) {
	.gs-canvas .gs-mobile-menu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-canvas .gs-mobile-menu,
	.gs-canvas .gs-drawer,
	.gs-canvas .gs-drawer-backdrop {
		transition: none;
	}

	.gs-canvas .gs-drawer {
		transform: none;
		opacity: 0;
	}

	.gs-canvas .gs-drawer.is-open {
		opacity: 1;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
	.gs-canvas .gs-header__nav {
		display: none;
	}

	.gs-canvas .gs-burger {
		display: flex;
	}

	/* Figma 37374:6943: pl 10, pr 15, py 15 */
	.gs-canvas .gs-header__inner {
		padding: 15px 15px 15px 10px;
		transition: border-radius 0.2s ease, background-color 0.25s ease, border-color 0.25s ease;
	}

	/* Figma 37376:7028: pill squares off while the menu is open */
	.gs-canvas .gs-header.is-menu-open .gs-header__inner {
		border-radius: 10px;
	}

	/* Header stays above the full-screen menu (but below the drawer backdrop) */
	.gs-canvas .gs-header.is-menu-open {
		z-index: 10005;
	}
}

@media (max-width: 640px) {
	.gs-canvas .gs-header__logo svg {
		width: 30px;
		height: 39px;
	}

	.gs-canvas .gs-header {
		padding: 12px 0;
	}

	.gs-canvas .gs-header__inner {
		width: calc(100% - 32px);
		padding: 12px 12px 12px 8px;
	}

	.gs-canvas .gs-burger {
		padding: 0 12px;
	}

	.gs-canvas .gs-mobile-menu__inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-canvas .gs-header__inner,
	.gs-canvas .gs-burger {
		transition: none;
	}
}

/* ---------- Menu-open override ---------- */
/*
 * While the full-screen menu is open the header sits on top of a dark overlay
 * and its burger turns into the close button, so the header always reverts to
 * the dark palette here no matter what theme the section underneath asked for.
 * Without this the close button could end up dark on dark and disappear.
 *
 * This block must stay LAST in the file so it outranks any theme override at
 * the same specificity. A light theme should also be written as
 * .gs-header[data-theme="light"]:not(.is-menu-open) so the two agree.
 */
.gs-canvas .gs-header.is-menu-open {
	--gs-header-tint: rgba(255, 255, 255, 0.05);
	--gs-header-surface: var(--gs-bg, #131419);
	--gs-header-hover-bg: var(--gs-card, #20222b);
	--gs-header-border: var(--gs-outline, #333333);
	--gs-header-fg: var(--gs-text-hi, #f8f8f8);
	--gs-header-fg-muted: var(--gs-text-med, #d0d0d0);
	--gs-logo-mark: #ff7f00;
	--gs-logo-detail: #ffbd59;
	--gs-logo-ink: #ffe5bd;
	--gs-logo-ink-edge: #ffffff;
}