/*
 * MEA Klub – a belépő képernyő (wp-login.php).
 *
 * Ez a tag ELSŐ képernyője a klubból, és ide fut be az elfelejtett jelszó
 * levele is. A WordPress alap belépője itt rossz benyomás: egy fizetős
 * prémium klubnál nem a wp-adminba léptet be az ember, hanem a klubba.
 *
 * Szerkezet: a `#login` kap egy bal oldali belső margót, és abba a sávba ül
 * bele abszolút pozícionálva a márkapanel (a `login_message` szűrőn
 * beinjektált `.mea-brand`). Minden más, amit a WordPress kiír (h1, üzenetek,
 * hibák, űrlap, linkek), marad a normál folyamban, a jobb oldali sávban.
 *
 * Ez szándékosan NEM rács: rácsban a panelnek át kellene érnie az összes soron,
 * a sorok viszont implicitek (a WordPress változó számú elemet ír ki), és a
 * `grid-row:1/-1` olyankor egyetlen sorra szűkül. A `span N` kerülőút pedig az
 * üres sorokat felfújta, és a kártya alja 230 képponttal üresen lógott.
 *
 * A színek a klubfelület (kk.css) tokenjeivel egyeznek: kék #175FEE,
 * narancs #FF9B38, Manrope. Ha ott változik a márkaszín, itt is át kell írni.
 */

@font-face{
	font-family:'Manrope';
	src:url('manrope-var.woff2') format('woff2-variations');
	font-weight:200 800;
	font-style:normal;
	font-display:swap;
}

body.login{
	font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	background:#F4F7FE;
	/* Halvány márkafény a lap két sarkában, hogy a fehér kártya ne lebegjen üresen. */
	background-image:
		radial-gradient(90% 70% at 100% 0%, rgba(255,155,56,.16) 0%, rgba(255,155,56,0) 60%),
		radial-gradient(80% 70% at 0% 100%, rgba(23,95,238,.14) 0%, rgba(23,95,238,0) 60%);
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	min-height:100dvh;
	padding:28px 18px;
}

#login{
	position:relative;
	/* A WordPress belépője content-box-ot használ – enélkül a bal sáv szélessége
	   RÁADÓDNA a 980 képpontra, és a kártya kilógna a képernyőből. */
	box-sizing:border-box;
	width:min(980px,100%);
	/* A bal sáv a márkapanelé, a szöveg ezért kezdődik beljebb. Képpontban, nem
	   százalékban: a százalékos belső margó a FLEX SZÜLŐ szélességéhez mérne, nem
	   a kártyáéhoz, tehát nagyobb képernyőn elnyelné a jobb sávot. */
	padding:0 0 0 470px;
	min-height:520px;
	background:#fff;
	border-radius:28px;
	box-shadow:0 2px 6px rgba(16,36,74,.04), 0 26px 70px rgba(16,36,74,.13);
	overflow:hidden;
}

/* ---------- BAL SÁV: MÁRKAPANEL ---------- */

.mea-brand{
	position:absolute;
	/* Szintén border-box: a 38 képpontos belső margó különben a 470-hez adódna,
	   és a panel benyúlna az űrlap sávjába. */
	box-sizing:border-box;
	left:0;
	top:0;
	bottom:0;
	width:470px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	gap:18px;
	padding:44px 38px 0;
	color:#fff;
	background:#0B2A6F;
	background-image:
		radial-gradient(120% 90% at 82% 100%, rgba(255,155,56,.26) 0%, rgba(255,155,56,0) 58%),
		radial-gradient(110% 85% at 18% 4%, rgba(23,95,238,.62) 0%, rgba(9,34,94,.55) 52%, rgba(6,22,64,.80) 100%);
}

.mea-brand__logo{
	display:block;
	width:100%;
	max-width:226px;
	height:auto;
}

.mea-brand__szlogen{
	font-size:clamp(20px,2.2vw,25px);
	line-height:1.28;
	font-weight:800;
	letter-spacing:-.01em;
	max-width:13em;
	margin:6px 0 0;
	text-wrap:balance;
}

.mea-brand__lead{
	font-size:15px;
	line-height:1.5;
	font-weight:500;
	color:rgba(255,255,255,.82);
	max-width:17em;
	margin:0;
}

/* Mea kivágott, átlátszó hátterű alakja. MAGASSÁG-alapú méretezés: szélességből
   számolva alacsony böngészőablakban levágódna a kép alja (a karbantartási
   oldalon is ebbe futottunk bele). */
.mea-brand__alak{
	position:absolute;
	/* Nem lóg ki a panelből: `right:0`, tehát a jobb oldala (és a másik keze) is
	   végig látszik. A magasság ezért egy fokkal kisebb – így a keskenyebb alak
	   nem ér rá a lead szövegre (a panel 470px, a szöveg ~277px-nél végződik). */
	right:0;
	bottom:0;
	height:min(64%,440px);
	width:auto;
	max-width:none;
	pointer-events:none;
	filter:drop-shadow(0 18px 40px rgba(6,22,64,.42));
}

/* ---------- JOBB SÁV: AZ ŰRLAP ---------- */

/* A h1 csak a képernyőolvasónak marad meg (a látható címsor a `.mea-cim` h2-je),
   ezért a rácsban ne foglaljon helyet. */
#login h1{
	margin:0;
	padding:0;
	font-size:0;
	line-height:0;
}

/* A h1 hivatkozása alapból a wordpress.org logó. A márkapanel viszi a logót,
   ezért itt csak a képernyőolvasónak hagyjuk meg a klub nevét. */
#login h1 a{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
	background:none;
	margin:0;
	padding:0;
	text-indent:0;
}

.mea-cim{
	padding:44px 40px 0;
	margin:0;
}

.mea-cim__kicsi{
	display:block;
	font-size:12.5px;
	font-weight:800;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#FF9B38;
	margin-bottom:6px;
}

.mea-cim__nagy{
	font-size:26px;
	line-height:1.2;
	font-weight:800;
	letter-spacing:-.015em;
	color:#2E3A4A;
	margin:0 0 6px;
}

.mea-cim__alatt{
	font-size:14.5px;
	line-height:1.5;
	color:#5A6B80;
	margin:0;
}

/* Csak mobilon látszik: ott nincs márkapanel, tehát a logó ide kerül. */
.mea-cim__logo{display:none}

.login form{
	margin:22px 40px 0;
	padding:0;
	border:0;
	border-radius:0;
	background:none;
	box-shadow:none;
}

.login label{
	font-size:13px;
	font-weight:700;
	color:#2E3A4A;
}

.login form .input,
.login input[type=text],
.login input[type=email],
.login input[type=password]{
	border:1px solid #DDE4F0;
	border-radius:12px;
	padding:11px 13px;
	font-size:15px;
	background:#FBFCFE;
	box-shadow:none;
	transition:border-color .16s, box-shadow .16s, background .16s;
}

.login form .input:focus,
.login input[type=text]:focus,
.login input[type=email]:focus,
.login input[type=password]:focus{
	border-color:#175FEE;
	background:#fff;
	box-shadow:0 0 0 3px rgba(23,95,238,.16);
	outline:0;
}

.login .wp-pwd .button.wp-hide-pw{
	color:#8494A8;
	right:2px;
}

.login .wp-pwd .button.wp-hide-pw:hover{color:#175FEE}

.login .forgetmenot label{
	font-size:13.5px;
	font-weight:500;
	color:#5A6B80;
}

.login p.submit{margin-top:6px}

.wp-core-ui .button-primary{
	display:block;
	width:100%;
	background:linear-gradient(135deg,#FF9B38,#F0810F);
	border:0;
	border-radius:999px;
	font-size:15.5px;
	font-weight:800;
	letter-spacing:.005em;
	line-height:46px;
	height:46px;
	padding:0;
	text-align:center;
	text-shadow:none;
	box-shadow:0 10px 22px rgba(240,129,15,.30);
	transition:transform .16s, box-shadow .16s, background .16s;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{
	background:linear-gradient(135deg,#F0810F,#E07408);
	box-shadow:0 12px 26px rgba(240,129,15,.34);
	transform:translateY(-1px);
	color:#fff;
}

.wp-core-ui .button-primary:active{transform:none}

/* A „Jelszó elfelejtve” / „Vissza” linkek: a kártya lábléce. */
.login #nav{
	margin:20px 40px 0;
	padding:16px 0 0;
	border-top:1px solid #EFF3F8;
	font-size:13.5px;
}

.login #backtoblog{
	margin:2px 40px 40px;
	padding:6px 0 0;
	font-size:13.5px;
}

.login #nav a,
.login #backtoblog a{
	color:#5A6B80;
	font-weight:600;
}

.login #nav a:hover,
.login #backtoblog a:hover{
	color:#175FEE;
	text-decoration:underline;
}

.login .message,
.login .success,
.login #login_error{
	margin:22px 40px 0;
	padding:12px 14px;
	border-radius:12px;
	border-left:4px solid #175FEE;
	box-shadow:none;
	font-size:14px;
}

.login #login_error{border-left-color:#D9534F}

/* A klub egynyelvű – a nyelvváltó itt csak zavarna. */
.login .language-switcher{display:none}

/* A privacy-policy link a kártya alatt lebegne; a lábléchez húzzuk. */
.login .privacy-policy-page-link{
	margin:0 40px 26px;
	text-align:left;
	font-size:13px;
}

/* ---------- MOBIL ---------- */

@media (max-width:860px){
	#login{
		width:min(430px,100%);
		padding:0;
		min-height:0;
		border-radius:22px;
	}

	.mea-brand{display:none}

	.mea-cim{padding:32px 26px 0}
	.mea-cim__logo{
		display:block;
		width:172px;
		height:auto;
		margin:0 0 20px;
	}
	.mea-cim__nagy{font-size:23px}
	.login form{margin:20px 26px 0}
	.login #nav{margin:18px 26px 0}
	.login #backtoblog{margin:2px 26px 30px}
	.login .message,
	.login .success,
	.login #login_error{margin:18px 26px 0}
	.login .privacy-policy-page-link{margin:0 26px 22px}
	.wp-core-ui .button-primary{line-height:48px;height:48px}
}

/* Kis magasságú ablakban (pl. fekvő telefon) ne nyúljon ki a panel. */
@media (min-width:861px) and (max-height:640px){
	#login{min-height:0}
	.mea-brand{padding-top:32px}
	.mea-cim{padding-top:32px}
}

@media (prefers-reduced-motion:reduce){
	.wp-core-ui .button-primary{transition:none}
	.wp-core-ui .button-primary:hover{transform:none}
}

/*
 * Keszitette-jelzes a belepokepernyo aljan, a kartyan KIVUL.
 *
 * A `login_footer` a #login utan ir, tehat a jobb hasab aljara esik. Halvany,
 * hogy a belepesrol ne vonja el a figyelmet - hover-re olvashatobb.
 */
/* A `body.login` egy KOZEPRE igazito flex sor, tehat a bekezdes harmadik
   flex-elemkent a jobb szelre szorult (138 px szelesen, a kartya mellett).
   Ezert kivesszuk a folyasbol, es a lap aljara, kozepre tesszuk. */
body.login{position:relative}
.kk-keszitette-sor{
	position:absolute;left:0;right:0;bottom:14px;
	margin:0;text-align:center;
	font-size:11.5px;color:#7A8699;opacity:.6;
}
.kk-keszitette-sor a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.kk-keszitette-sor:hover{opacity:1}