/*
 * Sisselogimislehe (wp-login.php) riietus — laetakse AINULT logimislehel.
 *
 * wp-login.php ei lae teema style.css-i, seega vajalik paletiosa on siin
 * korratud. Kui teema :root muutub, uuenda ka siin (teema style.css on
 * tõe allikas).
 */

:root {
	--lg-ink: #1e293b;
	--lg-ink-soft: rgba(30, 41, 59, 0.78);
	--lg-ink-muted: rgba(30, 41, 59, 0.62);
	--lg-gold: #f4b943;
	--lg-gold-hover: #eaa92c;
	--lg-gold-text: #8a6d1f;
	--lg-gold-icon: #b8860b;
	--lg-cream: #fef8ec;
	--lg-line: #f0e4cb;
	--lg-sand: #faf8f2;
	--lg-error: #a03636;
	--lg-error-soft: #cf8d80;
	--lg-focus-ring: rgba(244, 185, 67, 0.22);
	--lg-radius: 8px;
	--lg-radius-card: 16px;
}

body.login {
	background: var(--lg-cream);
	color: var(--lg-ink);
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#login {
	width: 100%;
	max-width: 404px;
	margin: 0 auto;
	padding: 7vh 24px 40px;
	/* Core jätab #login'i content-box'iks — width:100% + külgpadding
	   ajaks lehe kitsal ekraanil paisuma (375 + 48 = 423px). */
	box-sizing: border-box;
}
#login *,
#login *::before,
#login *::after { box-sizing: border-box; }

/* Bränd: sama logo mis saidi päises, WordPressi palli asemel.
   Core peidab lingi teksti taustapildi ja text-indent'iga — võtame
   mõlemad maha.

   Lukustuse mõõdud ja suhted on kirjas teema style.css-is (.lg-brand);
   siin on ainult see, mis logimislehel erineb — märk on suurem, sest
   kaardi kohal ei võistle miski õhuga. */
#login h1 a,
.wp-login-logo a {
	background-image: none;
	text-indent: 0;
	width: auto;
	height: auto;
	margin: 0 auto 26px;
	text-decoration: none;

	/* Sama sinine mis saidi päises (vt teema style.css .lg-brand) — logo
	   peab olema kõikjal ühesugune. */
	--lg-brand-sinine: rgba(30, 41, 59, 0.85);
	color: var(--lg-brand-sinine);

	/* Täisarvulised mõõdud, mitte calc: 1.85rem × 1.87 andis 55,35 × 60,38px
	   ja murdarvuline SVG on 1x ekraanil udune (vt teema style.css .lg-brand).
	   55px jagub 11-ga → laius 60px täpselt; nimi 1.838rem hoiab suhte 1,870. */
	--lg-brand-nimi: 1.838rem;
	--lg-brand-mark: 55px;
	--lg-brand-mark-w: 60px;
	--lg-brand-vahe: 15px;
	display: inline-flex;
	align-items: center;
	gap: var(--lg-brand-vahe);
	line-height: 1.1;
}
#login h1 {
	/* Link on inline-flex, seega joonduse teeb ümbris. */
	text-align: center;
}
#login h1 a:hover,
.wp-login-logo a:hover { color: var(--lg-brand-sinine); opacity: 0.82; }

/* Logo on link avalehele ja peab fookuse saama — aga ilma oma stiilita
   joonistas brauser oma terava sinise ristküliku, mis ei kuulu saidi
   paletti. Sama kuldne rõngas, mis on juba väljadel, nupul ja märkeruudul.

   `:focus-visible`, mitte `:focus`: hiirega logol klõpsates ei jää rõngast
   järele, klaviatuuriga liikudes jääb. Nurgaraadius on lingil endal, muidu
   jääks rõngas ümaraks, aga ümbritsetav ala teravaks. */
#login h1 a,
.wp-login-logo a { border-radius: var(--lg-radius); }

#login h1 a:focus-visible,
.wp-login-logo a:focus-visible {
	outline: 2px solid var(--lg-gold);
	outline-offset: 4px;
	box-shadow: 0 0 0 6px var(--lg-focus-ring);
}

/* Safari annab hiireklõpsul lingile oma sinise UA-raami tavalise :focus
   peal (tema :focus-visible ei rakendu, aga vaikeraam küll) — Chromiumis
   probleemi pole. Võtame raami maha AINULT siis, kui :focus-visible ei
   kehti, et klaviatuuri kuldne rõngas jääks alles. */
#login h1 a:focus:not(:focus-visible),
.wp-login-logo a:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

#login h1 a .lg-brand__mark {
	display: block;
	flex: none;
	height: var(--lg-brand-mark);
	width: var(--lg-brand-mark-w);
	aspect-ratio: 96 / 88;
}
#login h1 a .lg-mark__leht--vasak { fill: var(--lg-brand-sinine); }
#login h1 a .lg-mark__leht--parem { fill: var(--lg-gold); }

#login h1 a .lg-brand__tekst { display: block; text-align: left; }
#login h1 a .lg-brand__nimi {
	display: block;
	font-size: var(--lg-brand-nimi);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.9;
}
#login h1 a .lg-brand__mar { color: var(--lg-gold); }
#login h1 a .lg-brand__alarida {
	display: block;
	margin-top: 5px;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #4a4644;
}

/* Kaart -------------------------------------------------------------- */

.login form {
	background: #fff;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius-card);
	box-shadow: 0 8px 28px rgba(30, 41, 59, 0.07);
	padding: 28px 28px 26px;
	margin-top: 0;
	overflow: visible;

	/* Pealkiri trükitakse vormi SISSE (wp-login annab konksu ainult
	   sinna) ja order tõstab selle esimeseks; sama mehhanism paneb
	   "Pea mind meeles" ja "Unustasid parooli?" ühte ritta. */
	display: flex;
	flex-flow: row wrap;
}
.login form > * { flex: 0 0 100%; min-width: 0; }

.lg-logi-pea { order: -1; margin-bottom: 16px; }

/* Kinnitusteade („Oled välja logitud") kaardi sees, tervituse ja väljade
   vahel.

   Order on -1, sama mis pealkirjal — MITTE 0. Väljadel ei ole order'it
   määratud, seega nad on vaikimisi 0; teade order 0-ga satuks nendega samasse
   gruppi ja jääks neist ALLA, sest `login_form` konks trükib meie sisu alles
   pärast välju. Samas grupis pealkirjaga otsustab dokumendijärjekord ja seal
   tuleb pea esimesena (koolitused_logimise_pea() kutsutakse enne).

   Kreemjas taust, mitte hall: see on kinnitus, mitte hoiatus. Sama halli
   kasti kasutab WP ka info jaoks (`.login .message`), seega eristus peab
   tulema siit. */
#login .lg-logi-teade {
	order: -1;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 4px 0 22px;
	padding: 10px 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--lg-gold-text);
	background: var(--lg-cream);
	border-radius: var(--lg-radius);
}
#login .lg-logi-teade svg { flex: none; margin-top: 2px; color: var(--lg-gold-icon); }
.lg-logi-pea h2 {
	margin: 0 0 6px;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--lg-ink);
}
.lg-logi-pea p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--lg-ink-soft);
}

/* Väljad ------------------------------------------------------------- */

.login form label {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--lg-ink);
	line-height: 1.4;
}

.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
	width: 100%;
	padding: 10px 14px;
	margin: 5px 0 14px;
	font-size: 1rem;
	line-height: 1.4;
	background: #fff;
	border: 1px solid rgba(30, 41, 59, 0.2);
	border-radius: var(--lg-radius);
	color: var(--lg-ink);
	box-shadow: none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
	border-color: var(--lg-gold);
	box-shadow: 0 0 0 4px var(--lg-focus-ring);
	outline: 2px solid transparent;
}

/* Parooli näitamise silmanupp core'ilt — toon meie omaks. */
.login .button.wp-hide-pw { color: var(--lg-ink-muted); }
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus { color: var(--lg-ink); box-shadow: none; }

/* Meelespidamine + unustatud parool ühel real ------------------------ */

#login .forgetmenot {
	order: 1;
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 6px auto 22px 0;
}
#login .forgetmenot label {
	font-weight: 400;
	font-size: 0.86rem;
	color: var(--lg-ink-soft);
}
/* Märkeruut on saidi oma, mitte brauseri natiivne. `accent-color` andis
   küll kuldse tooni, aga kuju ja nurgaraadius tulid operatsioonisüsteemist:
   macOS-il ümar, Windowsil kandiline. Nüüd sama 5px raadius ja sama õhuke
   raam, mis on väljadel — valituna kuldne täidis ja tume linnuke, nagu
   esmasel nupul.

   Linnuke on `::before` taustapildina, sest Core joonistab oma dashicons-
   linnukese samasse pseudoelementi ja see tuleb üle kirjutada. Värv on
   data-URI sees kõvasti kirjas (currentColor ei kandu taustapilti). */
.login input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 18px;
	height: 18px;
	flex: none;
	margin: 0;
	background: #fff;
	border: 1.5px solid rgba(30, 41, 59, 0.28);
	border-radius: 5px;
	box-shadow: none;
	transition: background 0.12s var(--lg-ease, ease), border-color 0.12s var(--lg-ease, ease);
}
.login input[type="checkbox"]:hover { border-color: rgba(30, 41, 59, 0.5); }
.login input[type="checkbox"]:checked {
	background: var(--lg-gold);
	border-color: var(--lg-gold);
}
.login input[type="checkbox"]:checked::before {
	/* Core annab siia oma valge dashicons-linnukese `content: url(...)`-iga
	   ning lisaks `float: left` ja `width/height: 1rem`. Meie valija on
	   spetsiifilisem, aga iga tema seatud omadus tuleb eraldi tühistada —
	   ilma `width/height: auto`-ta jääks 1rem laius `inset: 0` peale ja
	   linnuke nihkuks ruudust välja. */
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	float: none;
	margin: 0;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231e293b'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.login input[type="checkbox"]:focus {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 4px var(--lg-focus-ring);
}

/* ".login" prefiks on vajalik: ilma selleta kaotaks flex-reegel
   ülalolevale ".login form > *" (0,1,1) reeglile ja link jääks 100%
   laiuseks ehk omaette reale. */
#login .lg-unustasid {
	order: 2;
	flex: 0 1 auto;
	align-self: center;
	margin: 6px 0 22px;
	font-size: 0.86rem;
}
.login .lg-unustasid a { color: var(--lg-gold-text); text-decoration: none; }
.login .lg-unustasid a:hover,
.login .lg-unustasid a:focus { text-decoration: underline; }

/* Link kolis kaardi sisse — kaardialune duplikaat maha. Teistel
   tegevustel (nt unustatud parool) jääb #nav alles. */
.login-action-login #nav,
.login-action-rp #nav,
.login-action-resetpass #nav { display: none; }

/* Nupud --------------------------------------------------------------- */

/* Nupp: core annab `#loginform p.submit { margin: -10px 0 20px }`
   spetsiifilisusega (1,1,1) — negatiivne ülemine marginaal tõmbas nupu
   „Pea mind meeles" rea peale ja 20px alumine lisas kaardi põhja liigset
   õhku. Meie valija peab olema vähemalt sama tugev: `#login form p.submit`
   on (1,1,2). */
#login form p.submit,
#login form p.reset-pass-submit,
.login .submit,
.login .reset-pass-submit { order: 3; margin: 0; padding: 0; }

.login .button-primary {
	width: 100%;
	float: none;
	height: auto;
	padding: 12px 16px;
	background: var(--lg-gold);
	border: 0;
	border-radius: var(--lg-radius);
	color: var(--lg-ink);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: none;
	text-shadow: none;
}
.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--lg-gold-hover);
	color: var(--lg-ink);
}
.login .button-primary:focus { box-shadow: 0 0 0 4px var(--lg-focus-ring); }

/* Teisene nupp parooliseadmisel ("Paku tugev parool"). */
.login .button.wp-generate-pw {
	width: 100%;
	margin-bottom: 10px;
	padding: 11px 16px;
	height: auto;
	background: transparent;
	border: 1.5px solid rgba(30, 41, 59, 0.28);
	border-radius: var(--lg-radius);
	color: var(--lg-ink);
	font-size: 0.94rem;
	line-height: 1.4;
	box-shadow: none;
}
.login .button.wp-generate-pw:hover,
.login .button.wp-generate-pw:focus {
	background: rgba(30, 41, 59, 0.06);
	border-color: rgba(30, 41, 59, 0.5);
	color: var(--lg-ink);
}

/* Parooli tugevus ------------------------------------------------------ */

.login #pass-strength-result {
	width: 100%;
	margin: 0 0 14px;
	padding: 8px 12px;
	font-size: 0.82rem;
	text-align: left;
	background: var(--lg-sand);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	color: var(--lg-ink-muted);
}
.login #pass-strength-result.short,
.login #pass-strength-result.bad {
	background: #fdf3f1;
	border-color: var(--lg-error-soft);
	color: var(--lg-error);
}
.login #pass-strength-result.good,
.login #pass-strength-result.strong {
	background: var(--lg-sand);
	border-color: var(--lg-line);
	color: var(--lg-gold-text);
}

.login .pw-weak label { font-weight: 400; font-size: 0.86rem; color: var(--lg-ink-soft); }
.login .indicator-hint { font-size: 0.82rem; color: var(--lg-ink-muted); }

/* Teated ja vead ------------------------------------------------------- */

.login .message,
.login .success {
	margin: 0 0 18px;
	padding: 12px 14px;
	font-size: 0.88rem;
	line-height: 1.5;
	background: var(--lg-sand);
	border: 1px solid var(--lg-line);
	border-left-width: 1px;
	border-radius: var(--lg-radius);
	color: var(--lg-ink-soft);
	box-shadow: none;
}
.login .message a { color: var(--lg-gold-text); }

.login #login_error {
	margin: 0 0 18px;
	padding: 12px 14px;
	font-size: 0.88rem;
	line-height: 1.5;
	background: #fdf3f1;
	border: 1px solid var(--lg-error-soft);
	border-left-width: 1px;
	border-radius: var(--lg-radius);
	color: var(--lg-error);
	box-shadow: none;
}
.login #login_error a { color: inherit; text-decoration: underline; }

/* Kaardialused lingid --------------------------------------------------- */

.login #nav,
.login #backtoblog {
	margin: 20px 0 0;
	padding: 0;
	text-align: center;
	font-size: 0.88rem;
}
.login #backtoblog { margin-top: 10px; }
.login #nav a,
.login #backtoblog a { color: var(--lg-ink-muted); text-decoration: none; }
.login #nav a:hover,
.login #backtoblog a:hover { color: var(--lg-ink); }

.login .privacy-policy-page-link { margin: 18px 0 0; text-align: center; font-size: 0.82rem; }
.login .privacy-policy-page-link a { color: var(--lg-ink-muted); }

/* wp-admini sessiooniuuenduse iframe — raam maha, sisu jääb. */
body.interim-login { background: #fff; }
body.interim-login #login { max-width: none; padding: 0; }
body.interim-login .login form { border: 0; border-radius: 0; box-shadow: none; }

@media (max-width: 480px) {
	#login { padding: 4vh 20px 32px; }
	.login form { padding: 24px 20px 22px; }
}

/* Sotsiaalvõrgu nupud ------------------------------------------------
   Kavand: kavandid/sotsiaallogin-prototuup.html.

   ORDER -1 nagu pealkirjal: wp-login annab konksu ainult vormi sisse,
   seega nupud trükitakse DOM-is pärast välju ja order tõstab nad ette.
   Samas order-grupis otsustab dokumendijärjekord ja seal tuleb pea
   esimesena (koolitused_logimise_pea() jookseb enne nuppe).

   NUPUD ON VALGED, värvilised ainult logod: nii Google kui Meta lubavad
   valget nuppu oma märgiga, ja täisvärvis sinine oleks sellel kreemjal
   lehel ainus suur külm pind. */
#login .lg-sots {
	order: -1;
	display: grid;
	gap: 10px;
	margin: 0 0 16px;
}
#login .lg-sots__nupp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-radius);
	background: #fff;
	color: var(--lg-ink);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#login .lg-sots__nupp:hover,
#login .lg-sots__nupp:focus-visible {
	border-color: var(--lg-gold);
	box-shadow: 0 8px 18px -12px rgba(30, 41, 59, 0.35);
	color: var(--lg-ink);
}
#login .lg-sots__nupp svg { flex: none; }
/* Ootel nupp (kavand v6a, omanik 19.08.2026): pakkuja registris, voog
   veel kinni. Tuhm, ilma märgiseta ja linkimata; hover-efekti EI OLE
   (omanik: „hiirega peale minnes ei tohiks mitteaktiivsetele tekkida
   aktiivsust") — kuldne raam lubaks klõpsatavust, mida ei ole. Logo
   jääb värvi — hall logo näeks välja nagu viga, mitte plaan. */
#login .lg-sots__nupp--ootel { cursor: default; background: var(--lg-cream); }
#login .lg-sots__nupp--ootel:hover,
#login .lg-sots__nupp--ootel:focus-visible { border-color: var(--lg-line); box-shadow: none; }
#login .lg-sots__nupp--ootel > * { opacity: 0.5; }
/* Üks vaikne selgitusrida nuppude all — ütleb põhjuse ühe korra, mitte
   iga nupu küljes. */
#login .lg-sots__ootel-rida {
	margin: 2px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--lg-ink-muted);
	text-align: center;
}
#login .lg-sots__eraldaja {
	order: -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 0.8rem;
	color: var(--lg-ink-muted);
}
#login .lg-sots__eraldaja::before,
#login .lg-sots__eraldaja::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--lg-line);
}

/* Parooliga logimine peidus (omanik 18.08.2026: „eemaldame hetkel
   täielikult parooliga logimise lehelt") — kehaklassi paneb
   koolitused_parooliga_peidus() ja AINULT login-vaatele: parooli
   seadmine (kutselink) ja taastamine jäävad puutumata. Varuluuk
   ?parool=1 jätab klassi panemata ja vorm on tagasi. Peidame READ,
   mitte vormi: sotsiaalnupud elavad sama vormi sees. */
body.lg-ainult-sots #loginform > p:not(.submit),
body.lg-ainult-sots #loginform .user-pass-wrap,
body.lg-ainult-sots #loginform .forgetmenot,
body.lg-ainult-sots #loginform .submit,
body.lg-ainult-sots #loginform .lg-unustasid,
body.lg-ainult-sots #login #nav {
	display: none;
}

/* Abirida sotsiaalnuppude all (leid E-4): väiksem ja vaiksem kui nupud,
   aga loetav — ta on ainus väljapääs kasutajale, kellel kontot ei ole. */
#login .lg-sots__abirida {
	margin: 12px 0 0;
	font-size: 0.82rem;
	line-height: 1.55;
	text-align: center;
	color: rgba(30, 41, 59, 0.72);
}
#login .lg-sots__abirida a { color: var(--lg-gold-text, #8a6d1f); }