/*
 Theme Name:   BluesMagazine Child
 Theme URI:    https://www.bluesmagazine.nl/
 Description:  Child theme for GeneratePress with custom footer/header styling
 Author:       Blues Magazine
 Author URI:   https://www.bluesmagazine.nl/
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  bluesmagazine-child
*/

/* Place your custom CSS below this line */

/* Example: keep body visible during testing */
/* body{ outline: 0 !important; } */



/* =========================================================
   BLUES MAGAZINE — CLEAN EXTRA CSS (GeneratePress)
   ========================================================= */



/* HEADER */


/* ---------- 0) Kleine helpers ---------- */

/* Verberg "Menu" label bij mobiele toggle (GP + WP core) */
.menu-toggle .gp-icon + span,
.wp-block-navigation__responsive-container-open__label { display: none !important; }

/* Herbruikbare pill-stijl voor Search (desktop & mobiel) */
.search-pill .wp-block-search__input{
  border: 2px solid #0066cc;
  border-radius: 28px;
  background: #f4f8ff;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
}
.search-pill .wp-block-search__button{
  background: #0066cc;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  line-height: 1;
}

/* ---------- 1) Zoekband (onder logo, alleen mobiel zichtbaar) ---------- */

/* De zoekband zelf (full-width band met subtiele lijn) */
.searchbar-band { 
  border-bottom: 1px solid #e6e6e6;   /* laat staan; evt. later uitzetten */
  padding: 12px 0 20px;               /* top 12px, bottom 20px */
}

/* Binnen de band: contained breedte + zij-padding */
.searchbar-band .grid-container {
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

/* Mobiele verfijning voor de pill en padding */
@media (max-width: 768px){
  .searchbar-band .grid-container { padding-left: 20px; padding-right: 20px; }
  .searchbar-band .search-pill .wp-block-search__input{
    border-width: 1.5px;
    border-radius: 20px;
    background: #f5faff;
    padding: 10px 12px;
    font-size: 16px;
  }
  .searchbar-band .search-pill .wp-block-search__button{ padding: 10px 12px; }
  .searchbar-band .search-pill .wp-block-search__input::placeholder{ color: #7a7a7a; opacity: 1; }
}

/* Zoekband verbergen op desktop/tablet (we tonen daar de rechter-zoekbalk) */
@media (min-width: 992px){
  .searchbar-band{ display: none !important; }
}

/* ---------- 2) Desktop header (logo links + zoek rechts) ---------- */

@media (min-width: 992px){
  /* Header inhoud op één lijn, zoekveld naar rechts */
  .inside-header{
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 4px; /* compacte afstand header → nav */
  }
  .header-right-search{
    margin-left: auto;       /* duwt zoekveld naar rechts */
    max-width: 480px;        /* pas 420–520px naar wens */
    width: 100%;
  }
  .header-right-search .wp-block-search,
  .header-right-search .wp-block-search__inside-wrapper,
  .header-right-search .wp-block-search__input{
    width: 100%;
    box-sizing: border-box;
  }

  /* Geen scheidingslijnen op desktop */
  .site-header{ border-bottom: 0 !important; }
  .main-navigation{ border-top: 0 !important; border-bottom: 0 !important; }
}

/* ---------- 3) Desktop navigatie: ruimte + underline onder tekst ---------- */

@media (min-width: 992px){
  /* Ruimte tussen items (moderne GP = flex gap; fallback via margins) */
  .main-navigation .main-nav > ul{ column-gap: 34px; } /* pas 28–40 naar smaak */
  .main-navigation .main-nav > ul > li{ margin: 0 17px; } /* fallback */

  /* Link-stijl: zwart basis, strakke underline alleen onder tekst */
  .main-navigation .main-nav > ul > li > a{
    display: inline-block;             /* krimpt tot tekstbreedte */
    color: #111;
    text-decoration: none;
    padding: 0 2px 6px 2px;            /* kleine buffer + ruimte voor streep */
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
    line-height: 1.2;
  }
  .main-navigation .main-nav > ul > li > a:hover,
  .main-navigation .main-nav > ul > li > a:focus{
    color: #0066cc;
    border-bottom-color: #0066cc;
  }
  .main-navigation .main-nav > ul > li.current-menu-item > a,
  .main-navigation .main-nav > ul > li.current-menu-ancestor > a{
    color: #0066cc;
    border-bottom-color: #0066cc;
  }
}

/* ---------- 4) Mobiele details ---------- */

/* Hamburger iets groter (GP & WP core) */
@media (max-width: 768px){
  .menu-toggle .gp-icon svg{ width: 32px; height: 32px; }
  .wp-block-navigation__responsive-container-open .wp-block-navigation__responsive-container-open__icon{
    transform: scale(1.2);
    transform-origin: center;
  }
}







/* === Desktop: lijn + spacing rondom navigatie (≥992px) === */
@media (min-width: 992px){
  /* meer ruimte tussen logo-rij en navigatie-rij */
  .inside-header{ padding-bottom: 10px !important; }

  /* lijn onder de menubalk + wat lucht onder het menu */
  .main-navigation{
    margin-top: 8px !important;              /* extra lucht boven de nav */
    border-bottom: 1px solid #e6e6e6 !important; /* grijze lijn onder nav */
    padding-bottom: 12px !important;         /* extra lucht onder de nav */
  }
}



/* Desktop: ruimte tussen logo-rij en nav met lichtgrijze bg */
@media (min-width: 992px){
  .site-header{
    background: #fafafa;           /* jouw lichtgrijs */
    padding-bottom: 15px !important;/* ruimte onder logo-rij */
  }
  .main-navigation{
    margin-top: 0 !important;      /* geen witte gap meer */
    /* laat je border-bottom en padding-bottom hier gewoon staan */
  }
}







/* FOOTER */


/* =========================
   FOOTER (Blok 1, 2, 3)
   ========================= */

/* ---- Kleuren (optioneel) ---- */
:root{
  --bm-navy:    #0e111f;
  --bm-navy-2:  #000000;
  --bm-text:    #e9eef6;
  --bm-muted:   #cfd6e0;
  --bm-sep:     #9aa7b7;
  --bm-sep-2:   #6c7a89;
  --bm-accent:  #e23a3a;  /* rood lijntje */
  --bm-gold:    #ffd54a;  /* hover/focus */
  --bm-link:    #ffffff;
}

/* =========================
   BLOK 1 — Browse Topics
   ========================= */
.bm-topics{
  background: var(--bm-navy);
  border-top: 4px solid var(--bm-accent);
  padding: 24px 0 12px;
  text-align: center;
}
.bm-topics h2{
  color: var(--bm-link);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 20px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--bm-accent); /* rode underline */
  display: inline-block;
}

/* Horizontale lijst + bullets weg; robuust voor core List en <ul> */
.bm-topics nav ul,
.bm-topics .wp-block-list,
.bm-topics ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  column-gap: 32px !important;  /* desktop spacing */
  row-gap: 16px !important;
  line-height: 1.6;
}
.bm-topics li{ margin: 0 !important; }

/* Linkstijlen + toegankelijkheid */
.bm-topics a,
.bm-topics :where(a:link, a:visited, a:hover, a:active){
  color: var(--bm-link) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.bm-topics a:hover,
.bm-topics a:focus{
  color: var(--bm-gold) !important;
  text-decoration: underline !important;
  outline: 3px solid transparent; /* visueel via kleur, geen dubbele ring */
  outline-offset: 2px;
}

/* Mobiel compacter */
@media (max-width: 768px){
  .bm-topics h2{ font-size: 20px; }
  .bm-topics nav ul,
  .bm-topics .wp-block-list{
    column-gap: 16px !important;
    row-gap: 8px !important;
  }
}

/* =========================
   BLOK 2 — Footer Widgets
   ========================= */
.footer-widgets{
  background: var(--bm-navy);
  color: var(--bm-text);
  padding: 30px 0;
}

/* Titels met rode lijn ONDER */
.footer-widgets h3{
  color: var(--bm-link);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
  padding: 0 0 6px;
  border-bottom: 3px solid var(--bm-accent);
}

/* Tekst & lijsten */
.footer-widgets p,
.footer-widgets li{ color: var(--bm-muted); margin-bottom: 10px; }
.footer-widgets ul{ list-style: none; margin: 0; padding: 0; }

/* Links consistent met Blok 1 */
.footer-widgets a{
  color: var(--bm-link) !important;
  text-decoration: none;
  font-weight: 600;
}
.footer-widgets a:hover,
.footer-widgets a:focus{
  color: var(--bm-gold) !important;
  text-decoration: underline;
  outline: none;
}
.footer-widgets a:visited{ color: #d0e4ff !important; }

/* Nieuwsbriefformulier */
.footer-widgets .bm-nieuwsbrief input[type="email"]{
  width: 100%; max-width: 260px;
  background: #e9eef6; color: var(--bm-navy);
  border: 0; border-radius: 8px; padding: 10px 12px;
}
.footer-widgets .bm-nieuwsbrief input::placeholder{ color: #6b7280; opacity: 1; }

.footer-widgets .bm-nieuwsbrief button{
  background: #3b82f6; color: #fff;
  border: 0; border-radius: 8px;
  padding: 10px 14px; font-weight: 700; cursor: pointer;
  transition: filter .2s ease, transform .02s ease;
}
.footer-widgets .bm-nieuwsbrief button:hover{ filter: brightness(1.12); }
.footer-widgets .bm-nieuwsbrief button:active{ transform: translateY(1px); }
.footer-widgets .bm-nieuwsbrief input:focus,
.footer-widgets .bm-nieuwsbrief button:focus{
  outline: 3px solid var(--bm-gold); outline-offset: 2px;
}

/* Socials met iconen */
.footer-widgets .bm-socials{ list-style: none; margin: 8px 0 0; padding: 0; }
.footer-widgets .bm-socials li{ margin-bottom: 8px; }
.footer-widgets .bm-socials a{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--bm-link); text-decoration: none; font-weight: 600;
}
.footer-widgets .bm-socials a:hover,
.footer-widgets .bm-socials a:focus{ color: var(--bm-gold); text-decoration: underline; }
.footer-widgets .bm-socials svg{ display: inline-block; vertical-align: middle; }

/* Titelafstand tussen nieuwsbrief en socials */
.footer-widgets .bm-socials-title{ margin-top: 24px; }

/* =========================
   BLOK 3 — Site Info bar
   ========================= */
.bm-site-info{
  background: var(--bm-navy-2);
  color: var(--bm-muted);
}
.bm-site-info__inner{
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: grid; gap: 16px; align-items: center;
  grid-template-columns: 1fr auto auto; /* copy | legal | back-to-top */
}
.bm-copy{ margin: 0; color: var(--bm-sep); }

/* Juridische links subtieler */
.bm-legal{ display: flex; gap: 10px; align-items: center; }
.bm-legal a{
  color: var(--bm-sep) !important;
  font-weight: 400; font-size: 14px;
  text-decoration: none;
}
.bm-legal a:hover,
.bm-legal a:focus{ color: var(--bm-gold) !important; text-decoration: underline; }
.bm-legal .sep{ color: var(--bm-sep-2); }

/* Back to top – aparte kolom + scheidingslijn */
.bm-backtotop{
  margin-left: 20px; padding-left: 20px;
  border-left: 1px solid var(--bm-sep);
  color: var(--bm-link); font-weight: 700; text-decoration: none;
}
.bm-backtotop:hover,
.bm-backtotop:focus{ color: var(--bm-gold); text-decoration: underline; outline: none; }

/* Responsief stapelen en netjes centreren */
@media (max-width: 680px){
  .bm-site-info__inner{
    grid-template-columns: 1fr;
    gap: 8px; text-align: center;
    padding: 12px 16px;
  }
  .bm-copy{
    font-size: 14px; line-height: 1.4;
    margin: 0 auto 4px;
    white-space: nowrap; /* één regel */
  }
  .bm-legal{ justify-content: center; flex-wrap: wrap; column-gap: 10px; row-gap: 4px; margin: 0 auto; }
  .bm-legal a{ font-size: 14px; }
  .bm-backtotop{
    display: inline-block; margin: 6px auto 0;
    padding-left: 0; border-left: none; /* lijn weg op mobiel */
  }
}





/* ================================
   Blues Magazine — Spacing Utilities
   (globaal toepasbaar)
   ================================ */

/* Margin-bottom */
.bm-mb-8  { margin-bottom: 8px  !important; }
.bm-mb-16 { margin-bottom: 16px !important; }
.bm-mb-24 { margin-bottom: 24px !important; }
.bm-mb-40 { margin-bottom: 40px !important; }

/* Margin-top */
.bm-mt-8  { margin-top: 8px  !important; }
.bm-mt-16 { margin-top: 16px !important; }
.bm-mt-24 { margin-top: 24px !important; }
.bm-mt-40 { margin-top: 40px !important; }

/* Padding (optioneel, zelfde schaal) */
.bm-pt-16 { padding-top: 16px !important; }
.bm-pt-24 { padding-top: 24px !important; }
.bm-pt-40 { padding-top: 40px !important; }
.bm-pb-16 { padding-bottom: 16px !important; }
.bm-pb-24 { padding-bottom: 24px !important; }
.bm-pb-40 { padding-bottom: 40px !important; }












/* =======================
   SINGLE — MOBILE TUNE-UP
   ======================= */
@media (max-width: 768px){

  /* Container & header */
  .bm-single{ padding: 0 16px; }
  .bm-head{ padding: 10px 0 8px; }

  /* Titel & excerpt (netter ritme) */
  .bm-title{
    font-size: clamp(22px, 6.2vw, 28px);
    line-height: 1.18;
    margin: 6px 0 8px;
    padding-left: 14px;
  }
  .bm-title::before{ width: 7px; top: .06em; bottom: .06em; }
  .bm-excerpt{
    font-size: clamp(16px, 4.8vw, 18px);
    line-height: 1.55;
    margin: 8px 0 10px;
  }

  /* Hero: iets hoger is vaak mooier op mobiel */
  .bm-hero{ aspect-ratio: 5 / 4 !important; }
  .bm-hero img{ object-position: 50% 18% !important; } /* lichte topfocus */

  /* Meta + share */
  .bm-meta-share{
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 6px;
  }
  .bm-meta{ gap: 10px; font-size: 14px; }
  .bm-meta .bm-pipe{ opacity: .3; }

  .bm-share{
    flex: 0 0 100%;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 2px;
  }
  .bm-share-label{
    display: inline-block; margin: 4px 8px 0 0;
    font-weight: 700; font-size: 14px; color: #5a6b7f;
  }
  .bm-share a{ width: 36px; height: 36px; }
  .bm-share a svg{ width: 16px; height: 16px; }

  /* Content leesmaat & media veiligheid */
  .bm-single .entry-content{ font-size: 17px; line-height: 1.7; }
  .bm-single .entry-content img,
  .bm-single .entry-content iframe,
  .bm-single .entry-content video{ max-width: 100% !important; height: auto; }
  .bm-single .entry-content table{ display: block; overflow-x: auto; }

  /* Tags: compacter + duidelijke scheiding */
  .bm-tags{
    margin: 16px 0 20px;
    padding-top: 12px;
    border-top: 1px solid #e8ecf3;
  }
  .bm-tags a{ padding: 6px 10px; font-size: 12px; }

  /* Vorige/Volgende: full-width buttons onder elkaar */
  .bm-postnav{
    margin: 18px 0 24px;
    padding-top: 12px;
    border-top: 1px solid #e8ecf3;
    flex-direction: column; gap: 10px;
  }
  .bm-postnav a{ width: 100%; justify-content: center; padding: 12px 14px; }

  /* Comments: titel los van nav, extra adem richting footer */
  .bm-single .comments-area{
    border-top: 1px solid #e8ecf3;
    padding-top: 16px;
    margin-bottom: 64px;
  }
  .bm-single .comment-form #submit{
    width: 100%;           /* lekkere tap-target */
    height: 48px;
    margin-top: 10px;
    font-size: 16px;
  }

  /* Sidebar-blokken: luchtig stapelen onder content */
  .bm-aside{ margin-top: 6px; }
  .bm-aside-stack{ gap: 18px; }
  .bm-side-card{ padding: 16px; }
  .bm-side-title{ font-size: 22px; margin-bottom: 10px; }

  /* CTA “Deel je nieuws!” – zelfde hover-gevoel blijft gelden */
  .bm-cta-dark .bm-btn-primary{
    height: 48px; font-size: 16px;
    text-decoration: none !important;
  }
}

/* Extra small fine-tune (≤380px) */
@media (max-width: 380px){
  .bm-share a{ width: 34px; height: 34px; }
  .bm-share a svg{ width: 15px; height: 15px; }
  .bm-title{ font-size: clamp(20px, 6.8vw, 26px); }
}






/* ==== HORIZONTALE OVERFLOW FIX (alleen single posts) ==== */
html, body{
  width: 100%;
  overflow-x: hidden;                 /* absolute stop */
}

body.single-post,
body.single-post .site,
body.single-post .site-content,
body.single-post .bm-single{
  overflow-x: hidden !important;      /* niets mag buiten beeld duwen */
}

/* elk kind in de single mag nooit breder worden dan z’n container */
body.single-post .bm-single *,
body.single-post .bm-single *::before,
body.single-post .bm-single *::after{
  box-sizing: border-box;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* extra zekerheid: hero en embeds forceren binnen breedte */
body.single-post .bm-hero,
body.single-post .bm-hero img,
body.single-post .entry-content img,
body.single-post .entry-content iframe,
body.single-post .entry-content video{
  max-width: 100% !important;
}

/* SE/compact: titel iets kleiner zodat hij nooit ‘duwt’ */
@media (max-width: 375px){
  .bm-title{ font-size: clamp(19px, 6.6vw, 24px); }
  .bm-single{ padding: 0 14px; }
}





/* === FIX: meta + share rij mag wrappen en nooit buiten beeld duwen === */

/* laat de hele rij wrappen zodra het krap wordt */
.bm-single .bm-meta-share{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;            /* <— belangrijk */
}

/* kinderen mogen krimpen (anders blijven ze te breed) */
.bm-single .bm-meta-share > .bm-meta,
.bm-single .bm-meta-share > .bm-share{
  min-width:0;               /* <— voorkomt overflow in flex-children */
}

/* META: standaard compact, maar op krappe breedtes mag tekst afbreken */
.bm-single .bm-meta{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1 1 auto;
}

/* als de viewport smaller wordt: laat meta wél wrappen en verberg de pipes */
@media (max-width: 1100px){
  .bm-single .bm-meta{
    white-space:normal;      /* afbreken toegestaan */
    flex-wrap:wrap;
    row-gap:2px;
  }
  .bm-single .bm-meta .bm-cats{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .bm-single .bm-meta .bm-pipe{ display:none; }  /* pipes weg als er gewrapt wordt */
}

/* SHARE: mag altijd wrappen en nooit breder dan container worden */
.bm-single .bm-meta-share .bm-share{
  display:flex;
  align-items:center;
  flex-wrap:wrap;            /* <— iconen mogen doorlopen op volgende regel */
  gap:8px;
  max-width:100%;
  min-width:0;
}

/* jouw markup heeft <div class="bm-share"><nav class="bm-share">…</nav></div>
   — zorg dat ook het binnenste element kan wrappen */
.bm-single .bm-meta-share nav.bm-share{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}

/* op smal: iconen iets kleiner */
@media (max-width: 480px){
  .bm-single .bm-share a{ width:32px; height:32px; }
  .bm-single .bm-share a svg{ width:14px; height:14px; }
  .bm-single .bm-share-label{ font-size:13px; }
}

.bm-single .bm-meta-share .bm-sharebar{ display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }











/* =======================================================================
   FOOTER (globaal) — Widgets, Topics, Bottom row, Back-to-top
   ======================================================================= */
.site-footer{ padding-top:0; padding-bottom:0; background:transparent }

/* Widgets */
#footer-widgets,
#footer-widgets .footer-widgets-container,
#footer-widgets .inside-footer-widgets{ background:transparent }
#footer-widgets .widget,
#footer-widgets .widget.inner-padding{ background:transparent; box-shadow:none; border:0 }
#footer-widgets .inside-footer-widgets > *:last-child,
#footer-widgets .widget:last-child,
#footer-widgets .widget:last-child > *:last-child,
#footer-widgets .widget:last-child ul:last-child,
#footer-widgets .widget:last-child p:last-child{
  margin-bottom:0; padding-bottom:0; border-bottom:0
}

/* Topics blok */
.site-footer .bm-topics,
.site-footer .bm-topics > .wp-block-group__inner-container{
  background:transparent; border:0; box-shadow:none
}
.site-footer .bm-topics .wp-block-list{ margin-bottom:0 }

/* Separators/spacers verbergen in footer */
.site-footer hr,
.site-footer .wp-block-separator,
.site-footer .wp-block-spacer:empty{ display:none }

/* Bottom row / copyright / to-top (ruimte in gekleurde rij) */
.site-footer .footer-bottom,
.site-footer .gb-container-footer-bottom,
.site-footer .site-info,
.site-footer .copyright{
  border-top:0; box-shadow:none; background:inherit; margin-top:0; padding-top:0; padding-bottom:28px
}

/* Back-to-top link geen extra marge */
.site-footer .back-to-top,
.site-footer .to-top,
.site-footer a[href*="#top"]{ display:inline-block; margin-bottom:0 }

/* Laatste footer-elementen maken geen witte streep */
.site-footer > *:last-child,
.site-footer .wp-block-group:last-child,
.site-footer .widget:last-child,
.site-footer .wp-block-group__inner-container.wp-block-group-is-layout-constrained:last-child,
.site-footer .wp-block-group__inner-container.wp-block-group-is-layout-constrained > :last-child{
  margin-bottom:0; padding-bottom:0; border-bottom:0
}



/* ===== Footer widgets terug in NAV2-stijl ===== */

/* Geef de widgets-rij zelf weer een donkere achtergrond */
#footer-widgets.site.footer-widgets,
.site-footer #footer-widgets,
.site-footer .footer-widgets,
.site-footer .footer-widgets-container,
.site-footer .inside-footer-widgets{
  background: var(--nav2-bg, #0e111f) !important; /* vervang evt. door jouw exacte NAV2 kleur */
}

/* Tekst/links in wit, maar laat individuele widgets transparant */
.site-footer .footer-widgets,
.site-footer .footer-widgets .widget,
.site-footer .footer-widgets .widget *{
  color: #fff;
  background: transparent;
}

/* Ruimte: houd de padding van de widgets-sectie overeind */
.site-footer .footer-widgets{ padding: 40px 0 !important; }

/* Haal een eventuele ‘haarlijn’ tussen Topics en Widgets weg */
.bm-topics{ margin-bottom: 0 !important; border-bottom: 0 !important; }
.bm-topics + #footer-widgets{
  margin-top: 0 !important; border-top: 0 !important; box-shadow: none !important;
}

/* (Belangrijk) maak niet de héle footer transparant – zet zo nodig onze oude override uit */
body .site-footer{ background: initial; } /* laat het thema/rijen zelf de achtergrond bepalen */






/* ================================
   Footer > Newsletter (CTA button)
   ================================ */

/* Layout */
.site-footer .bm-nieuwsbrief{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  max-width: 420px;
}

/* Input — licht veld op donkere bg */
.site-footer .bm-nieuwsbrief input[type="email"]{
  background: #e9effa;                   /* lichtblauw veld */
  color: #0f2235;                         /* donkere tekst */
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  height: 46px;
  padding: 0 12px;
}

/* Button — BM blauw */
.site-footer .bm-nieuwsbrief button[type="submit"]{
  background: #1e63ff;                    /* BM blauw */
  color: #fff;
  border: 2px solid #1e63ff;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(30,99,255,.20);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
  text-decoration: none;                  /* nooit underline */
}

/* Hover: iets lichter blauw (zoals eerder) */
.site-footer .bm-nieuwsbrief button[type="submit"]:hover{
  background: #2a73ff;
  border-color: #2a73ff;
  box-shadow: none;
}

/* Focus: duidelijke focusring */
.site-footer .bm-nieuwsbrief button[type="submit"]:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(30,99,255,.9);
}

/* Kleine schermen: stapelen */
@media (max-width: 480px){
  .site-footer .bm-nieuwsbrief{
    grid-template-columns: 1fr;
  }
  .site-footer .bm-nieuwsbrief button[type="submit"]{
    width: 100%;
  }
}

/* Overschrijf de generieke 'transparent'-regel alleen waar nodig */
.site-footer .bm-nieuwsbrief input[type="email"],
.site-footer .bm-nieuwsbrief button[type="submit"]{
  background-clip: padding-box;  /* voorkom doorschijnen */
}







/* 3) FOOTER: extra ruimte onder “Back To Top” (met juiste bg) */
@media (max-width: 768px){
  /* ademruimte op de GEKLEURDE laatste rij in de footer */
  .site-footer .wp-block-group.has-background:last-of-type{
    padding-bottom: 28px !important;
    background: inherit !important;        /* behoud nav2-achtergrond */
  }
  /* de link zelf geen extra witruimte laten maken */
  .site-footer .back-to-top,
  .site-footer .to-top,
  .site-footer a[href*="#top"]{
    display:inline-block; margin-bottom:0 !important;
  }
}

/* (kleine zekerheid) haal eventuele scheidingslijnen/spacers weg onderaan */
.site-footer hr:last-child,
.site-footer .wp-block-separator:last-child,
.site-footer .wp-block-spacer:empty:last-child{ display:none !important; }



/* ===== Extra ruimte onder “Back To Top” – robuuste variant ===== */

/* 1) Geef de meest voorkomende footer-bottom containers padding */
.site-footer .wp-block-group.has-background:last-child,
.site-footer .wp-block-group.alignfull:last-child,
.site-footer .footer-bottom,
.site-footer .gb-container-footer-bottom,
.site-footer .site-info{
  padding-bottom: 28px !important;
}

/* 2) Als de Back To Top-link écht het laatste element is,
      maak dan altijd ruimte erna met een pseudo-element */
.site-footer .back-to-top:last-child,
.site-footer .to-top:last-child,
.site-footer a[href*="#top"]:last-child{
  display: block !important;
  margin-bottom: 0 !important;      /* link zelf geen marge */
  position: relative;
}
.site-footer .back-to-top:last-child::after,
.site-footer .to-top:last-child::after,
.site-footer a[href*="#top"]:last-child::after{
  content: "";
  display: block;
  height: 28px;                     /* ← de zichtbare extra ruimte */
}

/* 3) Geen ongewenste witte balk: gebruik dezelfde bg als de footer-rij */
.site-footer .wp-block-group.has-background:last-child{
  background: inherit !important;
}





/* ARCHIVE/SEARCH: lijn over de volle widgetkolom */
body.archive  #footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline),
body.search   #footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline),
body.archive  .site-footer .footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline),
body.search   .site-footer .footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline){
  display:block !important;            /* geen inline/inline-block → volle breedte */
  width:100%;
  padding-bottom:6px;
  margin-bottom:14px;
  border-bottom:3px solid #e23a3a !important;
}

/* Als je eerder een ::after-underline had gezet, zet die hier uit */
body.archive  #footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline)::after,
body.search   #footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline)::after,
body.archive  .site-footer .footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline)::after,
body.search   .site-footer .footer-widgets :is(h1,h2,h3,.widget-title,.wp-block-heading,.gb-headline)::after{
  content:none !important;
}

/* Uitzondering: "Browse Blues Magazine Topics" – lijn alleen onder tekst */
body.archive  .bm-topics h2.gb-text,
body.search   .bm-topics h2.gb-text {
  display:inline-block !important;     /* alleen onder tekst, niet volle breedte */
  width:auto !important;
  padding-bottom:6px;
  margin-bottom:14px;
  border-bottom:3px solid #e23a3a !important;
}






/* ARCHIVE/SEARCH: volle-breedte rode lijn bovenaan het totale footergebied (vóór Topics) */
body.archive  .bm-topics,
body.search   .bm-topics{
  position: relative; /* anker voor het pseudo-element */
}

/* trek een 100vw-lijn precies bovenaan .bm-topics */
body.archive  .bm-topics::before,
body.search   .bm-topics::before{
  content: "";
  position: absolute;
  top: 0;                /* helemaal boven aan het blok */
  left: 50%;
  width: 100vw;          /* volle schermbreedte */
  border-top: 4px solid #e23a3a;
  transform: translateX(-50%); /* centreer 100vw t.o.v. viewport */
  pointer-events: none;  /* geen impact op interacties */
}

/* zekerheid: als je ergens die Topics-border had uitgezet, win hier */
body.archive  .bm-topics,
body.search   .bm-topics{
  border-top: none !important;
}







/* Footer widgettitels: volle breedte rode lijn */
.site-footer .widget .widget-title,
.site-footer .widget h1,
.site-footer .widget h2,
.site-footer .widget h3,
.site-footer .wp-block-heading{
  position: relative !important;
  display: block !important;          /* blok = volle breedte */
  padding-bottom: 12px !important;     /* ruimte boven de lijn */
  margin-bottom: 14px !important;
  background-image: none !important;   /* oude gradient uit */
  border: 0 !important;                /* zeker weten geen border */
  box-shadow: none !important;
}

.site-footer .widget .widget-title::after,
.site-footer .widget h1::after,
.site-footer .widget h2::after,
.site-footer .widget h3::after,
.site-footer .wp-block-heading::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;              /* volle breedte van de titel */
  height: 3px;              /* dikte van de lijn */
  background: #cc0000;      /* rood */
}

/* Als de titel een <a> bevat: geen onderstreping, lijn blijft onder de heading */
.site-footer .widget :is(.widget-title,h1,h2,h3,.wp-block-heading) a{
  text-decoration: none !important;
  background: none !important;
  box-shadow: none !important;
}

.bm-topics h2 {
    color: var(--bm-link);
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 20px;
    padding-bottom: 6px;
    border-bottom: 3px solid #cc0000;
    display: inline-block;
}





















/* SEARCH gebruikt dezelfde look & feel */
.bm-search-archive .bm-arch-head{ max-width:1280px; margin:0 auto; padding:24px 16px 12px; }
.bm-search-archive .bm-tag-archive{ max-width:1280px; margin:0 auto; padding:0 16px; }

/* Hergebruik events/post-styling van tag-archive */
.bm-search-archive .bm-events-list,
.bm-search-archive .latest-news-list{ all: unset; display: block; }
.bm-search-archive .bm-events-list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }

/* Mobiel: date-pill exact zoals we net hebben afgestemd */
@media (max-width:600px){
  .bm-search-archive .bm-events-link{
    display:grid; grid-template-columns: 60px 1fr; gap:12px;
    padding:12px; border:1px solid #E3E8F2; border-radius:16px; background:#fff; text-decoration:none;
  }
  .bm-search-archive .bm-datepill{
    width:48px; height:48px; border-radius:12px; background:#0b2b57; color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
    box-shadow:0 0 0 2px rgba(11,43,87,.12);
  }
  .bm-search-archive .bm-datepill::before,
  .bm-search-archive .bm-datepill::after{ content:none !important; }
  .bm-search-archive .bm-datepill-d{ font-weight:800; font-size:18px; line-height:1; margin:0; }
  .bm-search-archive .bm-datepill-m{ font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.35px; line-height:1; margin-top:1px; }
  .bm-search-archive .bm-event-line{ font-weight:800; color:#0b2b57; align-self:center; }
  .bm-search-archive .bm-dot{ display:inline-block; width:6px; height:6px; background:#ffbf00; border-radius:50%; margin-left:8px; vertical-align:middle; }
}

/* Zoekresultaten: concert-rijen wit maken binnen het grijze blok */
.search-results .bm-block--events .bm-table { background: transparent; }

/* Rijen zelf wit (ook even de even-zebra uitzetten) */
.search-results .bm-block--events .bm-table .bm-tr {
  background: #fff !important;
}
.search-results .bm-block--events .bm-table .bm-tr:nth-child(even) {
  background: #fff !important;
}

/* Hover subtiel lichtblauw zoals elders */
.search-results .bm-block--events .bm-table .bm-tr:hover {
  background: #f7fbff !important;
}







/* Zoekresultaten: zelfde binnenmarges als /artikelen/ en tag-archief */
.search-results .bm-arch-wrap,
.search-results .bm-arch-head {
  max-width: var(--content-width, 1280px);
  margin: 0 auto;
  padding-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 768px){
  .search-results .bm-arch-wrap,
  .search-results .bm-arch-head {
  padding-top: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Zekerheid: verwijder eventuele ‘full-bleed’ of negatieve marges
   die links/rechts padding overschrijven in het titelblok */
.search-results .bm-arch-head,
.search-results .bm-arch-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
}




/* SEARCH — voorkom horizontale overflow in 'Aankomende concerten' op mobiel */
@media (max-width: 640px){
  /* 1) Niets mag breder worden dan het scherm */
  body.search-results { overflow-x: hidden; }

  .search-results .bm-block--events .bm-table,
  .search-results .bm-block--events .bm-table .bm-tr{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 2) Concert-rij compact en binnen de randen */
  .search-results .bm-block--events .bm-table .bm-tr{
    display: block !important;
    padding: 12px 12px;       /* iets compacter dan 12/14, voorkomt ‘duwen’ */
    margin: 0;                /* geen “uitschieters” */
    border: 0;                /* randje kan soms optisch “duwen” */
  }

  /* 3) Datum-pill en tekst staan samen op één regel zonder overflow */
  .search-results .bm-block--events .bm-mobile-date{
    display: inline-flex;
    vertical-align: top;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;           /* vaste breedte */
    box-sizing: border-box;
    margin-right: 8px;
  }

  .search-results .bm-block--events .bm-mobile-line{
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 44px); /* 36 + 8 marge = 44 */
    box-sizing: border-box;
    overflow-wrap: anywhere;      /* breek lange woorden/plaatsnamen */
    word-break: break-word;
    white-space: normal;
  }

  /* 4) Zekerheid: verberg desktopkolommen echt op mobiel */
  .search-results .bm-block--events .bm-tr .bm-td{ 
    display: none !important; 
  }
}

/* SEARCH — Aankomende concerten blok: nooit buiten beeld op mobiel */
@media (max-width: 640px){
  /* haal alle thema-padding weg die dubbel telt */
  .search-results .site-main > .grid-container,
  .search-results .inside-article,
  .search-results .entry-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* arch-wrap geeft exact onze 12px gutters */
  .search-results .bm-arch-wrap{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* het grijze blok zelf nooit breder dan container */
  .search-results .bm-block--events{
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 12px;   /* interne ademruimte */
    padding-right: 12px;
  }

  /* inner table ook box-sizen + geen eigen uitschieters */
  .search-results .bm-block--events .bm-table{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* rij blijft binnen blok (we hadden dit al grotendeels) */
  .search-results .bm-block--events .bm-tr{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 0;      /* padding horizontaal zit in .bm-block--events */
    margin: 0;
  }

  /* datum-pill + tekst netjes naast elkaar zonder overflow */
  .search-results .bm-block--events .bm-mobile-date{
    flex: 0 0 36px;
    width: 36px; height: 36px;
    margin-right: 8px;
  }
  .search-results .bm-block--events .bm-mobile-line{
    display: inline-block;
    max-width: calc(100% - 44px);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}



/* SEARCH results — mobile: keep pill + text on one line */
@media (max-width: 640px){
  .search-results .bm-block--events .bm-table .bm-tr{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;      /* prevent wrapping below the pill */
    gap: 10px;
    padding: 12px 14px;
  }

  .search-results .bm-block--events .bm-mobile-date{
    flex: 0 0 40px !important;         /* fixed pill width */
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .search-results .bm-block--events .bm-mobile-line{
    display: block !important;
    flex: 1 1 auto !important;         /* take remaining space */
    min-width: 0 !important;           /* allow shrinking on small widths */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    margin: 0 !important;
  }

  /* keep desktop columns hidden on mobile */
  .search-results .bm-block--events .bm-tr .bm-td{
    display: none !important;
  }
}



/* SEARCH results — desktop: date | (title — venue) */
.search-results .bm-block--events .bm-table .bm-tr{
  display: grid;
  grid-template-columns: 110px 1fr;   /* datum | hoofd kolom */
  gap: 12px;
  align-items: center;
}

/* main col = title + venue inline */
.search-results .bm-block--events .bm-col-main{
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;                 /* allow ellipsis */
}

.search-results .bm-block--events .bm-col-main .bm-title{
  font-weight: 800;
  color: #0b3b64;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-results .bm-block--events .bm-col-main .bm-venue{
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-results .bm-block--events .bm-col-main .bm-sep{
  opacity: .7;
}

/* hide the old split cols if any remain */
.search-results .bm-block--events .bm-col-title,
.search-results .bm-block--events .bm-col-venue{
  display: none !important;
}

/* mobile keeps the pill + 1 line version you already fixed */
@media (max-width: 640px){
  .search-results .bm-block--events .bm-table .bm-tr{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px;
  }
  .search-results .bm-block--events .bm-col-date,
  .search-results .bm-block--events .bm-col-main{ display: none !important; }
}