/* =====================================================================
   mobiele basislaag 2026 (enkel < 768px): kleurtokens, kopbalk, login/account-blok, footer.
   Gedeeld door mediums.nl en de pointer-domeinen (eerst helderzienden.be); geladen via incl_css.php
   VOOR mobiel-2026.css (mediums.nl-specifieke onderdelen) en mobiel-2026-login.css.
   2026-11-05: uit mobiel-2026.css gehaald zonder wijzigingen aan de regels zelf.
   ===================================================================== */
: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;
}

.mn-login{display:none;} /* loginpagina: app-weergave enkel op mobiel */
@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;}

  /* ---------- 8. LOGINPAGINA (login.php, mediums.nl): app-weergave met tabs ---------- */
  body:has(.mn-login) .kl-slideshow-inner.static-content__wrapper,
  body:has(.mn-login) #paragnosten,
  body:has(.mn-login) #paragnosten + section.hg_section,
  body:has(.mn-login) section.hg_section:has(a.btn-fullwidth[href*="gratis-account-aanmaken"]){display:none !important;}
  .mn-login{display:block; padding:14px 14px 6px; background:#f4f6fa;}
  .mn-login__tabs{display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:4px; padding:4px; background:#e8edf5; border-radius:14px;}
  .mn-login__tab{appearance:none; border:0; background:transparent; height:40px; padding:0 6px; border-radius:11px; font:700 13.5px/1 var(--mn-ui); color:#56667c; white-space:nowrap; cursor:pointer;}
  .mn-login__tab[aria-selected="true"]{background:#fff; color:var(--mn-navy); box-shadow:0 1px 3px rgba(28,58,94,.16);}
  .mn-login__tab:focus-visible{outline:2px solid var(--mn-diepblauw); outline-offset:2px;}
  .mn-login__kaart{margin-top:12px; padding:18px 16px 16px; background:#fff; border:1px solid rgba(28,58,94,.08); border-radius:16px; box-shadow:0 1px 2px rgba(22,50,79,.04),0 8px 20px -14px rgba(22,50,79,.25);}
  .mn-login__intro{margin:0 0 14px; font:400 15px/1.45 var(--mn-ui); color:var(--mn-tekst);}
  .mn-login__fout{margin:0 0 12px;}
  .mn-login__form{display:flex; flex-direction:column; margin:0;}
  .mn-login__label{margin:0 0 5px; font:700 12px/1.2 var(--mn-ui); letter-spacing:.04em; text-transform:uppercase; color:#56667c;}
  .mn-login__input{width:100%; height:48px; margin:0 0 14px; padding:0 14px; border:1.5px solid #d6deea; border-radius:12px; background:#fff; font:400 16px/1 var(--mn-ui); color:var(--mn-tekst); box-shadow:none; -webkit-appearance:none;}
  .mn-login__input:focus{outline:none; border-color:var(--mn-blauw); box-shadow:0 0 0 3px rgba(120,153,204,.25);}
  .mn-login__check{display:flex; align-items:center; gap:10px; margin:2px 0 16px; font:400 14px/1.3 var(--mn-ui); color:var(--mn-tekst);}
  .mn-login__check input{width:20px; height:20px; margin:0; accent-color:var(--mn-navy);}
  .mn-login__knop{display:flex; align-items:center; justify-content:center; width:100%; height:48px; margin:2px 0 0; border:0; border-radius:12px; background:var(--mn-navy); color:#fff !important; font:700 14px/1 var(--mn-ui); letter-spacing:.04em; text-decoration:none !important; cursor:pointer; -webkit-appearance:none;}
  .mn-login__knop:active{transform:scale(.99);}
  .mn-login__link{margin:12px 0 0; font:400 14px/1.4 var(--mn-ui); color:var(--mn-tekst-zacht); text-align:center;}
  .mn-login__link a{color:var(--mn-diepblauw);}
  .mn-login__voordelen{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px;}
  .mn-login__voordelen li{position:relative; padding-left:28px; font:400 15px/1.35 var(--mn-ui); color:var(--mn-tekst);}
  .mn-login__voordelen li::before{content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--mn-blauw-licht); color:var(--mn-diepblauw); font-size:10px; line-height:20px; text-align:center;}

  /* wachtwoord resetten: terug-link boven de kaart (zelfde patroon als 'Terug naar …' op de profielen) */
  .mn-login__terug{display:inline-flex; align-items:center; gap:8px; margin:0 2px 10px; font:700 15px/1.3 var(--mn-ui); color:var(--mn-navy) !important; text-decoration:none !important;}
  .mn-login__terug::before{content:""; width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:3px;}

}

/* ---------- 11. FOOTER mobiel (2026-11-05): navy met lichtgolven, compact, zelfde stijl als login/account ---------- */
@media (max-width:767px){
  html body #footer{position:relative; overflow:hidden; margin:0 !important; padding:22px 0 16px !important; border:0 !important;
    background:linear-gradient(180deg, #1C3A5E 0%, #15305A 55%, #102544 100%) !important; background-attachment:scroll !important; color:#fff;}
  html body #footer::before{content:""; position:absolute; inset:0 0 auto 0; height:190px; pointer-events:none; opacity:.55;
    background:url(../images/mn-login-voet.webp) center top / 100% auto no-repeat;
    -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent 100%); mask-image:linear-gradient(180deg, #000 30%, transparent 100%);}
  html body #footer > .container{position:relative; padding:0 20px !important; max-width:none !important;}
  html body #footer .row{margin:0 !important;}
  html body #footer [class*="col-"]{padding:0 !important; margin:0 !important;}
  /* logo: wit woordmerk */
  html body #footer h3.m_title:has(.logo-img){margin:0 0 8px !important; padding:0 !important;}
  html body #footer .logo-img{display:block; height:28px !important; width:auto !important; max-width:none !important;}
  /* per domein een logo met lichte letters (helderzienden_be_footer.png is al licht) */
  html body #footer .logo-img[src$="/mediums_footer.png"]{content:url(../images/mediums-logo-licht.png);}
  /* sectiekoppen klein, goud */
  html body #footer h3.m_title:not(:has(.logo-img)){margin:16px 0 4px !important; padding:0 !important; font:700 11.5px/1.2 Arial,system-ui,sans-serif !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:#E5AE48 !important;}
  html body #footer h3.m_title a{color:inherit !important; font:inherit !important; text-decoration:none !important;}
  /* linkenlijsten: twee kolommen, compact maar tikbaar */
  html body #footer ul:not(.footer-daghoroscoop-grid){display:grid !important; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:0; margin:0 !important; padding:0 !important; list-style:none !important;}
  html body #footer ul li{margin:0 !important; padding:0 !important; border:0 !important; background:none !important; float:none !important; width:auto !important;}
  html body #footer ul li::before{display:none !important;}
  html body #footer ul li a{display:flex !important; align-items:center; min-height:32px; padding:0 !important; font:400 14px/1.25 Arial,system-ui,sans-serif !important; color:rgba(255,255,255,.86) !important; text-decoration:none !important; letter-spacing:0 !important;}
  html body #footer ul li a:active{color:#fff !important;}
  /* daghoroscoop: 12 sterrenbeelden in 2 rijen van 6 */
  html body #footer nav:has(.footer-daghoroscoop-grid){margin-top:0 !important;}
  html body #footer .footer-daghoroscoop-grid{display:grid !important; grid-template-columns:repeat(6,1fr); gap:8px !important; margin:4px 0 6px !important; padding:0 !important;}
  html body #footer .footer-daghoroscoop-grid a{display:flex !important; justify-content:center; min-height:0;}
  html body #footer .fdg-cirkel{width:40px !important; height:40px !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(229,174,72,.35) !important;}
  html body #footer .fdg-cirkel img{width:24px !important; height:24px !important;}

  /* keurmerk: klein en rustig */
  html body #footer .newsletter-signup{margin:12px 0 0 !important; padding:0 !important; font:400 12.5px/1.5 Arial,system-ui,sans-serif !important; color:rgba(255,255,255,.7) !important;}
  html body #footer .newsletter-signup a{color:#fff !important;}
  html body #footer .newsletter-signup img{width:96px !important; height:auto; margin-top:2px;}
  html body #footer .newsletter-signup br + br{display:none;}
  html body #footer > .container > br{display:none;}

  /* scheiding + copyright */
  html body #footer .bottom{margin:18px 0 0 !important; padding:14px 0 0 !important; border-top:1px solid rgba(255,255,255,.14) !important;}
  html body #footer .bottom::before, html body #footer .bottom::after{display:none !important;}
  html body #footer .copyright, html body #footer .copyright p{margin:0 !important; padding:0 !important; font:400 12px/1.55 Arial,system-ui,sans-serif !important; color:rgba(255,255,255,.55) !important; text-align:left;}
  html body #footer .copyright a{color:rgba(255,255,255,.85) !important; font-weight:700 !important; text-decoration:none !important;}
}