/*
 * Kopfbereich (Patterns nextamed/header-standard und header-kasse): Raster, das theme.json nicht
 * abbilden kann. Geladen ueber wp_enqueue_block_style('core/group').
 *
 * Handy (unter 600 px, Betreiber 05.10.2026): das Logo mittig in einer eigenen schmalen Zeile,
 * darunter in einer Zeile das Menue ganz links, die Suche in der Mitte, rechts Konto und Warenkorb
 * als Symbole. Die Suche klappt beim Antippen ueber die ganze Zeile aus und zeigt erst dann den
 * Knopf "Suchen". Ab 600 px (dort blendet der Navigationsblock das Menue selbst ein) Logo, Suche
 * mit Knopf und Symbole in einer Zeile, die Navigation als zweite Zeile.
 * .wp-site-blocks davor, wo Layout-Klassen sonst gewinnen.
 */

.wp-site-blocks .nxm-header {
  position: sticky;
  top: 0;
  z-index: 30;
}

.wp-site-blocks .nxm-header__raster {
  --nxm-kopf-menue: var(--wp--custom--touch--min-size);
  --nxm-kopf-aktionen: calc(2 * var(--wp--custom--touch--min-size) + var(--wp--preset--spacing--10));
  display: grid;
  grid-template-columns: var(--nxm-kopf-menue) minmax(0, 1fr) var(--nxm-kopf-aktionen);
  grid-template-areas:
    "marke marke marke"
    "nav suche aktionen";
  column-gap: var(--wp--preset--spacing--20);
  row-gap: var(--wp--preset--spacing--20);
  align-items: center;
}

.wp-site-blocks .nxm-header__raster > * {
  margin: 0;
  align-self: center;
}

.wp-site-blocks .nxm-header__marke { grid-area: marke; justify-self: center; }
.wp-site-blocks .nxm-header__suche { grid-area: suche; }
.wp-site-blocks .nxm-header__aktionen { grid-area: aktionen; }
.wp-site-blocks .nxm-header__nav { grid-area: nav; justify-self: start; }

.wp-site-blocks .nxm-header__aktionen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--10);
}

:root :where(.nxm-header__aktionen .wp-block-woocommerce-customer-account a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--wp--preset--color--contrast);
}

/* WooCommerce gibt dem Kontolink ein halbes em Innenabstand (0,1,1); zusammen mit dem 44-px-Ziel
   waere er 60 px breit und ragte in die Suche. Das Ziel bleibt 44 px, der Innenabstand entfaellt. */
.wp-site-blocks .nxm-header__aktionen .wp-block-woocommerce-customer-account a {
  padding: 0;
}

:root :where(.nxm-header__aktionen .wp-block-woocommerce-customer-account svg) {
  width: 22px;
  height: 22px;
}

:root :where(.nxm-header__suche .wp-block-search__inside-wrapper) {
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
}

:root :where(.nxm-header__suche .wp-block-search__input) {
  border: 0;
  min-height: 44px;
  min-width: 0;
  font-size: var(--wp--preset--font-size--medium);
  text-overflow: ellipsis;
}

:root :where(.nxm-header__suche .wp-block-search__button) {
  margin: 0;
  min-height: 44px;
  border-radius: 0 var(--wp--custom--radius--small) var(--wp--custom--radius--small) 0;
  white-space: nowrap;
}

/* Fokus am ganzen Suchfeld statt am Eingabefeld darin: der Rahmen des Feldes ist der sichtbare Kasten,
   und auf dem Handy schneidet er den Umriss des inneren Feldes ab (gemessen: nur zwei gruene Striche). */
.wp-site-blocks .nxm-header__suche .wp-block-search__input:focus-visible {
  outline: none;
}

.wp-site-blocks .nxm-header__suche .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--primary);
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 0;
}

/* Der Platzhalter ist kurz gehalten, damit er auf dem Handy nicht abgeschnitten wird. */
:root :where(.nxm-header__suche .wp-block-search__input)::placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 1;
}

:root :where(.nxm-header__aktionen .wc-block-mini-cart__button),
:root :where(.nxm-header__aktionen .wc-block-customer-account__account-icon) {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:root :where(.nxm-header__nav .wp-block-navigation__responsive-container-open) {
  min-width: 44px;
  min-height: 44px;
}

/* Handy: die Suche steht als Feld mit Lupe in der Mitte der Zeile. Beim Antippen (oder Hineintabben)
   dehnt sie sich ueber Menueknopf und Symbole aus und zeigt den Knopf "Suchen"; verlaesst der Fokus
   das Feld, zieht sie sich nach einer Viertelsekunde zurueck. Die Verzoegerung haelt den Knopf so lange
   an seinem Platz, dass ein Tipp darauf auch in Browsern trifft, die einem Knopf keinen Fokus geben
   (Safari). Die Breiten der Nachbarn stehen als Variablen am Raster, damit die Ausdehnung genau passt.
   Ohne JavaScript; wer nur tippt und Enter drueckt, braucht den Knopf nie. */
@media (max-width: 599px) {
  .wp-site-blocks .nxm-header__suche {
    position: relative;
    height: var(--wp--custom--touch--min-size);
  }

  .wp-site-blocks .nxm-header__suche .wp-block-search {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0;
    transition: left var(--wp--custom--transition) ease, right var(--wp--custom--transition) ease;
    transition-delay: 0.25s;
  }

  .wp-site-blocks .nxm-header__suche .wp-block-search:focus-within {
    left: calc(-1 * (var(--nxm-kopf-menue) + var(--wp--preset--spacing--20)));
    right: calc(-1 * (var(--nxm-kopf-aktionen) + var(--wp--preset--spacing--20)));
    transition-delay: 0s;
  }

  .wp-site-blocks .nxm-header__suche .wp-block-search__inside-wrapper {
    height: 100%;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Lupe vor dem Feld: Maske statt Bilddatei, damit die Farbe aus dem Preset kommt. */
  .wp-site-blocks .nxm-header__suche .wp-block-search__inside-wrapper::before {
    content: "";
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-left: var(--wp--preset--spacing--20);
    background-color: var(--wp--preset--color--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.3 4.2-1.5 1.5-4.2-4.3A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.3 4.2-1.5 1.5-4.2-4.3A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .wp-site-blocks .nxm-header__suche .wp-block-search__input {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding-left: var(--wp--preset--spacing--20);
    padding-right: var(--wp--preset--spacing--20);
  }

  .wp-site-blocks .nxm-header__suche .wp-block-search__button {
    flex: 0 0 auto;
    max-width: 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--wp--custom--transition) ease, padding var(--wp--custom--transition) ease, opacity var(--wp--custom--transition) ease;
    transition-delay: 0.25s;
  }

  .wp-site-blocks .nxm-header__suche .wp-block-search:focus-within .wp-block-search__button {
    max-width: 8rem;
    padding-left: var(--wp--preset--spacing--30);
    padding-right: var(--wp--preset--spacing--30);
    opacity: 1;
    transition-delay: 0s;
  }
}

/* Hinweisleiste: auf dem Handy der kurze erste und der kurze dritte Vorteil (Versandkostenfrei,
   Produktprobe), ab 782 px alle drei. Der lange zweite Satz (Versand am selben Werktag) steht auf
   der Startseite als Fakt; er wuerde die Leiste auf dem Handy dreizeilig machen.
   Kein nowrap unter 782 px: bei 320 px lief der erste Satz sonst aus dem Bild (Befund 13.09.2026). */
:root :where(.nxm-usp p) {
  margin: 0;
}

:root :where(.nxm-usp__mehr--lang) {
  display: none;
}

/* Logo auf dem Handy etwas kleiner; es steht mittig ueber der Bedienzeile. .wp-block-site-logo img
   (0,1,1) aus dem Kern gewann gegen :where(), gemessen 150 px statt 120; deshalb zwei Klassen davor. */
.wp-site-blocks .nxm-header__marke .wp-block-site-logo img {
  max-width: 7.5rem;
  height: auto;
}

/* Menue-Overlay: Schliessen-Knopf und alle Punkte als Klickziele. */
:root :where(.nxm-header__nav .wp-block-navigation__responsive-container-close) {
  min-width: var(--wp--custom--touch--min-size);
  min-height: var(--wp--custom--touch--min-size);
}

:root :where(.nxm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content) {
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

@media (min-width: 600px) {
  .wp-site-blocks .nxm-header__marke .wp-block-site-logo img {
    max-width: 100%;
  }

  .wp-site-blocks .nxm-header__marke { justify-self: start; }

  .wp-site-blocks .nxm-header__raster {
    grid-template-columns: auto minmax(14rem, 32rem) auto;
    grid-template-areas:
      "marke suche aktionen"
      "nav nav nav";
    column-gap: var(--wp--preset--spacing--30);
    justify-content: space-between;
  }

  :root :where(.nxm-header__nav .wp-block-navigation-item__content) {
    padding-block: var(--wp--preset--spacing--10);
    border-bottom: 2px solid transparent;
  }

  /* Hover und aktueller Punkt: nur der gruene Balken, keine Text-Unterstreichung. Spezifisch, weil
     elements.link aus theme.json beim Hover mit :root :where(a):hover (0,2,0) unterstreicht. */
  .wp-site-blocks .nxm-header__nav .wp-block-navigation-item__content:hover,
  .wp-site-blocks .nxm-header__nav .current-menu-item > .wp-block-navigation-item__content {
    border-bottom-color: var(--wp--preset--color--primary);
    text-decoration: none;
  }
}

@media (min-width: 782px) {
  :root :where(.nxm-usp p) {
    white-space: nowrap;
  }

  :root :where(.nxm-usp__mehr--lang) {
    display: inline;
  }
}

/* Kopf der Kasse (Pattern header-kasse): Logo links, der Rueckweg "Zum Warenkorb" rechts; ab 782 px
   steht der Rueckweg in der Mitte der Zeile (Betreiber 05.10.2026), das Logo bleibt links. Die dritte
   Spalte ist leer und haelt die Mitte in der Mitte. */
:root :where(.nxm-header--kasse p) {
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 782px) {
  .wp-site-blocks .nxm-header--kasse .nxm-header__kassenzeile {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .wp-site-blocks .nxm-header--kasse .nxm-header__zurueck {
    grid-column: 2;
    justify-self: center;
  }
}

/* Bedienelemente im Kopf sind keine Fliesstext-Links: keine Unterstreichung (elements.link unterstreicht
   seit dem 13.09. alle Links; hier gewinnt die Klassenspezifitaet). */
.wp-site-blocks .nxm-header__aktionen a,
.wp-site-blocks .nxm-header__marke a {
  text-decoration: none;
}