/* =========================================================
   Blues Magazine — Single Post (CLEAN)
   Vereist markup (single.php):
   <article class="bm-single"> … </article>
   ========================================================= */

/* ========== BASIS LAYOUT & TYPO ========== */
.bm-single{max-width:1280px;margin:0 auto;padding:0 24px}
.bm-head{padding:28px 0 10px}

/* Rubriek (primair) */
.bm-single .bm-rubriek{margin:0 0 10px}
.bm-single .bm-rubriek a{
  background:none;padding:0;border-radius:0;
  color:#1e63ff;font-weight:800;font-size:clamp(20px,2.2vw,24px);
  text-transform:uppercase;letter-spacing:.01em;text-decoration:none
}
.bm-single .bm-rubriek a:hover{ text-decoration:underline }

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

/* Excerpt */
.bm-single .bm-excerpt{
  margin:12px 0 14px;font-size:clamp(20px,2.4vw,24px);
  line-height:1.6;font-weight:600;color:#17202a
}

/* Separator */
.bm-single .bm-sep{border:0;height:0;margin:12px 0;border-top:1px solid #e8ecf3}

/* ========== META + SHARE ========== */
.bm-single .bm-meta-share{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:nowrap;min-height:44px;margin:10px 0 8px
}
.bm-single .bm-meta{
  display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:15px;color:#5a6b7f
}
.bm-single .bm-meta .bm-date{font-weight:700;color:#141e29}
.bm-single .bm-meta .bm-pipe{opacity:.35}
.bm-single .bm-meta .bm-cats{display:flex;gap:8px}
.bm-single .bm-meta .bm-cats a{
  color:#5a6b7f;text-decoration:underline;text-underline-offset:2px
}
.bm-single .bm-meta .bm-cats a:hover{color:#0f2235}

/* Share */
.bm-single .bm-share{display:flex;align-items:center;gap:10px}
.bm-single .bm-share-label{margin-right:8px;font-weight:700;color:#5a6b7f;font-size:15px}
.bm-single .bm-share a{
  width:40px;height:40px;border-radius:999px;border:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none
}
.bm-single .bm-share a svg{width:18px;height:18px;display:block}
.bm-single .bm-share a svg,* .bm-single .bm-share a svg *{fill:currentColor}

.bm-single .bm-share-fb{ background:#1877F2 } .bm-single .bm-share-fb:hover{ filter:brightness(0.92) }
.bm-single .bm-share-x { background:#000000 } .bm-single .bm-share-x:hover { filter:brightness(1.06) }
.bm-single .bm-share-wa{ background:#25D366 } .bm-single .bm-share-wa:hover{ filter:brightness(0.92) }
.bm-single .bm-share-em{ background:#6B7280 } .bm-single .bm-share-em:hover{ filter:brightness(0.92) }
.bm-single .bm-share-copy{ background:#374151 } .bm-single .bm-share-copy:hover{ filter:brightness(0.92) }
.bm-single .bm-share-copy.copied{ background:#16a34a }

.bm-single .bm-share a:focus-visible{
  outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 2px rgba(0,0,0,.35)
}

/* ========== HERO (landscape) ========== */
/* Binnen contentbreedte, vaste ratio-buckets, topfocus; mobiel toont hele foto */
.bm-hero{
  position:relative;display:block;width:100%;max-width:100%;
  overflow:hidden;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.06);
  margin:0 0 24px;
  --pad:56.25%; /* default 16:9 fallback */
}
.bm-hero::before{content:"";display:block;padding-top:var(--pad)}
.bm-hero.is-16x9{ --pad:56.25% } /* 9/16*100 */
.bm-hero.is-5x4 { --pad:80% }
.bm-hero.is-4x3 { --pad:75% }

@supports (aspect-ratio: 16/9){
  .bm-hero{ aspect-ratio:16/9 }
  .bm-hero.is-16x9{ aspect-ratio:16/9 }
  .bm-hero.is-5x4 { aspect-ratio:5/4 }
  .bm-hero.is-4x3 { aspect-ratio:4/3 }
  .bm-hero::before{ display:none;padding-top:0 }
}

.bm-hero img{
  position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:50% 12%;
  display:block
}

/* Mobiel: hele foto tonen (geen crop), wel meeschalen */
@media (max-width:768px){
  .bm-hero{ aspect-ratio:auto }
  .bm-hero::before{ display:none }
  .bm-hero img{
    position:static;width:100%;height:auto;object-fit:initial;object-position:center center
  }
}

/* ========== FEATURED (portrait/1:1 inline) ========== */
.bm-featured--portrait{
  border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);
  margin:6px 0 24px; /* iets dichter op content */
}
.bm-featured--portrait img{
  width:100%;height:auto;display:block;object-fit:contain;object-position:center center
}

/* ========== GRID ========== */
.bm-single .bm-grid{display:grid;grid-template-columns:1fr;gap:24px}
.bm-single .bm-grid > *{min-width:0}
@media (min-width:992px){
  .bm-single .bm-grid{grid-template-columns:2fr 1fr;align-items:start;gap:28px}
}

/* ========== BODY CONTENT ========== */
.bm-single .entry-content > *:first-child{margin-top:0}
.bm-single .entry-content p{margin:0 0 1.05em;font-size:18px;line-height:1.7}
.bm-single .entry-content h2{margin:1.6em 0 .6em;font-size:28px;line-height:1.25}
.bm-single .entry-content h3{margin:1.4em 0 .5em;font-size:22px;line-height:1.3}
.bm-single .entry-content ul,.bm-single .entry-content ol{padding-left:1.15em;margin:0 0 1.1em}
.bm-single .entry-content blockquote{
  margin:1.4em 0;padding:.6em 1em .6em 1.1em;border-left:4px solid #1e63ff;
  background:#f8faff;color:#0f2235
}
.bm-single .entry-content img{max-width:100%;height:auto;display:block}
.bm-single .entry-content table{display:block;max-width:100%;overflow-x:auto}
.bm-single .entry-content pre,.bm-single .entry-content code{
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere
}

/* ========== TAGS & COMMENTS & POSTNAV ========== */
.bm-single .bm-tags{
  margin-top:28px;padding-top:16px;border-top:1px solid #e8ecf3;margin-bottom:26px
}
.bm-single .bm-tags a{
  display:inline-block;margin:6px 8px 0 0;padding:6px 12px;border-radius:999px;
  background:#f2f5fb;color:#234;text-decoration:none;font-size:13px;border:1px solid #e1e6f3;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s
}
.bm-single .bm-tags a:hover,
.bm-single .bm-tags a:focus-visible{
  background:#1e63ff;border-color:#1e63ff;color:#fff;box-shadow:0 2px 6px rgba(30,99,255,.25);
  text-decoration:none;outline:2px solid #fff;outline-offset:2px
}

.bm-postnav{
  margin:28px 0;padding-top:16px;border-top:1px solid #e8ecf3;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.bm-postnav .bm-prev:empty,.bm-postnav .bm-next:empty{display:none}
.bm-postnav a{
  display:inline-flex;align-items:center;gap:10px;background:#f7f9fc;border:1px solid #e6edf7;
  border-radius:10px;padding:10px 14px;color:#0f2235;text-decoration:none;font-weight:800;
  transition:background .15s,border-color .15s,transform .05s
}
.bm-postnav a:hover{background:#eef4ff;border-color:#dbe7ff}
.bm-postnav a:active{transform:translateY(1px)}
@media (max-width:640px){
  .bm-postnav{flex-direction:column}
  .bm-postnav a{width:100%;justify-content:center}
}

.bm-single .comments-area{
  border-top:1px solid #e8ecf3;padding-top:18px;margin-top:28px;margin-bottom:64px
}
.bm-single .comment-respond{margin-bottom:48px}
.bm-single .comment-form #submit{
  background:#1e63ff;color:#fff;border:2px solid #1e63ff;border-radius:8px;
  padding:12px 18px;font-weight:700;font-size:16px;line-height:1;cursor:pointer;
  box-shadow:0 2px 6px rgba(30,99,255,.20);
  transition:background .15s,color .15s,box-shadow .15s,transform .05s;
  margin-top:12px
}
.bm-single .comment-form #submit:hover{background:transparent;color:#1e63ff;box-shadow:none}
.bm-single .comment-form #submit:focus-visible{
  outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 3px rgba(30,99,255,.9)
}

/* ========== SIDEBAR (Blues Magazine) ========== */
.bm-aside-stack{display:flex;flex-direction:column;gap:30px}
@media (max-width:992px){ .bm-aside-stack{gap:22px} }

.bm-side-card{
  background:#f7f7f7;border-radius:12px;
  box-shadow:0 1px 0 rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  padding:18px
}
.bm-side-title{
  font-size:28px;font-weight:800;color:#102a4a;margin:0 0 14px;position:relative;padding-bottom:10px
}
.bm-side-title::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#2f57a1;border-radius:3px
}
.bm-side-intro{color:#1b2a3a;font-size:18px;line-height:1.5;margin:0 0 14px}

.bm-list{list-style:none;margin:0;padding:0}
.bm-item + .bm-item{margin-top:14px}
.bm-media{display:flex;gap:14px;align-items:flex-start;text-decoration:none}
.bm-media-thumb{flex:0 0 64px;width:64px;height:64px;border-radius:10px;overflow:hidden;display:inline-block}
.bm-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bm-media-thumb .ph{display:block;width:100%;height:100%;background:#e9eef6}
.bm-media-body{min-width:0;display:block}
.bm-media-title{color:#12325a;font-weight:800;line-height:1.25;display:block}
.bm-media:hover .bm-media-title{ text-decoration:underline }
.bm-media-meta{display:block;color:#5a6b7f;font-size:14px;margin-top:4px}
.bm-media-meta .sep{opacity:.5;margin:0 6px}

.bm-comment-card{
  display:block;border-radius:10px;background:#f7f9fc;padding:12px 14px;
  text-decoration:none;border:1px solid #e7edf7
}
.bm-comment-card:hover{background:#eef4ff;border-color:#dbe7ff}
.bm-comment-title{color:#12325a;font-weight:800;display:block;margin-bottom:4px}
.bm-comment-title .light{font-weight:600;color:#304a66;margin:0 6px}
.bm-comment-excerpt{color:#123}

/* CTA donker blok */
.bm-cta-dark{background:#0d2a50;color:#fff;border-radius:12px;padding:24px}
.bm-cta-dark .bm-side-title{color:#fff}
.bm-cta-dark .bm-side-title::after{background:#1e63ff}
.bm-cta-dark p,.bm-cta-dark li,.bm-cta-dark .bm-side-desc{color:#fff}
.bm-cta-dark a{color:#fff;text-decoration:underline}
.bm-cta-dark a:hover{color:#e6efff}

/* CTA-knop (zelfde hoverfeel als reactie-knop; wit op dark) */
.bm-cta-dark .bm-btn-primary{
  display:block;width:100%;text-align:center;background:#1e63ff;color:#fff;border:2px solid #1e63ff;
  border-radius:12px;padding:14px 18px;font-weight:800;font-size:18px;line-height:1;
  box-shadow:0 2px 6px rgba(30,99,255,.20);
  transition:background .15s,color .15s,box-shadow .15s,transform .05s;
  text-decoration:none
}
.bm-cta-dark .bm-btn-primary:hover{
  background:#fff;color:#1e63ff;border-color:#fff;box-shadow:none;text-decoration:none
}
.bm-cta-dark .bm-btn-primary:focus-visible{
  outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 3px rgba(30,99,255,.9)
}

/* ========== MOBIEL (≤ 768px) ========== */
@media (max-width:768px){
  .bm-single{padding:0 16px}
  .bm-head{padding:10px 0 8px}

  .bm-title{font-size:clamp(24px,7vw,30px);line-height:1.15;margin:8px 0 10px;padding-left:16px}
  .bm-title::before{width:8px;border-radius:8px;top:.06em;bottom:.06em}
  .bm-excerpt{max-width:100%;font-size:clamp(18px,5.2vw,20px);line-height:1.55;margin:10px 0 12px}

  /* meta + share netjes onder elkaar, altijd zichtbaar */
  .bm-meta-share{align-items:flex-start;gap:8px;flex-wrap:wrap}
  .bm-single .bm-meta{order:1;flex:0 0 100%;white-space:normal;overflow:visible;text-overflow:clip;row-gap:2px;margin-bottom:4px}
  .bm-single .bm-meta .bm-pipe{display:none}
  .bm-single .bm-meta .bm-cats{display:flex;flex-wrap:wrap;gap:6px}

  .bm-share{order:2;flex:0 0 100%;display:flex;flex-wrap:wrap;gap:8px;min-width:0;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}

  .bm-grid{grid-template-columns:1fr;gap:22px}
  .bm-grid > *,.bm-main,.bm-aside{min-width:0}
}

/* ===== Mobiel compact (≤ 640px): aside compacter ===== */
@media (max-width:640px){
  .bm-aside .bm-media-thumb{display:none}
  .bm-aside .bm-media{gap:8px;padding:10px 2px}
  .bm-aside .bm-media-title{
    font-size:16px;line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis
  }
  .bm-aside .bm-media-meta{font-size:13px;opacity:.9}
}

/* ===== Single eindafstand t.o.v. footer (mobiel/desktop) ===== */
.bm-single{ margin-bottom:24px }
.bm-aside{  margin-bottom:24px }










/* ==== Sidebar nieuwsbrief: forceer blauwe CTA (single posts) ==== */
body.single-post .bm-aside :is(button[type="submit"],
                               input[type="submit"],
                               .wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button){
  background: #1e63ff !important;         /* BM-blauw */
  background-color: #1e63ff !important;    /* sommige themes gebruiken background-color */
  background-image: none !important;       /* zet gradients/overlays uit */
  color: #fff !important;
  border: 2px solid #1e63ff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(30,99,255,.20) !important;
  text-decoration: none !important;
  filter: none !important;                 /* vang eventuele grayscale/filter af */
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-align: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

body.single-post .bm-aside :is(.wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button):hover{
  background: #2a73ff !important;
  background-color: #2a73ff !important;
  border-color: #2a73ff !important;
  box-shadow: none !important;
}

body.single-post .bm-aside :is(.wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button):focus-visible{
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(30,99,255,.9) !important;
}

/* Inputveld erbij voor de zekerheid */
body.single-post .bm-aside :is(form) input[type="email"],
body.single-post .bm-aside :is(form) input[type="text"]{
  background: #fff !important;
  color: #0f2235 !important;
  border: 1px solid #dbe5f4 !important;
  border-radius: 10px !important;
  height: 46px !important;
  padding: 0 12px !important;
  width: 100% !important;
  background-clip: padding-box !important;
}



/* === Sidebar nieuwsbrief: spacing + hover (single posts) === */
body.single-post .bm-aside .widget form{
  display: grid;                 /* nette, simpele layout */
  grid-template-columns: 1fr;
  gap: 12px;                     /* ruimte tussen input en knop */
}

/* Input: kleine focus/hover cue */
body.single-post .bm-aside .widget form input[type="email"],
body.single-post .bm-aside .widget form input[type="text"]{
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.single-post .bm-aside .widget form input[type="email"]:focus,
body.single-post .bm-aside .widget form input[type="text"]:focus{
  border-color: #1e63ff !important;
  box-shadow: 0 0 0 3px rgba(30,99,255,.15) !important;
  outline: none;
}

/* Knop: hover + transition (dekt Gutenberg/GP varianten) */
body.single-post .bm-aside :is(button[type="submit"],
                               input[type="submit"],
                               .wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button){
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .05s ease !important;
  cursor: pointer !important;
}

/* Hover staat nu echt vast (met !important) */
body.single-post .bm-aside :is(button[type="submit"],
                               input[type="submit"],
                               .wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button):hover{
  background: #2a73ff !important;        /* iets lichter blauw */
  background-color: #2a73ff !important;
  border-color: #2a73ff !important;
  box-shadow: none !important;
  transform: translateY(0);               /* optioneel mini-stabiliteit */
}






/* === Sidebar nieuwsbrief: zelfde stacking & spacing als footer === */

/* Form als grid met vaste gap (dekt bm-nieuwsbrief + MailPoet + GP) */
body.single-post .bm-aside form.bm-nieuwsbrief,
body.single-post .bm-aside .bm-mailpoet form,
body.single-post .bm-aside .widget .mailpoet_form,
body.single-post .bm-aside .widget form{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;                    /* ← ruimte tussen veld en knop */
}

/* MailPoet paragrafen en GP paragrafen niet laten 'plakken' */
body.single-post .bm-aside .widget .mailpoet_paragraph,
body.single-post .bm-aside .widget form > p{
  margin: 0 !important;
}

/* Input (zekerheid: blok + volle breedte) */
body.single-post .bm-aside .widget form input[type="email"],
body.single-post .bm-aside .widget form input[type="text"]{
  display: block !important;
  width: 100% !important;
}

/* Knop: pak ALLE smaken (MailPoet, Gutenberg Button, GP button, native) */
body.single-post .bm-aside .widget .mailpoet_submit,
body.single-post .bm-aside .widget .wp-block-button,
body.single-post .bm-aside .widget .wp-block-buttons,
body.single-post .bm-aside .widget form button[type="submit"],
body.single-post .bm-aside .widget form input[type="submit"]{
  margin-top: 0 !important;                /* grid-gap regelt de ruimte */
}

/* Knopstijl + hover (exact als footer) */
body.single-post .bm-aside :is(button[type="submit"],
                               input[type="submit"],
                               .wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button){
  background: #1e63ff !important;
  background-color: #1e63ff !important;
  color: #fff !important;
  border: 2px solid #1e63ff !important;
  border-radius: 12px !important;
  height: 50px !important;
  padding: 12px 18px !important;
  width: 100% !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(30,99,255,.20) !important;
  transition: background .15s, border-color .15s, box-shadow .15s !important;
  cursor: pointer !important;
}

body.single-post .bm-aside :is(.wp-element-button,
                               .wp-block-button__link,
                               a.button,
                               button.button,
                               .gp-button):hover,
body.single-post .bm-aside :is(button[type="submit"], input[type="submit"]):hover{
  background: #2a73ff !important;
  background-color: #2a73ff !important;
  border-color: #2a73ff !important;
  box-shadow: none !important;
}






/* -------------------------------------------------------
   MOBIEL HOTFIX (plaats onderaan single-post.css)
   Herstelt: share-blok zichtbaarheid, hero full image,
   en spacing onder Back To Top – alleen mobiel.
------------------------------------------------------- */

/* 1) DEEL-BLOK: forceer zichtbaarheid en 100% breedte */
@media (max-width: 768px){
  .bm-single .bm-meta-share{
    display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px;
  }
  /* meta op eigen regel */
  .bm-single .bm-meta{
    order:1; flex:0 0 100%; white-space:normal; margin-bottom:4px;
  }
  .bm-single .bm-meta .bm-pipe{ display:none; } /* geen pipes als we wrappen */

  /* share op eigen regel + toon label */
  .bm-single .bm-share,
  .bm-single nav.bm-sharebar{
    order:2;
    display:flex !important;
    flex:0 0 100% !important;
    flex-wrap:wrap; gap:8px; max-width:100%;
  }
  .bm-single .bm-share-label{ display:inline-block; margin:4px 8px 0 0; }
  .bm-single .bm-share a{ width:36px; height:36px; }
  .bm-single .bm-share a svg{ width:16px; height:16px; }
}

/* 2) HERO OP MOBIEL: hele foto tonen (geen crop, wel responsive) */
@media (max-width: 768px){
  .bm-hero{
    aspect-ratio: auto !important;        /* geen vaste ratio */
  }
  .bm-hero::before{                        /* padding-fallback uit */
    display:none !important;
  }
  .bm-hero img{
    position: static !important;
    width: 100% !important;
    height: auto !important;               /* volledige afbeelding */
    object-fit: initial !important;        /* niet croppen */
    object-position: center center !important;
  }
}














.bm-sidebar-block { margin: 1rem 0 2rem; }
.bm-side-h { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .03em; }
.bm-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.bm-side-item { display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: start; }
.bm-side-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: .5rem; display: block; }
.bm-side-rank { display: inline-block; min-width: 32px; text-align: center; padding: .25rem .4rem; border-radius: .5rem; font-weight: 700; background: rgba(10,102,194,.1); }
.bm-side-title { font-weight: 600; line-height: 1.25; text-decoration: none; display: inline-block; }
.bm-side-title:hover { text-decoration: underline; }
.bm-side-meta { font-size: .85rem; opacity: .8; margin-top: .15rem; }
.bm-side-empty { opacity: .7; font-size: .95rem; }