/**
 * Main stylesheet — Design tokens & alap stílusok
 *
 * Ez a fájl tartalmazza:
 * 1. CSS custom properties (design tokens)
 * 2. Reset / base stílusok
 * 3. Tipográfia
 * 4. Gomb stílusok (globális)
 * 5. Layout segédosztályok
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* -------------------------------------------------------------------
	 * Színpaletta — 8 szín, kizárólagos használat
	 * (user-specifikáció 2026-04-23; lásd DESIGN_GUIDELINES.md)
	 * ------------------------------------------------------------------- */
	--color-primary:        #0D84FC;  /* Blue  — fő CTA, linkek, primary accent */
	--color-primary-light:  #E3F0FD;  /* Light Blue — soft háttér, secondary CTA bg */
	--color-primary-dark:   #0051A3;  /* Dark Blue — primary hover, inverse gomb bg */
	--color-text:           #071430;  /* Black — headingek; egyben dark-surface háttér (footer) */
	--color-text-muted:     #64769E;  /* Gray — body szöveg, meta, leírások */
	--color-card-bg:        #FFFFFF;  /* White — kártya/panel háttér */
	--color-background:     #FFFFFF;  /* Base BG — oldal alap-háttér */
	--color-background-alt: #F7F8FA;  /* Gray Background — speciális világos szekció bg */
	--color-border:         #EEECF3;  /* Border — finom kontúrok, elválasztók */

	/* Form-validáció — paletta-bővítés (Sprint C, 2026-04-29). Csak űrlap-hibákhoz
	 * használjuk; a 8-szín-szabály alól szándékosan kivéve. */
	--color-error:          #E11D48;  /* Red  — invalid input border, hibaüzenet szöveg */
	--color-error-bg:       rgba(225, 29, 72, 0.12); /* Soft red — error toast bg, sötét felületen */

	/* Tipográfia — család */
	--font-heading: 'Satoshi', sans-serif;
	--font-body: 'Satoshi', sans-serif;

	/* Tipográfia — font-weight tokenek */
	--fw-medium: 500;
	--fw-bold:   700;
	--fw-black:  900;

	/* Tipográfia — type scale (font-size / line-height, fix értékek)
	 * Részletek: DESIGN_GUIDELINES.md "Tipográfia" szekció.
	 */
	--fs-h1: 48px; --lh-h1: 58px;  /* Black  */
	--fs-h2: 38px; --lh-h2: 48px;  /* Black  */
	--fs-h3: 26px; --lh-h3: 36px;  /* Bold   */
	--fs-h4: 24px; --lh-h4: 32px;  /* Bold   */
	--fs-h5: 22px; --lh-h5: 30px;  /* Bold   */
	--fs-h6: 20px; --lh-h6: 28px;  /* Bold   */

	--fs-body-lg: 18px; --lh-body-lg: 26px;  /* Medium — alapértelmezett body */
	--fs-body-md: 16px; --lh-body-md: 24px;  /* Medium — kártya-szöveg */
	--fs-body-sm: 14px; --lh-body-sm: 20px;  /* Medium — chip, kisebb elemek */

	--fs-tag:        12px; --lh-tag:        12px;  /* Bold */
	--fs-button-lg:  18px; --lh-button-lg:  26px;  /* Bold */

	/* Spacing — 8px alapú rendszer */
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 48px;
	--spacing-2xl: 64px;

	/* Szekció layout tokenek — Mobile (alapértelmezett) */
	--spacing-section-mobile: 64px;
	--spacing-section-tablet: 80px;
	--spacing-section-desktop: 104px;
	--container-padding-mobile: 20px;
	--container-padding-tablet: 40px;
	--container-padding-desktop: 80px;
	--container-max-width: 1200px;

	/* Radius — DESIGN_GUIDELINES.md "Border-radius rendszer" szerint */
	--radius-button: 8px;          /* CTA gombok (user design: 8px szögletesebb) */
	--radius-pill: 999px;          /* Pill-badge, pill-chip, tag (NEM gombok) */
	--radius-panel-lg: 32px;       /* Hero vizuál-panel, záró CTA háttér-panel, video card frame */
	--radius-panel: 24px;          /* Feature-kártya, szegmens-kártya, kalkulátor, GYIK */
	--radius-input: 16px;          /* Input, select, textarea */
	--radius-icon-bubble: 999px;   /* Ikon-bubble kör-alakú */
	--radius-small: 12px;          /* Mini UI preview, kis belső dekoratív elemek */

	/* Effektek */
	--shadow-glow: 0 4px 24px rgba(13, 132, 252, 0.18);
	--shadow-card: 0 1px 2px rgba(7, 20, 48, 0.04), 0 2px 12px rgba(7, 20, 48, 0.04);
	--shadow-card-hover: 0 4px 20px rgba(7, 20, 48, 0.08);

	/* Transition */
	--transition-base: 0.2s ease;
}

/* Mobil token-override: --fs-h1 csökkentése kis képernyőn.
 * Minden var(--fs-h1) hivatkozás automatikusan kapja a kisebb értéket. */
@media (max-width: 599px) {
	:root {
		--fs-h1: 32px;
		--lh-h1: 40px;
	}
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	/* Sticky header magassága + ~16px lélegzet — minden anchor-link
	   scroll-pozíciója ennyivel a viewport-tetőtől induljon. A
	   `--header-height` token a `header.css`-ben breakpoint-onként
	   definiálva (mobile 64px / tablet 72px / desktop 80px). */
	scroll-padding-top: calc(var(--header-height, 64px) + 16px);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	background-color: var(--color-background);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   3. TIPOGRÁFIA
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--font-heading);
	color: var(--color-text);
	letter-spacing: -0.01em;
}

h1, .wp-block-heading:where([class*="h1"]) {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
}

h2, .wp-block-heading:where([class*="h2"]) {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
}

h3, .wp-block-heading:where([class*="h3"]) {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-bold);
}

h4, .wp-block-heading:where([class*="h4"]) {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-bold);
}

h5, .wp-block-heading:where([class*="h5"]) {
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	font-weight: var(--fw-bold);
}

h6, .wp-block-heading:where([class*="h6"]) {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	font-weight: var(--fw-bold);
}

p {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   4. GOMBOK (globális)
   --------------------------------------------------------------------------
   Négy szín-variáns × két méret, minden variánsnál azonos padding (14×20).
   Két gomb-rendszer él párhuzamosan ugyanazon tokenekre építve:
   1. `.btn` BEM osztályok — egyedi szekciókhoz (hero, closing-cta, stb.)
   2. `.wp-block-button` — Gutenberg block output (admin-szerkesztett tartalom)

   Szín-variánsok:
     - .btn--primary  → kék bg, fehér text   | hover: brand-dark bg
     - .btn--inverse  → brand-dark bg, fehér | hover: fehér bg, primary text
     - .btn--soft     → primary-light bg, primary text | hover: border bg
     - (alapértelmezett Gutenberg primary = .btn--primary megfelelője)
     - (Gutenberg outline = .btn--soft megfelelője)

   Méret-modifier:
     - alap: 18px / 26px line-height
     - .btn--sm: 16px / 24px line-height
   ========================================================================== */

.btn,
.site-main .wp-block-button__link.wp-element-button,
.site-main .wp-block-button__link {
	padding: 14px 20px;
	font-family: var(--font-body);
	font-size: var(--fs-button-lg);
	line-height: var(--lh-button-lg);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-button);
	transition: color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
	isolation: isolate; /* stacking context: a ::before z-index: -1 a szöveg mögé kerül */
}

/* Kör-sweep hover overlay — bal alsó sarokból jobb felső felé terjed */
.btn::before,
.site-main .wp-block-button__link::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	/* 250%: elég nagy, hogy a bal alsó sarokból az egész gombot lefedje,
	 * beleértve a jobb felső sarkot (átló = √(w² + h²) ≤ ~206% × w) */
	width: 250%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #071430;
	/* translate(-50%, 50%) a kör közepét pontosan a bal alsó sarokba pozicionálja */
	transform: translate(-50%, 50%) scale(0);
	transform-origin: 50% 50%;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: -1;
}

.btn:hover::before,
.site-main .wp-block-button__link:hover::before {
	transform: translate(-50%, 50%) scale(1);
}

/* Size modifier — Small (Body-Medium méret) */
.btn--sm {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
}

/* Size modifier — Compact (16px szöveg, 10/18 padding — a DS kisebb gomb-mérete) */
.btn--compact {
	padding: 10px 18px;
	font-size: 16px;
	line-height: 1.25;
}

/* ---------- Primary (Blue) ---------- */
.btn--primary,
.site-main .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary);
}

.btn--primary:hover,
.site-main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	color: #ffffff;
	border-color: #071430;
}

/* ---------- Inverse (White — dark blue alap, fehér szöveg) ---------- */
.btn--inverse {
	background-color: var(--color-primary-dark);
	color: #ffffff;
	border-color: var(--color-primary-dark);
}

.btn--inverse:hover {
	color: #ffffff;
	border-color: #071430;
}

/* ---------- Soft (Light blue) ---------- */
.btn--soft,
.site-main .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	border-color: var(--color-primary-light);
}

.btn--soft:hover,
.site-main .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: #ffffff;
	border-color: #071430;
}

/* ---------- Focus-visible (akadálymentes fókusz-állapot) ---------- */
.btn:focus-visible,
.site-main .wp-block-button__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* ---------- Active ---------- */
.btn:active,
.site-main .wp-block-button__link:active {
	transform: scale(0.98);
}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.site-main {
	min-height: 100vh;
}

/* ==========================================================================
   6. KÖZÖS KOMPONENS UTILITY-K
   --------------------------------------------------------------------------
   Pattern reusable szinten (DESIGN_GUIDELINES.md „Ikon-bubble anatómia" +
   „Pill-chip" szekciók). Block-CSS fájlok csak layout-kontextust adnak hozzá,
   a komponens alap-stílusa innen jön.
   ========================================================================== */

/* ---------- Eyebrow / Section label (Tag token) ---------- */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--fs-tag);
	line-height: var(--lh-tag);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.eyebrow i {
	font-size: 0.9em;
}

/* ---------- Ikon-bubble (feature-ikon kártyák tetején, DESIGN_GUIDELINES.md anatómia) ---------- */

.icon-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-icon-bubble);
	background-color: var(--color-primary-light);
	color: var(--color-primary);
	flex-shrink: 0;
}

.icon-bubble i {
	font-size: 20px;
	line-height: 1;
}

.icon-bubble--sm {
	width: 40px;
	height: 40px;
}

.icon-bubble--sm i {
	font-size: 18px;
}

.icon-bubble--lg {
	width: 64px;
	height: 64px;
	border-radius: 20px;
}

.icon-bubble--lg i {
	font-size: 26px;
}

/* ---------- Mini UI preview (Hogyan működik szekció — monospace key-value blokk) ---------- */

.mini-ui-preview {
	background-color: var(--color-primary-light);
	border-radius: var(--radius-small);
	padding: 16px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mini-ui-preview__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.mini-ui-preview__key {
	color: var(--color-text-muted);
	min-width: 7em;
	flex-shrink: 0;
}

.mini-ui-preview__val {
	color: var(--color-text);
	font-weight: var(--fw-bold);
}

/* ---------- Section "Bővebben" link (középre igazított text-link szekciók alján) ---------- */

.section-more-link {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.section-more-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-base), gap var(--transition-base);
}

.section-more-link a:hover,
.section-more-link a:focus-visible {
	color: var(--color-primary-dark);
	gap: 12px;
}

.section-more-link a i {
	font-size: 14px;
	color: inherit;
}

/* Sötét háttéren (.section--dark) — link fehér, hover halványkék */
.section--dark .section-more-link a {
	color: #ffffff;
}

.section--dark .section-more-link a:hover,
.section--dark .section-more-link a:focus-visible {
	color: var(--color-primary-light);
}

/* ---------- Csomag-pill (Funkciók aloldal — Basic / Standard / Premium) ---------- */

.package-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.package-pill--basic {
	background-color: var(--color-background-alt);
	color: var(--color-text);
}

.package-pill--standard {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

.package-pill--premium {
	background-color: var(--color-text);
	color: #ffffff;
}

/* ---------- Coming soon pill (Funkciók aloldal — Q3 / Q4 2026 roadmap) ---------- */

.coming-soon-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background-color: rgba(15, 23, 42, 0.04);
	border: 1px dashed var(--color-border);
	color: var(--color-text-muted);
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
}

.coming-soon-pill i {
	font-size: 11px;
	color: inherit;
}

/* ---------- Pill-chip (szegmens-badge, social proof, iparág-jelölő) ---------- */

.pill-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary-light);
	color: var(--color-text);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	border: 1px solid transparent;
	white-space: nowrap;
}

.pill-chip i {
	font-size: 14px;
	color: var(--color-primary);
	flex-shrink: 0;
}

/* ==========================================================================
   7. SZEKCIÓ VARIÁNSOK — színséma felülírások
   --------------------------------------------------------------------------
   A sötét / kék hátterű szekciók közös színséma-felülírása. A szekció-CSS
   fájlok a layoutot kezelik; a tipográfia + feature-kontextus szín-inverze
   innen jön, hogy ne duplikáljuk minden block-CSS-ben.

   Részletek: SECTION_COMPOSITIONS.md 11. fejezet.
   ========================================================================== */

.section--dark {
	background-color: var(--color-text);
	color: rgba(255, 255, 255, 0.85);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark .wp-block-heading {
	color: #ffffff;
}

.section--dark p {
	color: rgba(255, 255, 255, 0.85);
}

/* Eyebrow / section label — üveg-pill sötét háttéren */
.section--dark .eyebrow,
.section--dark .section-label {
	background-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

/* Pill-chip sötét szekcióban — üveg-érzet */
.section--dark .pill-chip {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

/* Ikon-bubble sötét szekcióban — a primary-light helyett transzparens fehér */
.section--dark .icon-bubble {
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/* Elválasztó / border sötét szekcióban */
.section--dark hr,
.section--dark .section-divider {
	border-color: rgba(255, 255, 255, 0.12);
}

/* Gomb hover sötét szekcióban — fehér kör + #0D84FC szöveg.
 * A sötét alap (#071430) = hover kör (#071430) lenne láthatatlan,
 * ezért a ::before fehér, a hover text primary-kék. */
.section--dark .btn::before {
	background: #ffffff;
}

.section--dark .btn:hover {
	color: #0D84FC;
	border-color: #ffffff;
}

/* ---------- .section--brand (primary-kék háttér: 14. Záró CTA) ---------- */

.section--brand {
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.9);
}

.section--brand h1,
.section--brand h2,
.section--brand h3,
.section--brand h4,
.section--brand h5,
.section--brand h6,
.section--brand .wp-block-heading {
	color: #ffffff;
}

.section--brand p {
	color: rgba(255, 255, 255, 0.9);
}

.section--brand .eyebrow,
.section--brand .section-label {
	background-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.95);
}