/*
Theme Name: Factz
Description: Front-end van Factz, een oefen- en toetsapp voor feiten en begrippen. Vereist de plug-in Factz Core.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: factz
*/

@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(assets/fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(assets/fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(assets/fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(assets/fonts/poppins-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(assets/fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(assets/fonts/poppins-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --primary:#9261E2; --primary-strong:#7A47CC; --primary-soft:#E6DBFA; --primary-wash:#F4EEFD;
  --bg:#EFE8FB; --surface:#FFFFFF; --ink:#1E1B26; --muted:#6B6578; --line:#E2DAF2;
  --dark:#1D1E23; --dark-ink:#F4F2F8;
  --ok:#237A55; --ok-bg:#DDF3E8; --bad:#B4303B; --bad-bg:#FBE0E2; --joker:#B26A00; --joker-bg:#FFEBC7;
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --shadow:0 8px 28px rgba(110,70,190,.14);
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#17141F; --surface:#221E2E; --ink:#F2EEFA; --muted:#A79FB8; --line:#383050; --primary-soft:#3A2E5C; --primary-wash:#2A2340;
  --ok:#6FD3A3; --ok-bg:#183A2B; --bad:#FF8E97; --bad-bg:#43202A; --joker:#FFC15A; --joker-bg:#47340F; --shadow:0 8px 28px rgba(0,0,0,.4);}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:700} h2{font-size:1.4rem;font-weight:600} h3{font-size:1.1rem;font-weight:600}
p{margin:0}
a{color:var(--primary-strong)}
.loading{padding:48px;text-align:center;color:var(--muted)}
.muted{color:var(--muted);font-size:.875rem}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row.end{justify-content:flex-end}.row.between{justify-content:space-between}
.stack>*+*{margin-top:16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.panel{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow);padding:24px}
.sec{margin-top:32px}.sec>.row{margin-bottom:14px}

/* shell */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh;max-width:1280px;margin:0 auto}
.side{background:var(--primary);color:#fff;margin:16px;border-radius:var(--r-l);padding:20px 12px;position:sticky;top:16px;align-self:start;height:calc(100vh - 32px);display:flex;flex-direction:column}
.side .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.3rem;padding:0 10px 24px}
.side .logo i{font-style:normal;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav a,.nav button{color:#fff;opacity:.78;text-decoration:none;padding:11px 14px;border-radius:var(--r-s);font:500 .92rem var(--font);background:none;border:0;text-align:left;cursor:pointer}
.nav a:hover,.nav button:hover{opacity:1;background:rgba(255,255,255,.12)}
.nav a[aria-current]{opacity:1;font-weight:600;background:rgba(255,255,255,.2)}
.nav .spacer{flex:1}
.main{padding:16px 24px 64px;min-width:0}
.banner{background:var(--primary);color:#fff;border-radius:var(--r-l);padding:28px;margin-bottom:8px}
.banner p{opacity:.92;margin-top:6px}
.crumb{display:inline-block;margin-bottom:8px;font-size:.875rem}
@media(max-width:800px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;margin:12px;flex-direction:row;align-items:center;padding:10px 12px;overflow-x:auto}
  .side .logo{padding:0 12px 0 0}.side .logo span{display:none}
  .nav{flex-direction:row;align-items:center}.nav .spacer{display:none}.nav a,.nav button{white-space:nowrap}
  .main{padding:8px 14px 56px}
}

/* knoppen en velden */
.btn{font:600 .95rem var(--font);border:0;border-radius:var(--r-pill);padding:11px 22px;cursor:pointer;background:var(--primary);color:#fff;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--primary-strong)}
.btn.soft{background:var(--primary-soft);color:var(--primary-strong)}
.btn.ghost{background:transparent;color:var(--primary-strong);box-shadow:inset 0 0 0 2px var(--primary)}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
.btn.small{padding:6px 14px;min-height:36px;font-size:.85rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;font:400 1rem var(--font);color:var(--ink);background:var(--primary-wash);border:2px solid transparent;border-radius:var(--r-s);padding:11px 14px;min-height:44px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line)}
.field textarea{min-height:110px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:10px;padding:6px 0;cursor:pointer}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--primary);flex:none}
.err{color:var(--bad);background:var(--bad-bg);border-radius:var(--r-s);padding:10px 14px;font-size:.9rem;margin-bottom:12px}
.pill{display:inline-block;font-size:.78rem;font-weight:600;padding:3px 12px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary-strong);white-space:nowrap}
.pill.live{background:var(--ok-bg);color:var(--ok)}.pill.wait{background:var(--joker-bg);color:var(--joker)}.pill.done{background:var(--line);color:var(--muted)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
.joker{display:inline-flex;gap:6px;align-items:center;background:var(--joker-bg);color:var(--joker);font-weight:600;font-size:.85rem;padding:4px 12px;border-radius:var(--r-pill)}

/* tegels */
.tile{background:var(--primary-soft);border-radius:var(--r-l);padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;text-decoration:none;color:inherit}
.tile h3{color:var(--primary-strong);font-size:1.25rem}
.tile.active{box-shadow:inset 0 0 0 3px var(--primary)}
.tile.locked{background:var(--line)}
.tile .row{gap:8px}

/* lijsten en tabellen */
.rows>*{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.rows>*:last-child{border-bottom:0}
.rows .grow{flex:1;min-width:160px}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:.85rem}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 16px}
.tabs button{font:600 .9rem var(--font);border:0;border-radius:var(--r-pill);padding:9px 18px;background:var(--surface);color:var(--muted);cursor:pointer;min-height:40px}
.tabs button[aria-selected=true]{background:var(--primary);color:#fff}
.tree ul{list-style:none;margin:0;padding-left:22px;border-left:2px solid var(--line)}
.tree>ul{padding-left:0;border-left:0}
.tree li{padding:6px 0}
.tree .folder{font-weight:600}

/* dialoog en melding */
dialog{border:0;border-radius:var(--r-l);padding:0;max-width:min(560px,94vw);width:100%;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(20,10,40,.5)}
.dlg{padding:26px;max-height:88vh;overflow:auto}.dlg>h3{margin-bottom:16px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--dark);color:#fff;padding:12px 22px;border-radius:var(--r-pill);z-index:99;font-size:.92rem}

/* oefenen en toetsen */
.q{max-width:640px;margin:24px auto 0}
.qmeta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:.88rem;color:var(--muted);gap:10px}
.bar{height:8px;border-radius:var(--r-pill);background:var(--primary-soft);overflow:hidden;margin-bottom:22px}
.bar b{display:block;height:100%;background:var(--primary);border-radius:inherit;transition:width .25s}
.term{font-size:clamp(1.3rem,3.5vw,1.7rem);font-weight:700;line-height:1.3;margin:0 0 20px}
.opt{display:block;width:100%;text-align:left;font:500 1rem/1.4 var(--font);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:var(--r-m);padding:14px 16px;margin-bottom:10px;cursor:pointer;min-height:56px}
.opt:hover:not([disabled]){border-color:var(--primary)}
.opt[disabled]{cursor:default}
.opt.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.feedback{border-radius:var(--r-m);padding:14px 16px;margin:6px 0 16px;font-weight:600}
.feedback.right{background:var(--ok-bg);color:var(--ok)}.feedback.wrong{background:var(--bad-bg);color:var(--bad)}
.feedback small{display:block;font-weight:400;margin-top:2px}
.result{text-align:center;max-width:520px;margin:32px auto 0}
.result .big{font-size:3rem;font-weight:700;color:var(--primary-strong);line-height:1.1;margin:8px 0}

/* inloggen */
.signin{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.signin .l{background:var(--dark);color:var(--dark-ink);padding:48px clamp(24px,6vw,80px);display:flex;flex-direction:column;justify-content:center}
.signin .l h1{margin-bottom:6px}.signin .l p{color:#A9A6B4;margin-bottom:28px}
.signin .l .field>span{color:#A9A6B4}.signin .l .field input{background:#2A2B32;color:#fff}
.signin .l .alt{margin-top:40px;color:#A9A6B4;font-size:.9rem}.signin .l .alt a{color:#CDB6F5}
.signin .r{background:var(--primary);color:#fff;padding:48px clamp(24px,6vw,80px);display:flex;flex-direction:column;justify-content:center}
.signin .r b{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;font-weight:700}
.signin .r p{margin-top:14px;opacity:.92;max-width:34ch}
@media(max-width:800px){.signin{grid-template-columns:1fr}.signin .r{order:-1;padding:32px 24px}.signin .r p{display:none}}

/* WordPress-inlogscherm */
body.login{display:block;min-height:0;background:var(--dark)}
body.login #login h1 a{background:none;color:#fff;font:700 2.2rem var(--font);text-indent:0;width:auto;height:auto;line-height:1.4}
body.login form{background:var(--surface);border:0;border-radius:var(--r-l);box-shadow:var(--shadow)}
body.login .button-primary{background:var(--primary);border:0;border-radius:var(--r-pill);padding:4px 22px}
body.login #nav a,body.login #backtoblog a{color:#CDB6F5}