/* ========================================
   VOLTUX — menubalk (volledig nieuw 2026-09-27)

   Markup: includes/inc-navbar.php · gedrag: site/site-algemeen.js
   Geen enkele klasse uit de oude balk (.navbar, .nav-container, .logo, .nav-links,
   .mobile-menu zijn allemaal weg). Alles begint met vn-.

   Een ZWEVENDE, volledig ronde balk (wens gebruiker 2026-09-27): ruimte eromheen, de pagina
   loopt langs de zijkanten onderdoor, en bij scrollen wordt hij wat dichter (frosted glass)
   met een steviger schaduw — zonder van hoogte te veranderen, want dat zou de pagina
   laten verspringen.

   ⚠️ HOOGTE: 10 px ruimte + 52 px balk = 62 px, dus KRAPPER dan --navbar-height (64 px).
   Dat is met opzet: geen enkele pagina hoeft zijn ruimte bovenaan aan te passen, en
   `body { padding-top: var(--navbar-height) }` op mobiel (site-style.css) blijft kloppen.

   ⚠️ De reset staat in :where() zodat hij gewicht 0 heeft. Les van de footer (2026-09-26):
   `.vf h2 { margin: 0 }` won van elke klasse die daarna ruimte instelde, en dan doet geen
   enkele margin-waarde die je later schrijft nog iets.

   ⚠️ De grens 860 px staat ook in site-algemeen.js (het menu sluit bij een breder scherm).
   Verander je hem hier, verander hem daar ook.
   ======================================== */

@import url('/shared/voltux-variables.css');

:where(.vn) :where(ul, li) { margin: 0; padding: 0; list-style: none; }
.vn *, .vn *::before, .vn *::after { box-sizing: border-box; }

/* ══ De zwevende houder ══
   De houder is de volle breedte, maar vangt zelf geen kliks (pointer-events: none):
   anders zou de onzichtbare strook naast de balk de pagina eronder blokkeren. */
.vn {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    padding: 0 20px;
    pointer-events: none;
}

.vn-balk {
    position: relative;               /* anker voor het uitklapmenu op mobiel */
    pointer-events: auto;
    max-width: var(--container-max);
    margin: 0 auto;
    height: 52px;
    padding: 0 8px 0 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* logo | links in het midden | knop */
    align-items: center;
    border-radius: 26px;              /* = halve hoogte: volledig rond */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -18px rgba(15, 23, 42, 0.35);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Kan de browser niet vervagen, dan gewoon wit — nooit half doorzichtige tekstsoep */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vn-balk { background: var(--white); }
}

/* Gescrold (site-algemeen.js zet .scrolled op #navbar): dichter en steviger, zelfde hoogte */
.vn.scrolled .vn-balk {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 40px -20px rgba(15, 23, 42, 0.45);
}

/* ══ Logo ══ */
.vn-logo {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    text-decoration: none;
}
.vn-logo img {
    display: block;
    height: 28px;
    width: auto;
}

/* ══ De links in het midden ══ */
.vn-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.vn-links a {
    position: relative;
    display: block;
    padding: 9px 13px;
    font-size: 14.5px;
    font-weight: var(--font-medium);
    line-height: 1.2;
    color: var(--dark-600);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease;
}

/* Het groene streepje groeit vanuit het midden — bij zweven én op de huidige pagina */
.vn-links a::after {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--green-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
}

.vn-links a:hover { color: var(--dark-900); }
.vn-links a:hover::after { transform: scaleX(1); }

.vn-links a[aria-current="page"] {
    color: var(--dark-900);
    font-weight: var(--font-semibold);
}
.vn-links a[aria-current="page"]::after { transform: scaleX(1); }

/* De sublijst met diensten, "Mijn afspraak", bellen, WhatsApp en "nu open" horen alleen in
   het uitklapmenu op een telefoon. Op een breed scherm blijven het vier links en een knop:
   de balk is geen plek voor een lijst (diensten staan op diensten.php, bellen en appen in
   de footer en op contact.php). */
.vn-sub,
.vn-extra,
.vn-status { display: none; }

/* ══ Rechts: de knop en (op mobiel) de menuknop ══ */
.vn-acties {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
}

/* ══ De twee knoppen (stijl C, keuze gebruiker 2026-09-27) ══
 *
 * Eerdere poging was fout op twee punten, en de gebruiker had gelijk: er zat een verloop met
 * een DONKERGROEN (--green-600) onderin en in de hover, en dat is niet het groen van het
 * logo. En een glans over de knop plus een harde schaduw eronder is een stijl van jaren terug.
 *
 * Daarom nu:
 *   · ALLEEN het groen van het logo (--green-500 = #1D9E75), zonder verloop
 *   · hover gaat nooit dónkerder maar één tint LICHTER (--vn-groen-licht)
 *   · elke schaduw is diezelfde kleur met doorzichtigheid — nooit zwart of donkergroen
 *   · geen glans; de beweging zit in het icoon: het schuift weg en er komt een pijl in de
 *     plaats, terwijl de tekst precies blijft staan
 *   · de tweede knop heeft geen grijze rand meer maar een lichte tint van hetzelfde groen
 *     met groene tekst: samen zijn ze één familie in plaats van twee losse knoppen
 *
 * ⚠️ Hoekradius 14 px (niet de volle pil van de balk zelf): zo gekozen in het voorbeeld.
 *    Wil je ze weer rond: dat is één waarde per knop.
 */
.vn { --vn-groen-licht: #22B184; }

.vn-knop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 22px;
    border-radius: 14px;
    background: var(--green-500);
    color: var(--white);
    font-size: 14.5px;
    font-weight: var(--font-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px -14px rgba(29, 158, 117, 0.9);
    transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

/* Het icoon en de pijl liggen op elkaar in een vakje van 18 px: daardoor verschuift de tekst
   niet als ze wisselen. Twee losse <i>'s (Tabler is een lettertype, geen svg). */
.vn-knop-ic {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}
.vn-knop-ic i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.vn-ic-pijl {
    opacity: 0;
    transform: translateX(-6px);
}
.vn-knop:hover {
    background: var(--vn-groen-licht);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -14px rgba(29, 158, 117, 0.95);
}
.vn-knop:hover .vn-ic-uit { opacity: 0; transform: translateX(6px); }
.vn-knop:hover .vn-ic-pijl { opacity: 1; transform: translateX(0); }
.vn-knop:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -10px rgba(29, 158, 117, 0.9);
}

/* ══ De tweede knop: zelfde vorm, zachte tint ══ */
.vn-knop-licht {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 20px;
    border-radius: 14px;
    border: 0;
    background: rgba(29, 158, 117, 0.10);
    color: var(--green-500);
    font-size: 14.5px;
    font-weight: var(--font-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.vn-knop-licht i {
    font-size: 18px;
    line-height: 1;
}
.vn-knop-licht:hover {
    /* Alleen de tint wordt iets sterker: de tekst blijft het groen van het logo, want
       donkerder groen is precies wat hier niet mag (2026-09-27). */
    background: rgba(29, 158, 117, 0.17);
    transform: translateY(-1px);
}
.vn-knop-licht:active { transform: translateY(0); }

/* ══ Menuknop (alleen mobiel) ══ */
.vn-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--dark-900);
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease;
}
.vn-menu:hover { background: rgba(15, 23, 42, 0.06); }
.vn-menu-dicht { display: none; }
body.vn-open .vn-menu-open { display: none; }
body.vn-open .vn-menu-dicht { display: inline; }

/* ══ Toetsenbord: altijd een zichtbare ring ══ */
.vn a:focus-visible,
.vn button:focus-visible {
    outline: 2px solid var(--green-500);
    outline-offset: 3px;
}

/* ══ Het vlak achter het uitklapmenu ══
   Vast aan het scherm (position: fixed werkt t.o.v. het venster, ook binnen .vn). */
.vn-sluier {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

/* ══ Smal scherm ══ */
@media (max-width: 860px) {
    .vn { padding: 0 14px; }

    .vn-balk {
        grid-template-columns: minmax(0, 1fr) auto;   /* logo | knop + menuknop */
        padding: 0 8px 0 14px;
    }

    .vn-menu { display: inline-flex; }

    /* "Mijn afspraak" staat op een telefoon in het uitklapmenu (vn-extra), niet in de balk:
       daar is naast het logo, de groene knop en de menuknop geen ruimte voor. */
    .vn-knop-licht { display: none; }

    /* ⭐ De knop blijft staan, ook hier (wens gebruiker 2026-09-27): hij is juist op een
       telefoon het snelste pad naar wat je komt doen. Om naast het logo én de menuknop te
       passen wordt hij compacter — het icoon eraf (de wissel naar de pijl bestaat alleen bij
       hover, en hover is er op een telefoon niet), kleinere letter, minder ruimte eromheen.
       Gerekend op 375 px: 14+14 rand + logo 118 + knop ±135 + 6 + menuknop 40 = past ruim.

       ⭐ En hier draagt hij de ZACHTE stijl, niet de volle groene (wens gebruiker 2026-09-27):
       op een breed scherm staan er twee knoppen naast elkaar en moet één van de twee eruit
       springen, maar op een telefoon is er maar één. Een volvlakke groene knop naast het logo
       maakt de smalle balk dan zwaar; de tint van hetzelfde groen is rustiger en de knop is
       toch het enige gekleurde vlak in de balk. De tekst erop blijft wél dezelfde als op een
       breed scherm: Mijn afspraak als dit apparaat een afspraak onthoudt, anders Prijs
       berekenen (zie inc-navbar.php). */
    .vn-knop {
        height: 38px;
        padding: 0 15px;
        font-size: 14px;
        background: rgba(29, 158, 117, 0.12);
        color: var(--green-500);
        box-shadow: none;
    }
    .vn-knop .vn-knop-ic { display: none; }
    /* Geen hover op een telefoon: het tikken zelf moet de reactie geven */
    .vn-knop:hover {
        background: rgba(29, 158, 117, 0.12);
        color: var(--green-500);
        transform: none;
        box-shadow: none;
    }
    .vn-knop:active {
        background: rgba(29, 158, 117, 0.22);
        transform: none;
    }

    /* De links worden een eigen kaartje onder de balk.
       visibility: hidden hoort hier echt bij: met alleen opacity: 0 blijft een link met Tab
       bereikbaar en zou je door een onzichtbaar menu tabben. */
    .vn-links {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        border-radius: 20px;
        background: var(--white);
        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -22px rgba(15, 23, 42, 0.5);
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    }

    body.vn-open .vn-links {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    body.vn-open .vn-sluier {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* De achtergrond mag niet meescrollen zolang het menu open is.
       Alleen hier, binnen deze grens: op een breed scherm bestaat het menu niet en zou een
       overflow: hidden op body de pagina laten verspringen door de schuifbalk. */
    body.vn-open { overflow: hidden; }

    .vn-links a {
        padding: 14px;
        border-radius: 12px;
        font-size: 16px;
        color: var(--dark-700);
    }
    /* Een streepje onder een regel in een verticale lijst zegt niets: hier de hele rij */
    .vn-links a::after { display: none; }
    .vn-links a:hover { background: var(--dark-50); }
    .vn-links a[aria-current="page"] {
        background: var(--green-50);
        color: var(--green-600);
    }

    /* ── De diensten onder "Diensten" ── */
    .vn-sub {
        display: block;
        margin: 2px 0 4px;
        padding-left: 12px;
        border-left: 2px solid var(--dark-100);
    }
    .vn-sub a {
        padding: 11px 12px;
        font-size: 14.5px;
        color: var(--dark-500);
    }

    /* ── Mijn afspraak · bellen · WhatsApp ──
       Eigen blok onderaan, met een lijn erboven: dit zijn geen pagina's om te bekijken
       maar dingen om te doen. */
    .vn-extra { display: block; }
    .vn-extra-eerst {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--dark-100);
    }
    .vn-extra a {
        display: flex;
        align-items: center;
        gap: 11px;
        font-weight: var(--font-medium);
        color: var(--dark-800);
    }
    .vn-extra i {
        font-size: 19px;
        color: var(--green-500);   /* het groen van het logo, net als de knoppen */
    }

    /* ── "Nu open tot 18:00" / "Gesloten — morgen weer open om 08:00" ── */
    .vn-status {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 14px 4px;
        font-size: 13px;
        color: var(--dark-500);
    }
    .vn-stip {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--dark-300);
    }
    .vn-status-open .vn-stip { background: var(--green-500); }
}

/* ══ Heel smal (oude iPhone SE, 320–420 px) ══
   Alles net een maatje kleiner, zodat logo + knop + menuknop op één regel blijven.
   Gerekend op 320 px: 12+12 rand + logo 106 + knop ±119 + 4 + menuknop 36 = past nog. */
@media (max-width: 420px) {
    .vn { padding: 0 12px; }
    .vn-balk { padding: 0 6px 0 12px; }
    .vn-logo img { height: 25px; }
    .vn-acties { gap: 4px; }
    .vn-knop {
        height: 36px;
        padding: 0 13px;
        font-size: 13px;
    }
    .vn-menu {
        width: 36px;
        height: 36px;
        font-size: 21px;
    }
}

/* ══ Wie beweging liever niet heeft, krijgt hem niet ══ */
@media (prefers-reduced-motion: reduce) {
    .vn-balk,
    .vn-links,
    .vn-links a,
    .vn-links a::after,
    .vn-knop,
    .vn-knop-ic i,
    .vn-knop-licht,
    .vn-menu,
    .vn-sluier {
        transition: none;
    }
    /* Geen optillen en geen schuivende pijl; de kleurwissel blijft wel */
    .vn-knop:hover,
    .vn-knop-licht:hover { transform: none; }
    .vn-knop:hover .vn-ic-uit { opacity: 1; transform: none; }
    .vn-knop:hover .vn-ic-pijl { opacity: 0; }
}