/*
 * WPGPI Login — style strony logowania
 *
 * Paleta wersji podstawowej:
 *   biały #ffffff, czarny #000000, czerwień SLOW #dd0000, niebieski linków #0056b3
 *
 * Tryb wysokiego kontrastu (klasa body.gpi-hc):
 *   czarne tło, żółty tekst, cyan dla linków/focus — kontrasty 16-20:1
 *
 * Powiększenie tekstu (klasy body.gpi-text-large / .gpi-text-xlarge):
 *   skala bazowa 16 → 20 → 24 px
 *
 * @version 4.1.152
 */

@media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important}
}

/* ────────────────────────────────────────────────────────────
   RESET WORDPRESS ADMIN-BAR (rezerwuje padding-top:32px nawet
   gdy bar nie jest renderowany na wp-login.php — usuwamy)
   ──────────────────────────────────────────────────────────── */
html.wp-toolbar{
    padding-top:0 !important;
    margin-top:0 !important;
}
#wpadminbar{display:none !important}

/* ────────────────────────────────────────────────────────────
   TŁO STRONY — czarne, sticky-footer layout:
   sztywne 100vh + overflow:hidden = brak globalnego scrolla,
   stopka zawsze na dolnej krawędzi viewportu.
   Scrollowanie (gdy content > viewport, np. po A+) pojawia się
   wewnątrz #login, nie psując pozycji stopki.
   ──────────────────────────────────────────────────────────── */
html{height:100%}
body.login.gpi-login{
    background:#000000;
    color:#000000;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:16px;
    line-height:1.5;
    margin:0;
    padding:0;
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* Ukryj domyślne logo WordPress — używamy własnego przez JS */
body.gpi-login #login h1{
    display:none;
}

/* Ukryj domyślną stopkę "← Powrót do…" — własna stopka przez JS */
body.gpi-login #backtoblog{
    display:none;
}

/* ────────────────────────────────────────────────────────────
   TOOLBAR DOSTĘPNOŚCI (góra strony, wstrzyknięty przez JS)
   flex-shrink:0 — sztywna wysokość, nie kurczy się gdy #login rośnie
   justify-content:flex-start — wyrównanie do lewej strony
   ──────────────────────────────────────────────────────────── */
.gpi-a11y-toolbar{
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 20px;
    background:#000000;
    border-bottom:1px solid #ffffff;
    flex-shrink:0;
}
.gpi-a11y-btn{
    background:transparent;
    border:2px solid #ffffff;
    color:#ffffff;
    padding:8px 14px;
    font-size:14px;
    cursor:pointer;
    border-radius:3px;
    min-height:40px;
    font-family:inherit;
}
.gpi-a11y-btn:hover{background:#ffffff;color:#000000}
.gpi-a11y-btn:focus{
    outline:3px solid #ffff00;
    outline-offset:2px;
}
.gpi-a11y-btn[aria-pressed="true"]{
    background:#ffffff;
    color:#000000;
}

/* Banner UE w toolbarze — przyklejony do PRAWEJ krawędzi (margin-left:auto),
   blok a11y do lewej. Banner i sekcja a11y mają niezależne wewnętrzne padding,
   żeby powiększenie banner nie wpływało na marginesy wokół przycisków.
   Banner img +20% (36px → 43px), padding banner 0 (kosztem marginesów banner). */
.gpi-ue-banner{
    display:flex;
    align-items:center;
    padding:0;
    margin-left:auto;
}
.gpi-ue-banner img{
    height:43px;
    width:auto;
    max-width:280px;
    display:block;
}

/* ────────────────────────────────────────────────────────────
   KONTENER LOGOWANIA — biały "kafelek" wycentrowany
   flex:1 + min-height:0 + overflow-y:auto = scroll wewnętrzny
   gdy content nie mieści się w dostępnej wysokości, bez
   wypychania stopki poza viewport.
   safe center — gdy content > viewport, content nie jest
   obcinany z góry (klasyczne center wycina, safe center degraduje
   do flex-start). Wsparcie: Chrome 93+, Firefox 91+, Safari 16.4+
   ──────────────────────────────────────────────────────────── */
body.gpi-login #login{
    flex:1;
    min-height:0;
    width:100%;
    max-width:none;
    padding:20px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    align-items:safe center;
    justify-content:center;
    justify-content:safe center;
    overflow-y:auto;
}

body.gpi-login #login form,
body.gpi-login #login .message,
body.gpi-login #login #login_error{
    width:100%;
    max-width:440px;
    background:#ffffff;
    color:#000000;
    box-shadow:0 4px 20px rgba(0,0,0,0.5);
    border:none;
    border-radius:8px;
    padding:32px 28px;
    margin:0 0 12px 0;
}

/* ────────────────────────────────────────────────────────────
   BRAND HEADER (logo + 3 linie tytułu, wstrzykiwany przez JS)
   ──────────────────────────────────────────────────────────── */
.gpi-brand-header{
    text-align:center;
    margin:0 0 24px 0;
}
.gpi-slow-logo{
    display:block;
    width:auto;
    max-width:313px;      /* +25% z 250px */
    height:auto;
    margin:0 auto 11px auto;  /* odstęp logo → tytuł: 14px → 11px (−20%) */
}
.gpi-title-1{
    font-size:17px;
    font-weight:500;
    line-height:1.2;
    margin:0 0 4px 0;
    color:#000000;
}
.gpi-title-2{
    font-size:24px;
    font-weight:700;
    letter-spacing:-0.5px;
    line-height:1.15;
    margin:0 0 14px 0;
    color:#000000;
}
.gpi-monogram{
    display:inline-block;
    font-size:17.5px;
    font-weight:900;
    letter-spacing:2px;
    padding:4px 12px;
    border-radius:3px;
    background:#dd0000;
    color:#ffffff;
}

/* ────────────────────────────────────────────────────────────
   POLA FORMULARZA — paleta podstawowa
   Odstępy zmniejszone o ~30% dla zwartości okna
   ──────────────────────────────────────────────────────────── */
body.gpi-login #loginform p{
    margin-bottom:13px;
}
body.gpi-login #loginform label{
    font-size:14px;
    font-weight:600;
    color:#000000;
    margin-bottom:4px;
    display:block;
}
body.gpi-login #loginform input[type="text"],
body.gpi-login #loginform input[type="password"],
body.gpi-login #loginform input[type="email"]{
    width:100%;
    padding:12px 14px;
    font-size:16px;
    border:2px solid #000000;
    border-radius:4px;
    background:#ffffff;
    color:#000000;
    box-shadow:none;
    margin-top:0;
}
body.gpi-login #loginform input:focus{
    outline:3px solid #dd0000;
    outline-offset:2px;
    border-color:#000000;
}

/* WP "pokaż hasło" — paletyzujemy istniejący przycisk, ikona w firmowej czerwieni */
body.gpi-login .user-pass-wrap{position:relative}
body.gpi-login .wp-pwd .button.wp-hide-pwd{
    background:#ffffff;
    border:2px solid #dd0000;
    color:#dd0000;
    border-radius:3px;
    padding:4px 10px;
    height:auto;
    box-shadow:none;
}
body.gpi-login .wp-pwd .button.wp-hide-pwd:hover{
    background:#dd0000;
    color:#ffffff;
}
body.gpi-login .wp-pwd .button.wp-hide-pwd:hover .dashicons{color:#ffffff}
body.gpi-login .wp-pwd .button.wp-hide-pwd:focus{
    outline:3px solid #dd0000;
    outline-offset:2px;
}
body.gpi-login .wp-pwd .button.wp-hide-pwd .dashicons{
    color:#dd0000;
}

/* "Zapamiętaj mnie na tym urządzeniu." — flex NA <p class="forgetmenot">
   bo standardowo WP renderuje <input> i <label> jako SIOSTRY (nie label
   zawierający input). Flex na rodzicu trzyma oba w jednej linii. */
body.gpi-login .forgetmenot{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    white-space:nowrap;
}
body.gpi-login .forgetmenot label{
    font-size:14px;
    font-weight:400;
    color:#000000;
    margin:0;
    line-height:1.3;
}
body.gpi-login .forgetmenot input[type="checkbox"]{
    width:20px;
    height:20px;
    margin:0;
    flex-shrink:0;
    vertical-align:middle;
}

/* Przycisk Zaloguj — firmowa czerwień, font +25% (16 → 20 px) */
body.gpi-login #wp-submit,
body.gpi-login .submit .button-primary{
    width:100%;
    padding:14px;
    font-size:20px;
    font-weight:700;
    background:#dd0000;
    color:#ffffff;
    border:none;
    border-radius:4px;
    box-shadow:none;
    text-shadow:none;
    cursor:pointer;
    min-height:48px;
    margin-top:4px;
    line-height:1.2;
}
body.gpi-login #wp-submit:hover{background:#b00000}
body.gpi-login #wp-submit:focus{
    outline:3px solid #000000;
    outline-offset:2px;
}

/* Linki "Zarejestruj się | Nie pamiętasz hasła?" — WEWNĄTRZ białej karty,
   POD przyciskiem Zaloguj (przeniesione przez JS z #login do końca #loginform).
   Layout: jeden link do lewej, drugi do prawej krawędzi karty (space-between).
   Kolor czarny na białym tle karty, hover firmowa czerwień #dd0000.
   Separator " | " usuwany przez JS (reformatNav).
   Ukrycie #login > #nav i #login > #backtoblog gwarantuje że stary kontener
   na czarnym tle nie błyśnie zanim JS przeniesie linki. */
body.gpi-login #login > #nav,
body.gpi-login #login > #backtoblog{display:none}

body.gpi-login #loginform #nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin:14px 0 0 0;
    padding:0;
    background:transparent;
    box-shadow:none;
    text-shadow:none;
    font-size:14px;
}
body.gpi-login #loginform #nav a{
    color:#000000;
    text-decoration:underline;
}
body.gpi-login #loginform #nav a:hover{
    color:#dd0000;
}
body.gpi-login #loginform #nav a:focus{
    outline:3px solid #dd0000;
    outline-offset:2px;
}

/* Wybór języka — domyślnie ukryty (WP renderuje gdy >1 język zainstalowany,
   dla GPI to drugie białe okno bez wartości; jeśli kiedyś będzie potrzebne,
   wystarczy usunąć display:none) */
body.gpi-login .language-switcher{display:none !important}

/* Wybór języka (WP renderuje gdy zainstalowane >1 język) — stylizacja
   spójna z formularzem, w białej karcie */
body.gpi-login .language-switcher{
    background:#ffffff;
    color:#000000;
    box-shadow:0 4px 20px rgba(0,0,0,0.5);
    border-radius:8px;
    padding:14px 28px;
    margin:0 auto 12px auto;
    max-width:440px;
    width:100%;
    text-align:center;
}
body.gpi-login .language-switcher label,
body.gpi-login .language-switcher select{
    font-size:14px;
    color:#000000;
}
body.gpi-login .language-switcher select{
    border:2px solid #000000;
    border-radius:4px;
    padding:6px 10px;
    margin-left:8px;
}
body.gpi-login .language-switcher .button{
    background:#ffffff;
    border:2px solid #000000;
    color:#000000;
    border-radius:3px;
    padding:6px 14px;
    margin-left:8px;
    cursor:pointer;
}

/* Komunikat błędu — paleta podstawowa, czerwony border */
body.gpi-login #login_error,
body.gpi-login .login .message{
    background:#ffffff;
    color:#000000;
    border:2px solid #dd0000;
    border-radius:4px;
    padding:14px;
    font-size:14px;
    line-height:1.5;
    box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
body.gpi-login #login_error strong{
    color:#dd0000;
}

/* Ostrzeżenie Caps Lock — wstrzykiwane przez JS */
.gpi-caps-warning{
    background:#ffffff;
    border:1px solid #000000;
    color:#000000;
    padding:6px 10px;
    border-radius:3px;
    margin-top:6px;
    font-size:12px;
    display:none;
}
.gpi-caps-warning.gpi-visible{display:inline-block}

/* ────────────────────────────────────────────────────────────
   STOPKA (wstrzykiwana przez JS, format spójny z gpi_render_footer)
   ──────────────────────────────────────────────────────────── */
.gpi-app-footer{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:12px 20px;
    font-size:12px;
    color:#ffffff;
    border-top:1px solid #333333;
    line-height:1.3;
    background:#000000;
    flex-shrink:0;
}
.gpi-footer-line{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0.6rem;
}
.gpi-footer-sep{opacity:0.5}
.gpi-footer-link{
    color:#ffffff;
    text-decoration:underline;
}
.gpi-footer-link:hover{color:#dd0000}
.gpi-footer-link:focus{
    outline:3px solid #dd0000;
    outline-offset:2px;
}

/* ────────────────────────────────────────────────────────────
   TRYB WYSOKIEGO KONTRASTU (body.gpi-hc)
   Tło czarne, tekst żółty, linki cyan, focus cyan
   ──────────────────────────────────────────────────────────── */
body.gpi-login.gpi-hc{background:#000000;color:#ffff00}
body.gpi-login.gpi-hc #login form,
body.gpi-login.gpi-hc #login .message,
body.gpi-login.gpi-hc #login #login_error{
    background:#000000;
    color:#ffff00;
    border:2px solid #ffff00;
    box-shadow:0 4px 20px rgba(255,255,0,0.2);
}
body.gpi-login.gpi-hc .gpi-title-1,
body.gpi-login.gpi-hc .gpi-title-2{color:#ffff00}
body.gpi-login.gpi-hc .gpi-monogram{background:#ffff00;color:#000000}
/* Logo SLOW: czerwone → żółte */
body.gpi-login.gpi-hc .gpi-slow-logo{
    filter:brightness(0) invert(1) sepia(1) saturate(20) hue-rotate(-5deg);
}
/* Banner UE w trybie HC: dowolny kolor → żółty (spójność z paletą) */
body.gpi-login.gpi-hc .gpi-ue-banner img{
    filter:brightness(0) invert(1) sepia(1) saturate(20) hue-rotate(-5deg);
}
body.gpi-login.gpi-hc #loginform label{color:#ffff00}
body.gpi-login.gpi-hc #loginform input{
    background:#000000;
    color:#ffff00;
    border-color:#ffff00;
}
body.gpi-login.gpi-hc #loginform input:focus{
    outline-color:#00ffff;
    border-color:#ffff00;
}
body.gpi-login.gpi-hc .forgetmenot label{color:#ffff00}
body.gpi-login.gpi-hc .wp-pwd .button.wp-hide-pwd{
    background:#000000;
    color:#ffff00;
    border-color:#ffff00;
}
body.gpi-login.gpi-hc .wp-pwd .button.wp-hide-pwd:hover{
    background:#ffff00;
    color:#000000;
}
body.gpi-login.gpi-hc .wp-pwd .button.wp-hide-pwd:hover .dashicons{color:#000000}
body.gpi-login.gpi-hc .wp-pwd .button.wp-hide-pwd .dashicons{color:#ffff00}
body.gpi-login.gpi-hc #wp-submit{
    background:#ffff00;
    color:#000000;
}
body.gpi-login.gpi-hc #wp-submit:hover{background:#ffffff}
body.gpi-login.gpi-hc #wp-submit:focus{outline-color:#00ffff}
body.gpi-login.gpi-hc #login a{color:#00ffff}
body.gpi-login.gpi-hc #loginform #nav a{color:#ffff00}
body.gpi-login.gpi-hc #loginform #nav a:hover{color:#ffffff}
body.gpi-login.gpi-hc #login_error,
body.gpi-login.gpi-hc .login .message{
    background:#000000;
    color:#ffff00;
    border-color:#ffff00;
}
body.gpi-login.gpi-hc #login_error strong{color:#ffff00}
body.gpi-login.gpi-hc .gpi-caps-warning{
    background:#000000;
    color:#ffff00;
    border-color:#ffff00;
}
body.gpi-login.gpi-hc .gpi-a11y-toolbar{border-bottom-color:#ffff00}
body.gpi-login.gpi-hc .gpi-a11y-btn{border-color:#ffff00;color:#ffff00}
body.gpi-login.gpi-hc .gpi-a11y-btn:hover{background:#ffff00;color:#000000}
body.gpi-login.gpi-hc .gpi-a11y-btn[aria-pressed="true"]{background:#ffff00;color:#000000}
body.gpi-login.gpi-hc .gpi-app-footer{
    color:#ffff00;
    border-top-color:#ffff00;
}
body.gpi-login.gpi-hc .gpi-footer-link{color:#ffff00}
body.gpi-login.gpi-hc .gpi-footer-link:hover{color:#ffffff}
body.gpi-login.gpi-hc .language-switcher{
    background:#000000;
    color:#ffff00;
    border:2px solid #ffff00;
}
body.gpi-login.gpi-hc .language-switcher label,
body.gpi-login.gpi-hc .language-switcher select,
body.gpi-login.gpi-hc .language-switcher .button{
    color:#ffff00;
    background:#000000;
    border-color:#ffff00;
}

/* ────────────────────────────────────────────────────────────
   POWIĘKSZENIE TEKSTU (3 stopnie, zgodne ze style-participant.css)
   ──────────────────────────────────────────────────────────── */
body.gpi-login.gpi-text-large{font-size:20px}
body.gpi-login.gpi-text-large .gpi-title-1{font-size:21px}
body.gpi-login.gpi-text-large .gpi-title-2{font-size:30px}
body.gpi-login.gpi-text-large .gpi-monogram{font-size:22px}
body.gpi-login.gpi-text-large #loginform input{font-size:20px;padding:14px 16px}
body.gpi-login.gpi-text-large #wp-submit{font-size:20px;padding:16px}
body.gpi-login.gpi-text-large .gpi-app-footer{font-size:14px}

body.gpi-login.gpi-text-xlarge{font-size:24px}
body.gpi-login.gpi-text-xlarge .gpi-title-1{font-size:26px}
body.gpi-login.gpi-text-xlarge .gpi-title-2{font-size:36px}
body.gpi-login.gpi-text-xlarge .gpi-monogram{font-size:26px;padding:6px 16px}
body.gpi-login.gpi-text-xlarge #loginform input{font-size:24px;padding:16px 18px}
body.gpi-login.gpi-text-xlarge #wp-submit{font-size:24px;padding:18px}
body.gpi-login.gpi-text-xlarge .gpi-app-footer{font-size:16px}

/* ────────────────────────────────────────────────────────────
   RESPONSYWNOŚĆ
   Gdy nagłówek nie mieści się w jednej linii (wąski viewport),
   sekcja a11y i banner UE CENTRUJĄ się — żadne nie zostaje
   przyklejone do swojej krawędzi.
   ──────────────────────────────────────────────────────────── */
@media (max-width:720px){
    .gpi-a11y-toolbar{justify-content:center}
    .gpi-ue-banner{margin-left:0}
}
@media (max-width:520px){
    body.gpi-login #login{padding:20px 12px}
    body.gpi-login #login form{padding:24px 18px}
    .gpi-slow-logo{max-width:230px}
    .gpi-title-2{font-size:22px}
    .gpi-a11y-toolbar{padding:10px 12px;gap:6px}
    .gpi-a11y-btn{padding:6px 10px;font-size:13px;min-height:36px}
    .gpi-ue-banner img{height:38px;max-width:220px}
}