/* === Blues Magazine – Artikelen (Clean) === */
/* Houd dit bestand UTF-8 zonder BOM */

/* ---------- Kleuren en basis ---------- */
:root{
  --bm-bg:#ffffff;
  --bm-ink:#0b1020;          /* hoofdtekst */
  --bm-ink-soft:#586171;     /* meta */
  --bm-accent:#0b1530;       /* donkerblauw voor headings */
  --bm-border:#e7e7e7;
  --bm-blue:#0066cc;         /* match agenda-blauw */
  --bm-badge:#d40000;        /* rood voor NIEUW-badges */
}

/* ---------- Pagina wrapper ---------- */
.bm-archive--clean{ background:#fff; color:var(--bm-ink); }

.bm-arch-wrap{
  box-sizing:border-box;
  max-width:1280px;          /* desktop kolombreedte */
  margin:0 auto;
  padding:20px 24px 24px;    /* top / L+R / bottom */
}

/* ---------- Header ---------- */
.bm-arch-head{ position:relative; margin:6px 0 30px; }
.bm-arch-h1{ margin:0 0 6px; font-size:clamp(1.8rem,3vw,2.2rem); line-height:1.2; color:var(--bm-accent); }
.bm-arch-sub{ margin:0; color:#333; font-size:1rem; }
.bm-arch-head:after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  background:linear-gradient(90deg, var(--bm-accent), transparent 60%); opacity:.35;
}

/* ---------- Kicker + badge ---------- */
.bm-section-kicker{
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bm-ink-soft); margin:0 0 .8rem;
}
.bm-badge{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  font-size:.75rem; font-weight:700; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.bm-badge--new{ background:var(--bm-badge); color:#fff; }

/* ===== TOP 4 – full-width list ===== */
.bm-top4{ display:block; margin-bottom:1.6rem; }

.bm-top4__item{
  display:grid; grid-template-columns:min(360px,40%) 1fr;
  gap:1.4rem; padding:1.2rem 0; border-top:1px solid #e9edf3; align-items:start;
}
.bm-top4__item:first-child{ border-top:0; }
@media(max-width:700px){ .bm-top4__item{ grid-template-columns:1fr; gap:.9rem; } }

.bm-top4__thumb{ display:block; aspect-ratio:4/3; background:#f3f4f6; border-radius:12px; overflow:hidden; position:relative; }
.bm-top4__img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.bm-top4__ph{ width:100%; height:100%; display:grid; place-items:center; color:#9aa3af; font-weight:800; }

.bm-thumb-badge{
  position:absolute; top:8px; right:8px;
  padding:.22rem .55rem; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.02em; line-height:1;
  background:var(--bm-badge); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); user-select:none;
}

.bm-top4__body{ min-width:0; }
.bm-top4__rubriek{ font-size:.9rem; font-weight:800; letter-spacing:.05em; margin-bottom:.35rem; }
.bm-top4__rubriek a{ color:var(--bm-blue); text-decoration:none; }
.bm-top4__rubriek a:hover{ text-decoration:underline; text-decoration-color:var(--bm-blue); }

.bm-top4__title{
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  line-height:1.25; font-weight:800; margin:.2rem 0 .5rem;
}
.bm-top4__title a{ color:var(--bm-ink); text-decoration:none; }
.bm-top4__title a:hover{ text-decoration:underline; text-decoration-color:var(--bm-blue); }

.bm-top4__meta{ font-size:.9rem; color:var(--bm-ink-soft); margin-bottom:.4rem; }
.bm-top4__excerpt{
  color:#3b4252; margin:0;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.bm-top4__cta{ display:inline-block; margin-top:.6rem; font-size:.95rem; font-weight:700; color:var(--bm-blue); text-decoration:none; }
.bm-top4__cta:hover{ text-decoration:underline; text-decoration-color:var(--bm-blue); }

/* Scheiding */
.bm-divider{ border:0; border-top:1px solid #e1e6ef; margin:1.8rem 0; }

/* ===== REST – 2-koloms list (desktop) / 1-kolom (mobiel) ===== */
.bm-list{ display:grid; gap:1.4rem; }
@media(min-width:900px){ .bm-list{ grid-template-columns:1fr 1fr; gap:1.6rem 2rem; } }

.bm-list__item{
  display:grid; grid-template-columns:130px 1fr;
  gap:1rem; padding-bottom:1.2rem; border-bottom:1px solid #e9edf3;
}
.bm-list__item:last-child{ border-bottom:0; }
@media(min-width:1100px){ .bm-list__item{ grid-template-columns:150px 1fr; } }

.bm-list__thumb{ display:block; aspect-ratio:1/1; background:#f3f4f6; border-radius:10px; overflow:hidden; }
.bm-list__img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.bm-list__ph{ display:grid; place-items:center; font-weight:700; color:#9aa3af; }

.bm-list__body{ min-width:0; }
.bm-list__rubriek{ font-size:.75rem; font-weight:800; letter-spacing:.05em; margin-bottom:.25rem; }
.bm-list__rubriek a{ color:var(--bm-blue); text-decoration:none; }
.bm-list__rubriek a:hover{ text-decoration:underline; text-decoration-color:var(--bm-blue); }

.bm-list__title{
  font-size:clamp(1.1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height:1.35; font-weight:700; margin:.1rem 0 .4rem;
}
.bm-list__title a{ color:var(--bm-ink); text-decoration:none; }
.bm-list__title a:hover{ text-decoration:underline; text-decoration-color:var(--bm-blue); }

.bm-list__meta{ font-size:.85rem; color:var(--bm-ink-soft); }

/* ---------- Paginering ---------- */
.bm-pagination{ margin:24px 0; }
.bm-pagination .page-numbers{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; justify-content:center;
}
.bm-pagination .page-numbers li{ display:inline; }
.bm-pagination a.page-numbers,
.bm-pagination span.page-numbers{
  display:inline-block; padding:.45rem .70rem; border:1px solid #d8dbe0; border-radius:10px;
  text-decoration:none; line-height:1; color:var(--bm-ink); background:#fff;
}
.bm-pagination span.page-numbers.current{ background:var(--bm-ink); color:#fff; border-color:var(--bm-ink); }
.bm-pagination a.page-numbers:hover{ border-color:var(--bm-ink); }
.bm-pagination a.prev, .bm-pagination a.next{ font-weight:600; }

/* ---------- Veiligheidsnet ---------- */
.bm-top4, .bm-list, .bm-top4__item, .bm-list__item,
.bm-top4__body, .bm-list__body{ min-width:0; }
.bm-top4__thumb, .bm-list__thumb{ max-width:100%; }
.bm-archive--clean{ overflow-x:hidden; }

/* ============================== */
/* =======   RESPONSIVE   ======= */
/* ============================== */

/* Tablet: iets smaller dan desktop (rails 16px) */
@media (min-width:861px) and (max-width:1023px){
  .bm-arch-wrap{ padding-left:16px; padding-right:16px; }
}

/* Mobiel: rails 10px + compacter type/lay-out */
@media (max-width:860px){
  .bm-arch-wrap{ padding-left:10px; padding-right:10px; }

  .bm-top4__excerpt{ font-size:.98rem; line-height:1.45; -webkit-line-clamp:3; }

  .bm-list__item{
    grid-template-columns:96px 1fr;
    gap:.8rem;
    padding-bottom:1rem;
  }
  .bm-list__title{
    font-size:clamp(1rem, 0.96rem + 0.4vw, 1.12rem);
    margin-bottom:.3rem;
  }
  .bm-list__meta{ font-size:.8rem; }
  .bm-list__rubriek{ font-size:.7rem; }
}





/* ===== Rubriek-filter ===== */
.bm-filter{
  display:flex; align-items:center; gap:.6rem;
  margin: 6px 0 12px;
}
.bm-filter__label{
  font-weight:800; font-size:.9rem; color:#586171; text-transform:uppercase; letter-spacing:.04em;
}
.bm-filter__select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.5rem .8rem; border:1px solid #d8dbe0; border-radius:10px; background:#fff;
  font: inherit; line-height:1; min-width: 220px;
}
.bm-filter__select:focus{ outline:2px solid #2463eb22; border-color:#2463eb; }
.bm-filter__reset{
  font-weight:700; text-decoration:none; color:#0066cc; padding:.3rem .5rem; border-radius:8px;
}
.bm-filter__reset:hover{ text-decoration:underline; }
@media (max-width:700px){
  .bm-filter{ flex-wrap:wrap; gap:.5rem .7rem; }
  .bm-filter__select{ min-width: 180px; }
}




/* ===== Chips (rubrieken) ===== */
.bm-chips{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  margin: 6px 0 12px;
}
.bm-chip{
  display:inline-block;
  padding:.42rem .70rem;
  border:1px solid #d8dbe0;
  border-radius:999px;
  background:#fff;
  color:#0b1020;
  text-decoration:none;
  font-weight:700; font-size:.9rem; line-height:1;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space:nowrap;
}
.bm-chip:hover{ border-color:#0b1020; }
.bm-chip.is-active{
  background:#0b1020; color:#fff; border-color:#0b1020;
}
.bm-chip[aria-current="page"]{ cursor:default; }

/* Optioneel: horizontale scroll als je héél veel rubrieken hebt */
@media (max-width: 700px){
  .bm-chips{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .bm-chips::-webkit-scrollbar{ height:6px; }
}




/* Labeltje voor chip-groepen */
.bm-chips { align-items: center; }
.bm-chips__label{
  font-weight:800; font-size:.82rem; color:#586171;
  text-transform:uppercase; letter-spacing:.04em;
  margin-right:.25rem;
}





/* ===========================
   Artikelen – Finetune Patch
   =========================== */

/* 1) Pagina header: titel donkerder + groter (match single post feeling) */
.bm-archive--clean .bm-arch-h1{
  color:#0b0f1a;                   /* écht zwart/donker */
  font-weight:900;
  font-size:clamp(2.0rem, 1.4rem + 1.6vw, 2.6rem);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 8px;
}

/* 2) Intro-sectie: donkerder bodytekst + duidelijke scheiding eronder */
.bm-archive--clean .bm-arch-sub{
  color:#171a23;                   /* net donkerder dan #333 */
  font-size:clamp(1.02rem, .98rem + .2vw, 1.12rem);
  line-height:1.55;
  margin:0;
}
.bm-archive--clean .bm-arch-head{
  position:relative;
  margin:6px 0 22px;
}
.bm-archive--clean .bm-arch-head::after{
  content:"";
  display:block;
  height:2px;
  margin-top:12px;                 /* extra lucht t.o.v. intro */
  background:linear-gradient(90deg, rgba(15,23,42,.25), rgba(15,23,42,0) 65%);
}

/* 3) Sectiekop 'Nieuwste publicaties' prominenter */
.bm-section-kicker{
  display:flex; align-items:center; gap:.7rem;
  margin:10px 0 14px;
  font-size:1rem;                  /* groter dan voorheen */
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#3b4252;
}
.bm-badge--new{
  background:#d60000;              /* BM-rood */
  color:#fff;
  padding:.28rem .7rem;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  font-size:.82rem;                /* iets groter */
  font-weight:900;
}

/* 4) Highlight kaarten – iets groter type & luchtiger spacing */
.bm-top4{ margin-bottom:1.2rem; }
.bm-top4__item{
  gap:1.6rem;
  padding:1.2rem 0;
  border-top:1px solid #e6e9ef;
}
.bm-top4__title{
  font-size:clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem);
  line-height:1.22;
  font-weight:900;
  color:#0b0f1a;
}
.bm-top4__meta{ color:#626d7a; margin:.35rem 0 .4rem; }
.bm-top4__excerpt{
  color:#151923;
  font-size:clamp(1.02rem, .98rem + .2vw, 1.1rem);
  line-height:1.6;
}
.bm-top4__thumb{ border-radius:14px; overflow:hidden; }
.bm-thumb-badge--new{ top:10px; right:10px; }

/* 5) Scheiding tussen Top4 en lijst duidelijker */
.bm-divider{
  border:0;
  border-top:2px solid #e6e9ef;
  margin:18px 0 10px;
}

/* 6) Restlijst – type wat groter & donkerder; spacing strakker */
.bm-list{
  gap:1.2rem;
}
@media(min-width:900px){
  .bm-list{ gap:1.4rem 2rem; }
}
.bm-list__title{
  font-size:clamp(1.12rem, .98rem + .6vw, 1.35rem);
  line-height:1.3;
  font-weight:800;
  color:#0b0f1a;
  margin:.08rem 0 .35rem;
}
.bm-list__rubriek a{
  color:#0b57d0;                   /* iets donkerder blauw */
  font-weight:900;
}
.bm-list__meta{
  color:#5b6472;
  font-size:.9rem;
}

/* 7) Chips – leesbaarheid & focus states */
.bm-chips{
  margin: 8px 0 8px;
}
.bm-chip{
  border-radius:999px;
  padding:.46rem .75rem;
  border:1px solid #d7dbe3;
  background:#fff;
  color:#0b0f1a;
  font-weight:700;
}
.bm-chip:hover{
  border-color:#0b0f1a;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.bm-chip.is-active{
  background:#0b0f1a;
  color:#fff;
  border-color:#0b0f1a;
}
.bm-chip:focus-visible{
  outline:2px solid #2563eb44;
  outline-offset:2px;
}

/* 8) Paginatie – net wat zwaarder contrast en grotere hit-area */
.bm-pagination .page-numbers{
  padding:.55rem .8rem;
  border-radius:10px;
}
.bm-pagination .page-numbers:hover{
  border-color:#0b0f1a;
}
.bm-pagination .current{
  background:#0b0f1a;
  color:#fff;
  border-color:#0b0f1a;
}

/* 9) Mobiel tweaks: lucht boven/onder en beeldverhouding stabiel */
@media (max-width: 860px){
  .bm-top4__item{ gap:.9rem; }
  .bm-top4__thumb{ aspect-ratio: 16/9; }
  .bm-list__item{
    grid-template-columns:96px 1fr;
    gap:.85rem;
    padding-bottom:1rem;
  }
}





/* =========================================================
   Artikelen-pagina: header en typografie match single-post
   ========================================================= */

/* Pagina titel zoals .bm-single .bm-title */
.bm-arch-h1 {
  position: relative;
  border-left: none;
  padding-left: 22px;
  margin: 10px 0 10px;
  font-size: clamp(30px, 3.4vw, 46px); /* exact als single */
  line-height: 1.1;
  font-weight: 800;
  color: #0b0f1a;
}
.bm-arch-h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 10px;
  background: #1e63ff; /* zelfde blauwe balk */
  border-radius: 10px;
}

/* Intro-tekst (matcht single .bm-excerpt) */
.bm-arch-sub {
  margin: 12px 0 14px;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.6;
  font-weight: 600;
  color: #17202a;
  max-width: 100%;
}

/* Scheiding onder header (zelfde spacing als .bm-single .bm-sep) */
.bm-arch-head::after {
  content: "";
  display: block;
  border-top: 1px solid #e8ecf3;
  height: 0;
  margin: 16px 0;
}

/* Kicker "Nieuwste publicaties" in lijn met headingstijl */
.bm-section-kicker {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 16px;
  color: #141e29;
}
.bm-badge--new {
  background: #d40000;
  font-size: .82rem;
  font-weight: 900;
  padding: .28rem .7rem;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}



/* =========================================================
   Artikelen-pagina: titels matchen single-post hiërarchie
   ========================================================= */

/* Top-4 titels ≈ single h2 (28px) */
.bm-top4__title {
  font-size: clamp(22px, 2.2vw, 28px);  /* matcht single h2 */
  line-height: 1.25;
  font-weight: 800;
  margin: .2rem 0 .5rem;
  color: #0b0f1a;
}
.bm-top4__title a {
  text-decoration: none;
  color: inherit;
}
.bm-top4__title a:hover {
  text-decoration: underline;
  text-decoration-color: #1e63ff;
}

/* Lijsttitels ≈ single h3 (22px → 20px mobiel) */
.bm-list__title {
  font-size: clamp(18px, 2vw, 22px);   /* matcht single h3 */
  line-height: 1.3;
  font-weight: 700;
  margin: .1rem 0 .4rem;
  color: #0b0f1a;
}
.bm-list__title a {
  text-decoration: none;
  color: inherit;
}
.bm-list__title a:hover {
  text-decoration: underline;
  text-decoration-color: #1e63ff;
}





/* ============== Kleine finetunes voor overzicht ============== */

/* Rubriek-stijl consistent (caps + blauw, iets vetter) */
.bm-top4__rubriek a,
.bm-list__rubriek a{
  color:#1e63ff;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-decoration:none;
}
.bm-top4__rubriek a:hover,
.bm-list__rubriek a:hover{
  text-decoration:underline;
  text-decoration-color:#1e63ff;
}

/* Meta (datum / “x geleden”) iets donkerder en lucht eromheen */
.bm-top4__meta,
.bm-list__meta{
  color:#4b5563;
}
.bm-top4__meta time{ display:inline-block; margin:.2rem 0 .25rem; }

/* Thumbs: zachte hoeken + stabiele verhouding */
.bm-top4__thumb{ border-radius:12px; overflow:hidden; }
.bm-top4__thumb img{ aspect-ratio:16/9; object-fit:cover; display:block; }
.bm-list__thumb{ border-radius:10px; overflow:hidden; }
.bm-list__thumb img{ aspect-ratio:1/1; object-fit:cover; display:block; }

/* Chips: ritme & tap-target netter */
.bm-chips{ gap:.5rem .6rem; margin:8px 0 10px; }
.bm-chip{ padding:.46rem .78rem; border-radius:999px; }
.bm-chip.is-active{ background:#0b0f1a; color:#fff; border-color:#0b0f1a; }
.bm-chip:hover{ border-color:#0b0f1a; box-shadow:0 1px 4px rgba(0,0,0,.06); }

/* Divider tussen Top-4 en lijst iets duidelijker */
.bm-divider{ border-top:2px solid #e6e9ef; margin:18px 0 12px; }

/* Lijst-grid spacing klein beetje ruimer op desktop, compacter op mobiel */
@media (min-width: 900px){
  .bm-list{ gap:1.5rem 2rem; }
}
@media (max-width: 720px){
  .bm-list__item{ grid-template-columns:96px 1fr; gap:.85rem; padding-bottom:1rem; }
}

/* Pagination: grotere klikzone */
.bm-pagination .page-numbers{ padding:.55rem .85rem; border-radius:10px; }
.bm-pagination .page-numbers:hover{ border-color:#0b0f1a; }
.bm-pagination .current{ background:#0b0f1a; color:#fff; border-color:#0b0f1a; }

/* Focus states (toegankelijk) */
.bm-archive--clean a:focus-visible{
  outline:2px solid #2563eb44;
  outline-offset:2px;
  border-radius:6px;
}




/* ======================================================
   Extra finetune: spacing header-separator + Nieuw badge
   ====================================================== */

/* Separator onder intro meer lucht */
.bm-arch-head::after {
  margin-top: 22px;      /* was 12px → meer afstand tot intro */
  margin-bottom: 6px;    /* net wat ruimte vóór kicker */
}

/* Nieuw-badge: groter, opvallender */
.bm-badge--new {
  font-size: .9rem;      /* was .82rem */
  font-weight: 900;
  padding: .32rem .85rem; /* meer ‘pill’ look */
  border-radius: 999px;
  background: #d40000;   /* BM-rood */
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Nieuw-badge op thumbnails ook iets groter */
.bm-thumb-badge--new,
.bm-thumb-badge.bm-thumb-badge--sm {
  font-size: .78rem;     /* iets groter */
  padding: .26rem .65rem;
  border-radius: 999px;
}




/* Titel spacing en line-height fix */
.bm-arch-h1 {
  margin: 10px 0 20px;        /* was 10px 0 10px → meer lucht eronder */
  line-height: 1.25;          /* iets ruimer dan 1.1 */
}

/* Extra ruimte tussen filterchips en kicker */
.bm-chips {
  margin-bottom: 30px;        /* was ~10px, nu meer scheiding */
}
.bm-section-kicker {
  margin-top: 12px;           /* marge boven kicker zelf */
}





/* Mobiel: thumbnails hogere verhouding */
@media (max-width: 768px){
  .bm-top4__thumb img {
    aspect-ratio: 4/5;   /* bijna portretvorm i.p.v. breed */
    object-fit: cover;
  }
}



/* Als filter actief is → geen rode NIEUW badges tonen */
.artikelen-filter .bm-thumb-badge--new,
.artikelen-filter .bm-badge--new {
  display: none !important;
}





/* Mobiel: Top-4 thumbs vierkant (1/1) */
@media (max-width: 768px){
  .bm-top4__thumb {
    aspect-ratio: 1/1 !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .bm-top4__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Lijst-thumbs zijn altijd 1/1 → geregeld via image_size */
.bm-list__thumb {
  aspect-ratio: 1/1 !important;
  border-radius: 10px;
  overflow: hidden;
}
.bm-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}



.archive .bm-thumb-badge--new { display:none }




/* =====================================================
   Globale heading spacing voor Artikelen & Archiefpagina's
   ===================================================== */
.bm-arch-head {
  margin-bottom: 40px;   /* consistent lucht */
}

.bm-arch-head::after {
  margin-top: 16px;      /* lijn net iets losser */
}








/* Desktop: breder canvas voor Artikelen/Archief/Search */
@media (min-width: 1024px){
  .bm-arch-wrap{
    max-width: 1280px;   /* kies 1240 of 1280 als je nog ruimer wilt */
  }
}

/* 2-koloms grid: kolommen mogen volledig meerekken */
@media (min-width: 900px){
  .bm-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* i.p.v. 1fr 1fr */
    gap: 1.6rem 2rem;
  }
}
/* veiligheid: kinderen mogen krimpen */
.bm-list > * { min-width: 0; }

@media (min-width: 1100px){
  .bm-list__item{ grid-template-columns: 150px 1fr; }  /* was 130px */
}



/* separator-lijntje onder de header uitzetten */
.bm-arch-head::after{
  content: none !important;   /* kill de lijn */
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;       /* voorkom spookruimte van die pseudo */
}






/* extra lucht onder de header */
.page-template-page-artikelen .bm-arch-head{
  margin-bottom: 40px;            /* was ~30–34px; geef wat meer adem */
}
.page-template-page-artikelen .bm-arch-head::after{
  margin-top: 18px;               /* lijn iets losser van de intro */
  margin-bottom: 12px;            /* extra ruimte vóór de content eronder */
}

/* Mobiel: net iets compacter dan desktop, maar nog steeds ruimer dan nu */
@media (max-width: 768px){
  .page-template-page-artikelen .bm-arch-head{
    margin-bottom: 32px;
  }
  .page-template-page-artikelen .bm-arch-head::after{
    margin-top: 14px;
    margin-bottom: 10px;
  }
}












/* Artikelen: sprekende grid-navigatie */
.bm-arch-nav{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin:16px 0 48px;
}
@media (max-width:1024px){ .bm-arch-nav{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .bm-arch-nav{ grid-template-columns:1fr; } }

.bm-arch-card{
  display:block;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-left:4px solid #0a66c2; /* vaste blauwe lijn */
  border-radius:14px;
  padding:18px 16px;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.bm-arch-card h3{
  margin:0 0 6px;
  font-size:1.3rem;
  line-height:1.35;
  font-weight:800;
  color:#0a2540; /* donker typoblauw */
}

.bm-arch-card p{
  margin:0;
  color:#4b5563; /* grijs */
  font-size:.96rem;
  line-height:1.45;
}

.bm-arch-card:hover,
.bm-arch-card:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(2,6,23,.07);
  border-color:#0a66c2;
  outline:none;
}



/* Artikelen grid: 4 kolommen op brede schermen */
@media (min-width: 1200px){
  .bm-arch-nav{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}





/* Extra witruimte rond de rubriek-pills onderaan de Artikelen-pagina */
.bm-chips.bm-chips--cats {
  margin-top: 48px;   /* meer ruimte boven */
  margin-bottom: 64px; /* royale ademruimte onder */
}






/* Extra witruimte boven de pagina titel voor alle archiefachtige pagina's */
.bm-arch-head {
  margin-top: 64px;    /* lucht boven titel */
  margin-bottom: 32px; /* subtiele afstand tot volgende blok */
}

@media (max-width:768px){
  .bm-arch-head {
    margin-top: 48px;  /* iets compacter op mobiel */
    margin-bottom: 24px;
  }
}




/* Mobiel: verberg introtekst en navigatie-cards */
@media (max-width: 768px){
  .page-template-page-artikelen .bm-arch-nav {
    display: none !important;
  }
}

@media (max-width: 768px){
  .bm-archive--clean .bm-arch-sub{ display: none !important; }
}






.bm-active-filter {
  margin: 16px 0 8px;
  font-size: .95rem;
  font-weight: 600;
  color: #0a2540;
}
.bm-active-filter span {
  color: #64748b;
  margin-right: 4px;
}










/* Compacte variant voor chips-blok (match Artikelen, iets minder marge) */
.bm-chips.bm-chips--compact { margin-top: .25rem; margin-bottom: 1rem; }
/* Label subtiel */
.bm-chips.bm-chips--compact .bm-chips__label { opacity: .8; }







/* Verberg 'Snel naar' pills op mobiel, laat filters (Releases) met gewone .bm-chips wél staan */
@media (max-width: 640px) {
  .bm-chips--compact { 
    display: none !important;
  }
}







.bm-thumb-badge--rank { background: rgba(10,102,194,.9); }







/* --- Fix: sorteer-pills tonen op mobiel --- */
@media (max-width: 640px){
  /* Uitzondering: het sorteerblok zichtbaar houden */
  .bm-chips--compact[aria-label="Sorteren"]{
    display:flex !important;
    gap:.5rem;
    flex-wrap:wrap;
    align-items:center;
    margin:.5rem 0 1rem;
  }
  /* Optioneel: label "Sorteren" visueel verbergen, wel toegankelijk laten */
  .bm-chips--compact[aria-label="Sorteren"] .bm-chips__label{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
}

/* Zorg dat rank-badge binnen de thumb blijft */
.bm-list__thumb{ position: relative; }











/* Mobiele Snel-naar dropdown */
.bm-quicknav { display:none; }

@media (max-width:640px){
  .bm-quicknav{
    display:block;
    margin:.5rem 0 1.4rem;
  }

  .bm-quicknav__wrap{
    position:relative;
    max-width:100%;
  }

  .bm-quicknav__select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    width:100%;
    padding:.7rem 1rem;
    border:2px solid #0a66c2;
    border-radius:999px;
    background:#f8fafc;
    color:#0b0f1a;
    font:700 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    cursor:pointer;
    transition:border-color .15s, box-shadow .15s, background-color .15s;
  }

  .bm-quicknav__select:hover,
  .bm-quicknav__select:focus{
    border-color:#1e63ff;
    background:#fff;
    box-shadow:0 3px 8px rgba(30,99,255,.12);
    outline:none;
  }


  /* Verberg de “Snel naar”-pills op mobiel */
  .bm-chips[aria-label="Snel naar"]{
    display:none !important;
  }
}

/* Pijltje rechts */
.bm-quicknav__wrap::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid #0a66c2;  /* duidelijke blauwe pijl */
  pointer-events:none;
  transition:transform .2s ease;
}

/* Kleine animatie bij hover/focus */
.bm-quicknav__select:hover + .bm-quicknav__wrap::after,
.bm-quicknav__select:focus + .bm-quicknav__wrap::after {
  transform:translateY(-50%) rotate(180deg);
}