/* =============================================================================
   noordmanhout-revisie.css
   Revisie van HOMEPAGE, HOOFDNAVIGATIE, TOPMENU en FOOTER van noordmanhout.nl
   -----------------------------------------------------------------------------
   LET OP: dit staat LOS van de nieuwssectie. De nieuwssectie heeft zijn eigen
   bestand (noordmanhout-nieuws.css). Dit bestand bevat alles uit de tweede
   feedbackronde die NIET over nieuws gaat:
       - USP's / expertiseblok op de homepage
       - "Bekijk assortiment"-CTA + duidelijke aanmeld-/inlogknop
       - openingstijden en social-links in de footer
       - de nieuwe menustructuur (dropdowns Diensten en Over Noordman)

   SPELREGELS (zelfde als bij de nieuwssectie):
   1. Alle nieuwe klassen hebben de prefix  .nhr-  (Noordman Hout Revisie).
   2. Geen bestaande selector uit noordmanhout.css wordt overschreven; waar een
      globale regel ongewenst meelift, wordt die alleen binnen de eigen scope
      geneutraliseerd.
   3. Laad dit bestand ALS LAATSTE, na noordmanhout.css (en na
      noordmanhout-nieuws.css). Bij gelijke specificiteit wint bronvolgorde.
   4. Bootstrap 4.3.1: geen BS5-klassen. Font Awesome 6.5.2 (incl. brands).

   INHOUD
     1. Tokens
     2. Knoppen (.nhr-btn) - topmenu + header-CTA
     3. Header-CTA blok
     4. Expertise / USP-blok (homepage)
     5. Nieuwe menu-dropdowns (Diensten, Over Noordman)
     6. Footer: openingstijden + socials
     7. Responsive
============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENS  (identiek palet als de rest van de site)
-------------------------------------------------------------------------------- */
:root {
    --nhr-bruin:        #473828;
    --nhr-bruin-donker: #322616;
    --nhr-taupe:        #a1937d;
    --nhr-beige:        #eae7e3;
    --nhr-grijs:        #f4f4f4;
    --nhr-geel:         #feda17;
    --nhr-geel-donker:  #e5c400;
    --nhr-tekst:        #212529;
    --nhr-tekst-zacht:  #6b6257;
    --nhr-lijn:         #e3ded8;
    --nhr-easing:       .3s cubic-bezier(.25, .8, .25, 1);
}


/* -----------------------------------------------------------------------------
   2. KNOPPEN  (.nhr-btn)
   Gebruikt voor "Aanvragen" en "Inloggen" in het topmenu (feedback: duidelijker)
   en voor de "Bekijk assortiment"-CTA in de header.
   Vervangt de bestaande .btn-logout-match (dat waren platte, transparante
   tekstlinks die te weinig opvielen).
-------------------------------------------------------------------------------- */
.nhr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;                 /* huisstijl is hoekig */
    border: 2px solid transparent;
    padding: .5rem 1.05rem;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: .8125rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--nhr-easing), border-color var(--nhr-easing), color var(--nhr-easing);
}

/* De globale regel div:not(.style-blocks) a:hover{text-decoration:underline}
   (specificiteit 0-2-2) lift mee op elke <a>. Een knop hoort niet onderstreept
   te worden; hier met !important geneutraliseerd omdat deze knoppen op meerdere,
   los van elkaar staande plekken voorkomen (topmenu + header) en één scoped
   selector die overal (0-2-2) verslaat onhaalbaar netjes is. */
.nhr-btn:hover,
.nhr-btn:focus {
    text-decoration: none !important;
}

.nhr-btn:focus-visible {
    outline: 3px solid var(--nhr-geel);
    outline-offset: 2px;
}

.nhr-btn .fa,
.nhr-btn [class^="fa-"] {
    margin-right: .45em;
}

/* Primaire knop: het gele huisstijl-accent, zwarte tekst (contrast 11,2:1). */
.nhr-btn--primair {
    background-color: var(--nhr-geel);
    border-color: var(--nhr-geel);
    color: #000;
}

.nhr-btn--primair:hover,
.nhr-btn--primair:focus {
    background-color: var(--nhr-geel-donker);
    border-color: var(--nhr-geel-donker);
    color: #000;
}

/* Secundaire knop: bruine omlijning, vult bij hover. */
.nhr-btn--outline {
    background-color: transparent;
    border-color: var(--nhr-bruin);
    color: var(--nhr-bruin);
}

.nhr-btn--outline:hover,
.nhr-btn--outline:focus {
    background-color: var(--nhr-bruin);
    border-color: var(--nhr-bruin);
    color: #fff;
}

/* Platte tekstknop: geen rand, geen achtergrond. Voor secundaire acties
   (Aanvragen, Inloggen) naast de primaire gele knop (Contact), zodat alleen
   de belangrijkste actie visueel een vlak krijgt en het topmenu rustig blijft. */
.nhr-btn--tekst {
    background-color: transparent;
    border-color: transparent;
    color: var(--nhr-bruin);
}

.nhr-btn--tekst:hover,
.nhr-btn--tekst:focus {
    background-color: transparent;
    border-color: transparent;
    color: var(--nhr-bruin-donker);
    text-decoration: underline !important;   /* overrulet de .nhr-btn:hover-reset */
}

/* Grote variant voor de header-CTA. */
.nhr-btn--groot {
    padding: .7rem 1.5rem;
    font-size: .9375rem;
}


/* -----------------------------------------------------------------------------
   3. HEADER-CTA BLOK
   Komt in de tot nu toe LEGE rechterkolom van de header
   (<div class="col-12 col-md-6 col-xl-4 text-center text-md-right">).
-------------------------------------------------------------------------------- */
.nhr-header-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.nhr-header-cta .nhr-btn {
    margin: .35rem 0 .35rem .5rem;
}

/* Op smallere schermen de knoppen links uitlijnen en laten meebewegen. */
@media (max-width: 767.98px) {
    .nhr-header-cta {
        justify-content: flex-start;
        margin-top: .75rem;
    }
    .nhr-header-cta .nhr-btn {
        margin-left: 0;
        margin-right: .5rem;
    }
}


/* -----------------------------------------------------------------------------
   4. EXPERTISE / USP-BLOK  (homepage)
   Vervangt de oude .usp-list (vier kleine iconen). Doel volgens feedback:
   autoriteit/expertise uitstralen. Opzet: een centrale autoriteitsclaim
   (sinds 1856, familiebedrijf) als kop, met daaronder vier expertisepunten.
-------------------------------------------------------------------------------- */
.nhr-expertise {
    background-color: var(--nhr-beige);
    padding: 4rem 0;
    margin: 1.5rem 0;
}

.nhr-expertise__kop {
    max-width: 60ch;
    margin: 0 auto 3rem;
    text-align: center;
}

.nhr-expertise__eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 3px solid var(--nhr-geel);
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: .8125rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nhr-bruin);
}

.nhr-expertise__titel {
    margin: 0;
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
    line-height: 1.15;
    color: var(--nhr-bruin);
}

/* De vier punten. Grid: 1 kolom (xs) - 2 (sm) - 4 (lg), via Bootstrap-kolommen
   in de HTML. Elk punt is een <a> naar de relevante pagina. */
.nhr-usp {
    display: block;
    height: 100%;
    padding: 1.75rem 1.25rem;
    background-color: #fff;
    text-align: center;
    color: inherit;
    transition: transform var(--nhr-easing), box-shadow var(--nhr-easing);
}

.nhr-usp:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 26px rgba(50, 38, 22, .15);
    text-decoration: none !important;   /* neutraliseert de globale a:hover-underline */
    color: inherit;
}

.nhr-usp__icoon {
    display: block;
    margin-bottom: 1rem;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--nhr-bruin);
}

.nhr-usp:hover .nhr-usp__icoon {
    color: var(--nhr-bruin-donker);
}

.nhr-usp__titel {
    display: block;
    margin: 0 0 .4rem;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--nhr-bruin);
}

.nhr-usp__tekst {
    display: block;
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--nhr-tekst);
}

/* De .fa-margin (.25em rechts) stoort bij een gecentreerd blok-icoon. */
.nhr-usp__icoon.fa,
.nhr-usp__icoon[class*="fa-"] {
    margin-right: 0;
}


/* -----------------------------------------------------------------------------
   5. NIEUWE MENU-DROPDOWNS  (Diensten, Over Noordman)
   Hergebruiken het bestaande dropdown-patroon uit noordmanhout.css (taupe
   achtergrond, hoekig, witte items). Enige correctie: de bestaande regel
   .navbar-expand-lg .navbar-nav .dropdown-menu{width:200%!important} maakt een
   dropdown 200% van de knopbreedte breed - bij "Diensten" met drie korte items
   is dat onnodig breed. Daarom voor deze twee dropdowns naar auto/min-width.
-------------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nhr-dropdown-menu {
        width: auto !important;
        min-width: 220px !important;
    }
}


/* -----------------------------------------------------------------------------
   6. FOOTER: OPENINGSTIJDEN + SOCIALS
-------------------------------------------------------------------------------- */

/* Openingstijden onder elk vestigingsadres. */
.nhr-openingstijden {
    margin: .15rem 0 1.1rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: #f0ece7;
    opacity: .9;
}

.nhr-openingstijden .fa,
.nhr-openingstijden [class*="fa-"] {
    margin-right: .4em;
}

/* Social-links: hoekige icoonknoppen, passend bij het strakke ontwerp. */
.nhr-socials {
    display: flex;
    flex-wrap: wrap;
    margin-top: .5rem;
    padding: 0;
    list-style: none;
}

.nhr-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 .5rem .5rem 0;
    background-color: var(--nhr-bruin-donker);
    color: #fff;
    font-size: 1.05rem;
    transition: background-color var(--nhr-easing), color var(--nhr-easing);
}

/* #footer a:hover{text-decoration:underline} (spec. 1-1-1) lift mee; deze
   selector (1-2-0) wint en houdt de icoonknop schoon. */
#footer .nhr-social:hover,
#footer .nhr-social:focus {
    background-color: var(--nhr-geel);
    color: #000;
    text-decoration: none;
}

#footer .nhr-social .fa,
#footer .nhr-social [class*="fa-"] {
    margin-right: 0;
}

.nhr-socials__label {
    margin: 0 0 .35rem;
    font-family: "Archivo", sans-serif;
    font-weight: 800;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}


/* -----------------------------------------------------------------------------
   7. RESPONSIVE
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nhr-btn,
    .nhr-usp,
    .nhr-usp__icoon,
    .nhr-social {
        transition: none;
    }
    .nhr-usp:hover {
        transform: none;
    }
}