/* Sjotter · gedeelde basis voor alle modules
   Eén lettertype (Exo 2), één handschrift (Caveat), één set kleuren.
   Modules laden dit bestand eerst en zetten daarna hun eigen accent (--sj-acc). */

@font-face{font-family:'Exo 2';src:url('../assets/fonts/exo2.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Exo 2';src:url('../assets/fonts/exo2-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Caveat;src:url('../assets/fonts/caveat.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  /* zaal (achtergrond) */
  --sj-zaal:#17393E; --sj-zaal-d:#0F2A2E; --sj-zaal-l:#1F4A50;
  /* kaarten: gebroken wit */
  --sj-krem:#F6F3EC; --sj-krem-2:#EFEBE3; --sj-krem-3:#E9E3D7; --sj-krem-rand:#E2DCD0; --sj-krem-veld:#FBF9F4;
  /* tekst op krem */
  --sj-inkt:#26363A; --sj-inkt-d:#1F2C30; --sj-zacht:#5E6A6C;
  /* merkkleuren */
  --sj-petrol:#1F5A63; --sj-geel:#F4C95D; --sj-geel-d:#8A5F00;
  /* module-accenten */
  --sj-om:#5BB8FF; --sj-cs:#FF8A6B; --sj-th:#6FD6B0; --sj-pn:#B79CFF;
  /* scores */
  --sj-top:#178041; --sj-goed:#5E8C10; --sj-mid:#B07600; --sj-laag:#C0392B;
  /* vorm */
  --sj-r:14px; --sj-r-klein:8px; --sj-schaduw:0 6px 18px rgba(0,0,0,.18);
  --sj-font:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sj-mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --sj-hand:Caveat,cursive;
}

/* Iconen (inline SVG-sprite, zie shared/iconen.js) */
.sj-ico{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.15em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Laadskelet in plaats van "Laden…" */
.sj-skelet{display:grid;gap:12px;padding:4px 0}
.sj-skelet i{display:block;height:64px;border-radius:var(--sj-r);background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.06) 100%);background-size:200% 100%;animation:sj-glans 1.3s ease-in-out infinite}
.sj-skelet i:first-child{height:120px}
.sj-skelet i:nth-child(3){width:70%}
@keyframes sj-glans{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sj-skelet i{animation:none}}

/* Toegankelijkheid */
:focus-visible{outline:3px solid var(--sj-geel);outline-offset:2px}
.sj-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Logo: Sjotter + modulelabel (eigen kleur per module via --acc) */
.sj-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
.sj-logo > svg{width:32px;height:32px;flex:none}
.sj-logo .o1{fill:#fff}.sj-logo .o2{fill:#0F2A2E}
.sj-logo-t{display:flex;flex-direction:column;line-height:1}
.sj-logo-t b{font-family:var(--sj-font);font-style:italic;font-weight:800;font-size:25px;letter-spacing:-.01em;color:#fff}
.sj-logo-l{align-self:flex-start;margin-top:5px;padding:2px 7px;border-radius:4px;background:var(--acc,#F4C95D);color:#14302F;font-family:var(--sj-font);font-style:italic;font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform:skewX(-10deg);display:inline-flex;align-items:center;gap:4px}
.sj-logo-l svg{width:12px;height:12px;stroke:#14302F;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:420px){.sj-logo > svg{width:28px;height:28px}.sj-logo-t b{font-size:22px}.sj-logo-l{font-size:9px;padding:2px 6px}}

/* Sjotter-platform: mini-logo met geel label, links van het modulelogo */
.sj-thuis{display:inline-flex;align-items:center;gap:7px;flex:none;margin-right:2px;padding:0 14px 0 0;border-right:1px solid rgba(255,255,255,.18);color:#fff!important;text-decoration:none;line-height:1;background:none;transform:none!important}
.sj-thuis > svg{width:20px;height:20px;flex:none}
.sj-thuis .o1{fill:#fff}.sj-thuis .o2{fill:#0F2A2E}
.sj-thuis .t{display:flex;flex-direction:column;line-height:1}
.sj-thuis b{font-family:var(--sj-font);font-style:italic;font-weight:800;font-size:15px;color:#fff}
.sj-thuis i{align-self:flex-start;margin-top:3px;padding:1px 5px;border-radius:3px;background:#F4C95D;color:#14302F;font-family:var(--sj-font);font-style:italic;font-weight:800;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;transform:skewX(-10deg)}
.sj-thuis:hover b{text-decoration:underline;text-decoration-color:#F4C95D;text-underline-offset:3px}
@media (max-width:480px){
  .sj-thuis{padding-right:10px;margin-right:0;gap:5px}
  .sj-thuis b{font-size:12.5px}
  .sj-thuis i{font-size:7.5px;padding:1px 4px;margin-top:2px}
  .sj-thuis > svg{width:18px;height:18px}
}

/* Wachtwoord tonen (shared/iconen.js) */
.sj-ww{position:relative;display:block;width:100%}
.sj-ww > input{width:100%;padding-right:42px!important;box-sizing:border-box}
.sj-oog{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;background:none;border:none;border-radius:8px;color:#5E6A6C;cursor:pointer;padding:0}
.sj-oog:hover{color:#1F5A63;background:rgba(31,90,99,.08)}
.sj-oog .sj-ico{width:18px;height:18px}

/* Account (shared/iconen.js): geel rondje met initialen */
[data-sj-acc]{display:inline-flex;align-items:center}
.sj-acc{position:relative}
.sj-acc > summary{list-style:none}
.sj-acc > summary::-webkit-details-marker{display:none}
.sj-acc-chip{width:34px;height:34px;border-radius:50%;background:#F4C95D;color:#14302F;display:grid;place-items:center;font:900 13.5px var(--sj-font);letter-spacing:.02em;cursor:pointer;user-select:none;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.sj-acc-chip:hover{background:#FFD978}
.sj-acc-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:282px;max-width:calc(100vw - 24px);background:#F6F3EC;color:#26363A;border:1px solid #E2DCD0;border-radius:12px;padding:12px;display:grid;gap:4px;box-shadow:0 16px 36px rgba(0,0,0,.3);text-align:left;font-family:var(--sj-font)}
.sj-acc-menu span{font-size:12px;color:#5E6A6C}
.sj-acc-menu b{font-size:14.5px;overflow-wrap:anywhere}
.sj-acc-menu small{font-size:12px;color:#5E6A6C;overflow-wrap:anywhere}
.sj-acc-uit{margin-top:8px;background:transparent;border:1px solid #1F5A63;color:#1F5A63;border-radius:8px;padding:8px;font:800 13px var(--sj-font);cursor:pointer;transform:none}
.sj-acc-uit:hover{background:#1F5A63;color:#fff}
[data-sj-acc]{display:inline-flex!important;max-width:none!important;overflow:visible!important;white-space:normal!important}
.sj-acc-menu span{display:block!important;overflow:visible!important;white-space:normal!important;max-width:none!important}
.sj-acc-in{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #DDD5C8;border-radius:8px;background:#FBF9F4;color:#26363A;font:500 14px var(--sj-font);margin-top:4px}
/* menuknoppen nooit door module-stijlen laten overschrijven */
.sj-acc-menu .sj-acc-uit{background:transparent!important;color:#1F5A63!important;border:1px solid #1F5A63!important;border-radius:8px!important;padding:8px!important;font:800 13px var(--sj-font)!important;font-style:normal!important;transform:none!important;box-shadow:none!important;min-height:0!important;width:100%;display:block}
.sj-acc-menu .sj-acc-uit:hover{background:#1F5A63!important;color:#fff!important}
.sj-acc-menu span{color:#5E6A6C!important;font-size:12px!important}.sj-acc-menu b{color:#1F2C30!important}.sj-acc-menu small{color:#5E6A6C!important}

/* accountmenu: snelkoppelingen + profiel */
.sj-acc-wie{display:grid;gap:2px;padding-bottom:9px;border-bottom:1px solid #E2DCD0}
.sj-acc-menu .sj-acc-kop{margin-top:8px;font-size:11px!important;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.sj-acc-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px}
.sj-acc-menu .sj-acc-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 4px 8px;border-radius:10px;background:#17393E;border:2px solid transparent;text-decoration:none!important;color:#F1ECE2!important;font:700 11.5px/1.2 var(--sj-font);text-align:center}
.sj-acc-menu .sj-acc-tool span{color:#F1ECE2!important;font-size:11.5px!important;font-weight:700}
.sj-acc-tool img{height:52px;width:auto;display:block}
.sj-acc-tool:hover{border-color:#F4C95D}
.sj-acc-tool.sj-acc-hier{border-color:#F4C95D}
.sj-acc-rij{display:flex;gap:6px;margin-top:10px}
.sj-acc-menu .sj-acc-knop{flex:1;background:transparent!important;color:#1F5A63!important;border:1px solid #1F5A63!important;border-radius:8px!important;padding:8px!important;font:800 13px var(--sj-font)!important;font-style:normal!important;transform:none!important;box-shadow:none!important;min-height:0!important;margin:0!important;cursor:pointer;width:auto}
.sj-acc-menu .sj-acc-knop:hover,.sj-acc-menu .sj-acc-vol{background:#1F5A63!important;color:#fff!important}
.sj-acc-menu .sj-acc-knop:disabled{opacity:.6;cursor:default}
.sj-acc-lbl{display:block;font:600 12px var(--sj-font);color:#5E6A6C!important;margin-top:8px}
.sj-acc-lbl i{font-style:normal;opacity:.8}
.sj-acc-msg{font:600 12.5px var(--sj-font);color:#C0392B}
.sj-acc-msg:empty{display:none}
/* hard maken tegen header-stijlen van de modules (bv. ".topbar nav a") */
.sj-acc-menu .sj-acc-tools{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:2px 0 0!important;padding:0!important;order:0!important;flex:none!important;width:auto!important}
.sj-acc-menu a.sj-acc-tool{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:9px 4px 8px!important;margin:0!important;border-radius:10px!important;background:#17393E!important;border:2px solid transparent!important;color:#F1ECE2!important;font:700 11.5px/1.2 var(--sj-font)!important;font-style:normal!important;text-align:center!important;transform:none!important;box-shadow:none!important;min-width:0!important;white-space:normal!important}
.sj-acc-menu a.sj-acc-tool:hover,.sj-acc-menu a.sj-acc-tool.sj-acc-hier{border-color:#F4C95D!important;background:#17393E!important}
.sj-acc-menu a.sj-acc-tool img{height:52px!important;width:auto!important;margin:0!important}
.sj-acc-menu a.sj-acc-tool span{font-size:11.5px!important;line-height:1.2!important;color:#F1ECE2!important;white-space:normal!important}
.sj-acc-menu .sj-acc-rij{display:flex!important;flex-direction:row!important;order:0!important;gap:6px!important;margin-top:10px!important}
.sj-acc-menu .sj-acc-duo{display:inline-flex!important;font-style:normal}
.sj-acc-menu a.sj-acc-tool .sj-acc-duo img{height:46px!important}
.sj-acc-menu a.sj-acc-tool .sj-acc-duo img + img{margin-left:-8px!important}