/* ==========================================================================
   FlintSign – Alapstílusok: reset, tipográfia, layout, szekciók
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
/* Biztonsági háló: semmi ne tudja oldalra görgethetővé tenni az oldalt (clip: a sticky fejlécet nem rontja el) */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* --- Fókusz: mindig látható billentyűzetes navigációnál ----------------- */
:focus-visible {
  outline: 2px solid var(--c-blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}
.is-dark :focus-visible { outline-color: var(--c-orange-500); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 2000;
  background: var(--c-navy-800); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill); font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--sp-4); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Tipográfia --------------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.t-h1, h1  { font-size: var(--fs-h1); line-height: 1.12; }
.t-h2, h2  { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.t-h3, h3  { font-size: var(--fs-h3); line-height: 1.22; }
.t-h4, h4  { font-size: var(--fs-h4); line-height: var(--lh-title); }
.t-h5      { font-size: var(--fs-h5); line-height: var(--lh-title); }

.t-lead  { font-size: var(--fs-lead); line-height: 1.55; }
.t-body  { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-xs    { font-size: var(--fs-xs); line-height: 1.45; }
.t-strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.t-price {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-price); line-height: 1.1; color: var(--text-strong);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-orange-500);
}

/* Formázott szövegblokk (WYSIWYG mezők kimenete) */
.prose { color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.prose a { color: var(--c-blue-500); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-navy-800); }
/* Automatikus szakkifejezés-link (KEAESZ, EUTL, eIDAS – inc/autolinks.php): prózán kívül a szöveg színét örökli. */
.fs-autolink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.fs-autolink:hover { text-decoration-thickness: 2px; }
.is-dark .fs-autolink, .is-dark .prose a.fs-autolink { color: inherit; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose ul li::marker { color: var(--c-orange-500); }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--l  { max-width: var(--container-l); }
.container--m  { max-width: var(--container-m); }
.container--s  { max-width: var(--container-s); }
.container--xs { max-width: var(--container-xs); }

.stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); }

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.grid--2 { --cols: 2; --cols-t: 2; }
.grid--3 { --cols: 3; --cols-t: 2; }
.grid--4 { --cols: 4; --cols-t: 2; }
.grid--5 { --cols: 5; --cols-t: 2; }
/* Hiányos utolsó sor középre (pl. 3+2 kártya a „Miért” szekcióban) */
.grid--center { display: flex; flex-wrap: wrap; justify-content: center; }
.grid--center > * { flex: 1 1 100%; }
@media (min-width: 700px)  { .grid--center > * { flex: 0 1 calc((100% - var(--grid-gap)) / 2); } }
@media (min-width: 1100px) { .grid--center > * { flex: 0 1 calc((100% - (var(--cols, 3) - 1) * var(--grid-gap)) / var(--cols, 3)); } }

/* --- Szekciók ----------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-py);
  isolation: isolate;
}
.section--pt-s { padding-top: var(--section-py-s); }
.section--pb-s { padding-bottom: var(--section-py-s); }
.section--pt-l { padding-top: var(--section-py-l); }
.section--pb-l { padding-bottom: var(--section-py-l); }
.section--pt-0 { padding-top: 0; }
.section--pb-0 { padding-bottom: 0; }

/* Háttérvariánsok – a szekcióbeállítások „Háttér” mezője */
.bg-white { background: var(--c-white); }
.bg-soft  { background: var(--c-bg-soft); }
.bg-navy  { background: var(--c-navy-800); }
.bg-hero  {
  background: var(--c-navy-900) url("../img/bg-hero.png") center center / cover no-repeat;
}
.bg-photo { background: var(--c-navy-900); }
.bg-photo > .section__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.bg-photo > .section__bg img { width: 100%; height: 100%; object-fit: cover; }
.bg-photo > .section__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,33,74,0.86), rgba(26,33,74,0.92));
}

/* Sötét felületen minden szöveg átvált */
.is-dark { color: var(--text-on-dark-body); }
.is-dark :is(h1, h2, h3, h4, .t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-price, .t-strong) { color: var(--text-on-dark); }

/* Szekciófej: eyebrow + cím + bevezető */
.section-head {
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-width: 1200px;
  margin-bottom: var(--head-gap);
}
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-head .t-lead, .section-head p { max-width: 860px; }
.section-head__lead { margin-top: calc(var(--sp-2) * -1); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); font-weight: var(--fw-medium); line-height: 1.4; color: var(--c-navy-600); }
.is-dark .section-head__lead { color: rgba(255,255,255,0.85); }
.section-head__logo { width: 150px; margin-bottom: var(--sp-2); }

/* Lábléc a szekció alján (gomb, megjegyzés) */
.section-foot { margin-top: var(--head-gap); display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
/* Hosszú gombfelirat keskeny hasábban (pl. nagyított nézet): inkább két sor, mint kilógás */
.section-foot .btn { max-width: 100%; white-space: normal; line-height: 1.25; padding-block: 10px; }
.section-note { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-small); color: var(--text-body); }

/* Láthatóság (szekcióbeállítás) */
@media (max-width: 1099px) { .hide-mobile { display: none !important; } }
@media (min-width: 1100px) { .hide-desktop { display: none !important; } }