/* ==========================================================================
   Gemial Digital — Shared shell: header, mobile panel, footer
   --------------------------------------------------------------------------
   Loaded only on pages that call get_header('gd'). The default Blocksy
   header keeps running everywhere else.

   Two structural notes that are not optional:

   1. backdrop-filter lives on .gdh::before, never on .gdh itself. A
      backdrop-filter, filter or transform on an ancestor becomes the
      containing block for its position:fixed descendants, which would size
      and position the mobile panel against the 68px header instead of the
      viewport.

   2. html/body use overflow-x: clip, not hidden. hidden forces
      overflow-y: auto, turns body into a scroll container and silently
      breaks position: sticky on the header.
   ========================================================================== */

html.gd-shell,
html.gd-shell body {
	overflow-x: clip;
	max-inline-size: 100vw;
}


/* Header
   ========================================================================== */

.gdh {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--gd-z-sticky);
	background: color-mix(in srgb, var(--gd-paper) 86%, transparent);
	border-block-end: 1px solid var(--gd-line);
	transition: box-shadow var(--gd-dur) var(--gd-ease),
		background var(--gd-dur) var(--gd-ease);
}

/* Glass layer. See note 1 above. */
.gdh::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
}

.gdh.is-scrolled {
	box-shadow: 0 1px 0 var(--gd-line), 0 6px 24px rgba(10, 16, 12, 0.06);
}

.gdh__in {
	display: flex;
	align-items: center;
	gap: var(--gd-space-6);
	max-inline-size: calc(var(--gd-container) + var(--gd-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gd-gutter);
	min-block-size: 74px;
	transition: min-block-size var(--gd-dur) var(--gd-ease);
}

.gdh.is-scrolled .gdh__in { min-block-size: 62px; }

/* Scroll depth indicator. Reads as instrumentation, not decoration. */
.gdh__progress {
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 0;
	block-size: 2px;
	inline-size: 100%;
	background: var(--gd-lime);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* Brand */

.gdh__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	flex: none;
}

.gdh__mark { inline-size: 28px; block-size: 28px; flex: none; }

.gdh__logo { max-block-size: 38px; inline-size: auto; }

.gdh__word {
	font-family: var(--gd-font-display);
	font-weight: var(--gd-weight-bold);
	font-size: 1.0625rem;
	letter-spacing: -0.025em;
	color: var(--gd-ink);
	line-height: 1;
}

.gdh__word em { font-style: normal; color: var(--gd-forest); }

/* Desktop nav */

.gdh__nav {
	display: flex;
	align-items: center;
	gap: var(--gd-space-6);
	margin-inline-start: auto;
}

/* wp_nav_menu emits <ul class="menu">, and Blocksy styles .menu directly.
   Every layout property is therefore declared here rather than inherited,
   so the parent theme cannot reach in and change the shape of the nav. */
.gdh__nav ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gd-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gdh__nav li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdh__nav a {
	position: relative;
	font-size: var(--gd-text-sm);
	font-weight: var(--gd-weight-medium);
	color: var(--gd-text-2);
	text-decoration: none;
	padding-block: 0.5rem;
	transition: color var(--gd-dur-fast) var(--gd-ease);
}

.gdh__nav a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	block-size: 2px;
	inline-size: 100%;
	background: var(--gd-lime);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--gd-dur) var(--gd-ease);
}

.gdh__nav a:hover { color: var(--gd-ink); }

.gdh__nav a:hover::after,
.gdh__nav .current-menu-item > a::after,
.gdh__nav [aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.gdh__nav .current-menu-item > a,
.gdh__nav [aria-current="page"] {
	color: var(--gd-ink);
	font-weight: var(--gd-weight-semibold);
}

.gdh__actions {
	display: flex;
	align-items: center;
	gap: var(--gd-space-2);
	flex: none;
}

/* Hamburger */

.gdh__burger {
	display: none;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--gd-radius-sm);
	background: var(--gd-ink);
	cursor: pointer;
	margin-inline-start: auto;
}

.gdh__burger svg { stroke: var(--gd-lime); }

.gdh__burger:focus-visible { outline: 2px solid var(--gd-forest); outline-offset: 2px; }

@media (max-width: 980px) {
	.gdh__nav,
	.gdh__actions .gd-btn { display: none; }

	/* The nav carried margin-inline-start:auto, and hiding it took the push
	   with it. With the nav gone, the actions block has to do that job. */
	.gdh__actions { margin-inline-start: auto; }

	.gdh__burger { display: grid; }
}


/* Mobile panel
   ========================================================================== */

.gdh__backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--gd-z-overlay);
	background: rgba(10, 16, 12, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--gd-dur) var(--gd-ease),
		visibility var(--gd-dur) var(--gd-ease);
}

.gdh__backdrop.is-open { opacity: 1; visibility: visible; }

.gdh__panel {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: calc(var(--gd-z-overlay) + 1);
	inline-size: min(88vw, 360px);
	block-size: 100dvh;
	background: var(--gd-ink);
	border-inline-start: 1px solid var(--gd-ink-3);
	display: flex;
	flex-direction: column;
	transform: translateX(102%);
	transition: transform var(--gd-dur-slow) var(--gd-ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gdh__panel.is-open { transform: none; }

.gdh__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gd-space-4);
	padding: var(--gd-space-5) var(--gd-space-5);
	border-block-end: 1px solid var(--gd-ink-3);
}

.gdh__panel-tag {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	letter-spacing: var(--gd-tracking-label);
	text-transform: uppercase;
	color: var(--gd-lime);
}

.gdh__close {
	inline-size: 38px;
	block-size: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--gd-ink-3);
	border-radius: var(--gd-radius-sm);
	background: transparent;
	cursor: pointer;
	color: var(--gd-text-on-dark);
	flex: none;
}

.gdh__close:hover { border-color: var(--gd-lime); color: var(--gd-lime); }

/* Same defence as the desktop nav. Blocksy sets .menu to a flex row, which
   put every panel item on one line the moment a real WordPress menu was
   assigned. display is declared explicitly so that cannot happen again. */
.gdh__panel nav ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: var(--gd-space-4) var(--gd-space-3);
	inline-size: 100%;
}

.gdh__panel nav li {
	display: block;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdh__panel nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gd-space-3);
	padding: var(--gd-space-4);
	border-radius: var(--gd-radius-sm);
	font-family: var(--gd-font-display);
	font-size: var(--gd-h5);
	font-weight: var(--gd-weight-semibold);
	letter-spacing: -0.015em;
	color: var(--gd-text-on-dark);
	text-decoration: none;
	transition: background var(--gd-dur-fast) var(--gd-ease),
		color var(--gd-dur-fast) var(--gd-ease);
}

.gdh__panel nav a::after {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-block-start: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.35;
	flex: none;
}

.gdh__panel nav a:hover,
.gdh__panel nav .current-menu-item > a {
	background: rgba(172, 246, 1, 0.08);
	color: var(--gd-lime);
}

.gdh__panel-foot {
	margin-block-start: auto;
	padding: var(--gd-space-5);
	border-block-start: 1px solid var(--gd-ink-3);
	display: grid;
	gap: var(--gd-space-3);
}

.gdh__panel-note {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-xs);
	color: var(--gd-text-3);
	line-height: 1.5;
}

/* Staggered item entrance, motion-gated in motion.css */
@media (prefers-reduced-motion: no-preference) {
	.gdh__panel nav li {
		opacity: 0;
		transform: translateX(16px);
	}

	.gdh__panel.is-open nav li {
		animation: gd-panel-in 380ms var(--gd-ease-out) forwards;
		animation-delay: calc(80ms + var(--gd-i, 0) * 45ms);
	}
}

@keyframes gd-panel-in {
	to { opacity: 1; transform: none; }
}


/* Footer
   ========================================================================== */

.gdf {
	background: var(--gd-ink-2);
	color: var(--gd-text-on-dark-2);
	border-block-start: 1px solid var(--gd-ink-3);
	padding-block: var(--gd-space-16) var(--gd-space-8);
	position: relative;
	overflow: hidden;
}

.gdf::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--gd-lime) 30%,
		var(--gd-lime) 70%,
		transparent
	);
	opacity: 0.5;
}

.gdf__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
	gap: var(--gd-space-8);
}

@media (max-width: 900px) { .gdf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .gdf__grid { grid-template-columns: minmax(0, 1fr); } }

.gdf__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: var(--gd-space-5);
	text-decoration: none;
}

.gdf__logo { max-block-size: 42px; inline-size: auto; }

/* Two-line lockup mirroring the real logo: GEMIAL over DIGITAL.
   Used until a reversed logo file is dropped into assets/img/. */
.gdf__word {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1;
}

.gdf__word b {
	font-family: var(--gd-font-display);
	font-weight: var(--gd-weight-bold);
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	color: var(--gd-white);
}

.gdf__word em {
	font-style: normal;
	font-family: var(--gd-font-mono);
	font-weight: var(--gd-weight-medium);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	color: var(--gd-lime);
}

.gdf__about {
	font-size: var(--gd-text-sm);
	color: var(--gd-text-3);
	max-inline-size: 34ch;
	margin: 0 0 var(--gd-space-5);
}

.gdf h2 {
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-label);
	font-weight: var(--gd-weight-medium);
	letter-spacing: var(--gd-tracking-label);
	text-transform: uppercase;
	color: var(--gd-text-3);
	margin: 0 0 var(--gd-space-4);
}

.gdf ul { list-style: none; margin: 0; padding: 0; }

.gdf li { margin-block-end: var(--gd-space-3); }

.gdf a {
	font-size: var(--gd-text-sm);
	color: var(--gd-text-on-dark-2);
	text-decoration: none;
	transition: color var(--gd-dur-fast) var(--gd-ease);
}

.gdf a:hover { color: var(--gd-lime); }

.gdf__social { display: flex; gap: var(--gd-space-2); margin-block-start: var(--gd-space-4); }

.gdf__social a {
	inline-size: 36px;
	block-size: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--gd-ink-3);
	border-radius: var(--gd-radius-sm);
	color: var(--gd-text-on-dark-2);
	transition: border-color var(--gd-dur-fast) var(--gd-ease),
		color var(--gd-dur-fast) var(--gd-ease),
		transform var(--gd-dur-fast) var(--gd-ease);
}

.gdf__social a:hover {
	border-color: var(--gd-lime);
	color: var(--gd-lime);
	transform: translateY(-2px);
}

.gdf__bar {
	margin-block-start: var(--gd-space-12);
	padding-block-start: var(--gd-space-6);
	border-block-start: 1px solid var(--gd-ink-3);
	display: flex;
	justify-content: space-between;
	gap: var(--gd-space-4);
	flex-wrap: wrap;
	font-family: var(--gd-font-mono);
	font-size: var(--gd-text-xs);
	color: var(--gd-text-3);
}

.gdf__bar a { font-family: inherit; font-size: inherit; }

/* Floating WhatsApp button */

.gd-wa-float {
	position: fixed;
	inset-block-end: var(--gd-space-5);
	inset-inline-end: var(--gd-space-5);
	z-index: var(--gd-z-sticky);
	inline-size: 54px;
	block-size: 54px;
	display: grid;
	place-items: center;
	border-radius: var(--gd-radius-pill);
	background: var(--gd-whatsapp);
	color: #04310f;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
	transition: transform var(--gd-dur) var(--gd-ease),
		box-shadow var(--gd-dur) var(--gd-ease);
}

.gd-wa-float:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}

@media (max-width: 600px) {
	.gd-wa-float { inline-size: 48px; block-size: 48px; }
}