/**
 * Inlogscherm in de vormgeving van AICP Studio.
 *
 * Kleuren komen uit het beeldmerk: het blauw van het penseelvlak en het goud van het
 * databasesymbool. Licht is de basis, donker herdefinieert alleen de tokens, zodat er geen
 * kleur bestaat die maar in een van beide thema's is gedefinieerd.
 *
 * Eén straal voor alles wat een rand heeft: kaart, velden en knop. Dat is wat de onderdelen
 * tot één geheel maakt.
 *
 * Eén vlak, geen band en geen horizon. Een gekleurd vlak over de bovenste helft loopt met de
 * hoogte van het venster mee en snijdt dan op willekeurige plekken door de kaart; dat oogt
 * altijd toevallig. Het merk zit nu in het logo en in de knop, en verder is het scherm stil.
 *
 * Het logo houdt zijn eigen kleuren. Wit maken werkt niet: de letters in het penseelvlak zijn
 * zelf wit en verdwijnen dan, waarna er één blok overblijft.
 *
 * Er wordt niets aan het formulier zelf veranderd: geen velden verplaatst, geen namen
 * aangeraakt, geen gedrag onderschept. Alleen opmaak.
 */

:root{
    --ai-blauw:#1E55B3;
    --ai-blauw-diep:#143E85;
    --ai-blauw-nacht:#0C2452;
    --ai-goud:#C7AC00;

    --ai-straal:10px;

    --ai-grond:#DFE7F2;
    --ai-top:#FFFFFF;
    --ai-diep:#CBD7E8;
    --ai-vlak:#FFFFFF;
    --ai-lijn:#D4DCE7;
    --ai-inkt:#0F1822;
    --ai-inkt-2:#46566A;
    --ai-inkt-3:#6E7F94;
    --ai-schaduw:0 1px 2px rgba(15,24,34,.06), 0 24px 60px -24px rgba(12,36,82,.45);
    --ai-veld:#FFFFFF;
    --ai-veldlijn:#C6D0DE;
}

@media (prefers-color-scheme: dark){
    :root{
        --ai-grond:#080D14;
        --ai-top:#1D2836;
        --ai-diep:#03060A;
        --ai-vlak:#141D28;
        --ai-lijn:#26313E;
        --ai-inkt:#E8EEF6;
        --ai-inkt-2:#AFBDCE;
        --ai-inkt-3:#7C8DA3;
        --ai-schaduw:0 1px 2px rgba(0,0,0,.4), 0 30px 70px -26px rgba(0,0,0,.85);
        --ai-veld:#0F1822;
        --ai-veldlijn:#2C3846;
    }
}

/* ---------------------------------------------------------- grond */

body.login.aicp-inlog{
    /* Wit bovenaan, zacht aflopend naar de grondkleur. Een verloop kan nooit op een
       ongelukkige plek door de kaart snijden zoals een band met een vaste hoogte dat wel doet. */
    background:var(--ai-grond);
    background-image:linear-gradient(180deg, var(--ai-top) 0%, var(--ai-grond) 62%, var(--ai-diep) 100%);
    background-attachment:fixed;
    color:var(--ai-inkt);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    margin:0;
    position:relative;
    overflow-x:hidden;
}

body.login.aicp-inlog #login{
    position:relative;
    z-index:1;
    width:min(320px, 92vw);
    padding:0;
    margin:0;
}

/* ---------------------------------------------------------- logo */

body.login.aicp-inlog h1{
    margin:0 0 20px;
    text-align:center;
}

body.login.aicp-inlog h1 a{
    display:block;
    width:auto;
    height:98px;
    margin:0;
    padding:0;
    background-color:transparent;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    box-shadow:none;
    overflow:hidden;
    /* De sitenaam staat als tekst in de link. text-indent haalde alleen de eerste regel weg,
       waardoor er een restje onder het logo bleef staan zodra de naam afbrak. */
    font-size:0;
    line-height:0;
    color:transparent;
    white-space:nowrap;
}

/* ---------------------------------------------------------- kaart */

body.login.aicp-inlog #loginform,
body.login.aicp-inlog #registerform,
body.login.aicp-inlog #lostpasswordform,
body.login.aicp-inlog #resetpassform{
    background:var(--ai-vlak);
    border:1px solid var(--ai-lijn);
    border-radius:var(--ai-straal);
    box-shadow:var(--ai-schaduw);
    padding:24px 22px 20px;
    margin:0;
    overflow:visible;
}

/* Ruimte tussen de velden.
   WordPress zet zelf `#login form p{margin-bottom:0}`. Dat is een id-selector en die wint van
   drie klassen, hoe specifiek die reeks er ook uitziet. Daarom staat #login hier ook in de
   selector: anders wordt elke maat hieronder stilzwijgend teruggezet op nul. */
body.login.aicp-inlog #login form p{
    margin:0 0 20px;
    padding:0;
}

body.login.aicp-inlog #login form .user-pass-wrap,
body.login.aicp-inlog #login form .login-username,
body.login.aicp-inlog #login form .login-password{
    margin:0 0 20px;
}

body.login.aicp-inlog #login form p.submit{
    margin:0;
}

body.login.aicp-inlog label{
    color:var(--ai-inkt-2);
    font-size:11px;
    font-weight:500;
    letter-spacing:.07em;
    text-transform:uppercase;
    display:block;
    margin-bottom:7px;
    line-height:1.4;
}

body.login.aicp-inlog input[type=text],
body.login.aicp-inlog input[type=password],
body.login.aicp-inlog input[type=email]{
    background:var(--ai-veld);
    color:var(--ai-inkt);
    border:1px solid var(--ai-veldlijn);
    border-radius:var(--ai-straal);
    box-shadow:none;
    box-sizing:border-box;
    width:100%;
    height:42px;
    padding:0 13px;
    font-size:15px;
    line-height:normal;
    margin:0;
    transition:border-color .15s ease, box-shadow .15s ease;
}

body.login.aicp-inlog input[type=text]:focus,
body.login.aicp-inlog input[type=password]:focus,
body.login.aicp-inlog input[type=email]:focus{
    border-color:var(--ai-blauw);
    box-shadow:0 0 0 3px rgba(30,85,179,.18);
    outline:none;
}

body.login.aicp-inlog .wp-pwd{
    position:relative;
}

body.login.aicp-inlog .wp-pwd input[type=password],
body.login.aicp-inlog .wp-pwd input[type=text]{
    padding-right:44px;
}

body.login.aicp-inlog .wp-hide-pw{
    color:var(--ai-inkt-3);
    top:0;
    right:0;
    height:42px;
    width:42px;
    display:grid;
    place-items:center;
    padding:0;
}

body.login.aicp-inlog .wp-hide-pw:hover,
body.login.aicp-inlog .wp-hide-pw:focus{
    color:var(--ai-blauw);
}

/* ---------------------------------------------------------- knop */

body.login.aicp-inlog .button-primary,
body.login.aicp-inlog #wp-submit{
    background:var(--ai-blauw);
    border:1px solid var(--ai-blauw);
    border-radius:var(--ai-straal);
    color:#fff;
    text-shadow:none;
    box-shadow:none;
    float:none;
    box-sizing:border-box;
    width:100%;
    height:42px;
    line-height:1;
    padding:0 16px;
    font-size:15px;
    font-weight:500;
    letter-spacing:.01em;
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
}

body.login.aicp-inlog .button-primary:hover,
body.login.aicp-inlog #wp-submit:hover{
    background:var(--ai-blauw-diep);
    border-color:var(--ai-blauw-diep);
}

body.login.aicp-inlog .button-primary:active,
body.login.aicp-inlog #wp-submit:active{
    transform:translateY(1px);
}

body.login.aicp-inlog .button-primary:focus-visible,
body.login.aicp-inlog #wp-submit:focus-visible{
    outline:3px solid var(--ai-goud);
    outline-offset:2px;
}

body.login.aicp-inlog .submit{
    margin:0;
}

/* ---------------------------------------------------------- onthouden */

body.login.aicp-inlog #login .forgetmenot{
    float:none;
    margin:0 0 24px;
    display:flex;
    align-items:center;
    gap:9px;
}

body.login.aicp-inlog #login .forgetmenot label{
    text-transform:none;
    letter-spacing:0;
    font-size:13px;
    font-weight:400;
    margin:0;
    color:var(--ai-inkt-2);
}

body.login.aicp-inlog input[type=checkbox]{
    background:var(--ai-veld);
    border-color:var(--ai-veldlijn);
    border-radius:5px;
    width:18px;
    height:18px;
    margin:0;
    flex:none;
}

body.login.aicp-inlog input[type=checkbox]:checked::before{
    content:'';
    display:block;
    width:9px;
    height:5px;
    margin:4px 0 0 3px;
    border-left:2px solid var(--ai-blauw);
    border-bottom:2px solid var(--ai-blauw);
    transform:rotate(-45deg);
    background:none;
    font-size:0;
}

/* ---------------------------------------------------------- meldingen */

body.login.aicp-inlog #login_error,
body.login.aicp-inlog .message,
body.login.aicp-inlog .success,
body.login.aicp-inlog .notice{
    background:var(--ai-vlak);
    color:var(--ai-inkt);
    border:1px solid var(--ai-lijn);
    border-left:4px solid var(--ai-blauw);
    border-radius:var(--ai-straal);
    box-shadow:var(--ai-schaduw);
    padding:13px 16px;
    margin:0 0 16px;
}

body.login.aicp-inlog #login_error{
    border-left-color:#C0392B;
}

body.login.aicp-inlog #login_error a,
body.login.aicp-inlog .message a{
    color:var(--ai-blauw);
}

/* ---------------------------------------------------------- voetregels

   "Ga naar AICPv2" wijst naar een omgeving waar je pas na inloggen iets ziet, dus die link
   doet op dit scherm niets. Weg.

   Het wachtwoord loopt via de beheerder, niet via een zelfbedieningslink. Alleen op het
   inlogformulier verborgen: op de herstelpagina blijft de terugweg staan, anders zit iemand
   die daar toch belandt zonder uitgang.

   Dit verbergt de link, het schakelt de route niet uit. Wie wp-login.php?action=lostpassword
   intikt komt er nog. Echt sluiten is een aparte ingreep met een groter risico. */

body.login.aicp-inlog #backtoblog{
    display:none;
}

body.login.aicp-inlog.login-action-login #nav{
    display:none;
}

body.login.aicp-inlog #nav{
    text-align:center;
    padding:0;
    margin:16px 0 0;
    text-shadow:none;
}

body.login.aicp-inlog #nav a{
    color:var(--ai-inkt-3);
    font-size:13px;
    text-decoration:none;
}

body.login.aicp-inlog #nav a:hover,
body.login.aicp-inlog #nav a:focus{
    color:var(--ai-blauw);
    text-decoration:underline;
}

body.login.aicp-inlog .privacy-policy-page-link{
    display:none;
}

/* Alles is Nederlands; een taalkeuze voegt hier niets toe. */
body.login.aicp-inlog .language-switcher{
    display:none;
}

/* ---------------------------------------------------------- klein scherm */

@media screen and (max-width:600px){
    body.login.aicp-inlog h1 a{ height:86px; }
    body.login.aicp-inlog #loginform,
    body.login.aicp-inlog #lostpasswordform{ padding:22px 18px 18px; }
}

@media (prefers-reduced-motion:reduce){
    body.login.aicp-inlog *{ transition-duration:.001ms !important; }
}