/*!
 * VDTA Design — design.css
 *
 * Két, egymástól független hatókör:
 *   F4 — a főoldal finom modernizálása:  body.elementor-page-2651 (csak a főoldal)
 *   F5 — a fejléc és a menü megjelenése: header.elementor-location-header (minden oldal)
 *
 * Színpaletta: KIZÁRÓLAG a meglévő márkaszínek — #012c6d, #155081, #0FD6D9,
 * #D80100, #CE2525, #F0337A, valamint a meglévő szürkék/világosak. Új szín nincs;
 * az átlátszóságok a meglévő színekből képzett rgba() értékek.
 *
 * SZERKEZET-VÁLTOZÁS NINCS. Ez a fájl kizárólag megjelenést szabályoz:
 *   - a menü szerkezete (elemek, célok, sorrend) változatlan,
 *   - a főoldal szerkezete (2 konténer, loop-rácsok, bannerek) változatlan.
 *
 * MIÉRT !important?
 *   Az Elementor generált CSS-e elemenkénti, magas specificitású szelektorokkal
 *   dolgozik, pl.
 *     .elementor-36 .elementor-element.elementor-element-2a9f3020
 *       .elementor-nav-menu--main .elementor-item   -> specificitás (0,5,0)
 *   Ez magasabb, mint bármelyik ésszerű, olvasható szelektorunk. Ahol tehát egy
 *   Elementor-értéket szándékosan felülírunk, ott az !important teszi egyértelművé
 *   és tartóssá az override-ot (az Elementor CSS-újragenerálása sem borítja fel).
 *   Ahol viszont Elementor nem ad értéket (pl. a kártyák border-radius/box-shadow),
 *   ott !important nélkül is érvényesülünk — ezt headless Chrome-dal mértük.
 *
 * Ellenőrző parancs (a rögzített állapot, külső nézetből):
 *   bash scripts/audit/07-design-check.sh
 * (A pixelmérések headless Chrome-dal készültek – a számok a docs/14-ben, dátumozva.)
 *
 * Kapcsolódó dokumentum: docs/14-design-redesign.md
 */

/* ==========================================================================
   F5 — Fejléc és menü (minden oldal)
   A menü a Header sablonban (36) él, ezért minden oldaltípusra kihat.
   ========================================================================== */

/*
 * A menü betűtípusa „Times New Roman" volt — a weboldal többi része a téma
 * rendszer-betűkészletét használja. A menü ehhez igazodik.
 *
 * MÉRVE (headless Chrome, 1025/1280/1440 px, dev):
 *   előtte:  menüsáv 885,3 px, 1 sor, fejléc 209 px
 *   utána:   menüsáv 891,6 px, 1 sor, fejléc 209 px   -> nem törik, nem csúszik el
 * 1025 px-en a két menü-widget (891,6 + 113,4 px) még elfér egy sorban (overflowX = 0);
 * 1024 px alatt az Elementor átvált a hamburger-panelre.
 * A betűméret 16 -> 15 px és az elemek közti margó 10,5 -> 8 px együtt tartja
 * a szélességet, miközben a betűtípus korszerűbb lesz.
 */
header.elementor-location-header .elementor-nav-menu--main .elementor-item {
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.005em;
	margin-left: 8px !important;
	margin-right: 8px !important;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Az aktív menüpont jelzése: finom cián aláhúzás, ami nem tolja el a layoutot
   (inset box-shadow, nem border). Az aktív pont szövegszíne marad a márka ciánja. */
header.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	box-shadow: inset 0 -2px 0 0 #0fd6d9 !important;
}

/*
 * A legördülő / mobil menüpanel.
 * EREDETI: háttér #0FD6D9 (cián), fehér szöveg — a kontraszt így ~1,7:1, ami
 * olvashatatlan. Ezért sötétkék (#012c6d) háttér, fehér szöveggel (~12:1),
 * hover/ennek meg #155081. Mindkettő meglévő márkaszín.
 */
header.elementor-location-header .elementor-nav-menu--dropdown {
	background-color: #012c6d !important;
	border-radius: 0 0 12px 12px !important;
	box-shadow: 0 14px 26px rgba(1, 44, 109, 0.22) !important;
}

header.elementor-location-header .elementor-nav-menu--dropdown a {
	font-family: inherit !important;
	font-size: 15px !important;
}

header.elementor-location-header .elementor-nav-menu--dropdown a:hover,
header.elementor-location-header .elementor-nav-menu--dropdown a:focus {
	background-color: #155081 !important;
	color: #ffffff !important;
}

/* A hamburger-gomb: kattintható felület és láthatóság. */
header.elementor-location-header .elementor-menu-toggle {
	border-radius: 8px !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
}

/*
 * MEGTALÁLT, MEGLÉVŐ HIBA (nem ez a változtatás okozta).
 *
 * A fejlécben KÉT nav-menu widget van: a fő menü (2a9f3020, 9 elem) és egy külön,
 * egyelemű widget (aaa3ecd, a „📹 Videók" link). Ez utóbbinak az Elementorban
 * beállított színe `var(--e-global-color-7d79cd0)`, ami a kitben #012c6d.
 * A menüsáv háttere viszont #155081 -> a kontraszt 1,58:1, azaz a link
 * gyakorlatilag olvashatatlan. ÉLESEN IS ÍGY VAN (mérve a vdtablog.hu-n).
 *
 * A javítás a meglévő palettán belül marad: a link ugyanolyan fehér lesz, mint
 * a fő menü többi eleme (#155081-en 8,4:1). Az !important azért kell, mert az
 * Elementor szelektora (0,5,0) magasabb, mint az itteni (0,4,1).
 */
header.elementor-location-header .elementor-element-aaa3ecd .elementor-nav-menu--main .elementor-item {
	color: #ffffff !important;
}

/* ==========================================================================
   F4 — A főoldal finom modernizálása (csak a főoldal)
   body.elementor-page-2651 = a 2651-es oldal (a page_on_front)
   ========================================================================== */

body.elementor-page-2651 {
	--vdta-gap: 28px;
}

/* Egységes vertikális ritmus: a főoldali loop-rácsok közé egységes alsó tér.
   (A 4d3e36a rácson az Elementor 30 px-t ad, az enyémnél magasabb specificitással —
   ott marad a 30 px, ez szándékos.) */
body.elementor-page-2651 .elementor-widget-loop-grid > .elementor-widget-container {
	margin-bottom: var(--vdta-gap);
}

/* A kártyák: egységes lekerekítés, finom árnyék, hover-emelés.
   A kártya a loop-item sablon gyökere: <a class="… e-con …"> a .e-loop-item alatt.
   MÉRVE: border-radius 0 -> 12 px, box-shadow none -> rgba(1,44,109,.10) 0 6px 18px. */
body.elementor-page-2651 .e-loop-item > a.e-con {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(1, 44, 109, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.elementor-page-2651 .e-loop-item > a.e-con:hover,
body.elementor-page-2651 .e-loop-item > a.e-con:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(1, 44, 109, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	body.elementor-page-2651 .e-loop-item > a.e-con {
		transition: none;
	}

	body.elementor-page-2651 .e-loop-item > a.e-con:hover {
		transform: none;
	}
}

/* A „Földi László új könyve" banner: a lekerekítés igazodjon az 1%-os blokkhoz.
   A banner saját (widgetbe égetett) színeit és animációit NEM bántjuk. */
body.elementor-page-2651 #vdta-mini-book-banner {
	border-radius: 14px;
}