/* ============================================================================
   Balance — a landing HÉJA (oldalsáv, felső sáv, lábléc, konténerek)
   ----------------------------------------------------------------------------
   A Landing B kész buildjéből KINYERT szabályok — nem kézzel újraírt.
   MINDEN oldalon betöltődik, mert a vázat adja: az oldalsáv és a felső sáv
   a Tutor LMS oldalakon is látszik.

   SZÁNDÉKOSAN nincs benne elem-szintű reset (nincs csillag-szelektor, se
   h1/a/ul), ezért a WordPress és a Tutor LMS tipográfiáját nem bántja.

   A mobil szabályok a saját @media blokkjukban vannak — nincsenek kiszabadítva.
   ============================================================================ */

/* --- A MÁRKAPALETTA — GLOBÁLISAN ------------------------------------------
   ⚠ MIÉRT KELL EZ IDE.

   A `--green` és a `--bal-grad` eddig a `landing-page.css`-ben élt (`:root`) —
   az a fájl viszont CSAK a főoldalon töltődik. Minden más oldalon ezért
   `var(--green)` ÉRVÉNYTELEN volt: a böngésző az egész deklarációt eldobta,
   és a szín az öröklött értékre esett vissza. Ez látszott a márkajel
   pontján, és ezért nem volt a két gombnak sem azonos a gradiense.

   Most itt élnek, a `balance-shell.css`-ben — ez MINDEN oldalon betölt. */
:root {
	--green: #10b981;
	--blue: #2563eb;

	/* A „kék-zöld tenger" gomb-gradiens. Élénkebb, mint a korábbi
	   (#2563eb → #1788d2 → #10b981): a kék mélyebb, a zöld felé vezető
	   szakasz pedig türkizbe hajlik. A landing `.button-primary`, a
	   `.bal-btn--primary` és a kurzuskártya gombja UGYANEZT használja. */
	--bal-grad: linear-gradient(108deg, #0a58ff, #0092cf 45%, #10c98c);
	--bal-shadow-btn: 0 11px 22px rgba(10, 88, 255, 0.22),
		inset 0 1px rgba(255, 255, 255, 0.24);
	--bal-shadow-hover: 0 14px 32px -10px rgba(10, 88, 255, 0.5);
}

/* --- az alap: a landing betűtípusa és papír-színe -------------------------
   A `.bal-body` osztályt a functions.php teszi a <body>-ra. Ez az EGYETLEN
   hely, ahol a téma az egész oldalra hat — de csak két tulajdonságot állít,
   és a landing saját stílusa (landing-page.css) felülírja a főoldalon. */
.bal-body {
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: #f8fafc;
	color: #0f172a;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

/* A WordPress admin sáv (32px) alá ne csússzon a rögzített oldalsáv. */
@media screen and (min-width: 783px) {
	.admin-bar .academy-sidebar {
		top: 32px;
	}
}

.app-shell { min-height:100vh }
.academy-sidebar { z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border-right:1px solid #dce5edeb;flex-direction:column;align-items:center;width:100px;padding:21px 10px 17px;display:flex;position:fixed;inset:0 auto 0 0;box-shadow:8px 0 30px #203a5206 }
/* --- A MÁRKA AZ OLDALSÁVBAN — a LOGÓ, nem betű, és nem „külön gomb" ---------
   A felhasználó kérése: „a »B« betű helyett legyen már a logó ott, kicsiben,
   és nem kell külön gombba tenni."

   Ezért a korábbi 48px-es, lekerekített, árnyékolt doboz (a „külön gomb") és a
   27px-es „b." betű lekerült: csak a logó kép marad, a saját méretén. A link
   megmarad (innen lehet haza menni), de aláhúzás nélkül — a `text-decoration`
   azért kell, mert a téma globális link-stílusa aláhúz. */
.sidebar-brand {
	flex: none;
	display: grid;
	place-items: center;
	width: auto;
	height: auto;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: transform .18s;
}

.sidebar-brand:hover { transform: translateY(-2px); }

/* „Kicsiben" — az oldalsáv 100px széles, ezért 46px a logó. */
.sidebar-brand-logo {
	display: block;
	width: 46px;
	height: auto;
	max-width: 100%;
}

/* Tartalék, ha nincs feltöltött logó: a betű-monogram. */
.brand-monogram { color:#0f766e;letter-spacing:-.1em;font-size:27px;font-weight:720;line-height:1 }
.brand-monogram span { color:#10b981 }
.sidebar-rule { background:#e7edf0;width:38px;height:1px;margin:19px 0 17px }
.sidebar-nav { flex-direction:column;gap:6px;width:100%;display:flex }
.sidebar-link { color:#8994a5;text-align:center;border:1px solid #0000;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:73px;padding:8px 3px;font-size:10px;font-weight:550;line-height:1.22;transition:color .18s,background .18s,border-color .18s,transform .18s;display:flex;position:relative }
.sidebar-link>span { max-width:82px }
.sidebar-link:hover { color:#047857;background:#ecfaf4d9;transform:translateY(-1px) }
.sidebar-link.is-active { color:#059669;background:linear-gradient(145deg,#e7faf2,#eaf8f7);border-color:#d0f2e5e6;font-weight:650;box-shadow:inset 0 1px #ffffffe6,0 5px 15px #1e85690b }
.sidebar-link.is-active:before { content:"";background:linear-gradient(#10b981,#34d399);border-radius:0 4px 4px 0;width:3px;height:25px;position:absolute;top:50%;left:-11px;transform:translateY(-50%) }

/* --- A KILÉPÉS A BAL OLDALI MENÜBEN, GOMBKÉNT ------------------------------
   A felhasználó kérése: „a kilépés gomb legyen a baloldali gomb menüben,
   gombként, amikor be van lépve." A menüpont a `header.php` `$bal_nav_all`-jában
   él (`logged_in_only`), ez a szabály csak a MEGJELENÉSÉT adja: a többi
   menüponttal azonos alak, de saját, halvány felülettel — hogy gombnak
   látszódjon, ne linknek. A hover a kilépés szándékát jelzi. */
.sidebar-link--logout {
	color: #52606f;
	background: #fbfdff;
	border-color: #e6ecf1;
}

.sidebar-link--logout:hover {
	color: #b91c1c;
	background: #fef2f2;
	border-color: #fbd5d5;
}

.sidebar-bottom { color:#9aa6b5;letter-spacing:.12em;align-items:center;gap:6px;margin-top:auto;font-size:9px;font-weight:650;display:flex }
.sidebar-status-dot,.topbar-promise>span,.eyebrow-dot,.catalog-live-dot,.module-ready>span,.form-preview-badge>span { background:var(--green);border-radius:50%;flex:none;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 3px #10b9811c }
.main-column { flex-direction:column;min-height:100vh;margin-left:100px;display:flex }
.topbar { z-index:35;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f8fafcd1;border-bottom:1px solid #e5ebf0c2;flex:none;justify-content:space-between;align-items:center;height:75px;padding:0 clamp(25px,5vw,74px);display:flex;position:sticky;top:0 }
/* --- A MÁRKANÉV A FELSŐ SÁVBAN --------------------------------------------
   ⚠ MIÉRT VAN ITT, ÉS NEM A landing-page.css-BEN.

   Ezek a szabályok eddig KIZÁRÓLAG a `landing-page.css`-ben éltek, ami csak a
   főoldalon töltődik be. Minden más oldalon ezért a felső sávban a NYERS
   böngésző-linkstílus látszott: alapértelmezett kék (látogatottként lila) és
   ALÁHÚZOTT „balance AKADÉMIA" — pontosan az, amit a felhasználó kifogásolt.

   A szöveg most a TELJES márkanév, és NEM link (a `header.php`-ban egy `div`),
   ezért nincs aláhúzás és nincs kattinthatóság. A `sup` a ® jel. */
.wordmark {
	align-items: center;
	gap: 9px;
	min-width: 0;
	flex: 0 1 auto;
	display: inline-flex;
	text-decoration: none;
}

.wordmark-symbol {
	background: linear-gradient(135deg, #2563eb, #16b982);
	border-radius: 9px;
	flex: none;
	place-items: center;
	width: 25px;
	height: 25px;
	display: grid;
	position: relative;
	box-shadow: 0 4px 10px #2563eb2e;
}

.wordmark-symbol:before,
.wordmark-symbol > span {
	content: "";
	border: 1.7px solid #fff;
	border-radius: 50%;
	width: 9px;
	height: 9px;
	display: block;
	position: absolute;
}

.wordmark-symbol > span {
	border-top-color: #0000;
	border-left-color: #0000;
	margin: 5px 0 0 5px;
	transform: rotate(17deg);
}

/* ⚠ A wordmark `®`-je LEVÁGVA (2026-09-30). Mérve: a szövegdoboz teteje
   y=23, a szövegé y=17 -> 5,8px-rel a doboz FÖLÉ lóg, az `overflow: hidden`
   pedig a padding-dobozhoz vágja. A `<sup>` fölfelé emel, a `line-height: 1.1`
   viszont nem ad helyet neki.
   Javítás: `line-height: 1.5` (a fél-ólmozás fölfelé is helyet ad) +
   `padding-top: 2px` (a vágási él lejjebb kerül).
   MÉRVE: a kilógás 5,8px -> 0,6px, a felső sáv magassága VÁLTOZATLAN (66px). */
.wordmark-name {
	color: #12263a;
	letter-spacing: -.042em;
	font-size: 17px;
	font-weight: 720;
	line-height: 1.5;
	padding-top: 2px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wordmark-reg {
	font-size: .58em;
	font-weight: 700;
	letter-spacing: 0;
	vertical-align: super;
}

/* A régi, rövid lockup elemei — megtartva, de a felső sáv már nem használja. */
.wordmark-divider { background:#dce4ea;width:1px;height:20px;margin:0 2px 0 5px }
.wordmark-academy { color:#738296;letter-spacing:.19em;font-size:9px;font-weight:730 }

.topbar-actions { align-items:center;gap:clamp(16px,2.5vw,34px);display:flex }
.topbar-promise { color:#778599;align-items:center;gap:9px;font-size:11px;font-weight:550;display:inline-flex }
.topbar-promise>span { width:6px;height:6px }
.topbar-login { color:#314056;align-items:center;gap:7px;padding:9px 0 9px 13px;font-size:12px;font-weight:650;transition:color .16s;display:inline-flex }
.topbar-login:hover { color:#059669 }

/* ★ KOSÁR A FEJLÉCBEN (2026-10-06) — a felhasználó kérése: jobb felül kosár
   ikon PIROS darabszám-jelvénnyel. A jelvény (`.tutor-cart-count`) a TUTOR
   saját osztálya: az ő JS-e frissíti a `tutorAddToCartEvent` /
   `tutorRemoveCartEvent` után (mérve: tutor-front.js 145–146., 264–268. sor).
   Nekünk csak a megjelenés a dolgunk. */
.topbar-cart { color:#314056;position:relative;align-items:center;gap:8px;padding:9px 11px;border-radius:14px;font-size:12px;font-weight:650;transition:color .16s,background .16s;display:inline-flex }
.topbar-cart:hover { color:#059669;background:#10b98114 }
.topbar-cart svg { flex:none }
.topbar-cart.is-van { color:#0f172a }

/* A jelvény: PIROS, a jobb felső sarokban, az ikonra ülve. `hidden`-nél nem
   látszik (a szerver 0-tól elrejti, és a Tutor is így tesz `if_has_items`-nél). */
.balance-kosar-db { color:#fff;background:#e11d48;border-radius:999px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:18px;text-align:center;position:absolute;top:3px;left:20px;box-shadow:0 0 0 2px #f8fafc }
.balance-kosar-db[hidden] { display:none }

/* A felirat csak széles sávban — szűkben marad az ikon és a jelvény. */
.topbar-cart-nev { display:inline }
.page-content { flex:1 0 auto }
.page-wrap { width:100%;max-width:1430px;margin:0 auto;padding-left:clamp(25px,5.3vw,78px);padding-right:clamp(25px,5.3vw,78px) }
.site-footer { color:#8895a5;border-top:1px solid #e5ebf0bf;justify-content:space-between;align-items:center;gap:16px;min-height:84px;padding:18px clamp(25px,5.3vw,78px);font-size:10px;display:flex }
.site-footer p { text-align:center;margin:0 }
.footer-brand { color:#34465b;letter-spacing:-.07em;font-size:15px;font-weight:750 }
.footer-brand span { color:var(--green) }
.footer-copy { text-align:right }
.page-heading { max-width:780px;margin-bottom:37px }
.page-heading h1 { color:#112137;letter-spacing:-.067em;margin:19px 0 14px;font-size:clamp(42px,5vw,63px);font-weight:640;line-height:1.055 }

@media(max-width:1180px) {
    .academy-sidebar { width:88px }
    .main-column { margin-left:88px }
    /* A teljes márkanév hosszú: szűkebb sávban kisebb betű, és a felső sáv
       ígérete elhagyható, hogy a „Belépés" gombnak maradjon hely. */
    .wordmark-name { font-size:15px }
    .topbar-promise { display:none }
}

@media(max-width:760px) {
    .academy-sidebar { width:100%;height:calc(67px + env(safe-area-inset-bottom));padding:5px 8px calc(5px + env(safe-area-inset-bottom));background:#ffffffe6;border-top:1px solid #dce5edf2;border-right:0;flex-direction:row;justify-content:center;inset:auto 0 0;box-shadow:0 -7px 24px #203a520e }
    .sidebar-brand,.sidebar-rule,.sidebar-bottom { display:none }
    .sidebar-nav { flex-direction:row;justify-content:space-between;align-items:center;gap:3px;width:min(100%,570px);margin:0 auto }
    .sidebar-link { border-radius:14px;flex:20%;gap:4px;min-width:0;min-height:55px;padding:5px 2px;font-size:9.5px;line-height:1.16 }
    .sidebar-link svg { width:19px;height:19px }
    .sidebar-link>span { max-width:100% }
    .sidebar-link.is-active:before { border-radius:4px 4px 0 0;width:22px;height:3px;inset:auto 50% -5px auto;transform:translate(50%) }
    .main-column { min-height:100vh;padding-bottom:calc(67px + env(safe-area-inset-bottom));margin-left:0 }
    .topbar { height:66px;padding:0 22px }
    .topbar-promise { display:none }
    .topbar-actions { gap:4px }
    .topbar-login { padding-left:8px;font-size:11px }
    .topbar-cart { padding:8px 9px }
    .topbar-cart-nev { display:none }
    .balance-kosar-db { left:16px;top:2px }
    .page-wrap { padding-left:25px;padding-right:25px }
    .site-footer { min-height:unset;text-align:center;flex-wrap:wrap;justify-content:center;gap:7px 15px;padding:22px 24px }
    .site-footer p { order:3;width:100% }
    .footer-copy { text-align:center }
    .page-heading { margin-bottom:27px }
    .page-heading h1 { font-size:clamp(42px,8vw,59px) }
}

@media(max-width:560px) {
    .topbar { padding-left:17px;padding-right:17px }
    .wordmark { gap:6px }
    .wordmark-name { font-size:13px }
    .wordmark-symbol { width:22px;height:22px;border-radius:8px }
    .topbar-login { gap:3px;font-size:10px }
    .topbar-login svg { width:13px }
    .topbar-cart { padding:7px 8px }
    .page-wrap { padding-left:19px;padding-right:19px }
    .site-footer { padding-left:18px;padding-right:18px;font-size:8px }
    .page-heading h1 { font-size:clamp(38px,10vw,51px) }
}

/* ---------------------------------------------------------------------------
   A LÁBLÉC JOGI LINKJEI
   A Google OAuth-verifikáció megköveteli, hogy az adatvédelmi irányelv
   LINKELVE legyen a kezdőlapról. A linkek a lábléc középső hasábjába kerülnek,
   ezért a szöveg és a linkek egy `div.footer-legal`-ba fogottan.
   --------------------------------------------------------------------------- */

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.footer-links a {
    color: #6b7c8f;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--green);
    border-bottom-color: var(--green);
}

.footer-links span {
    color: #c3ccd6;
}

@media(max-width:760px) {
    .site-footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .footer-copy { text-align: center }
}

/* ---------------------------------------------------------------------------
   A VEZÉRLŐPULT SAJÁT MÁRKÁJA — NE LÓGJON KI
   ---------------------------------------------------------------------------
   A Tutor LMS a vezérlőpult oldalsávjának tetejére a `shared/brand-logo.php`
   sablonját teszi. Ha nincs beállított logó (`brand_logo_light`/`custom_logo`),
   akkor a WEBHELY NEVÉT írja ki egy `span.site-title`-be — a Tutor viszont
   ehhez SEMMILYEN méretet nem ad, ezért az a szöveg akkora lesz, amekkora
   épp adódik, és kilóghat a helyéről.

   Ez a blokk mindkét esetet (kép VAGY szöveg) a helyére teszi. A beállított
   logó a Testreszabásban továbbra is érvényes — ez csak a méretét szabja.
   --------------------------------------------------------------------------- */

.bal-content .tutor-brand-logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-width: 0;
}

.bal-content .tutor-brand-logo img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.bal-content .tutor-brand-logo .site-title {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #0f172a;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.bal-content .tutor-brand-logo img { height: 26px }
	.bal-content .tutor-brand-logo .site-title { font-size: 1rem }
}