/**
 * Globaler Header – Fundament (Plan 03, Schritt 1)
 * Alle Regeln sind unter .jp-home-header gekapselt (Body-Klasse, siehe includes/header/header.php).
 *
 * Schritt 1: nur der zentrale Variablenblock. Er wird noch von keiner Regel verwendet,
 * es gibt keine sichtbare Änderung. Die Werte sind Richtwerte und werden in Schritt 6a
 * anhand der tatsächlichen Darstellung festgelegt.
 *
 * Breakpoints (Savoy, desktop-first; CSS-Variablen sind in Media Queries nicht nutzbar):
 *   Tablet <= 991px (Savoy schaltet auf den mobilen Header)
 *   Phone  <= 550px (kleineres Logo)
 *   Kategorienleiste: aus <= 799px, Abstand 12 px (800-991), 24 px (992-1199), 36 px (>= 1200)
 *
 * Hinweis: Savoys nm-core.js gleicht die Höhe von #nm-header-placeholder nach dem Laden an die
 * echte Header-Höhe an. Die Variablen sollen den Placeholder vorab passend setzen (kein Layoutsprung).
 */

.jp-home-header {
   /* Zeilenhöhen */
   --jp-header-main-h:         64px; /* Hauptzeile: Logo, Suche, Konto, Warenkorb */
   --jp-header-nav-h:          48px; /* Kategorienleiste (Schritt 5); 44px <=991px, 0px <=799px */
   --jp-header-logo-h:         48px;
   --jp-header-search-w:       560px; /* Breite der mittleren Spalte (Such-Pill, Schritt 4) */
   --jp-header-topbar-h:       36px; /* Höhe der Top-Bar (liegt außerhalb von #nm-header) */
   --jp-header-usp-gap:        24px; /* Abstand zwischen den drei USPs der Top-Bar */
   --jp-header-cat-gap:        36px; /* horizontaler Abstand der Kategorien (6a: vorher 28px, Ziel 32-40px) */
   --jp-header-cat-icon-gap:   6px;  /* Abstand Icon - Beschriftung in der Kategorienleiste (AP2: vorher 8px; 800-991 px: 5px, siehe unten) */

   /* Vertikales Padding von #nm-header */
   --jp-header-pad-y:          12px; /* Normalzustand */
   --jp-header-pad-y-sticky:   10px; /* nach Scroll (Savoy: header_spacing_*_alt = 10) */

   /* Abstände klebender Elemente */
   --jp-gallery-gap:           46px; /* bisheriger Wert aus front.css (Produktgalerie) */
   --jp-header-admin-bar:      var(--wp-admin--admin-bar--height, 0px);

   /* Abgeleitet */
   --jp-header-h:        calc(2 * var(--jp-header-pad-y) + var(--jp-header-main-h) + var(--jp-header-nav-h));
   --jp-header-h-sticky: calc(2 * var(--jp-header-pad-y-sticky) + var(--jp-header-main-h) + var(--jp-header-nav-h));
   --jp-header-offset:   calc(var(--jp-header-h-sticky) + var(--jp-header-admin-bar));
}

/* Tablet */
@media (max-width: 991px) {
   .jp-home-header {
      --jp-header-main-h: 56px;
      --jp-header-nav-h:  44px;
      --jp-header-logo-h: 44px;
   }
}

/* Kategorienleiste: Platzbedarf (gemessen, Fallback-Schrift) = 676 px Einträge + 5 x Abstand; verfügbar = Viewport - 15 px Scrollbar - 30 px Rand
   (bei 800-991 px mit Row-Padding 0, siehe unten). Abstand nach Breite: >=1200 36 px | 992-1199 24 px | 800-991 12 px (Reserve >= 19 px bei 800 px).
   AP2: Abstand Icon - Beschriftung 6 px (>= 992 px) bzw. 5 px (800-991 px) statt 8 px; mit „Ausrüstung“ beträgt die Reserve bei 800 px 33 px (bei 8 px nur 15 px).
   Darunter (<=799 px) passen die sechs Kategorien nicht vollständig: Leiste aus, Kategorien nur im Savoy-Seitenmenü (wie bisher <=550 px). */
@media (min-width: 992px) and (max-width: 1199px) {
   .jp-home-header {
      --jp-header-cat-gap: 24px;
   }
}
@media (min-width: 800px) and (max-width: 991px) {
   .jp-home-header {
      --jp-header-cat-gap:      12px;
      --jp-header-cat-icon-gap: 5px; /* knappste Breite: gleicht die längere Beschriftung „Ausrüstung“ aus */
   }
}
@media (max-width: 799px) {
   .jp-home-header {
      --jp-header-nav-h:  0px; /* Kategorienleiste ausgeblendet (<=799px, mobile Navigation) */
   }
}

/* Phone */
@media (max-width: 550px) {
   .jp-home-header {
      --jp-header-logo-h: 40px;
   }
}

/**
 * Top-Bar (Schritt 2): kompakte Darstellung des unveränderten Savoy-Partials
 * (template-parts/header/header-top-bar.php). Farben (Hintergrund, Schrift, Rand) kommen weiter
 * aus den Savoy-Optionen. Sichtbarkeit auf Tablet/Mobil steuert Savoy (Option top_bar_mobile),
 * das Scroll-Verhalten ebenfalls (Top-Bar ist statisch und scrollt weg, danach wird der Header fixiert).
 */

/* Gesamthöhe = --jp-header-topbar-h (Zeilenhöhe + 1px Savoy-Rand), ohne zusätzliches Padding */
.jp-home-header .nm-top-bar {
   padding-bottom: 0;
   line-height: calc(var(--jp-header-topbar-h) - 1px);
}
.jp-home-header .nm-top-bar-cycles {
   height: calc(var(--jp-header-topbar-h) - 1px);
}
.jp-home-header .nm-top-bar-text img {
   max-height: calc(var(--jp-header-topbar-h) - 6px);
}

/* Schriftgröße aus dem Shop-Standard; <=550px bleiben die Savoy-Regeln (13px, <=385px 0.9em) wirksam */
@media (min-width: 551px) {
   .jp-home-header .nm-top-bar {
      font-size: var(--jp-font-size-small);
   }
}

/* Desktop: linke Spalte nimmt den freien Platz, rechte Spalte nur ihre Inhaltsbreite (USPs werden nicht unnötig abgeschnitten) */
@media (min-width: 992px) {
   .jp-home-header .nm-top-bar > .nm-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .jp-home-header .nm-top-bar > .nm-row::before,
   .jp-home-header .nm-top-bar > .nm-row::after {
      display: none; /* Savoy-Clearfix, im Flex-Container nicht nötig */
   }
   .jp-home-header .nm-top-bar-left:not(.col-xs-12) {
      flex: 1 1 auto;
      width: auto;
      min-width: 0; /* ermöglicht text-overflow in .nm-top-bar-text */
   }
   .jp-home-header .nm-top-bar-right:not(.col-xs-0) {
      flex: 0 0 auto;
      width: auto;
   }
}

/**
 * USPs in der Top-Bar (Savoy-Option top_bar_text, Wrapper .jp-topbar-usps mit drei <span>):
 * gleichzeitig nebeneinander, gleichmäßige Abstände, keine Rotation. Reicht die Breite nicht,
 * werden die drei Aussagen gleichmäßig mit Ellipse gekürzt (kein Umbruch, kein horizontales Scrollen).
 */
.jp-home-header .jp-topbar-usps {
   display: flex;
   align-items: center;
   gap: var(--jp-header-usp-gap);
   min-width: 0;
}
.jp-home-header .jp-topbar-usps > span {
   flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/**
 * Hauptzeile (Schritt 3): Markup aus template-parts/header/header-layout.php.
 * Scope: alle Layouts außer "centered" (dort bleibt Savoys Header unverändert).
 * Savoys Positionslogik (absolute/fixed, header-on-scroll, Checkout ohne Fixierung, Transition,
 * Adminleisten-Margins) wird nicht angefasst; nur Padding, Zeilen- und Logo-Höhe kommen aus den Variablen.
 * Selektoren sind spezifischer als Savoys Inline-CSS (custom-styles.php: Logo-Höhe, Placeholder, Padding).
 */

/* Padding aus Variablen (Normalzustand / nach Scroll) */
.jp-home-header .nm-header:not(.centered) {
   line-height: var(--jp-header-main-h); /* ersetzt Savoys Zeilenhöhe aus der Option "Menühöhe" (lokal 120px) */
   padding-top: var(--jp-header-pad-y);
   padding-bottom: var(--jp-header-pad-y);
}
.jp-home-header.header-on-scroll .nm-header:not(.centered):not(.static-on-scroll) {
   padding-top: var(--jp-header-pad-y-sticky);
   padding-bottom: var(--jp-header-pad-y-sticky);
}

/* Placeholder vorab auf die berechnete Höhe setzen (nm-core.js korrigiert per Inline-Style nach dem Laden) */
.jp-home-header .nm-header-placeholder {
   height: var(--jp-header-h);
}

/* Grid: Links | Mitte | Rechts */
.jp-home-header .nm-header:not(.centered) .nm-header-col {
   display: grid;
   grid-template-columns: auto 1fr auto; /* Tablet/Phone: Savoy-Verhalten (Logo zentriert, absolut) */
   align-items: center;
   min-height: var(--jp-header-main-h);
}
.jp-home-header .nm-header:not(.centered) .nm-header-row::before,
.jp-home-header .nm-header:not(.centered) .nm-header-row::after,
.jp-home-header .nm-header:not(.centered) .nm-header-col::before,
.jp-home-header .nm-header:not(.centered) .nm-header-col::after {
   display: none; /* Savoy-Clearfix, im Grid kein Gridelement */
}
.jp-home-header .nm-header:not(.centered) .nm-header-left {
   grid-column: 1;
   float: none;
   align-items: center;
   justify-self: start;
}
.jp-home-header .nm-header:not(.centered) .nm-header-center,
.jp-home-header .nm-header:not(.centered) .jp-header-center {
   grid-column: 2;
   min-width: 0;
}
.jp-home-header .nm-header:not(.centered) .nm-right-menu {
   grid-column: 3;
   float: none;
   justify-self: end;
}
.jp-home-header .nm-header:not(.centered) .nm-right-menu > ul {
   display: flex;
   align-items: center;
}

/* Logo: Höhe aus Variable (überschreibt die Savoy-Logohöhen-Optionen, die Optionen selbst bleiben unverändert) */
.jp-home-header .nm-header:not(.centered) .nm-header-logo {
   float: none;
   margin-right: 0;
}
.jp-home-header .nm-header:not(.centered) .nm-header-logo img,
.jp-home-header .nm-header:not(.centered) .nm-header-logo svg {
   height: var(--jp-header-logo-h);
}

/* Desktop: mittlere Spalte mit fester Breite, äußere Spalten gleich breit (1fr/1fr)
   -> die Mitte ist unabhängig von der Breite von Logo und Icons exakt auf der Header-Mitte zentriert */
@media (min-width: 992px) {
   .jp-home-header .nm-header:not(.centered) .nm-header-col {
      grid-template-columns: minmax(0, 1fr) minmax(0, var(--jp-header-search-w)) minmax(0, 1fr);
      column-gap: 24px;
   }
}

/**
 * Such-Pill (Schritt 4): ein <a id="nm-menu-search-btn"> in .jp-header-center. Savoys nm-shop-search.js bindet nur an die ID
 * und öffnet Panel/AJAX-Suche; kein eigenes JavaScript. Das Such-Icon der Default-Links entfällt (includes/header/header.php).
 */
.jp-home-header .nm-header:not(.centered) .jp-search-pill {
   display: flex;
   align-items: center;
   gap: 10px;
   box-sizing: border-box;
   width: 100%;
   height: 44px;
   padding: 0 18px;
   color: var(--nm--color-font-strong, currentColor);
   border: 1px solid var(--jp-color-lightgray_02, currentColor);
   border-radius: 22px;
   line-height: 1;
   opacity: 1;
   text-decoration: none;
}
.jp-home-header .nm-header:not(.centered) .jp-search-pill .nm-font {
   flex: 0 0 auto;
   font-size: 18px;
   line-height: 1;
}
.jp-home-header .nm-header:not(.centered) .jp-search-pill-text {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   opacity: .65;
}
.jp-home-header .nm-header:not(.centered) .jp-search-pill:hover {
   border-color: var(--nm--color-font-strong, currentColor);
}
.jp-home-header .nm-header:not(.centered) .jp-search-pill:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
}

/* Tablet/Phone: Pill schrumpft auf das Icon (44px Touch-Ziel), rechts neben dem Warenkorb-Bereich */
@media (max-width: 991px) {
   .jp-home-header .nm-header:not(.centered) .nm-header-col {
      grid-template-columns: auto 1fr auto auto;
   }
   .jp-home-header .nm-header:not(.centered) .jp-header-center {
      grid-column: 3;
      justify-self: end;
   }
   .jp-home-header .nm-header:not(.centered) .nm-right-menu {
      grid-column: 4;
   }
   .jp-home-header .nm-header:not(.centered) .jp-search-pill {
      width: 44px;
      padding: 0;
      justify-content: center;
      border-color: transparent;
   }
   .jp-home-header .nm-header:not(.centered) .jp-search-pill-text {
      display: none;
   }
}

/**
 * Kategorienleiste (Schritt 5): Menü "Main" (Position Header Main), siehe template-parts/header/header-category-nav.php.
 * Desktop: zentrierte Leiste, alle sechs Einträge vollständig (Abstand je Breite siehe Variablenblock);
 * <=799px: ausgeblendet (Kategorien dann nur im Savoy-Seitenmenü). overflow-x bleibt als Notanker (z. B. längere übersetzte Beschriftungen).
 * Höhe = --jp-header-nav-h.
 */
.jp-home-header .nm-header:not(.centered) .jp-header-nav-row {
   line-height: normal;
}
.jp-home-header .jp-category-nav {
   height: var(--jp-header-nav-h);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}
.jp-home-header .jp-category-nav::-webkit-scrollbar {
   display: none;
}
.jp-home-header .jp-category-nav-list {
   display: flex;
   align-items: stretch;
   gap: 8px var(--jp-header-cat-gap);
   height: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   white-space: nowrap;
}
/* sicher zentriert: bei Platzmangel linksbündig und scrollbar statt links abgeschnitten */
.jp-home-header .jp-category-nav-list > li:first-child { margin-left: auto; }
.jp-home-header .jp-category-nav-list > li:last-child  { margin-right: auto; }
.jp-home-header .jp-category-nav-list > li {
   flex: 0 0 auto;
   margin: 0;
   padding: 0;
}
.jp-home-header .jp-category-nav-list > li:first-child { margin-left: auto; }
.jp-home-header .jp-category-nav-list > li:last-child  { margin-right: auto; }
.jp-home-header .jp-category-nav-list a {
   display: flex;
   align-items: center;
   gap: var(--jp-header-cat-icon-gap, 6px);
   height: 100%;
   padding: 0 4px;
   color: var(--nm--color-font-strong, inherit);
   font-size: var(--jp-font-size-small, 14px);
   text-decoration: none;
   border-bottom: 2px solid transparent;
   box-sizing: border-box;
}
.jp-home-header .jp-category-nav-list a:hover,
.jp-home-header .jp-category-nav-list .current-menu-item > a,
.jp-home-header .jp-category-nav-list .current-menu-ancestor > a {
   border-bottom-color: var(--nm--color-font-highlight, currentColor);
}
.jp-home-header .jp-category-nav-list a:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: -2px;
}
.jp-home-header .jp-category-nav-icon {
   width: 24px;
   height: 24px;
   flex: 0 0 auto;
}
/* Tablet 800-991 px: Savoy-.nm-row-Padding (15 px) entfällt, die Leiste nutzt die volle Inhaltsbreite (+30 px) */
@media (min-width: 800px) and (max-width: 991px) {
   .jp-home-header .jp-header-nav-row {
      padding-left: 0;
      padding-right: 0;
   }
}
/* <=799 px: Kategorien nur im mobilen Seitenmenü */
@media (max-width: 799px) {
   .jp-home-header .jp-header-nav-row {
      display: none;
   }
}

/**
 * Nebenwirkungen auf andere Elemente (Schritt 6b/7): alle Offsets laufen über die Variablen des Kopfblocks.
 * Dokumentierte Ausnahme (CLAUDE.md, Regel 3): front.css bleibt unverändert, die feste Galerie-Position wird hier übersteuert.
 */

/* Produktgalerie (front.css:399-402: top: calc(157px + 46px), sticky nur >1080px; <=1080px ist sie static/relative, dort darf top nicht greifen) */
@media (min-width: 1081px) {
   .jp-home-header .woocommerce-product-gallery,
   .jp-home-header .jp-product-gallery-stage {
      top: calc(var(--jp-header-offset) + var(--jp-gallery-gap));
   }
}

/* Anker (#id): Ziel landet nicht unter dem fixierten Header */
.jp-home-header :target {
   scroll-margin-top: calc(var(--jp-header-offset) + var(--jp-gallery-gap));
}

/* Black-Friday-Leiste (#jp-top-bar, derzeit deaktiviert): Ausgleich des Header-Paddings statt fester 17px (front.css:744) */
.jp-home-header #jp-top-bar {
   margin-top: calc(-1 * var(--jp-header-pad-y));
   margin-bottom: var(--jp-header-pad-y);
}

/**
 * Sichtbarer Tastaturfokus für Logo, Konto und Warenkorb (Savoy blendet hier keinen Fokusring ein).
 * Nur :focus-visible (kein Ring bei Mausklick); Farbe aus der Savoy-Variable, gleiche Darstellung wie Such-Pill und Kategorien.
 */
.jp-home-header .nm-header:not(.centered) .nm-header-logo a:focus-visible,
.jp-home-header .nm-header:not(.centered) #nm-menu-account-btn:focus-visible,
.jp-home-header .nm-header:not(.centered) #nm-menu-cart-btn:focus-visible {
   outline: 2px solid var(--nm--color-font-strong, currentColor);
   outline-offset: 2px;
}

/**
 * Sprachumschalter im mobilen Seitenmenü (AP4, includes/header/mobile-language.php).
 * Flache Reihe von Sprachlinks nach den sekundären Menüeinträgen (über beide Spalten des Side-Layouts); eigene Klassen statt .menu-item (Savoy-JS bindet an li.menu-item).
 * Touch-Ziele mindestens 44 × 44 px, aktive Sprache über die von GTranslate gepflegte Klasse .gt-current-lang, Fokus nur per :focus-visible.
 */
#nm-mobile-menu .jp-mobile-lang {
   grid-column: 1 / -1; /* Side-Layout: sekundäres Menü ist ein Zwei-Spalten-Grid, die Sprachzeile nutzt die volle Breite */
   padding: 16px 0 0;
}
#nm-mobile-menu .jp-mobile-lang__label {
   display: block;
   margin-bottom: 8px;
   font-size: 0.875rem;
   line-height: 1.4;
   color: var(--nm--mobile-menu-color-font);
   opacity: 0.75;
}
#nm-mobile-menu .jp-mobile-lang__list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
}
#nm-mobile-menu .jp-mobile-lang__item {
   margin: 0;
   padding: 0;
   list-style: none;
}
#nm-mobile-menu .menu .jp-mobile-lang__item a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   min-width: 44px;
   min-height: 44px;
   padding: 0 12px;
   border: 1px solid var(--nm--mobile-menu-color-border);
   border-radius: 8px;
   font-size: 0.9375rem;
   line-height: 1.2;
   color: var(--nm--mobile-menu-color-font);
   background: transparent;
}
#nm-mobile-menu .menu .jp-mobile-lang__item a.gt-current-lang {
   border-color: var(--nm--mobile-menu-color-font);
   background: var(--nm--mobile-menu-color-font);
   color: var(--nm--mobile-menu-color-background, #fff);
}
#nm-mobile-menu .menu .jp-mobile-lang__item a:focus-visible {
   outline: 2px solid var(--nm--mobile-menu-color-font);
   outline-offset: 2px;
}