/* ============================================================
   Inlogscherm werkenbij (wp-login.php), in de huisstijl en de opbouw van de site.
   Met de hand geschreven, niet gegenereerd door bouw-assets.py. Hoort bij inc/inlog.php.
   Op wp-login.php laden de Bricks-variabelen niet; de tokens staan daarom hier, letterlijk
   uit design-systeem v2 (tokens.css). Knoppen, velden, eyebrow en berichten volgen components.css.
   ============================================================ */
:root{
  --c-cacao:#654832; --c-oranje:#ea7a0c; --c-wit:#ffffff; --c-zand:#f9f6ec; --c-warmbruin:#84604a;
  --c-warmwit:#fffdf7; --c-zand-diep:#f1ecd9; --c-mist:#e2d8c2;
  --oranje-hover:#f39647; --oranje-active:#c2640a; --success:#6b8e5a; --error:#b5482d;
  --primary:var(--c-oranje); --primary-hover:var(--oranje-hover); --primary-active:var(--oranje-active); --on-primary:var(--c-wit);
  --base:var(--c-warmwit); --surface:var(--c-zand); --ink:var(--c-cacao); --ink-soft:var(--c-warmbruin); --border:var(--c-mist);
  --font-head:'Lora',Georgia,serif; --font-body:'Source Sans 3',system-ui,sans-serif;
  --fs-h1:clamp(2.1rem, 2.6vw + 1rem, 3.25rem); --fs-h4:1.25rem; --fs-lead:1.25rem; --fs-body:1.125rem; --fs-small:1rem; --fs-eyebrow:0.8125rem;
  --lh-tight:1.05; --lh-body:1.65; --tracking-eyebrow:0.12em;
  --sp-2:8px; --sp-3:13px; --sp-4:21px; --sp-5:34px; --sp-6:55px;
  --r-sm:13px; --r-md:21px; --r-lg:32px; --r-pill:999px;
  --sh-subtle:0 1px 2px rgba(101,72,50,.06), 0 1px 1px rgba(101,72,50,.04);
  --sh-heavy:0 22px 50px rgba(101,72,50,.15);
  --ease:cubic-bezier(.22,1,.36,1);
  --content:1400px; --gutter:clamp(1.25rem, 4vw, 3.5rem);
}

/* ---- Basis ---- */
body.login{background:var(--base);font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-width:0;}
body.login *,body.login *::before,body.login *::after{box-sizing:border-box;}
.login .msr{font-family:'Material Symbols Rounded';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;display:inline-block;}
.login :focus-visible{outline:2.5px solid var(--primary);outline-offset:3px;}
.login ::selection{background:var(--primary);color:var(--c-wit);}

/* ---- Opbouw: preheader, kop, raster, voet ---- */
.kh-inlog{min-height:100vh;display:flex;flex-direction:column;}
.kh-schil{width:min(calc(100% - 2 * var(--gutter)), var(--content));margin-inline:auto;}
.kh-pre{background:var(--c-zand);height:38px;display:flex;align-items:center;font-size:.9375rem;line-height:1;}
.kh-pre .kh-schil{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-4);}
.kh-pre a{color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .18s var(--ease);}
.kh-pre a:hover{color:var(--primary);}
.kh-pre .msr{font-size:18px;color:var(--primary);}
.kh-kop{padding:var(--sp-3) 0;}
.kh-logo{display:block;position:relative;height:86px;width:auto;margin-top:-45px;}

.kh-raster{flex:1 0 auto;display:grid;grid-template-columns:1fr 1.08fr;column-gap:clamp(2rem,5vw,5rem);row-gap:var(--sp-4);align-content:center;padding:clamp(2rem,4vw,3.5rem) 0 clamp(3rem,6vw,5.5rem);}
.kh-tekst{grid-column:1;grid-row:1;align-self:end;}
.kh-raster #login{grid-column:1;grid-row:2;width:auto;max-width:520px;margin:0;padding:0;}
.kh-hulp{grid-column:1;grid-row:3;max-width:520px;margin:0;font-size:var(--fs-small);color:var(--ink-soft);}
.kh-foto{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0;position:relative;min-width:0;}

.kh-voet{background:var(--c-zand);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:0 var(--gutter) var(--sp-5);}
.kh-voet-tab{background:var(--base);border-radius:0 0 var(--r-md) var(--r-md);padding:var(--sp-3) var(--sp-6) var(--sp-4);}
.kh-voet-tab img{display:block;height:21px;width:auto;}
.kh-voet p{margin:0;font-size:var(--fs-small);color:var(--ink-soft);text-align:center;}

/* ---- Tekst links ---- */
.kh-inlog .eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);line-height:1;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--primary);margin:0 0 var(--sp-3);}
.kh-inlog .eyebrow::before{content:"";width:16px;height:1.5px;background:var(--primary);opacity:.85;transform:translateY(-1px);display:inline-block;}
.login h1.kh-titel{font-family:var(--font-head);font-weight:500;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.01em;text-wrap:balance;text-align:left;color:var(--ink);margin:0 0 var(--sp-4);padding:0;max-width:16ch;}
/* de zichtbare kop is de h1; de verborgen h1 van WordPress zou een tweede zijn */
.kh-raster > h1.screen-reader-text{display:none;}
.kh-lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink-soft);max-width:46ch;margin:0;}

/* ---- Formulier (markup van WordPress) ---- */
.login h1.wp-login-logo,.login #backtoblog,.login .privacy-policy-page-link{display:none;}
.login form{margin:0;padding:var(--sp-5);background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:none;overflow:visible;font-weight:400;}
/* WordPress zet marges per alinea; hier één kolom met vaste tussenruimte (sp-4) */
#login form{display:flex;flex-direction:column;gap:var(--sp-4);}
#login form > p,#login form > div{margin:0;}
.login label{display:block;font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink);margin:0 0 6px;}
.login form .input,.login input[type=text],.login input[type=password],.login input[type=email]{font-family:var(--font-body);font-size:1.0625rem;line-height:1.4;color:var(--ink);background:var(--c-wit);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;min-height:0;height:auto;width:100%;margin:0;box-shadow:none;}
.login form .input:focus,.login input[type=text]:focus,.login input[type=password]:focus,.login input[type=email]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(234,122,12,.18);}
.login ::placeholder{color:var(--ink-soft);}

/* wachtwoord tonen */
.login .wp-pwd{position:relative;}
.login .wp-pwd input.password-input{padding-right:52px;}
.login .button.wp-hide-pw{position:absolute;top:0;bottom:0;right:2px;height:auto;width:48px;min-width:0;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:var(--primary);display:flex;align-items:center;justify-content:center;}
.login .button.wp-hide-pw .dashicons{position:static;top:auto;color:var(--primary);}
.login .button.wp-hide-pw:hover{background:transparent;}
.login .button.wp-hide-pw:focus{background:transparent;border:0;box-shadow:none;outline:2.5px solid var(--primary);outline-offset:-4px;border-radius:var(--r-sm);}

/* ingelogd blijven */
.login form .forgetmenot{float:none;display:flex;align-items:center;gap:12px;margin:0;}
.login .forgetmenot label{display:inline;margin:0;font-size:1.0625rem;font-weight:400;line-height:1.4;cursor:pointer;}
.login .wp-tooltip__toggle,.login .wp-tooltip__toggle .dashicons{color:var(--ink-soft);}
.login .wp-tooltip__toggle:hover,.login .wp-tooltip__toggle:hover .dashicons{color:var(--primary);}
.login .wp-tooltip__bubble{background:var(--c-wit);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(101,72,50,.10);font-family:var(--font-body);font-size:1rem;line-height:1.45;}
.login input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;min-width:22px;margin:0;padding:0;border:1.5px solid var(--border);border-radius:6px;background:var(--c-wit);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease);}
.login input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary);}
.login input[type=checkbox]:checked::before{content:"";float:none;width:11px;height:6px;margin:0;background:none;border:2.5px solid var(--c-wit);border-top:0;border-right:0;transform:translateY(-2px) rotate(-45deg);}
.login input[type=checkbox]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(234,122,12,.18);}

/* knop */
.login .submit{margin:0;padding:0;clear:none;}
.login #wp-submit{float:none;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;min-height:0;margin:0;padding:14px 28px;background:var(--primary);color:var(--on-primary);border:1.5px solid transparent;border-radius:var(--r-pill);font-family:var(--font-body);font-size:1.0625rem;font-weight:700;line-height:1;text-shadow:none;box-shadow:none;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease);}
.login #wp-submit:hover,.login #wp-submit:focus{background:var(--primary-hover);border-color:transparent;color:var(--on-primary);box-shadow:none;}
.login #wp-submit:focus-visible{outline:2.5px solid var(--primary);outline-offset:3px;}
.login #wp-submit:active{background:var(--primary-active);transform:translateY(1px);}

/* link wachtwoord vergeten */
.login #nav{margin:var(--sp-4) 0 0;padding:0;font-size:1rem;line-height:1.4;}
.login #nav a{color:var(--primary);font-weight:600;text-decoration:none;}
.login #nav a:hover,.login #nav a:focus{color:var(--primary-active);text-decoration:underline;text-underline-offset:3px;}

/* berichten boven het formulier: fout, gelukt, informatie */
.login .message,.login .notice,.login .success,.login #login_error{border:0;border-radius:var(--r-sm);margin:0 0 var(--sp-4);padding:14px 18px;font-size:1rem;line-height:1.45;color:var(--ink);background:var(--c-zand-diep);box-shadow:none;}
.login #login_error,.login .notice-error{background:rgba(181,72,45,.10);}
.login .success,.login .notice-success{background:rgba(107,142,90,.14);}
.login .message p,.login .notice p,.login #login_error p{margin:0;padding:0;font-size:1rem;line-height:1.45;}
.login .message a,.login .notice a,.login #login_error a{color:var(--primary);font-weight:600;}

/* ---- Foto rechts, met het label van de home ---- */
.kh-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-heavy);}
.kh-tag{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--base);border-radius:0 var(--r-md) 0 0;padding:var(--sp-3) var(--sp-4) 2px 2px;font-size:1rem;font-weight:600;line-height:1.2;color:var(--ink);}
.kh-tag .msr{font-size:20px;color:var(--primary);}

/* ---- Smal scherm ---- */
@media (max-width:899px){
  .kh-raster{grid-template-columns:1fr;align-content:start;}
  .kh-tekst,.kh-raster #login,.kh-hulp,.kh-foto{grid-column:1;grid-row:auto;}
  .kh-raster #login,.kh-hulp{max-width:none;}
  .kh-foto{margin-top:var(--sp-4);}
  .kh-logo{height:64px;margin-top:-30px;}
  .login form{padding:var(--sp-4);border-radius:var(--r-md);}
}
@media (max-width:480px){
  .kh-pre a:first-child{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .kh-pre a,.login #wp-submit,.login input[type=checkbox]{transition:none;}
}