/*
 * GORILLA GARAGE — NAV
 *
 * Enthält:
 *   - .gg-nav        Polygon-Cut-Nav-Bar (Desktop ab 1280px)
 *   - .gg-nav__list  Liste (BEM-Klassen kommen aus den Filtern in nav.php)
 *   - .gg-drawer     Off-Canvas-Drawer (≤ 1279px)
 *
 * Breakpoint --bp-xl (1280px) statt --bp-lg: die Klinge ist content-sized, rechtsbündig
 * und wächst nach LINKS. Passt sie nicht mehr in den Viewport, läuft sie über
 * die linke Kante hinaus und die ersten Items ("Startseite") werden
 * abgeschnitten — ohne Scrollbar, also unsichtbar kaputt. Die sieben Items
 * brauchen inkl. Padding rund 1200px netto, darunter übernimmt der Drawer.
 *
 * Drawer-Animation: transform translateX, Body-Scroll-Lock kommt via JS.
 */

/* ────────────────────────────────────────────────────────────
 * Desktop-Nav-Bar (Polygon-Cut)
 * ──────────────────────────────────────────────────────────── */

.gg-nav {
	background: transparent;
	color: var(--color-text-on-dark);
	padding-top: var(--space-3);
	padding-bottom: 0;
	position: relative;
	display: flex;
	justify-content: flex-end;
	transition: padding var(--dur-base) var(--ease-standard);
}

body.is-stuck .gg-nav {
	padding-top: var(--space-2);
	padding-bottom: 0;
}

/* Container-Defaults neutralisieren — wir verwenden den Container-Slot nicht
 * mehr als zentrierten Wrapper, sondern als transparenten Pass-Through. */
.gg-nav__container.container {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	display: contents;
}

/*
 * Blade = die eigentliche Klinge: inline-flex, content-sized, rechtsbündig
 * (via .gg-nav justify-content: flex-end). padding-right = --container-edge,
 * damit das letzte Item ("Kontakt") auf der gleichen vertikalen Linie endet
 * wie der KONTAKT-Btn der Brand-Bar darüber.
 */
.gg-nav__blade {
	display: inline-flex;
	align-items: center;
	padding-left: calc(var(--gg-tab-slant) + var(--space-4));
	padding-right: var(--container-edge);
	background-color: var(--gg-black-soft);
	-webkit-clip-path: var(--clip-blade-tab);
	clip-path: var(--clip-blade-tab);
	position: relative;
	z-index: 1;
	/* Eigener Composite-Layer — siehe .gg-topbar__inner: ohne diese
	 * Promotion shimt die clip-path-Kante, wenn Nav-Link-Hovers ueber
	 * dem backdrop-filter des Headers laufen. */
	transform: translateZ(0);
}

.gg-nav__bar {
	display: flex;
	align-items: center;
	padding-block: var(--space-2);
	min-height: 2.25rem;
}

.gg-nav__bar .gg-nav__list {
	flex-wrap: nowrap;
}

.gg-nav__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-headline);
}

.gg-nav__item {
	position: relative;
}

/*
 * Nav-Link als Mini-Chevron-Button.
 * Form: var(--clip-btn-chevron) — gleiche diagonale Cuts wie der KONTAKT-Btn
 * der Brand-Bar. Cut-Tiefe lokal kleiner (8px), passend zur kompakten Nav-Höhe.
 *
 * Hover-Effekt: ein schräger roter Streifen (skewX) wipet schnell von links
 * nach rechts ueber den Button. Das ::before sitzt absolut im Link, wird durch
 * den parent clip-path beschnitten und liegt via z-index unter dem Text.
 *
 * Keine border/outline/inset-shadow auf dem Link — clip-path wuerde sie an den
 * Cuts wegschneiden (siehe Memory: feedback_keine_border_auf_chevron).
 */
.gg-nav__link {
	--gg-nav-link-skew: -18deg;
	position: relative;
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	color: var(--color-text-on-dark);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	--btn-chevron-cut: 8px;
	clip-path: var(--clip-btn-chevron);
	isolation: isolate;
	transition: color var(--dur-fast) var(--ease-standard);
}

.gg-nav__link::before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -10px;
	right: -10px;
	background-color: var(--gg-red);
	transform: translateX(-115%) skewX(var(--gg-nav-link-skew));
	transform-origin: left center;
	transition: transform var(--dur-fast) var(--ease-out);
	z-index: -1;
	pointer-events: none;
}

.gg-nav__link:hover,
.gg-nav__link:focus-visible {
	color: var(--gg-white);
	outline: none;
}

.gg-nav__link:hover::before,
.gg-nav__link:focus-visible::before {
	transform: translateX(0) skewX(var(--gg-nav-link-skew));
}

/* Aktive Seite: Streifen permanent gefuellt — kein Reveal, kein Hover-Wiggle. */
.gg-nav__item.is-current > .gg-nav__link,
.gg-nav__link[aria-current="page"] {
	color: var(--gg-white);
}

.gg-nav__item.is-current > .gg-nav__link::before,
.gg-nav__link[aria-current="page"]::before {
	transform: translateX(0) skewX(var(--gg-nav-link-skew));
}

@media (max-width: 1279px) {
	.gg-nav {
		display: none;
	}
}

/* 1280–1439px: die Klinge passt, aber ohne Reserve — hier wächst --container-edge
 * noch kaum mit. Item-Padding, Gap und der linke Klingen-Anschnitt schrumpfen
 * deshalb eine Stufe, damit zwischen erstem Item und Viewport-Kante Luft bleibt.
 * Ab 1440px greift wieder das volle Padding. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.gg-nav__blade {
		padding-left: calc(var(--gg-tab-slant) + var(--space-2));
	}

	.gg-nav__bar .gg-nav__list {
		gap: var(--space-1);
	}

	.gg-nav__bar .gg-nav__link {
		padding-inline: var(--space-3);
	}
}

/* ────────────────────────────────────────────────────────────
 * Mobile-Drawer
 * ──────────────────────────────────────────────────────────── */

.gg-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
}

.gg-drawer[hidden] {
	display: none;
}

.gg-drawer__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-overlay-scrim);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.gg-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background-color: var(--gg-black);
	color: var(--color-text-on-dark);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--dur-slow) var(--ease-emphasis);
	box-shadow: var(--shadow-xl);
}

/* JS toggelt .is-open am .gg-drawer-Container */
.gg-drawer.is-open .gg-drawer__overlay {
	opacity: 1;
}

.gg-drawer.is-open .gg-drawer__panel {
	transform: translateX(0);
}

.gg-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5) var(--space-6);
	border-bottom: 1px solid var(--color-border-dark);
}

.gg-drawer__logo {
	display: inline-flex;
	align-items: center;
	color: var(--gg-white);
	text-decoration: none;
}

.gg-drawer__logo img,
.gg-drawer__logo .custom-logo {
	display: block;
	height: 30px;
	width: auto;
}

.gg-drawer__logo-text {
	font-family: var(--font-headline);
	font-size: var(--fs-xl);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.gg-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--gg-white);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-standard);
}

.gg-drawer__close:hover,
.gg-drawer__close:focus-visible {
	border-color: var(--color-border-dark);
}

.gg-drawer__nav {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-8) var(--space-6);
}

.gg-nav__list--mobile {
	flex-direction: column;
	gap: var(--space-4);
	font-family: var(--font-headline);
}

.gg-nav__list--mobile .gg-nav__item {
	width: 100%;
}

.gg-nav__list--mobile .gg-nav__link {
	display: block;
	width: 100%;
	padding: var(--space-3) 0;
	font-size: var(--fs-xl);
	letter-spacing: var(--ls-wide);
	border-bottom: 3px solid transparent;
	/* Mobile-Drawer hat seine eigene Optik (volle Breite, Underline-Hover) —
	 * Chevron-Cut und roter Wipe sind nur fuer die Desktop-Nav gedacht. */
	clip-path: none;
	background-color: transparent;
}

.gg-nav__list--mobile .gg-nav__link::before {
	display: none;
}

.gg-nav__list--mobile .gg-nav__link:hover,
.gg-nav__list--mobile .gg-nav__link:focus-visible {
	border-bottom-color: var(--color-accent);
}

.gg-nav__list--mobile .gg-nav__item.is-current > .gg-nav__link,
.gg-nav__list--mobile .gg-nav__link[aria-current="page"] {
	color: var(--gg-white);
	border-bottom-color: var(--color-accent);
}

.gg-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	border-top: 1px solid var(--color-border-dark);
}

.gg-drawer__contact-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-on-dark);
	text-decoration: none;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
}

.gg-drawer__contact-item svg {
	color: var(--color-accent);
	flex-shrink: 0;
}

.gg-drawer__contact-item:hover,
.gg-drawer__contact-item:focus-visible {
	color: var(--color-accent-hover);
}

.gg-drawer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
	color: var(--color-text-muted-on-dark);
	text-decoration: none;
	font-weight: var(--fw-medium);
}

.gg-drawer__social svg {
	color: currentColor;
	flex-shrink: 0;
}

.gg-drawer__social:hover,
.gg-drawer__social:focus-visible {
	color: var(--gg-white);
}

/* Body-Scroll-Lock — wird vom JS gesetzt, wenn Drawer offen ist. */
html.gg-nav-open,
html.gg-nav-open body {
	overflow: hidden;
}

@media (min-width: 1280px) {
	.gg-drawer {
		display: none;
	}
}