/* ================================
   BM Concertagenda CSS
   Only for page ID 177539 (via functions.php)
   Prefix classes with "bm-" to avoid conflicts
   ================================ */

/* ---------- Container & Titel ---------- */
/* Concertagenda = zelfde breedte & uitlijning als header/footer */
/* ---------- Container & Titel (uitlijnen onder header/footer) ---------- */
.bm-concertagenda-wrapper,
.bm-ca {
  /* laat GeneratePress de breedte bepalen (zoals /artikelen/) */
  max-width: none;
  width: 100%;
  margin: 0;                  /* geen extra buitenmarges */
  padding: 0;                 /* geen extra binnenmarges die links “plakken” */
  box-sizing: border-box;
}

/* klein beetje lucht onder de paginatitel, maar niet aan de zijkanten */
.bm-ca { padding-top: 12px; }
@media (min-width: 900px){ .bm-ca { padding-top: 16px; } }


/* Algemene block styling (sidebar blocks) */

.bm-block {
  margin-bottom: 1.5rem;      /* iets meer ruimte onder blok */
  padding: 1rem 1rem 1rem 1rem; /* padding aan alle kanten */
  border-radius: 8px;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd; /* subtiele onderlijn als scheiding */
}

.bm-block-title--highlight {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  color: #003366;
  border-bottom: 0.125rem solid #1e73be;
  padding-bottom: 0.35rem;
}

/* Subtekst (kleinere tekst onder titel) */
.bm-block-sub {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 0.8rem;
}

/* ---------- Nieuwsbrief ---------- */
.bm-newsletter-block {
  background: #f5f5f5; /* zelfde als andere sidebar-blokken */
  color: #000;
  padding: 12px;
  border-radius: 4px;
}

.bm-newsletter-block .bm-block-sub {
  color: #444;
  font-size: 14px;
  margin-bottom: 10px;
}

/* MailPoet velden in sidebar stijl */

.bm-newsletter-block .mailpoet_form {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 14px;
  color: #444;
  line-height: inherit !important;
}

.bm-newsletter-block .mailpoet_form input[type="email"] {
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  margin-bottom: 10px !important;
margin-top: 10px !important;
  font-size: 14px;
}

.bm-newsletter-block .mailpoet_form input[type="submit"],
.bm-newsletter-block .mailpoet_form button {
  width: 100% !important;
 padding: 0.9rem 1rem !important;  /* iets meer hoogte */
  background: #1e73be !important; /* zelfde blauw als datumblok */
  color: #fff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  border: none !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease;
}

.bm-newsletter-block .mailpoet_form input[type="submit"]:hover,
.bm-newsletter-block .mailpoet_form button:hover {
  background: #155d94 !important; /* donkerder blauw bij hover */
}

/* Specifiek input en button in lijn brengen */
.bm-newsletter-block input[type="email"],
.bm-newsletter-block input[type="submit"],
.bm-newsletter-block button {
  font-family: inherit !important;
  font-size: 1rem !important;
  color: #000 !important; /* of kleur van andere blok teksten */
}







/* Concert toevoegen blok - opvallende styling */
.bm-concert-add-block {
  background-color: #003366;
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
}

.bm-block-title--bgdark {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  color: #fff;
  border-bottom: 0.125rem solid #1e73be;
  padding-bottom: 0.35rem;
}

.bm-concert-add-block .bm-block-sub {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
}

.bm-concert-add-block .bm-btn-primary {
  background-color: #1e90ff;
  color: #fff !important;
  font-weight: 700;
  padding: 0.75rem 1.2rem;
  border-radius: 6px;
  display: block;           /* zodat button over de volle breedte gaat */
  width: 100%;              /* volle breedte */
  text-align: center;       /* tekst in het midden */
  transition: background-color 0.3s ease;
  text-decoration: none;    /* geen onderlijning */
}

.bm-concert-add-block .bm-btn-primary:hover {
  background-color: #3aa0ff;
  color: #fff;
text-decoration: none !important;
}




/* Nieuw in de agenda (zijbalk) */
.bm-new-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bm-new-event-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    background: #fff; /* zelfde als main datumblok achtergrond */
    border-radius: 4px;
    padding: 6px 8px;
    transition: background 0.2s ease;
}

.bm-new-event-item:hover {
     background: #eef6fb; /* zelfde hoverkleur als main content */
}

.bm-new-event-date {
 background: #003366; /* zelfde blauw als main datumblok */
    color: #fff;
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
    min-width: 40px;
}

.bm-new-event-date .bm-day {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.1;
}

.bm-new-event-date .bm-month {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1.1;
}

.bm-new-event-text {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    color: #000;
}

.bm-new-event-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
}

.bm-new-event-venue {
    font-size: 12px;
    color: #666;
    line-height: 1.2;
}


/* ---------- Laatste nieuws (sidebar) ---------- */

.bm-latest-news-list { display:flex; flex-direction:column; gap:0.5rem; }

.bm-latest-news-item { display:flex; align-items:center; gap:0.6rem; text-decoration:none; background:#fff; padding:0.45rem; border-radius:6px; color:inherit; }

.bm-latest-news-item:hover { background:#f0f8ff; }

.bm-latest-news-thumb { width:60px; height:60px; overflow:hidden; border-radius:4px; flex-shrink:0; }
.bm-latest-news-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.bm-latest-news-title { color:#003366; font-size:0.95rem; }


/* ---------- Main event list (maak het netjes maar laat plugin markup zoveel mogelijk staan) ---------- */

.bm-concertagenda-wrapper .bm-concertagenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bm-concertagenda-wrapper .bm-concertagenda-item {
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.bm-concertagenda-wrapper .bm-event-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.bm-concertagenda-wrapper .bm-event-link:hover,
.bm-concertagenda-wrapper .bm-event-link:focus {
  background-color: #eef6fb;
  outline: none;
}

/* Datumblok met dag en maand (zoals gisteren) */
.bm-concertagenda-wrapper .bm-date {
  width: 48px;
  height: 48px;
  background: #003366;
  color: #fff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  text-transform: uppercase;
  font-family: "Arial Black", Arial, sans-serif;
  box-shadow: 0 0 5px rgba(0, 80, 158, 0.4);
  transition: background 0.3s ease;
}

.bm-concertagenda-wrapper .bm-date:hover {
  background: #00509e; /* iets minder fel */
}

.bm-concertagenda-wrapper .bm-date .bm-day {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0;
}

.bm-concertagenda-wrapper .bm-date .bm-month {
  font-size: 0.85rem;
  line-height: 1;
  margin-top: 0;
  letter-spacing: 1px;
}

/* Titel en locatie */
.bm-concertagenda-wrapper .bm-title-venue {
  flex: 1;
  display: flex;
  flex-direction: column; /* titel + locatie onder elkaar */
  justify-content: center; /* verticale centrering */
  font-size: 1.25rem;
  color: #000;
  font-weight: 600;
  gap: 2px; /* kleine ruimte tussen titel en locatie */
}

.bm-concertagenda-wrapper .bm-venue {
  font-weight: 400;
  font-size: 1rem;
  color: #333;
  margin: 0; /* margin-left verwijderen, want het zit onder titel */
  line-height: 1.2;
}

/* Maand separator met blauwe lijn links en horizontale lijn */
.bm-concertagenda-wrapper .tribe-events-calendar-list__month-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px 0;
  font-weight: 700;
  color: #1a1a1a;
  position: relative;
}

/* Verticale blauwe lijn */
.bm-concertagenda-wrapper .tribe-events-calendar-list__month-separator::before {
  content: "";
  display: block;
  width: 6px;
  height: 24px;
  background-color: #1e90ff;
  border-radius: 2px;
}

/* Maand titel */
.bm-concertagenda-wrapper .tribe-events-calendar-list__month-separator span {
  white-space: nowrap;
  z-index: 1;
  padding-left: 0;
}

/* Horizontale lijn die de rest van de breedte vult */
.bm-concertagenda-wrapper .tribe-events-calendar-list__month-separator::after {
  content: "";
  flex-grow: 1;
  border-bottom: 1px solid #1e90ff;
  margin-left: 12px;
  transform: translateY(3px);
  z-index: 0;
}

/* Nieuw label */
.bm-date {
    position: relative;
    display: inline-block;
}

.bm-event-new-label {
    background-color: #ff4d4f;
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    position: absolute;
    top: -5px;
    right: -5px;
    white-space: nowrap;
}


/* Concertagenda full-bleed op mobiel */
  /* haal standaard UL-marges weg zodat tekst niet inspringt */
  .bm-concertagenda-list {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none;
  }

  /* maand-separator netjes laten doorlopen */
  .tribe-events-calendar-list__month-separator {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
}












/* === BM Zoekbalk (prominent) === */
.bm-agenda-filters--searchonly{
  /* design tokens */
  --h:56px;                /* veld/knop-hoogte (mobiel wordt 52px) */
  --r:8px;                 /* border-radius */
  --gap:12px;              /* grid gap */
  --pad:16px;              /* binnen-padding container */
  --bg:#003366;            /* donkerblauw paneel */
  --cta:#1e90ff;           /* CTA blauw */
  --cta-shadow:rgba(30,144,255,.25);
  --border:#d8e1ea;        /* grijs voor reset-knop */
  --input-border:#1e73be;  /* input border */
  --text:#fff;

  background:var(--bg);
  color:var(--text);
  border-radius:12px;
  padding:var(--pad);
  display:grid;
  grid-template-columns: 1fr auto auto;  /* input | CTA | reset */
  gap:var(--gap);
  align-items:stretch;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  margin:12px 0 16px;
}

/* input */
.bm-agenda-filters--searchonly input[type="text"]{
  height:var(--h);
  box-sizing:border-box;
  background:#fff;
  color:#0b3b64;
  border:1px solid var(--input-border);
  border-radius:var(--r);
  padding:0 16px;
  font-size:16px;
  line-height:1.2;
}
.bm-agenda-filters--searchonly input::placeholder{ color:#6c85a6; opacity:1; }
.bm-agenda-filters--searchonly input:focus{ outline:2px solid #bfe1ff; outline-offset:2px; }

/* CTA */
.bm-agenda-filters--searchonly .bm-cta-search{
  height:var(--h);
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 22px; white-space:nowrap; border:0; border-radius:var(--r);
  background:var(--cta); color:#fff; cursor:pointer;
  font-size:18.5px; font-weight:900;
  box-shadow:0 6px 14px var(--cta-shadow);
  transition:filter .15s ease, transform .02s;
}
.bm-agenda-filters--searchonly .bm-cta-search:hover{ filter:brightness(1.05); }
.bm-agenda-filters--searchonly .bm-cta-search:active{ transform:translateY(1px); }
.bm-agenda-filters--searchonly .bm-cta-search:focus-visible{ outline:2px solid #bfe1ff; outline-offset:2px; }

/* Reset */
.bm-agenda-filters--searchonly .bm-reset{
  height:var(--h);
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; white-space:nowrap; text-decoration:none;
  background:#e9eef3; color:#003366;
  border:1px solid var(--border);
  border-radius:var(--r);
  font-weight:600;
}

/* optioneel: full-bleed variant */
.bm-agenda-filters--searchonly.bm-wide{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  padding-left:clamp(16px,6vw,28px);
  padding-right:clamp(16px,6vw,28px);
}

/* mobiel */
@media (max-width:768px){
  .bm-agenda-filters--searchonly{
    --h:52px;
    grid-template-columns:1fr;      /* stapelen */
    gap:10px;
    padding:14px;
  }
  .bm-agenda-filters--searchonly .bm-cta-search{ font-size:17px; width:100%; padding:0 18px; }
}












/* Dag-kopjes */
.bm-day-sep{
  list-style:none; margin:12px 0 4px; font-weight:800; color:#003366; padding-top:6px;
}
.bm-day-sep span{ border-bottom:2px solid #e9eef3; display:inline-block; padding-bottom:3px; }

/* Event-rij compact */
.bm-event-row{ list-style:none; border-bottom:1px solid #e9eef3; }
.bm-event-row .bm-event-link{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  gap:12px; padding:10px 0; text-decoration:none; color:inherit;
}
.bm-event-row .bm-artist{ font-weight:700; line-height:1.3; color:#003366; }
.bm-event-row .bm-venue{ color:#333; font-size:14px; white-space:nowrap; }
.bm-event-row .bm-new{
  margin-left:8px; font-size:10px; line-height:1; background:#ffcc00; color:#000;
  border-radius:999px; padding:2px 6px; align-self:center;
}

/* Mobiel: venue onder titel */
@media (max-width:768px){
  .bm-event-row .bm-event-link{ grid-template-columns:1fr; gap:2px; padding:10px 0; }
  .bm-event-row .bm-venue{ white-space:normal; font-size:14px; }
}

/* Compacte 2-koloms rows (minder druk dan datum-badges) */
.bm-list-compact{ margin:0; padding:0; }
.bm-row-compact{ list-style:none; border-bottom:1px solid #e9eef3; }

.bm-link-compact{
  display:grid;
  grid-template-columns: 70px 1fr;   /* datum | tekst */
  gap:12px;
  align-items:center;
  padding:10px 0;
  text-decoration:none;
  color:inherit;
}

.bm-col-date{
  text-align:right;
  font-weight:800;
  color:#003366;
  letter-spacing:.2px;
  min-width:0;
}
.bm-date-d{ font-size:18px; line-height:1; }
.bm-date-m{ font-size:12px; text-transform:uppercase; opacity:.9; }

.bm-col-main{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.bm-title{ font-weight:700; color:#003366; line-height:1.3; }
.bm-venue{ color:#333; font-size:14px; line-height:1.3; }

/* Nieuw-chip subtiel */
.bm-new{
  font-size:10px; line-height:1;
  background:#ffcc00; color:#000;
  border-radius:999px; padding:2px 6px;
}

/* Hover subtiel */
.bm-row-compact:hover{ background:#f7fbff; }

/* Mobiel: datum boven titel of naast? -> we laten 'm naast, maar smaller */
@media (max-width:768px){
  .bm-link-compact{ grid-template-columns: 58px 1fr; gap:10px; padding:10px 0; }
  .bm-date-d{ font-size:17px; }
  .bm-venue{ font-size:14px; }
}

/* Tabel-stijl overzicht */
.bm-table{
  border:1px solid #e6eef7;
  border-radius:8px;
  overflow:hidden;
  margin:8px 0 16px;
  font-size:16px;
  color:#0b3b64;
}
.bm-tr{
  display:grid;
  grid-template-columns: 110px 1fr 280px;
  gap:12px;
  align-items:center;
}

.bm-th, .bm-td{ padding:10px 12px; }
.bm-tr{
  text-decoration:none; /* hele rij klikbaar */
  color:inherit;         /* géén felblauw */
  border-bottom:1px solid #eef3f8;
}
.bm-tr:last-child{ border-bottom:0; }
.bm-tr:nth-child(even){ background:#fafcff; } /* zebra */

.bm-col-date{ text-align:right; font-variant-numeric:tabular-nums; color:#003366; font-weight:700; }
.bm-title{ font-weight:700; color:#003366; }
.bm-col-venue{ color:#333333; font-size:14px; }

/* Nieuw-chip subtiel */
.bm-new{
  margin-left:8px; font-size:10px; line-height:1;
  background:#ffcc00; color:#000; border-radius:999px; padding:2px 6px;
}

/* Hover feedback heel subtiel */
.bm-tr:hover{ background:#f2f8ff; }

/* Mobiel: stapel net en leesbaar */
@media (max-width: 900px){
  .bm-thead{ display:none; } /* header verbergen, we tonen labels via CSS als needed */
  .bm-tr{
    grid-template-columns: 90px 1fr; /* Datum | rest */
    gap:8px;
  }
  .bm-col-venue{ grid-column:1 / -1; padding-top:0; }
  .bm-col-date{ text-align:left; font-weight:700; }
}

/* Nog compacter op small screens */
@media (max-width: 600px){
  .bm-tr{ grid-template-columns: 82px 1fr; }
}

/* ===== Desktop typografie wat groter/ruimer ===== */
@media (min-width: 1024px){
  .bm-table{ font-size:17px; }                   /* basis groter */
  .bm-tr{ gap:14px; }
  .bm-td{ padding:12px 14px; }                   /* iets meer lucht per rij */
  .bm-col-date{ font-size:16px; font-weight:800; }
  .bm-title{ font-size:18.5px; font-weight:800; color:#003366; }
  .bm-col-venue{ font-size:15px; color:#66758a; }
}

/* ===== “Nieuw” prominenter maar stijlvol ===== */
.bm-new{
  margin-left:10px;
  padding:3px 8px;
  font-size:11.5px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
  line-height:1;
  color:#111;                    /* betere leesbaarheid op geel */
  background:#ffbf00;           /* iets warmer dan #ffcc00 */
  border:1px solid #e5a900;     /* subtiele rand */
  border-radius:999px;
  box-shadow:0 2px 8px rgba(255,191,0,.25); /* zachte glow */
}

/* Mobiel: iets compacter houden */
@media (max-width: 768px){
  .bm-title{ font-size:16.5px; }
  .bm-col-venue{ font-size:14px; }
  .bm-new{ font-size:10px; padding:2px 6px; }
}

/* Zorg dat scrollen naar #bm-agenda niet achter de (sticky) header valt */
#bm-agenda{ scroll-margin-top: 96px; }
@media (max-width:768px){ #bm-agenda{ scroll-margin-top: 72px; } }

/* (optioneel) prettige smooth scroll sitewide */
html{ scroll-behavior: smooth; }  /* haal weg als je dit niet wilt */

/* Samenvatting onder zoekveld */
.bm-results-summary{
  margin: 6px 0 10px;
  color:#003366;
}

/* Highlight van zoekterm */
.bm-mark{
  background:#fff3b0;
  padding:0 .1em;
  border-radius:2px;
}














/* Mobiel &#8804;640px: datum zo smal als nodig, rechts titel + venue */
@media (max-width: 640px) {
  .bm-table .bm-tr{
    display: grid !important;
    grid-template-columns: max-content 1fr !important; /* datum krimpt tot "15 feb" */
    column-gap: 8px;   /* minder witruimte tussen kolommen */
    row-gap: 2px;
    align-items: start;
  }

  /* Datum links over 2 rijen, zo smal mogelijk */
  .bm-table .bm-tr .bm-col-date{
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    white-space: nowrap;
    text-align: left;
    font-variant-numeric: tabular-nums;
    padding-left: 0;     /* scheelt weer breedte */
    padding-right: 0;    /* idem */
    letter-spacing: 0;   /* voorkomt ‘lucht’ die breedte vergroot */
    /* optioneel: net iets kleiner:
    font-size: 0.95rem;
    */
  }

  /* Titel rechts (vet) */
  .bm-table .bm-tr .bm-col-title{
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0;
    line-height: 1.1;
  }
  .bm-table .bm-tr .bm-title{ font-weight: 800; }

  /* Venue direct onder de titel */
  .bm-table .bm-tr .bm-col-venue{
    grid-column: 2 !important;   /* overrulet &#8804;900px-regel */
    grid-row: 2 !important;
    margin: 0;
    line-height: 1.15;
    font-weight: 400;
    color: #333;
  }
}


/* ====== BM Concertagenda – 2 kolommen layout ====== */
.bm-ca{ padding:0; } /* laat grid-container de breedte regelen */


.bm-ca-title{
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 8px 0 6px;
  font-weight: 800;
}
.bm-ca-intro{ color:#111; max-width:72ch; }
.bm-ca-intro p{ margin: 0 0 10px; }

/* Grid: links main (flex) | rechts aside vaste kolom */
.bm-ca-grid{
  display: grid;
  grid-template-columns: 1fr 340px;  /* pas 340px aan naar smaak (320–380) */
  gap: 22px;
  align-items: start;
  margin: 14px 0 24px;
}

/* Links */
.bm-ca-main > *:first-child{ margin-top: 0; }

/* Rechts */
.bm-ca-aside{ position: sticky; top: 90px; }
.bm-ca-aside .bm-block{ margin-bottom: 16px; }

/* Responsief */
@media (max-width: 1100px){
  .bm-ca-grid{ grid-template-columns: 1fr 300px; gap: 18px; }
}
@media (max-width: 900px){
  .bm-ca-grid{
    grid-template-columns: 1fr;       /* stapelen op mobiel/tablet */
    gap: 16px;
  }
  .bm-ca-aside{ position: static; top:auto; }
}

/* Zorg dat agenda-lijst netjes schaalt naast de aside */
.bm-table .bm-tr{
  grid-template-columns: 90px 1fr 380px;  /* datum | titel | venue */
}
@media (max-width:1280px){
  .bm-table .bm-tr{ grid-template-columns: 88px 1fr 320px; }
}
@media (max-width:900px){
  .bm-table .bm-tr{ grid-template-columns: 88px 1fr; }
  .bm-col-venue{ grid-column: 1 / -1; }
}

/* Optioneel: venue enkelregelig op desktop */
.bm-col-venue{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width:900px){
  .bm-col-venue{ white-space: normal; }
}






/* Grid netjes vanaf bovenkant laten starten */
.bm-ca-grid{ 
  display:grid; 
  grid-template-columns: 1fr 340px; 
  gap:22px; 
  align-items:start; 
  margin:0 0 24px;      /* geen extra top-margin meer */
}

/* Header spacing strak */
.bm-ca-header{ margin: 0 0 10px; }
.bm-ca-title{ margin: 0 0 6px; font-size: clamp(24px,3.2vw,34px); font-weight:800; }
.bm-ca-intro{ color:#111; max-width:72ch; }
.bm-ca-intro p{ margin: 0 0 10px; }

/* Aside mag vastplakken aan top zoals intro */
.bm-ca-aside{ position: sticky; top: 90px; }

@media (max-width: 900px){
  .bm-ca-grid{ grid-template-columns: 1fr; gap:16px; }
  .bm-ca-aside{ position: static; top:auto; }
}




/* onze 2-koloms grid vult nu netjes de container */
.bm-ca .bm-ca-grid{
  width: 100%;
  margin: 0;           /* geen extra witruimte rechts */
}


/* klein beetje lucht onder de header */
.bm-ca{ padding-top: 12px; }
@media (min-width: 900px){ .bm-ca{ padding-top: 16px; } }

/* horizontale uitlijning exact als header/footer (GeneratePress spacing) */
.bm-ca{
  padding-left: var(--gp-spacing, 28px);
  padding-right: var(--gp-spacing, 28px);
  padding-top: 12px;
}
@media (min-width:900px){
  .bm-ca{ padding-top:16px; }
}


/* ==== Uitlijning exact onder logo/nav (GeneratePress) ==== */
:root{
  /* Fallbacks; GP zet vaak een content-variabele. */
  --bm-container: var(--content-width, 1280px);
  --bm-spacing:   var(--gp-spacing, 28px);
}





/* --- Guard the search grid so it never collapses --- */
.bm-agenda-filters--searchonly{
  width: 100%;
  min-width: 0;
}

.bm-agenda-filters--searchonly input[type="text"]{
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}






/* Concertagenda page should line up with header/footer inner width */
body.page-slug-concertagenda .bm-ca,
body.page-slug-concertagenda .bm-concertagenda-wrapper{
  /* 1200px matches GP's default container width. 
     If you changed the Container Width in the Customizer, 
     set that number here as well. */
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;   /* same side padding as header */
  padding-right: 20px;
}

/* Make sure nothing forces it back to full-bleed */
body.page-slug-concertagenda .bm-concertagenda-wrapper{
  width: auto;
  max-width: 1280px;
}




/* Herstel/vaste layout van de zoekbalk */
.bm-agenda-filters--searchonly{
  display: grid;                 /* zeker weten: grid blijft grid */
  grid-template-columns: 1fr auto auto;
  width: 100%;
  min-width: 0;
}

.bm-agenda-filters--searchonly input[type="text"]{
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* mobiel stapelen blijft zoals eerder */
@media (max-width:768px){
  .bm-agenda-filters--searchonly{ grid-template-columns: 1fr; }
}




/* Concertagenda: maak de content net zo breed als header/footer (1280) */
body.page-slug-concertagenda .grid-container {
  max-width: 1280px;         /* jouw sitebreedt */
  padding-left: 0;           /* haal GP binnenpadding weg */
  padding-right: 0;
}

/* GP voegt vaak nog padding toe in de article-wrapper: ook weg */
body.page-slug-concertagenda .inside-article {
  padding-left: 0;
  padding-right: 0;
}

/* hou onze eigen wrapper strak aan de randen van de container */
body.page-slug-concertagenda .bm-concertagenda-wrapper,
body.page-slug-concertagenda .bm-ca {
  padding-left: 0;
  padding-right: 0;
}




/* ===== Fix width & side spacing ONLY on /concertagenda/ ===== */

/* Kill all side paddings that GP adds on this page */
body.page-slug-concertagenda .site-content .content-area,
body.page-slug-concertagenda .site-main,
body.page-slug-concertagenda .site-main > .grid-container,
body.page-slug-concertagenda .site-content > .grid-container,
body.page-slug-concertagenda .grid-container,
body.page-slug-concertagenda .inside-article,
body.page-slug-concertagenda .entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Center the content and match header/footer inner width */
body.page-slug-concertagenda .site-main > .grid-container,
body.page-slug-concertagenda .site-content > .grid-container,
body.page-slug-concertagenda .bm-ca,
body.page-slug-concertagenda .bm-concertagenda-wrapper {
  max-width: 1280px;     /* match your header/footer width */
  margin-left: auto;
  margin-right: auto;
}

/* If GP uses separate containers, also remove the inner container padding */
body.page-slug-concertagenda.separate-containers .site-main > .grid-container,
body.page-slug-concertagenda.separate-containers .inside-article {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Restore the blue search panel look (beat GP’s form styles) ===== */

body.page-slug-concertagenda .bm-agenda-filters--searchonly {
  background: #003366 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

/* Inputs/Buttons inside searchbar */
body.page-slug-concertagenda .bm-agenda-filters--searchonly input[type="text"] {
  height: 56px !important;
  background: #fff !important;
  color: #0b3b64 !important;
  border: 1px solid #1e73be !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.page-slug-concertagenda .bm-agenda-filters--searchonly .bm-cta-search {
  height: 56px !important;
  border-radius: 8px !important;
  background: #1e90ff !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 22px !important;
  font-weight: 900 !important;
}

body.page-slug-concertagenda .bm-agenda-filters--searchonly .bm-reset {
  height: 56px !important;
  border-radius: 8px !important;
  background: #e9eef3 !important;
  color: #003366 !important;
  border: 1px solid #d8e1ea !important;
  padding: 0 12px !important;
}

/* Mobile: keep the stack */
@media (max-width: 768px){
  body.page-slug-concertagenda .bm-agenda-filters--searchonly {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  body.page-slug-concertagenda .bm-agenda-filters--searchonly .bm-cta-search {
    width: 100% !important;
  }
}




/* === Concertagenda: negeer GP-padding, centreer op 1280 === */

/* 1) Trek de agenda-wrapper full-bleed, voorbij theme-paddings */
.bm-ca {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 2) Centreer alle inhoud binnen de agenda weer strak op 1280px */
.bm-ca .bm-ca-grid {
  max-width: 1280px;      /* zet hier jouw site-breedte */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* 3) Zelfde behandeling voor de zoekbalk/intro die boven de grid staan */
.bm-ca-header,
.bm-agenda-filters--searchonly {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* 4) Zorg dat de zoekbalk zijn blauwe paneel-styling weer pakt (specifiek & !important) */
.bm-ca .bm-agenda-filters--searchonly {
  background: #003366 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

.bm-ca .bm-agenda-filters--searchonly input[type="text"] {
  height: 56px !important;
  background: #fff !important;
  color: #0b3b64 !important;
  border: 1px solid #1e73be !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.bm-ca .bm-agenda-filters--searchonly .bm-cta-search {
  height: 56px !important;
  border-radius: 8px !important;
  background: #1e90ff !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 22px !important;
  font-weight: 900 !important;
}

.bm-ca .bm-agenda-filters--searchonly .bm-reset {
  height: 56px !important;
  border-radius: 8px !important;
  background: #e9eef3 !important;
  color: #003366 !important;
  border: 1px solid #d8e1ea !important;
  padding: 0 12px !important;
}

/* Mobiel: stapelen blijft */
@media (max-width: 768px){
  .bm-ca .bm-agenda-filters--searchonly { grid-template-columns: 1fr !important; gap: 10px !important; padding: 14px !important; }
  .bm-ca .bm-agenda-filters--searchonly .bm-cta-search { width: 100% !important; }
}






/* --- RESET: don't pull the agenda full-bleed --- */
.bm-ca{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- CENTER all direct sections of the agenda on a fixed inner width --- */
.bm-ca > *{
  /* match your site’s inner width; change if needed */
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Header, zoekbalk, grid expliciet meepakken (veilig) */
.bm-ca-header,
.bm-agenda-filters--searchonly,
.bm-ca .bm-ca-grid{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Stop eventuele “full-bleed” marges op de zoekbalk --- */
.bm-agenda-filters--searchonly,
.bm-agenda-filters--searchonly.bm-wide{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Herstel de blauwe zoekbalk-styling (als iets het overschrijft) --- */
.bm-ca .bm-agenda-filters--searchonly{
  background:#003366 !important;
  color:#fff !important;
  border-radius:12px !important;
  padding:16px !important;
  display:grid !important;
  grid-template-columns:1fr auto auto !important;
  gap:12px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.08) !important;
}
.bm-ca .bm-agenda-filters--searchonly input[type="text"]{
  height:56px !important;
  background:#fff !important;
  color:#0b3b64 !important;
  border:1px solid #1e73be !important;
  border-radius:8px !important;
  padding:0 16px !important;
  width:100% !important;
}
.bm-ca .bm-agenda-filters--searchonly .bm-cta-search{
  height:56px !important;
  border-radius:8px !important;
  background:#1e90ff !important;
  color:#fff !important;
  border:0 !important;
  padding:0 22px !important;
  font-weight:900 !important;
}
.bm-ca .bm-agenda-filters--searchonly .bm-reset{
  height:56px !important;
  border-radius:8px !important;
  background:#e9eef3 !important;
  color:#003366 !important;
  border:1px solid #d8e1ea !important;
  padding:0 12px !important;
}

/* Mobiel stapelen blijft */
@media (max-width:768px){
  .bm-ca .bm-agenda-filters--searchonly{ grid-template-columns:1fr !important; gap:10px !important; padding:14px !important; }
  .bm-ca .bm-agenda-filters--searchonly .bm-cta-search{ width:100% !important; }
}








/* === Concertagenda: lijn links exact met de container === */
/* haal de overgebleven content-padding van GP weg op deze pagina */
body.page-slug-concertagenda .entry-content,
body.page-slug-concertagenda .inside-article {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* main-rail: geen extra padding/marges */
body.page-slug-concertagenda .bm-ca-header,
body.page-slug-concertagenda .bm-ca-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* kinderen in de main netjes tegen de linker rand */
body.page-slug-concertagenda .bm-agenda-filters--searchonly,
body.page-slug-concertagenda .bm-table,
body.page-slug-concertagenda .tribe-events-calendar-list__month-separator {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* optioneel: intro wat breder zodat rechts minder “lucht” oogt */
.bm-ca-intro { max-width: none; }





/* ========= Kopstijl zoals /artikelen/ ========= */
body.page-slug-concertagenda .entry-content h1:first-of-type,
body.page-slug-concertagenda .bm-ca-title {
  position: relative;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  margin: 0 0 10px 0;
  padding-left: 18px;              /* ruimte voor blauwe balk */
  color: #0b0b0b;
}

/* Blauwe verticale lijn links van H1 */
body.page-slug-concertagenda .entry-content h1:first-of-type::before,
body.page-slug-concertagenda .bm-ca-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  width: 6px;
  height: 0.92em;                  /* loopt mee met font-size */
  background: #1e73be;
  border-radius: 3px;
}

/* Subtitel/intro-kop (het tweede kopje direct onder H1) */
body.page-slug-concertagenda .entry-content h2:first-of-type {
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  margin: 8px 0 14px 0;
  color: #0b0b0b;
}

/* Dunne scheidingslijn onder de hero-tekst zoals op /artikelen/ */
body.page-slug-concertagenda .bm-ca-intro {
  padding-bottom: 8px;
  border-bottom: 2px solid #e9eef3;
  margin-bottom: 14px;
}

/* Kopjes in de zijbalk consistent */
body.page-slug-concertagenda .bm-block-title--highlight {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 .5rem 0;
  border-bottom: 3px solid #1e73be; /* iets dikker, matching stijl */
  padding-bottom: .35rem;
}

/* Maand-separator subtieler (matcht lijnen op /artikelen/) */
body.page-slug-concertagenda .tribe-events-calendar-list__month-separator::before {
  width: 5px;
  height: 22px;
  background: #1e73be;
  border-radius: 3px;
}
body.page-slug-concertagenda .tribe-events-calendar-list__month-separator::after {
  border-bottom-color: #e9eef3;
}
body.page-slug-concertagenda .tribe-events-calendar-list__month-separator span {
  font-weight: 800;
  color: #0b0b0b;
}

/* Extra: knoppen iets strakker zoals /artikelen/ */
body.page-slug-concertagenda .bm-cta-search,
body.page-slug-concertagenda .bm-btn-primary {
  border-radius: 10px;
  font-weight: 800;
}





/* Zelfde binnenbreedte & kopstijl als /artikelen/ */
.bm-archive--clean.bm-ca-clean .bm-arch-wrap { max-width: var(--content-width, 1280px); margin: 0 auto; }

/* 2-koloms grid in dezelfde geest als /artikelen/ */
.bm-ca-grid{
  display:grid;
  grid-template-columns: 1fr 340px; /* main | aside */
  gap: 22px;
  align-items:start;
}

@media (max-width: 1100px){
  .bm-ca-grid{ grid-template-columns: 1fr 300px; gap:18px; }
}
@media (max-width: 900px){
  .bm-ca-grid{ grid-template-columns: 1fr; gap:16px; }
  .bm-ca-aside{ position: static; top:auto; }
}

/* Intro onderlijntje zoals /artikelen/ */
.bm-arch-sub.bm-ca-intro { padding-bottom: 8px; border-bottom: 2px solid #e9eef3; margin-bottom: 14px; }

/* Zoekbalk/agenda vullen de main-kolom (geen extra zij-padding) */
.bm-ca-main > .bm-concertagenda-wrapper { padding-left: 0; padding-right: 0; }






/* === Concertagenda (mobile): verwijder extra space links/rechts === */
@media (max-width: 768px){

  /* laat de wrapper buiten de GP-padding vallen, maar behoud 16px gutters */
  .bm-ca{
    padding-left: 0 !important;
    padding-right:0 !important;
  }

  /* blokken binnen .bm-ca netjes tot aan de gutter */
  .bm-ca .bm-agenda-filters--searchonly,
  .bm-ca .bm-results-summary,
  .bm-ca .tribe-events-calendar-list__month-separator,
  .bm-ca .bm-table{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* iets compacter binnen de event-rijen */
  .bm-ca .bm-table .bm-td{
    padding-left: 10px;
    padding-right: 10px;
  }
}













/* ===== MOBIEL: compacte 1-regel event weergave ===== */
@media (max-width: 640px){
  /* verberg desktop-kolommen */
  .bm-concertagenda-wrapper .bm-table .bm-col-date,
  .bm-concertagenda-wrapper .bm-table .bm-col-title,
  .bm-concertagenda-wrapper .bm-table .bm-col-venue{
    display: none !important;
  }

  /* toon de compacte regel */
  .bm-concertagenda-wrapper .bm-table .bm-mobile-line{
    display: block;
    font-weight: 800;
    color: #0b3b64;
    line-height: 1.35;
    padding: 10px 0 8px;
  }

  /* het klikbare kaartje mag simpel blok worden */
  .bm-concertagenda-wrapper .bm-table .bm-tr{
    display: block;
    padding: 12px 14px;
  }
}

/* Desktop/tablet: mobiele regel verbergen */
@media (min-width: 641px){
  .bm-concertagenda-wrapper .bm-table .bm-mobile-line{ display:none; }
}




/* Mobiel: laat één-regel samenvatting zien, verberg desktop-kolommen */
@media (max-width: 640px){
  .bm-tr { position: relative; display: block; padding: 10px 0; }
  .bm-tr .bm-td { display: none; }           /* verberg de 3 kolommen */
  .bm-tr .bm-mobile-line { display: block; font-weight: 700; line-height: 1.25; }
}
@media (min-width: 641px){
  .bm-tr .bm-mobile-line { display: none; }  /* desktop: juist verbergen */
}











/* Standaard: mobiele elementen verbergen */
.bm-mobile-date,
.bm-mobile-line { display: none; }

/* Alleen mobiel (≤640px): desktopkolommen verbergen; mobiele weergave tonen */
@media (max-width: 640px){
  /* Verberg de 3 desktop TD's binnen de klikbare rij */
  .bm-tr .bm-td { display: none !important; }

  /* Toon mobiele datum-vierkantje + één-regel tekst */
  .bm-mobile-date,
  .bm-mobile-line { display: inline-block; vertical-align: middle; }

  /* Datum-vierkantje stijl (compact) */
  .bm-mobile-date{
    width: 36px; height: 36px;
    margin-right: 8px;
    background: #003366; color: #fff;
    border-radius: 6px;
    font-weight: 800; line-height: 1; text-transform: uppercase;
    display: inline-flex; align-items: center; justify-content: center;
    flex-direction: column;
    box-shadow: 0 0 5px rgba(0,80,158,.25);
  }
  .bm-mobile-date .bm-day{ font-size: 1rem; }
  .bm-mobile-date .bm-month{ font-size: .7rem; letter-spacing: .5px; }

  /* Mobiele tekst (Titel – Stad) */
  .bm-mobile-line{
    font-weight: 700;
    line-height: 1.3;
    max-width: calc(100% - 44px); /* naast het vierkantje */
  }
}


/* Mobiel: geen "Nieuw"-badge; subtiel bolletje achter de mobiele regel */
@media (max-width: 640px){
  .bm-new{ 
    display: none !important;  /* verberg chip op mobiel */
  }
  .bm-tr.is-new .bm-mobile-line::after{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffbf00;       /* zacht geel */
    margin-left:8px;
    vertical-align:middle;
  }
}




/* Nieuw in de agenda – 1 regel + datum-vierkantje */
.bm-new-events-list{ display:flex; flex-direction:column; gap:8px; }

.bm-new-event-item{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; background:#fff;
  border-radius:6px; padding:8px 10px;
  color:inherit; transition:background .15s ease;
}
.bm-new-event-item:hover{ background:#f2f8ff; }

/* Zelfde stijl als mobiel datum-badge */
.bm-mini-date{
  width:40px; height:40px; border-radius:6px;
  background:#003366; color:#fff; display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  line-height:1; font-weight:800; text-transform:uppercase;
  box-shadow:0 0 5px rgba(0,80,158,.35);
  flex:0 0 40px;
}
.bm-mini-day{ font-size:16px; }
.bm-mini-mon{ font-size:11px; letter-spacing:.5px; }

/* Eén regel tekst naast het vierkantje */
.bm-new-event-line{ display:block; font-size:14.5px; line-height:1.25; color:#003366; }

/* Klein tikje compacter op mobiel */
@media (max-width:768px){
  .bm-new-event-item{ padding:8px; gap:8px; }
  .bm-new-event-line{ font-size:14px; }
}








/* TEC event list: venue duidelijker op desktop */
@media (min-width: 901px){
  .bm-table .bm-tr .bm-col-venue{
    color: #1f2937;          /* donkerder (betere contrast) */
    font-weight: 600;        /* iets vetter */
    font-size: 1rem;         /* 16px; evt. 17px als je wilt */
    letter-spacing: .1px;
  }
  /* links in venue dezelfde, duidelijke stijl geven */
  .bm-table .bm-tr .bm-col-venue a{
    color: inherit;
    text-decoration: none;
  }
  .bm-table .bm-tr:hover .bm-col-venue a{
    text-decoration: underline; /* subtiele cue bij hover, optioneel */
  }
}

@media (min-width: 1024px){ .bm-col-venue{ color:#66758a; } }



