/* =============================================================
   Growen Media — header & footer
   Requires base.css to be loaded first.
   ============================================================= */

/* ---------- shared: logo lockup ---------- */
.brand{
	display:flex; align-items:center; gap:10px;
	font-family:'Space Grotesk', sans-serif; font-weight:600;
	font-size:clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	text-decoration:none; color:inherit; white-space:nowrap;
}
.brand .mark{width:32px; height:32px; display:block; flex-shrink:0;}

/* ---------- header ---------- */
header{
	position:sticky; top:0; z-index:50;
	background:rgba(242,245,239,0.9);
	backdrop-filter:blur(8px);
	border-bottom:0.5px solid var(--line);
}

header nav{
	width:100%;
	max-width:var(--wrap-max);
	margin-inline:auto;
	padding:16px var(--gutter);
	display:flex; align-items:center; justify-content:space-between; gap:16px;
}

header nav ul{list-style:none; display:flex; gap:clamp(18px, 2.5vw, 32px); font-size:15px;}
header nav ul a{text-decoration:none; color:var(--text-soft); transition:color .15s;}
header nav ul a:hover{color:var(--text);}

.nav-right{display:flex; align-items:center; gap:6px;}

.nav-cta{
	background:var(--teal); color:var(--teal-tint);
	padding:9px 18px; border-radius:8px;
	font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap;
}

/* ---------- burger button ---------- */
.burger{
	display:none;
	align-items:center; justify-content:center;
	width:42px; height:42px; flex-shrink:0;
	background:none; border:none; border-radius:9px;
	color:var(--text); cursor:pointer;
	transition:background .15s;
	-webkit-tap-highlight-color:transparent;
}
.burger:hover{background:var(--bg-alt);}
.burger svg{width:23px; height:23px; display:block;}
.burger .icon-close{display:none;}
.burger[aria-expanded="true"] .icon-open{display:none;}
.burger[aria-expanded="true"] .icon-close{display:block;}

/* visible keyboard focus */
.burger:focus-visible,
.brand:focus-visible,
header nav ul a:focus-visible,
.nav-cta:focus-visible,
.footer-links a:focus-visible{
	outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;
}

/* ---------- mobile menu ---------- */
@media (max-width:820px){
	.burger{display:flex;}

	header nav ul{
		display:none;
		position:absolute; top:100%; left:0; right:0;
		flex-direction:column; gap:0;
		background:rgba(242,245,239,0.98);
		backdrop-filter:blur(8px);
		border-bottom:0.5px solid var(--line);
		padding:4px var(--gutter) 16px;
	}
	header nav ul[data-open="true"]{display:flex;}

	header nav ul li + li{border-top:0.5px solid var(--line);}
	header nav ul a{display:block; padding:15px 2px; font-size:16px; color:var(--text);}
}

@media (max-width:400px){
	header nav{padding:14px var(--gutter);}
	.brand .mark{width:28px; height:28px;}
	.nav-cta{padding:8px 12px; font-size:13px;}
	.burger{width:38px; height:38px;}
}

/* ---------- footer ---------- */
footer{padding-block:clamp(36px, 5vw, 56px); border-top:0.5px solid var(--line);}

.footer-inner{
	display:flex; justify-content:space-between; align-items:center;
	flex-wrap:wrap; gap:18px;
}
.footer-inner .brand{font-size:15px;}
.footer-inner .brand .mark{width:26px; height:26px;}

.footer-links{
	display:flex; gap:clamp(14px, 2vw, 20px); flex-wrap:wrap;
	font-size:13.5px; color:var(--text-mute);
}
.footer-links a{text-decoration:none;}

/* =============================================================
   Aktiver Menüpunkt
   WordPress setzt die Klassen selbst. current-menu-item trifft die
   Seite, auf der man steht; die ancestor- und parent-Varianten den
   übergeordneten Punkt — dadurch bleibt "Leistungen" auch auf
   /leistungen/website-erstellung/ markiert.
   ============================================================= */

header nav ul a{position:relative;}

/* Der Balken liegt absolut und verändert die Höhe der Leiste nicht. */
header nav ul a::after{
	content:'';
	position:absolute; left:0; right:0; bottom:-7px;
	height:2px; border-radius:2px;
	background:var(--line-strong);
	transform:scaleX(0); transform-origin:center;
	transition:transform .2s ease, background-color .2s ease;
}

/* Andeutung beim Überfahren — gleiche Bildsprache, schwächer. */
header nav ul a:hover::after{transform:scaleX(0.4);}

/* Aktiv: durchgehender Balken in Türkis, Text auf volle Deckung.
   Bewusst kein fetter Text — die Laufweite würde sich ändern und
   die Nachbarpunkte verschieben. */
header nav ul li.current-menu-item > a,
header nav ul li.current_page_item > a,
header nav ul li.current-menu-ancestor > a,
header nav ul li.current_page_ancestor > a,
header nav ul li.current-menu-parent > a,
header nav ul li.current_page_parent > a{
	color:var(--text);
}

header nav ul li.current-menu-item > a::after,
header nav ul li.current_page_item > a::after,
header nav ul li.current-menu-ancestor > a::after,
header nav ul li.current_page_ancestor > a::after,
header nav ul li.current-menu-parent > a::after,
header nav ul li.current_page_parent > a::after{
	transform:scaleX(1);
	background:var(--teal);
}

@media (prefers-reduced-motion:reduce){
	header nav ul a::after{transition:none;}
}

/* Im aufgeklappten Mobilmenü passt ein Unterstrich nicht — dort
   markiert eine türkise Kante mit hellem Grund, randlos im Panel. */
@media (max-width:820px){
	header nav ul a::after{content:none;}

	header nav ul li.current-menu-item > a,
	header nav ul li.current_page_item > a,
	header nav ul li.current-menu-ancestor > a,
	header nav ul li.current_page_ancestor > a,
	header nav ul li.current-menu-parent > a,
	header nav ul li.current_page_parent > a{
		background:var(--teal-tint);
		color:var(--teal-deep);
		margin-inline:calc(var(--gutter) * -1);
		padding-inline:var(--gutter);
		box-shadow:inset 3px 0 0 var(--teal);
	}
}