/**
 * Pill-nav — herbruikbare styling voor pagina-specifieke navigatie.
 * Gebruik class "eq-pill-nav" op een <nav> met eigen links per pagina.
 * "ranch-subnav" is hetzelfde uiterlijk op de ranch-zorgpagina's.
 */

.eq-pill-nav,
.ranch-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.eq-pill-nav > a,
.ranch-subnav > a {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    color: #744213 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #e0d9bc !important;
    box-shadow: 0 1px 3px rgba(90, 70, 40, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.eq-pill-nav > a:not(.is-current):hover,
.eq-pill-nav > a:not(.is-current):focus,
.ranch-subnav > a:not(.is-current):hover,
.ranch-subnav > a:not(.is-current):focus {
    background: #fffef9 !important;
    border-color: #d4c9a8 !important;
    color: #5a3310 !important;
    text-decoration: none !important;
}

.eq-pill-nav > a.is-current,
.eq-pill-nav > a.is-current:hover,
.eq-pill-nav > a.is-current:focus,
.ranch-subnav > a.is-current,
.ranch-subnav > a.is-current:hover,
.ranch-subnav > a.is-current:focus {
    background: linear-gradient(180deg, #8b5a2b 0%, #744213 100%) !important;
    border-color: #5a3310 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    box-shadow: 0 2px 6px rgba(90, 51, 16, 0.25);
    text-decoration: none !important;
}

/* Donker thema (dark.css zet anders `a { color: … !important }`) */
.eq-pill-nav > a:not(.is-current),
.ranch-subnav > a:not(.is-current) {
    color: #5c4228 !important;
}

.takecare-page .takecare-nav {
    margin-bottom: 1rem;
    padding: 10px 12px;
    background: rgba(255, 254, 248, 0.92);
    border: 1px solid rgba(139, 90, 43, 0.18);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(62, 39, 35, 0.08);
}