/* =============================================================
   NAV.CSS — Heart Workx navigatie
   Mobile-first. Vijf breekpunten.

   Structuur (uit header.php):
   .mob-topbalk       sticky topbalk mobiel (logo + iconen)
   .mob-onderbalk     sticky onderbalk mobiel (5 menu-items)
   .site-header       desktop header ≥1024px
   .naar-top-knop     scroll-to-top knop

   Mobiel  <480px    topbalk + onderbalk zichtbaar
   Klein   480-767px topbalk + onderbalk zichtbaar
   Tablet  768-1023px topbalk + onderbalk zichtbaar
   Laptop  ≥1024px   site-header zichtbaar, mob-* verborgen
   ============================================================= */

/* ── Ruimte voor vaste balken ─────────────────────────────── */
/* Topbalk hoogte: 52px, onderbalk hoogte: 58px              */
body {
    padding-top:    52px;
    padding-bottom: 58px;
}

/* ── Mobiele topbalk ──────────────────────────────────────── */
.mob-topbalk {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--z-nav);
    height:     52px;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    padding:    0 var(--ruimte-4);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mob-logo { display: flex; align-items: center; }
.mob-logo-img { height: 30px; width: auto; }

.mob-topbalk-iconen {
    display:  flex;
    gap:      var(--ruimte-2);
    align-items: center;
}

.mob-icoon {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:   40px;
    height:  40px;
    color:   var(--donker);
    border-radius: var(--radius-md);
    transition: background var(--overgang-snel), color var(--overgang-snel);
}
.mob-icoon:hover {
    background: var(--zacht);
    text-decoration: none;
}

/* ── Mobiele onderbalk ────────────────────────────────────── */
.mob-onderbalk {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    var(--z-nav);
    height:     58px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.mob-nav-lijst {
    display:  flex;
    height:   100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mob-nav-item { flex: 1; }

.mob-nav-link {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    height:         100%;
    gap:            2px;
    color:          var(--tekst-zacht);
    text-decoration: none;
    transition: color var(--overgang-snel), background var(--overgang-snel);
    padding: 0 var(--ruimte-1);
}

.mob-nav-link:hover { text-decoration: none; }

.mob-nav-ico { display: flex; line-height: 1; }
.mob-nav-ico svg { width: 20px; height: 20px; }

.mob-nav-lbl {
    font-size:   9px;
    font-weight: var(--gewicht-semi);
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
}

.mob-nav-link.actief {
    color: var(--hoofdkleur);
}

/* ── Desktop header — verborgen op mobiel ────────────────── */
.site-header { display: none; }

/* ── Naar-top knop ───────────────────────────────────────── */
.naar-top-knop {
    position:   fixed;
    bottom:     74px;   /* boven de onderbalk */
    right:      var(--ruimte-4);
    z-index:    var(--z-zweef);
    width:      40px;
    height:     40px;
    border-radius: var(--radius-rond);
    background: var(--donker);
    color:      var(--wit);
    border:     none;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    pointer-events: none;
    transition:
        opacity   var(--overgang-normaal),
        transform var(--overgang-snel);
    box-shadow: var(--schaduw-md);
}

.naar-top-knop.zichtbaar {
    opacity: 1;
    pointer-events: auto;
}

.naar-top-knop:hover {
    background:  var(--hoofdkleur);
    transform:   translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   TABLET (768px+)
   Iets meer ruimte in de topbalk, labels groter
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .mob-topbalk { height: 56px; padding: 0 var(--ruimte-6); }
    .mob-logo-img { height: 34px; }
    body { padding-top: 56px; }

    .mob-onderbalk { height: 64px; }
    body { padding-bottom: 64px; }

    .mob-nav-ico svg { width: 22px; height: 22px; }
    .mob-nav-lbl { font-size: 10px; }

    .naar-top-knop {
        bottom: 80px;
        width:  44px;
        height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════
   LAPTOP/DESKTOP (1024px+)
   Mobiele balken verdwijnen, desktop header verschijnt
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    body {
        padding-top:    0;
        padding-bottom: 0;
    }

    .mob-topbalk  { display: none; }
    .mob-onderbalk { display: none; }

    /* ── Desktop header ────────────────────────────────── */
    .site-header {
        display:   block;
        position:  sticky;
        top:       0;
        z-index:   var(--z-nav);
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .header-inner {
        max-width: var(--container-max);
        margin:    0 auto;
        padding:   0 var(--sectie-h);
        height:    64px;
        display:   flex;
        align-items: center;
        gap:       var(--ruimte-6);
    }

    .header-logo { display: flex; align-items: center; flex-shrink: 0; }
    .logo-img    { height: 40px; width: auto; }

    /* Navigatielijst */
    .hoofdnav { flex: 1; }

    .nav-lijst {
        display:    flex;
        gap:        var(--ruimte-1);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-link {
        display:      block;
        padding:      8px 14px;
        border-radius: var(--radius-sm);
        font-size:    var(--tekst-sm);
        font-weight:  var(--gewicht-semi);
        color:        var(--tekstkleur);
        transition:   background var(--overgang-snel), color var(--overgang-snel);
    }

    .nav-link:hover {
        background:     var(--zacht);
        color:          var(--donker);
        text-decoration: none;
    }

    .nav-link.actief {
        color:       var(--hoofdkleur);
        font-weight: var(--gewicht-vet);
    }

    /* Rechter zijde */
    .header-rechts {
        display:     flex;
        align-items: center;
        gap:         var(--ruimte-3);
        flex-shrink: 0;
    }

    .header-icoon {
        display:     flex;
        align-items: center;
        justify-content: center;
        width:   38px;
        height:  38px;
        color:   var(--donker);
        border-radius: var(--radius-sm);
        transition: background var(--overgang-snel);
    }
    .header-icoon:hover {
        background: var(--zacht);
        text-decoration: none;
    }

    .header-cta {
        display:      inline-flex;
        align-items:  center;
        padding:      9px 20px;
        background:   var(--hoofdkleur);
        color:        var(--wit);
        border-radius: var(--radius-md);
        font-size:    var(--tekst-sm);
        font-weight:  var(--gewicht-vet);
        transition:   background var(--overgang-snel), transform var(--overgang-snel);
    }
    .header-cta:hover {
        background:     var(--donker);
        color:          var(--wit);
        text-decoration: none;
        transform:      translateY(-1px);
    }

    /* Naar-top knop op desktop */
    .naar-top-knop {
        bottom: var(--ruimte-6);
        right:  var(--ruimte-6);
    }
}

/* ══════════════════════════════════════════════════════════
   BREED DESKTOP (1280px+)
   Meer lucht in de header
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    .header-inner { height: 70px; }
    .logo-img     { height: 44px; }

    .nav-link {
        font-size: var(--tekst-base);
        padding:   9px 16px;
    }
}