/* ==================================================================
   De kop van de winkel: accenten in de huisstijl en de indeling van de
   headerrij (28 september 2026, proef genderen.shop NL)

   Het logo staat op navy (#26364F) met een lichtblauwe boog (#72B3D0).
   Groen komt in het logo niet voor, maar stond in de kop wel op zes plekken:
   btw-knop, teller, zoekknop, "Alle categorieën", pijl en uitklaprandjes.
   Twee instellingen onder Huisstijl · Kleuren sturen dat nu:

     --nr-header-accent  accent op de donkere header (lichtblauw)
     --nr-nav-accent     accent op de lichte vlakken: menubalk, zoekveld,
                         taalkeuze (navy)

   Beide leeg = alles precies zoals voorheen: elke regel valt terug op de
   primaire kleur met dezelfde waarde die het thema zelf gebruikt. Koopknoppen
   (In winkelwagen, Afrekenen, Inloggen) blijven altijd de primaire kleur.

   Eigen bestand, geen Tailwind-bouw nodig; alle selectors beginnen met een
   id of eigen klasse, zodat ze het van de Tailwind-lagen winnen.
   ================================================================== */


/* ---------- 1. Menubalk, taalkeuze en zoekveld: lichte vlakken ----------
   De uitklappers en knoppen in megamenu.css en de Tailwind-klassen
   (bg-primary, text-primary, border-t-primary) lezen --color-primary. Binnen
   deze zones krijgt die variabele het navy-accent; daarbuiten blijft hij
   groen. De open categoriekolom op de homepage (.nr-home-cats) hoort erbij:
   dat is dezelfde "Alle categorieën" als in de menubalk op andere pagina's.
   De terugval is letterlijk de definitie uit het thema. */
.nr-mm-nav,
.nr-topbar-row,
.nr-home-cats,
#header [x-data^="nrProSearch"] {
    --color-primary: var(--nr-nav-accent, var(--nr-primary, #6CBF4A));
    --color-primary-700: var(--nr-nav-accent, var(--nr-primary-dark, color-mix(in oklab, var(--nr-primary, #6CBF4A) 74%, black)));
}

/* Het zoekveld gebruikt --nr-primary rechtstreeks (tailwind-source.css). */
#header .nr-search-bar:focus-within {
    border-color: var(--nr-header-accent, var(--nr-primary, #6CBF4A));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nr-header-accent, var(--nr-primary, #6CBF4A)) 35%, transparent);
}

#header .nr-search-cat:focus-visible,
#header .nr-search-icon-btn:focus-visible {
    outline-color: var(--nr-nav-accent, var(--nr-primary, #6CBF4A));
}

#header .nr-search-icon-btn:hover {
    background: color-mix(in srgb, var(--nr-nav-accent, var(--nr-primary, #6CBF4A)) 12%, #fff);
    color: var(--nr-nav-accent, var(--nr-primary-dark, #46812F));
}

#header .nr-search-submit {
    color: var(--nr-nav-accent, var(--nr-primary-dark, #46812F));
}

#header .nr-search-submit:hover {
    color: #fff;
    background: var(--nr-nav-accent, var(--nr-primary, #6CBF4A));
}


/* ---------- 2. De donkere header zelf ---------- */

/* Actieve btw-knop: lichtblauw met donkere tekst (6,6 : 1). */
body #nr-vat .nr-vat-btn.on {
    background: var(--nr-header-accent, var(--color-primary)) !important;
    color: var(--nr-header-accent-ink, #fff) !important;
}

/* Tellers op verlanglijst en winkelwagen. */
#header .absolute.rounded-full.bg-primary {
    background-color: var(--nr-header-accent, var(--color-primary));
    color: var(--nr-header-accent-ink, #fff);
}

/* Pictogrammen lichten op bij aanwijzen (alleen met een muis, net als Tailwind). */
@media (hover: hover) {
    #header .group:hover .group-hover\:text-primary {
        color: var(--nr-header-accent, var(--color-primary));
    }
}

/* Lijn onder de header, als de boog om de koe. Zonder accent: geen lijn
   (een var() zonder waarde maakt de achtergrond doorzichtig). */
#header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--nr-header-accent);
    pointer-events: none;
}


/* ---------- 3. Bovenbalk ---------- */

/* Telefoon- en mailpictogram en de puntjes in de ticker in het accent. */
.nr-topbar-left svg {
    color: var(--nr-header-accent, currentColor);
}

.nr-ticker .rounded-full.bg-current {
    background-color: var(--nr-header-accent, currentColor);
}

/* Op een breed scherm staan links telefoon, e-mail én "Contact". Samen zijn
   die breder dan de linkerkolom (1 van 3,5 delen), dus schoof de ticker er
   half onder ("Contact● Gratis verzending"). De linker- en rechterkolom zijn
   nu minstens zo breed als wat erin staat; de ticker krijgt de rest. */
@media (min-width: 1024px) {
    .nr-topbar-row.nr-topbar-row {
        grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.5fr) minmax(max-content, 1fr);
    }
}

/* De ticker vervaagt aan de randen in plaats van hard af te breken. */
.nr-topbar-center .nr-ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}


/* ---------- 4. Indeling van de headerrij (pc en liggende tablet) ----------
   Logo, zoekveld (minstens 500 px breed) en rechts btw-knop + drie
   pictogrammen (416 px) passen samen pas vanaf ± 1300 px inhoud. De
   container is 1200 px, dus tussen 1024 en 1920 px schermbreedte zakten
   btw-knop en pictogrammen naar een eigen tweede regel, los rechtsonder —
   ook live, sinds de logo's van 220 px. Nu:
     - vanaf 1280 px één rij: het zoekveld mag smaller (minstens 360 px);
     - 1024–1279 px: logo en pictogrammen boven, het zoekveld over de
       volle breedte eronder (zoals op de telefoon). */

@media (min-width: 1024px) and (max-width: 1279.98px) {
    #header [x-data^="nrProSearch"] {
        order: 3;
        flex: 0 0 100%;
        min-width: 0;
    }

    #header .container > .ml-auto {
        order: 2;
    }
}

@media (min-width: 1280px) {
    #header [x-data^="nrProSearch"] {
        min-width: 360px;
    }
}

/* Tot 1536 px is het zoekveld ± 430 px: iets minder witruimte voor
   "Alle categorieën", zodat "Waar bent u naar op zoek?" er heel in past.
   Past een vertaling toch niet, dan eindigt hij netjes op "…". */
@media (min-width: 1280px) and (max-width: 1535.98px) {
    #header .nr-search-cat {
        padding-left: .8rem;
    }

    #header .nr-search-input {
        padding-left: .6rem;
    }
}

#header .nr-search-input {
    text-overflow: ellipsis;
}


/* ---------- 5. Logo met de slogan als tekst ----------
   Het plaatje is de koptekstversie (koe + domeinnaam, géén slogan); de
   slogan uit Header → "Slogan onder het logo" staat als tekst onder de
   domeinnaam (Magento_Theme::html/header/logo.phtml). Alles schaalt mee met
   één maat, --nr-logo-h.

   Gemeten in de koptekstversie (maak-kop-logo.php, uitsnede strak om de
   inkt): de domeinnaam begint op 34,9 % van de breedte en is 64,2 % breed;
   hij eindigt op 64,9 % van de hoogte. Onder de naam is ruim een derde van de
   hoogte vrij — daar passen twee regels. text-wrap: balance verdeelt de
   slogan over twee even lange regels ("ALLES VOOR EEN / EFFICIËNTE MELKSTAL"),
   in elke taal. */
.nr-logo--slogan {
    --nr-logo-h: 76px;
    position: relative;
}

.nr-logo--slogan img {
    width: auto;
    height: var(--nr-logo-h);
}

.nr-logo-slogan {
    position: absolute;
    top: 69%;
    left: 34.9%;
    width: 64.2%;
    font-family: var(--nr-font-heading, inherit);
    font-size: calc(var(--nr-logo-h) * .138);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--nr-header-text, currentColor);
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .nr-logo--slogan {
        --nr-logo-h: 64px;
    }
}