/* ============================================================
   deHazette — Off-canvas sidebar
   Bestand: /assets/css/sidebar.css

   Zonekiezer in de "MEER"-lade. Zelfde opbouw als
   .dehazette-horoscoopkader, maar met --accent van de zone
   in plaats van een vaste kleur.

   De sidebar-partial toont ook de horoscoopwidget. Die styling
   wordt hier geïmporteerd, zodat één <link> naar sidebar.css
   volstaat en de sidebar er op élke pagina identiek uitziet.
   ============================================================ */

@import url('/assets/css/horoscoop.css?v=2');

/* ─────────────────────────────────────────────
   KADER
   ───────────────────────────────────────────── */
.dehazette-zonekader {
    border: 1px solid #e3e3e3;
    border-top: 3px solid var(--accent, #c0392b);
    border-radius: 4px;
    background: #fafafa;
    padding: 14px 16px 10px;
    margin: 0 0 20px;
    font-family: inherit;
}

.dehazette-zonekader__kop {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #1a1a1a;
}

.dehazette-zonekader__emoji { font-size: 1.1em; }

/* ─────────────────────────────────────────────
   ZONELIJST
   Max ±10 rijen zichtbaar, de rest scrollt.
   ───────────────────────────────────────────── */
.dehazette-zonelijst {
    max-height: 320px;
    overflow-y: auto;
    /* Ruimte voor de scrollbar zodat tekst niet tegen de rand plakt */
    padding-right: 4px;
}

/* Discrete scrollbar (WebKit) */
.dehazette-zonelijst::-webkit-scrollbar { width: 6px; }
.dehazette-zonelijst::-webkit-scrollbar-track { background: transparent; }
.dehazette-zonelijst::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 3px;
}
.dehazette-zonelijst::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* Provinciekop */
.dehazette-zonelijst__provincie {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    padding: 8px 0 4px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 4px;
}
.dehazette-zonelijst__provincie:first-child { padding-top: 0; }

/* Items */
.dehazette-zonelijst__items {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.dehazette-zonelijst__items:last-child { margin-bottom: 0; }

.dehazette-zonelijst__item {
    margin: 0;
    padding: 0;
    border: 0;
}

.dehazette-zonelijst__item a,
.dehazette-zonelijst__huidig {
    display: block;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.3;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}

.dehazette-zonelijst__item a:hover {
    background: var(--accent, #c0392b);
    color: #fff;
    text-decoration: none;
}

/* Huidige zone: gemarkeerd, niet klikbaar */
.dehazette-zonelijst__huidig {
    font-weight: 700;
    color: var(--accent, #c0392b);
    cursor: default;
}

.dehazette-zonelijst__badge {
    display: inline-block;
    background: var(--accent, #c0392b);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
}