/* =========================================================================
   11-siteheader.css — Globaler Header (auf jeder Seite, NICHT sticky)
   Markup: mat_render_site_header() via wp_body_open (functions.php).
   - liegt oben über dem Seitenanfang und scrollt mit der Seite weg
   - Startseite: transparent über dem Hero
   - übrige Seiten: solide; Body bekommt padding-top = Header-Höhe
   ========================================================================= */

:root {
  --mat-header-h: clamp(58px, 7vw, 74px);
}

/* Alten Impreza-Header global ausblenden — unser Header ersetzt ihn. */
.l-header { display: none !important; }

/* Eigene In-Hero-Leisten weichen dem globalen Header. */
.mat-front .mat-hero__topbar,
.mat-spektrum-hero__bar { display: none !important; }

/* ----- Header-Grundgerüst ----- */
.mat-siteheader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--c-dark);
}

.admin-bar .mat-siteheader { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .mat-siteheader { top: 46px; }
}

.mat-siteheader__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--mat-header-h);
}

.mat-siteheader__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mat-siteheader__logo img {
  height: clamp(32px, 4vw, 44px);
  width: auto;
  display: block;
}

/* ----- Logo im Header: laut Kundenwunsch (PDF) nicht nötig ----- */
.mat-siteheader__logo { display: none; }

/* ----- Desktop-Navigation: linksbündig (Kundenwunsch) ----- */
.mat-siteheader__nav { margin-left: 0; margin-right: auto; }

/* "Home"-Menüpunkt NUR auf der Startseite ausblenden (Kundenwunsch). */
body.home .mat-siteheader__menu .menu-item-home,
body.home .mat-site-offcanvas .menu-item-home { display: none; }

.mat-siteheader__menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mat-siteheader__menu > li { position: relative; }

.mat-siteheader__menu a {
  color: var(--c-white);
  text-decoration: none;
  font-size: var(--t-meta);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.mat-siteheader__menu > li > a {
  display: inline-flex;
  align-items: center;
  height: var(--mat-header-h);
}

.mat-siteheader__menu a:hover { color: var(--c-accent-light); }

/* Sprachflagge (TranslatePress) mittig — 5px höher, damit sie vertikal
   mit der Menü-Schrift fluchtet (Kundenwunsch). */
.mat-siteheader__menu img,
.mat-siteheader__menu .trp-flag-image {
  display: block;
  position: relative;
  top: -5px;
}

/* Dropdowns */
.mat-siteheader__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--c-white);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: 60;
}

.mat-siteheader__menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mat-siteheader__menu .sub-menu a {
  display: block;
  color: var(--c-dark);
  padding: 9px 20px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}

.mat-siteheader__menu .sub-menu a:hover { color: var(--c-accent); background: var(--c-cream); }

/* ----- Hamburger (mobil) ----- */
.mat-siteheader__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
}

.mat-siteheader__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
}

/* ----- Startseite: transparent über dem Hero (weißer Text gut lesbar
   dank Hero-Scrim). Header scrollt mit der Seite weg (nicht sticky). ----- */
body.home .mat-siteheader {
  background: transparent;
}

body.home .mat-siteheader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(34, 39, 37, 0.45), transparent);
  pointer-events: none;
  z-index: -1;
}

/* ----- Body-Abstand: nur wo der Header NICHT über einem Hero schwebt ----- */
/* .l-body = Impreza-Body-Klasse (höhere Spezifität, damit es sicher greift). */
body.l-body { padding-top: var(--mat-header-h); }
body.l-body.home { padding-top: 0; }

/* Spektrum-/Region-Hero: etwas Luft oben, da die eigene Bar entfällt. */
.mat-spektrum-hero { padding-top: var(--space-6); }

/* ----- Responsive ----- */
@media (max-width: 991px) {
  .mat-siteheader__nav { display: none; }
  .mat-siteheader__toggle { display: inline-flex; }
}

/* =========================================================================
   Off-Canvas (globaler Header) — eigenständig, damit auf JEDER Seite verfügbar
   ========================================================================= */
.mat-site-offcanvas[hidden] { display: none; }

.mat-site-offcanvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.mat-site-offcanvas .mat-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 39, 37, 0.5);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.mat-site-offcanvas.is-open .mat-offcanvas__backdrop { opacity: 1; }

.mat-site-offcanvas .mat-offcanvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 86vw);
  background: var(--c-dark);
  color: var(--c-white);
  padding: var(--space-10) var(--space-6) var(--space-6);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  overflow-y: auto;
}

.mat-site-offcanvas.is-open .mat-offcanvas__panel { transform: translateX(0); }

.mat-site-offcanvas .mat-offcanvas__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  background: none;
  border: 0;
  color: var(--c-white);
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

.mat-site-offcanvas .mat-offcanvas__list,
.mat-site-offcanvas .mat-offcanvas__list ul { list-style: none; margin: 0; padding: 0; }

.mat-site-offcanvas .mat-offcanvas__list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.mat-site-offcanvas .mat-offcanvas__list a {
  display: block;
  color: var(--c-white);
  text-decoration: none;
  font-size: var(--t-h3);
  font-weight: var(--fw-medium);
  padding: var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mat-site-offcanvas .mat-offcanvas__list a:hover { color: var(--c-accent); }
.mat-site-offcanvas .mat-offcanvas__list .sub-menu { padding: 0 0 var(--space-2) var(--space-3); }
.mat-site-offcanvas .mat-offcanvas__list .sub-menu a {
  font-size: var(--t-body);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  padding: var(--space-1) 0;
}