/* MiniSkills - mobiele laag voor alle losse pagina's (homepage, uitleg-pagina's, werelden, FAQ, ideeënbus, juridisch).
   Wordt door de server als laatste stylesheet in de <head> gezet, zodat deze regels voorgaan. */

/* ── Basis: nooit zijwaarts scrollen, tekst niet zelf laten opblazen, nette focus ── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
img,video{max-width:100%}
h1,h2,h3,h4,p,li,dd,td,summary,label{overflow-wrap:break-word}
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:rgba(7,51,143,.12);touch-action:manipulation}
:focus-visible{outline:3px solid #0757d9;outline-offset:3px;border-radius:6px}
header .btn,header .back{white-space:nowrap}
.btn{max-width:100%}

/* Uitklapvragen: geen dubbel driehoekje in Safari, en de hele kop is aantikbaar */
summary::-webkit-details-marker{display:none}
summary{list-style:none}

/* ── Menu (header met .links + .hamb) ── */
.hamb{align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;flex:0 0 48px;padding:0;border-radius:12px;cursor:pointer;line-height:1}
.hamb:active{background:#e4f3ff}
.links .m-only{display:none}
@media(max-width:980px){
  .hamb{display:inline-flex !important}
  header .links{display:none !important}
  header .links.open{display:flex !important;flex-direction:column;align-items:stretch;gap:4px;position:absolute;top:100%;left:0;right:0;z-index:40;
    margin:0;padding:12px 16px calc(18px + env(safe-area-inset-bottom));background:#fff;border-bottom:1px solid #dcecff;
    box-shadow:0 22px 40px rgba(6,38,100,.18);max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
  header .links.open a{display:flex;align-items:center;min-height:52px;padding:0 16px;font-size:18px;border-radius:12px;transform:none !important}
  header .links.open a:not(.active):not(.m-cta){background:transparent;box-shadow:none;color:inherit}
  header .links.open .m-only{display:flex}
  header .links.open .m-sep{display:block;height:1px;min-height:0;background:#dcecff;margin:6px 4px;padding:0}
  header .links.open .m-cta{justify-content:center;margin-top:6px;background:var(--sign-orange,#d96b2b);color:#fff;font-weight:800;box-shadow:0 5px 0 #873b18}
  body.menu-open{overflow:hidden}
}

/* ── Telefoon ── */
@media(max-width:640px){
  /* Header: logo + één knop + menu passen altijd op één regel */
  header .actions{gap:8px}
  header .actions .btn{min-height:44px;padding:0 14px;font-size:15px}
  .logo small{font-size:11px;white-space:nowrap}
  header .back{white-space:nowrap}

  /* Voettekst: links groot genoeg om met een duim te raken */
  footer a{display:inline-flex;align-items:center;min-height:44px}
  footer .foot-links,footer .ms-foot-links{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:0}

  /* Uitklapvragen: tikvlak over de volle breedte */
  details{padding:0 !important}
  details>summary{padding:15px 18px;min-height:56px;align-items:center}
  details>*:not(summary){margin-left:18px !important;margin-right:18px !important}
  details>*:last-child:not(summary){margin-bottom:16px !important}

  /* Kleine labels niet onder de 13px */
  .ms-ex .l,.ms-small,.idee small,.eyebrow{font-size:13px}

  /* Onderwerpknoppen (FAQ) en knoppenrijen: groot genoeg en doorlopend naar een volgende regel */
  .faq-nav a{display:inline-flex;align-items:center;min-height:44px}
  /* lopen door naar een volgende regel */
  .ms-btns,.hero-actions,.w-others{display:flex;flex-wrap:wrap;gap:10px}

  /* Kopafbeelding: lichtere uitsnede voor smalle schermen */
  /* (uitsnede = rechter 45% van het brede beeld: dorp links, wegwijzer rechts) */
  .ms-price,.ms-week-card,.ms-duo{grid-template-columns:minmax(0,1fr) !important}
  .btn{white-space:normal;text-align:center}
  header .btn{white-space:nowrap}
  #ontdek.hero{background-image:linear-gradient(180deg,rgba(4,38,105,.12),rgba(4,38,105,.9) 62%),url('/assets/miniskills-wereld-nederland-m.webp');background-position:6% center}
  /* Tekst loopt op de telefoon over de volle breedte: egale donkere laag zodat alles leesbaar blijft */
  .p-hero{background-image:linear-gradient(180deg,rgba(4,38,105,.84),rgba(4,38,105,.74)),url('/assets/miniskills-wereld-nederland-m.webp')}
  section.hero:not(#ontdek){background-image:linear-gradient(180deg,rgba(4,38,105,.80),rgba(4,38,105,.62)),url('/assets/miniskills-wereld-nederland-m.webp')}

  /* Formulieren: 16px voorkomt inzoomen op iPhone; ruime tikvlakken */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:48px}
  textarea{min-height:120px}
  .soort span{padding:11px 16px;font-size:15px}

  /* Cookiebalk: knop goed raakbaar, niet tegen de onderrand */
  .cookiebar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .cookiebar a,.cookiebar button{min-height:44px;display:inline-flex;align-items:center}
  .cookiebar button{padding:0 18px}
}

/* Zeer smalle telefoons (bv. iPhone SE 1e generatie, 320px) */
@media(max-width:420px){
  header .nav,header .ms-row{gap:10px}
}
@media(max-width:360px){
  .logo{font-size:36px !important}
  header .logo small{display:none !important}
  /* Wereldpagina's: terugknop wijkt, 'Werelden' staat in het menu */
  header .back{display:none}
  header .actions .btn{padding:0 11px;font-size:14px}
}