/* =====================================================================
   mediums.nl — mobiele laag 2026 (enkel < 768px, desktop ongewijzigd)
   Geladen als laatste stylesheet via incl_css.php (enkel mediums.nl).
   ===================================================================== */
:root{
  /* tokens uit 'Mediums merk- en communicatiestijlgids v1' (hoofdstuk 03/04) */
  --mn-warmwit:#FAF8F5; --mn-navy:#1C3A5E; --mn-blauw:#7899CC; --mn-diepblauw:#2D5F94; --mn-blauw-licht:#E8EFFA;
  --mn-goud:#D97706; --mn-geel:#FCD34D; --mn-tekst:#1C1917; --mn-tekst-zacht:#57534e;
  --mn-rand:rgba(28,58,94,.10); --mn-groen:#22a559;
  --mn-kop:Georgia,'Times New Roman',serif; --mn-ui:Arial,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mn-header-h:60px;
}
/* hero bestaat enkel op mobiel */
.mn-hero{display:none;}
@media (max-width:767px){

  /* ---------- 1. HEADER: witte balk, logo links, actiepil rechts ----------
     niet ingelogd:  [ log in | gratis account  ≡ ]      ingelogd:  [ pcode 1234567 | 168 credits  ≡ ]  */
  html body #header.site-header{position:sticky !important; top:0 !important; z-index:1030; height:var(--mn-header-h) !important; min-height:0 !important; margin:0 !important; background:#fff !important; box-shadow:0 1px 0 var(--mn-rand),0 6px 18px -14px rgba(22,50,79,.35); transform:none !important;}
  html body #header .kl-header-bg{display:none !important;}
  html body #header .kl-main-header{height:var(--mn-header-h) !important; padding:0 !important;}
  html body #header .siteheader-container{height:var(--mn-header-h) !important; padding:0 10px 0 14px !important; align-items:center !important; gap:10px; max-width:none !important;}

  /* logo; ingelogd enkel het beeldmerk (eerste 52 van 204px in images/mediums.png) */
  html body #header .site-header-left-wrapper{display:flex !important; align-items:center; flex:1 1 auto !important; min-width:0; width:auto !important; padding:0 !important;}
  html body #header .logo-container{padding:0 !important; min-height:0 !important; height:var(--mn-header-h); justify-content:flex-start !important; min-width:0;}
  html body #header .site-logo, html body #header .site-logo a{display:block; min-width:0; max-width:100%; overflow:hidden;}
  html body #header .logo-img{display:block; height:34px !important; max-height:none !important; width:auto !important; max-width:100% !important; object-fit:contain; object-position:left center;}
  html body #header:has(a[href$="loguit"]) .logo-img{width:33px !important; height:38px !important; max-width:none !important; object-fit:cover !important;}

  /* de pil */
  html body #header .site-header-right-wrapper{display:flex !important; flex-direction:row !important; align-items:stretch !important; flex:0 0 auto !important; gap:0 !important; width:auto !important; max-width:none !important; height:42px; margin:0 !important; padding:0 !important; position:static !important; border:1px solid #c9d6ea; border-radius:999px; background:#eef3fa; overflow:hidden; box-shadow:0 4px 12px -8px rgba(28,58,94,.35);}
  html body #header .site-header-top, html body #header .site-header-top > div{display:flex !important; align-items:stretch !important; height:100% !important; min-height:0 !important; width:auto !important; margin:0 !important; padding:0 !important; order:1;}
  html body #header .site-header-bottom{display:contents !important;}
  html body #header #aantalonline{display:none !important;}
  html body #header .topnav{display:flex; margin:0 !important;}
  html body #header .site-header-top .topnav:has(a[href$="loguit"]){display:none !important;} /* Log uit staat in het menu */

  /* licht deel: 'log in' (niet ingelogd) of 'pcode 1234567' (ingelogd, link naar /account) */
  html body #header #aantalonline, html body #header .site-header-top .topnav.verbergen-xs{display:none !important;}
  html body #header .topnav-item{display:inline-flex !important; align-items:center; height:100%; width:auto !important; padding:0 10px 0 14px !important; border-radius:0 !important; background:transparent !important; font-size:0 !important; line-height:1; white-space:nowrap; text-decoration:none !important;}
  html body #header .topnav-item > i, html body #header .topnav-item > span, html body #header .topnav-item > b{display:none !important;}
  html body #header .topnav-item[href*="login-"]::before{content:"log"; font:700 14px/1 var(--mn-ui); color:var(--mn-blauw);}
  html body #header .topnav-item[href*="login-"]::after{content:"\00a0in"; font:700 14px/1 var(--mn-ui); color:var(--mn-navy);}
  html body #header .topnav-item[href$="/account"]::before{content:"pcode"; font:700 14px/1 var(--mn-ui); color:var(--mn-blauw);}
  html body #header .topnav-item[href$="/account"] > span{display:inline !important; margin-left:6px; font:700 14px/1 var(--mn-ui) !important; color:var(--mn-navy) !important;}
  html body #header .topnav-item[href$="/account"] > span > b{display:none !important;}
  html body #header .topnav-item:active{background:var(--mn-blauw-licht) !important;}
  html body #header .site-header-top .login--panel:has(a[href$="/account"]){display:flex !important;}

  /* donker deel: 'gratis account' / '168 credits' / 'saldo opladen' (bestaande links) + menu */
  html body #header .quote-ribbon{order:2; display:flex !important; margin:0 !important; position:static !important; height:100%;}
  html body #header .quote-ribbon .kl-cta-ribbon{display:inline-flex !important; align-items:center; gap:6px; height:100% !important; margin:0 !important; padding:0 2px 0 14px !important; border-radius:999px 0 0 999px !important; background:var(--mn-navy) !important; box-shadow:none !important; position:static !important; top:auto !important; font:700 14px/1 var(--mn-ui) !important; letter-spacing:0 !important; text-transform:lowercase !important; white-space:nowrap; color:var(--mn-geel) !important;}
  html body #header .quote-ribbon .kl-cta-ribbon strong{display:inline !important; margin:0 !important; font-size:14px !important; font-weight:700 !important; color:#fff !important;}
  html body #header .quote-ribbon .trisvg{display:none !important;}
  html body #header .main-menu-wrapper{order:3; display:flex !important; align-items:center; flex:0 0 auto !important; width:auto !important; height:100%; padding:0 !important; background:var(--mn-navy);}
  html body #header #zn-res-menuwrapper{display:flex; align-items:center; height:100%;}
  html body #header .zn-res-trigger{position:relative !important; display:block !important; width:44px !important; height:40px !important; margin:0 !important; top:0 !important;}
  html body #header .zn-res-trigger::after{left:12px !important; top:13px !important; margin:0 !important; width:20px !important; height:3px !important; border-radius:2px; background:var(--mn-geel) !important; box-shadow:0 6px 0 var(--mn-geel),0 12px 0 var(--mn-geel) !important;}

  /* ---------- 2. TYPOGRAFIE ---------- */
  body{color:var(--mn-tekst); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
  .mkw, .mkw-btn, .mkw-naam, .mkw-pin{font-family:var(--mn-ui) !important;}

  /* ---------- 3. HERO (homepage, niet ingelogd) ---------- */
  /* achtergrond = de eigen overloop van Milena (images/hero-milena-mobiel.webp); #e4dad2 is exact de kleur van die overloop, dus geen naad */
  .mn-hero{display:block !important; position:relative; overflow:hidden; margin:0 0 8px; height:196px; background:#e4dad2; isolation:isolate;}
  .mn-hero + section.hg_section{padding-top:0 !important;}
  .mn-hero__foto{position:absolute; top:0; right:-30px; height:100%; width:auto; max-width:none; z-index:-2;}
  .mn-hero__tekst{position:relative; padding:22px 0 0 18px;}
  .mn-hero h1{margin:0 0 6px; font-family:var(--mn-ui) !important; font-size:19px; line-height:1.2; font-weight:700; color:var(--mn-tekst); text-transform:uppercase; letter-spacing:.02em !important; white-space:nowrap;}
  .mn-hero__sub{margin:0 0 16px; font-family:var(--mn-ui) !important; font-size:16px; line-height:1.2; font-weight:400; color:var(--mn-tekst); text-transform:lowercase; letter-spacing:0; white-space:nowrap;}
  .mn-hero__sub span{font-weight:700; color:var(--mn-diepblauw);}
  .mn-hero__usp{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
  .mn-hero__usp li{display:flex; align-items:center; gap:10px; font-family:var(--mn-ui); font-size:13.5px; line-height:1.2; color:var(--mn-tekst);}
  .mn-hero__ico{flex:0 0 20px; width:20px; height:20px; fill:none; stroke:var(--mn-blauw); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

  /* ---------- 4. SORTEERBALK: ongewijzigd (stijl uit index.php, zelfde als zoekmediumsmobiel) ---------- */

  /* ---------- 5. BELKNOPPEN bovenaan: zelfde als zoekmediumsmobiel (.mkw-kopknop) ---------- */
  html body #paragnosten > section:nth-of-type(2) a.btn-element[href^="tel:"]{min-height:46px !important; height:46px !important; padding:0 8px !important; border-radius:9px !important; border:1px solid rgba(255,255,255,.92) !important; box-shadow:none !important;}
  html body #paragnosten > section:nth-of-type(2) a.btn-fullcolor[href^="tel:"]{background:#799bd0 !important;}
  html body #paragnosten > section:nth-of-type(2) a.btn-fullmediums[href^="tel:"]{background:#ffb511 !important;}
  html body #paragnosten > section:nth-of-type(2) a.btn-element[href^="tel:"] > span{color:#fff !important; font-family:var(--mn-ui) !important; font-size:12px !important; font-weight:700 !important; letter-spacing:0 !important; gap:5px !important;}
  html body #paragnosten > section:nth-of-type(2) a.btn-element[href^="tel:"] .fas{font-size:12px !important; color:#fff !important;}
  html body #paragnosten > section:nth-of-type(2) a.btn-element[href^="tel:"] img{width:14px !important; height:14px !important;}

  /* ---------- 6. TELREGEL: één lijn, Arial, groene 'online'-stip ---------- */
  html body #paragnosten .callout-banner{margin:16px 0 0 !important; padding:0 4px !important;}
  html body #paragnosten .callout-banner .fw-thin, html body #paragnosten .callout-banner .fw-thin *{font-family:var(--mn-ui) !important; font-size:15px !important; font-weight:700 !important; letter-spacing:0 !important; color:var(--mn-tekst) !important; white-space:nowrap;}
  html body #paragnosten .callout-banner .fw-thin::before{content:""; display:inline-block; width:8px; height:8px; margin:0 8px 2px 2px; border-radius:50%; background:var(--mn-groen); box-shadow:0 0 0 4px rgba(34,165,89,.16); vertical-align:middle;}

  /* ---------- 7. KAARTJES: rustiger, NL/chat = zelfde geel als bovenaan ---------- */
  .mkw{border-radius:14px !important; padding:9px 11px !important; margin-bottom:7px !important;}
  .mkw-av{flex:0 0 60px !important; width:60px !important; height:60px !important;}
  .mkw-mini .mkw-av{flex-basis:56px !important; width:56px !important; height:56px !important;}
  .mkw-laatste{margin-top:2px !important;}
  .mkw-acties{margin-top:7px !important;}
  .mkw-btn{min-height:38px !important; border-radius:10px !important; font-size:13px !important; font-weight:600 !important;}
  .mkw-hoofd, .mkw-chat-hoofd{background:#ffb511 !important; color:#fff !important; border-color:#ffb511 !important; box-shadow:0 4px 10px -6px rgba(217,119,6,.55) !important;}
  .mkw-chat-hoofd svg{color:#fff !important;}
  .mkw-licht{background:var(--mn-blauw-licht) !important; color:var(--mn-navy) !important;}
  .mkw-profiel{border-width:1px !important;}
  .mkw-pin{padding:4px 12px !important; line-height:1.3 !important;}
  .mkw-naamrij{gap:12px !important;}
}