/*
 * A WordPress admin felület az iskola arculatában.
 * ---------------------------------------------------------------------------
 *
 * MIT CSINÁL ÉS MIT NEM
 *
 * Csak SZÍNT és BETŰT állít. Elrendezéshez, méretekhez, térközökhöz nem nyúl —
 * azok a WordPress sajátjai, és minden frissítéssel változhatnak. Egy admin
 * stíluslap, ami az elrendezésbe is beleszól, a következő WordPress-frissítéskor
 * eltörik; ez a fájl szándékosan nem ilyen.
 *
 * Amihez KÜLÖN NEM nyúl:
 *  - az értesítések színei (piros / sárga / zöld): azok jelentést hordoznak,
 *    nem arculatot — egy hibaüzenetnek pirosnak kell maradnia
 *  - a bővítmények saját felületei (Elementor, Yoast): azok a magukét viszik
 *  - a blokkszerkesztő belseje: ott a téma editor.css-e dolgozik
 *
 * A színek a téma tokenjeiből valók (assets/css/tokens.css), de itt kézzel
 * vannak kiírva: az admin nem tölti be a téma tokenjeit, és egy felesleges
 * kérésért nem éri meg.
 *
 * KONTRASZT: minden itt megadott szövegszín mérve van a saját hátterén, és
 * mind teljesíti a WCAG 2.1 AA 4,5:1 küszöbét. A mért értékek a szabályok
 * mellett szerepelnek. Ha valaki új színt ír ide, mérje meg
 * (node a11y-elo.js, vagy redesign/kontraszt.js).
 */

:root {
	--pseg-navy-900: #1A2438;
	--pseg-navy-800: #2A3E63;
	--pseg-navy-700: #35496E;
	--pseg-navy-600: #4A6390;
	--pseg-navy-100: #E8EDF6;
	--pseg-gold-500: #C8AF76;
	--pseg-gold-700: #7A6229;
	--pseg-ink: #101720;
	--pseg-vonal: #E2E6EC;
	--pseg-felulet: #F6F8FB;
	--pseg-on-dark: #C9D5E8;
	--pseg-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   OLDALSÁV MENÜ
   ========================================================================== */
#adminmenu,
#adminmenuback,
#adminmenuwrap {
	background: var(--pseg-navy-900);
}

/* #C9D5E8 a #1A2438 háttéren: 10,5:1 */
#adminmenu a,
#adminmenu div.wp-menu-image::before {
	color: var(--pseg-on-dark);
}

#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
	background: var(--pseg-navy-700);
	color: #fff;
}

#adminmenu li.menu-top:hover div.wp-menu-image::before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image::before {
	color: var(--pseg-gold-500);
}

/*
 * Az aktuális menüpont: sötétkék felület, arany bal szegély.
 * A fehér felirat a #2A3E63 háttéren 10,7:1.
 */
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
	background: var(--pseg-navy-800);
	color: #fff;
	box-shadow: inset 3px 0 0 var(--pseg-gold-500);
}

#adminmenu li.current a.menu-top div.wp-menu-image::before,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu div.wp-menu-image::before,
#adminmenu .wp-menu-image::before {
	color: var(--pseg-on-dark);
}

#adminmenu li.current a.menu-top div.wp-menu-image::before,
#adminmenu li.wp-has-current-submenu div.wp-menu-image::before {
	color: var(--pseg-gold-500);
}

/* --- Almenü --------------------------------------------------------------- */
#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
	background: #141C2C;
}

/* #C9D5E8 a #141C2C háttéren: 11,3:1 */
#adminmenu .wp-submenu a {
	color: var(--pseg-on-dark);
}

#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
	color: var(--pseg-gold-500);
}

/* Az aktuális almenüpont fehéren, hogy egyértelmű legyen, hol vagyunk. */
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover,
#adminmenu .wp-submenu li.current a:focus {
	color: #fff;
	font-weight: 600;
}

#adminmenu li.wp-menu-separator {
	border-color: rgba(255, 255, 255, .10);
}

#collapse-button {
	color: var(--pseg-on-dark);
}

/* Számláló buborék (várakozó hozzászólás, frissítés). */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
	background: var(--pseg-gold-500);
	color: var(--pseg-navy-900); /* 7,3:1 */
}

/* ==========================================================================
   FELSŐ ADMIN SÁV
   ========================================================================== */
#wpadminbar {
	background: var(--pseg-navy-900);
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
	color: var(--pseg-on-dark);
}

#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
	color: var(--pseg-on-dark);
}

#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
	background: var(--pseg-navy-700);
	color: #fff;
}

#wpadminbar .menupop .ab-sub-wrapper {
	background: #141C2C;
}

#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a {
	color: var(--pseg-on-dark);
}

#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus {
	color: var(--pseg-gold-500);
}

/* ==========================================================================
   GOMBOK, HIVATKOZÁSOK, FÓKUSZ
   ========================================================================== */

/* Fehér felirat a #2A3E63 gombon: 10,7:1 */
.wp-core-ui .button-primary {
	background: var(--pseg-navy-800);
	border-color: var(--pseg-navy-800);
	color: #fff;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--pseg-navy-700);
	border-color: var(--pseg-navy-700);
	color: #fff;
}

.wp-core-ui .button-primary:disabled,
.wp-core-ui .button-primary.disabled {
	background: var(--pseg-navy-600) !important;
	border-color: var(--pseg-navy-600) !important;
	color: #E8EDF6 !important;
}

/*
 * Másodlagos gomb: keret és felirat márkakékkel (#35496E fehéren 9,0:1).
 *
 * A `:not(.button-primary)` NEM elhagyható. A WordPress az elsődleges gombot
 * `class="button button-primary"` alakban írja ki, tehát ez a szabály ráfutna,
 * és mivel azonos fajsúlyú és KÉSŐBB áll, meg is nyerné a színt: sötétkék
 * felirat került volna a sötétkék gombra, mérve 1,18:1 — olvashatatlanul.
 */
.wp-core-ui .button:not(.button-primary),
.wp-core-ui .button-secondary:not(.button-primary) {
	color: var(--pseg-navy-700);
	border-color: var(--pseg-navy-600);
}

.wp-core-ui .button:not(.button-primary):hover,
.wp-core-ui .button-secondary:not(.button-primary):hover {
	color: var(--pseg-navy-800);
	border-color: var(--pseg-navy-800);
	background: var(--pseg-navy-100);
}

/*
 * HIVATKOZÁSOK — és hogy miért NEM festjük át mindet.
 *
 * Az első változat minden admin linket márkakékre állított. Mérve két helyen
 * el is tört, mert a linkek egy része NEM fehér háttéren ül, és a színt a
 * doboz gazdája adja:
 *   - az Elementor promóciós értesítésének gombja (lila #524CFF háttér):
 *     a márkakék felirat ott 1,65:1
 *   - a WordPress üdvözlőpaneljének sötét sávja (#151515): 2,03:1
 * Egy admin stíluslap nem tudhatja, milyen hátteret ad neki egy bővítmény.
 *
 * Ezért a linkszínt csak OTT állítjuk, ahol a markupot a téma írja, tehát a
 * hátteret is ismerjük. A WordPress alapkékje (#2271b1) fehéren 4,8:1 —
 * megfelel az AA-nak, és minden szerkesztő ismeri; nincs okunk lecserélni.
 */
.pseg-attekintes a:not(.button),
.pseg-cim-alatt a:not(.button) {
	color: var(--pseg-navy-700);
}

.pseg-attekintes a:not(.button):hover,
.pseg-cim-alatt a:not(.button):hover {
	color: var(--pseg-navy-800);
}

/*
 * Fókuszjelölés. A WordPress kék gyűrűje helyett márkakék, DE azonos
 * vastagsággal és offszettel — a láthatóság nem csökkenhet.
 * A #35496E a fehér admin háttéren 9,0:1, tehát a nem-szöveg kontraszt
 * követelményét (WCAG 2.2 SC 1.4.11, 3:1) bőven teljesíti.
 */
.wp-core-ui input[type="text"]:focus,
.wp-core-ui input[type="search"]:focus,
.wp-core-ui input[type="email"]:focus,
.wp-core-ui input[type="url"]:focus,
.wp-core-ui input[type="password"]:focus,
.wp-core-ui input[type="number"]:focus,
.wp-core-ui input[type="date"]:focus,
.wp-core-ui input[type="time"]:focus,
.wp-core-ui textarea:focus,
.wp-core-ui select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
	border-color: var(--pseg-navy-700);
	box-shadow: 0 0 0 1px var(--pseg-navy-700);
	outline: 2px solid transparent;
}

.wp-core-ui .button:focus,
.wp-core-ui .button-primary:focus,
.wp-core-ui .button-secondary:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pseg-navy-700);
}

input[type="checkbox"]:checked::before {
	color: var(--pseg-navy-800);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
	border-color: var(--pseg-navy-700);
	box-shadow: 0 0 0 1px var(--pseg-navy-700);
}

/* ==========================================================================
   CÍMSOROK ÉS DOBOZOK
   ========================================================================== */

/* A téma címsorbetűje az adminban is — ez köti össze a két felületet. */
.wrap h1,
.wrap h1.wp-heading-inline {
	font-family: var(--pseg-serif);
	font-weight: 600;
	color: var(--pseg-ink);
	letter-spacing: -.01em;
}

.postbox-header h2,
.postbox .hndle,
.postbox h2.hndle {
	font-family: var(--pseg-serif);
	font-weight: 600;
	color: var(--pseg-ink);
}

.postbox {
	border-color: var(--pseg-vonal);
}

/* Az aktuális fül a listákban. */
.subsubsub a.current,
.subsubsub a.current:hover {
	color: var(--pseg-navy-800);
	font-weight: 600;
}

.wp-list-table .sorting-indicator::before {
	color: var(--pseg-navy-600);
}

.wp-list-table thead th a:hover .sorting-indicator::before {
	color: var(--pseg-navy-800);
}

.tablenav .tablenav-pages .current {
	background: var(--pseg-navy-800);
	border-color: var(--pseg-navy-800);
	color: #fff;
}

/* ==========================================================================
   A TÉMA SAJÁT KÉPERNYŐI
   ========================================================================== */

/* Az „Iskola” áttekintő oldal. */
.pseg-attekintes .widefat thead th {
	background: var(--pseg-navy-100);
	color: var(--pseg-ink);
	font-weight: 600;
}

.pseg-attekintes .widefat td strong a {
	font-weight: 600;
}

.pseg-attekintes .pseg-darab {
	display: inline-block;
	min-width: 2.2em;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--pseg-navy-100);
	color: var(--pseg-navy-800); /* #2A3E63 a #E8EDF6 háttéren: 9,0:1 */
	font-weight: 600;
	text-align: center;
}

.pseg-attekintes .pseg-ures {
	background: transparent;
	color: var(--pseg-gold-700); /* #7A6229 fehéren: 5,9:1 */
}

/* Listaoszlopok. */
.column-pseg_kep { width: 60px; }
.column-pseg_sorrend { width: 70px; text-align: center; }

/*
 * Hiányzó kötelező adat. A #b32d2e a WordPress saját hibapirosa, fehéren
 * 5,9:1 — és nem csak a szín jelzi: dőlt szedés is tartozik hozzá, hogy ne
 * a színen múljon (WCAG 1.4.1).
 */
.pseg-hianyzik { color: #b32d2e; font-style: italic; }

/* Üres vagy nem releváns érték. #646F7D fehéren 5,1:1. */
.pseg-halvany { color: #646F7D; }

/* Átvitel másik oldalra: két kártya egymás mellett, keskenyen egymás alatt. */
.pseg-atvitel-cim {
	margin-top: 2.2em;
	font-family: var(--pseg-serif);
	font-weight: 600;
	color: var(--pseg-ink);
}
.pseg-atvitel { display: flex; flex-wrap: wrap; gap: 16px; }
.pseg-atvitel .card { margin: 0; flex: 1 1 360px; max-width: 440px; border-top: 3px solid var(--pseg-navy-800); }
.pseg-atvitel .card h3 { margin-top: 0; font-family: var(--pseg-serif); color: var(--pseg-ink); }

/* A mezők metaboxa (a cím alatt). */
.pseg-cim-alatt .postbox {
	border-left: 3px solid var(--pseg-navy-800);
}

.pseg-mezok label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--pseg-ink);
}

.pseg-mezok .description {
	display: block;
	margin-top: 4px;
}

/* ==========================================================================
   BEJELENTKEZŐ KÉPERNYŐ
   --------------------------------------------------------------------------
   Ez az első, amit a titkárság lát a rendszerből — és a gyári WordPress
   bejelentkező semmit nem mond arról, melyik iskola honlapjához tartozik.
   A címer, az intézmény neve és a márkakék együtt ezt teszi egyértelművé.

   A szerkezethez itt sem nyúlunk: a WordPress saját elrendezése marad,
   csak a felület, a betű és a szín lesz a témáé.
   ========================================================================== */
body.login {
	background:
		radial-gradient(1200px 420px at 50% -160px, #E8EDF6 0%, rgba(232, 237, 246, 0) 70%),
		var(--pseg-felulet);
}

/*
 * A WordPress logója helyett az iskola címere, FEHÉR alátéten.
 *
 * A címer JPEG, tehát nincs benne átlátszóság — a háttere ráadásul nem is
 * tiszta fehér: a szélek #F2F2F0 és #FEFEFE között mozognak (a 252 szélső
 * képpontból 83 marad 250 alatt). A téma fejlécében bevált
 * `mix-blend-mode: multiply` ezért itt NEM elég: a halványkék lapon szürke
 * téglalapot rajzolt a címer köré, ami a képen jól látszott.
 *
 * A fehér alátéten a kép saját háttere elvész, és a címer jelvényként ül a
 * lapon — ez szándékosabbnak is néz ki, mint egy lebegő kivágás.
 */
body.login h1 a {
	background-image: var(--pseg-cimer);
	background-size: contain;
	background-position: center;
	background-color: #fff;
	width: 76px;
	height: 96px;
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 14px;
	border: 1px solid var(--pseg-vonal);
	box-shadow: 0 2px 6px rgba(26, 36, 56, .06);
	box-sizing: content-box;
}

/* --- Fejléc: intézménynév a címer alatt ---------------------------------- */
.pseg-login-fej {
	max-width: 320px;
	margin: 0 auto 22px;
	text-align: center;
}

.pseg-login-fej__nev {
	display: block;
	font-family: var(--pseg-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pseg-ink);      /* fehéren ~17:1 */
	letter-spacing: -.01em;
}

.pseg-login-fej__alcim {
	display: block;
	margin-top: 7px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	/*
	 * Sötétebb, mint a téma --muted tokenje, és ez szándékos: a lap
	 * tetején a radiális átmenet #E8EDF6-ra sötétít, ahol a #646F7D már
	 * csak 4,35:1 — 0,15-tel a küszöb alatt. Ez az érték ugyanaz az
	 * árnyalat, csak sötétebb: 5,10:1 az átmenet tetején is.
	 */
	color: #5B6471;
}

/* Vékony arany vonal a név alatt — a téma fejlécének visszaköszönése. */
.pseg-login-fej::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin: 16px auto 0;
	background: var(--pseg-gold-500);
}

/* --- Az űrlap kártyája ---------------------------------------------------- */
body.login form {
	border: 1px solid var(--pseg-vonal);
	border-top: 3px solid var(--pseg-navy-800);
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(26, 36, 56, .08), 0 28px 60px rgba(26, 36, 56, .10);
}

body.login label,
body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	color: var(--pseg-ink);
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	border-radius: 8px;
	border-color: var(--pseg-vonal);
	/*
	 * 16 px: 15 px alatt a mobil Safari fókuszkor ránagyít az oldalra, és a
	 * bejelentkező mezője kicsúszik a képernyőről. Ugyanaz az ok, mint az
	 * előtér űrlapjainál.
	 */
	font-size: 16px;
}

body.login .wp-core-ui .button-primary {
	border-radius: 8px;
	font-weight: 650;
}

/* #35496E a #F6F8FB háttéren: 8,6:1 */
body.login #backtoblog a,
body.login #nav a {
	color: var(--pseg-navy-700);
}

body.login #backtoblog a:hover,
body.login #nav a:hover,
body.login #backtoblog a:focus,
body.login #nav a:focus {
	color: var(--pseg-navy-800);
}

body.login .button.wp-hide-pw {
	color: var(--pseg-navy-700);
}

/*
 * Az üzenetsáv (pl. „A jelszó visszaállításához…”) kapja a márkakéket a
 * WordPress alapkékje helyett — ez a doboz a témáé, a hátterét ismerjük.
 */
body.login .message,
body.login #login_error {
	border-radius: 8px;
}

body.login .message {
	border-left-color: var(--pseg-navy-800);
}

/* Nagyon alacsony ablakban ne lógjon szét a fejléc. */
@media (max-height: 620px) {
	body.login h1 a { width: 56px; height: 71px; padding: 9px 12px; margin-bottom: 10px; }
	.pseg-login-fej { margin-bottom: 14px; }
	.pseg-login-fej::after { margin-top: 10px; }
}

/* ==========================================================================
   MOZGÁSCSÖKKENTÉS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	#adminmenu a,
	.wp-core-ui .button,
	.wp-core-ui .button-primary {
		transition: none;
	}
}