/* 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}
}

/* ── Logo: voxel-papiervliegtuig met MiniSkills-banner (2026-10-06) ── */
.logo .ms-logo{display:block;height:64px;width:auto;max-width:none}
.logo:has(.ms-logo){line-height:0;font-size:0 !important;padding:0;background:none;border:0;box-shadow:none}
footer .logo .ms-logo{height:56px}
@media(max-width:640px){.logo .ms-logo{height:46px}footer .logo .ms-logo{height:48px}}
@media(max-width:350px){header .logo .ms-logo{height:40px}}

/* Wettelijke vermelding onderaan elke pagina (handelsnaam van Stroombox) */
.ms-handelsnaam{display:block;flex-basis:100%;width:100%;font-size:12.5px;line-height:1.5;opacity:.85;padding:12px 0 2px;margin-top:10px;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 18%,transparent)}
.ms-handelsnaam a{color:inherit;text-decoration:underline}
.ms-social{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px;font-weight:600}
.ms-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 30%,transparent);text-decoration:none;transition:background .15s}
.ms-social a:hover,.ms-social a:focus-visible{background:color-mix(in srgb,currentColor 12%,transparent)}
@media (max-width:640px){.ms-social a{width:44px;height:44px}}
footer .foot:has(.ms-handelsnaam),footer .wrap:has(> .ms-handelsnaam){flex-wrap:wrap}
footer .ms-handelsnaam{order:99;flex:1 0 100%;max-width:none}