/* ==========================================================================
   site.css — the one stylesheet of every page (plan §8.3), in the order of the
   Astro bundle (BaseLayout.*.css):
   1. Montserrat @font-face (Fontsource, latin-ext + latin, self-hosted)
   2. client/src/styles/global.css, verbatim
   3. the styles of the shared components (Header, Footer, ConsentDisclosure,
      ContactSection, CookieConsent, PageHero) as plain CSS
   Page styles live in css/pages/{slug}.css, linked from the page after this
   file. The font url()s are not fingerprinted: the Lato preloads in App.razor
   use exactly the same /fonts/ URLs.
   ========================================================================== */

/* Montserrat 300/500/600 normal: latin-ext + latin subsets, woff2 only (plan §8.5 step 3).
   The @font-face rules are copied from @fontsource/montserrat 5.3.0 (300.css, 500.css, 600.css) in their
   original order; only src is rewritten to the self-hosted /fonts/ URLs. The cyrillic, cyrillic-ext and vietnamese
   subsets and the woff fallbacks that Astro also bundled are intentionally not shipped. */

/* montserrat-latin-ext-300-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/fonts/montserrat-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-300-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/fonts/montserrat-latin-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* montserrat-latin-ext-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/montserrat-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* montserrat-latin-ext-600-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-600-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   client/src/styles/global.css (verbatim)
   ========================================================================== */

/* ==========================================================================
   BITOTRON – design tokenek és alapstílusok
   Színek: a régi oldal türkize (#1ABC9C) és sötét tónusa, hűvösebb, mélyebb
   "tinta" árnyalatra hangolva. Betűk: Montserrat (címek, könnyű vágat) és
   Lato (szöveg) – a márka eddigi karaktere, saját tárhelyről kiszolgálva.
   ========================================================================== */

/* Lato 2.0 (LatoLatin) – a régi oldalról átvett, teljes magyar karakterkészletű
   betűfájlok (ő/ű is). A Google Fonts / Fontsource Lato ezeket a betűket nem
   tartalmazza, ezért nem azt használjuk. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/LatoLatin-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/LatoLatin-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/LatoLatin-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/LatoLatin-BoldItalic.woff2') format('woff2');
}

:root {
  /* --- Szín --- */
  --c-turq: #1abc9c;
  --c-turq-600: #15a88b;
  --c-turq-700: #10715e; /* szöveg világos háttéren (WCAG AA) */
  --c-turq-100: #ddf5ef;
  --c-turq-050: #eef9f6;
  --c-ink: #16212b;
  --c-ink-2: #1f2d3a;
  --c-ink-3: #2b3b4a;
  --c-ink-line: rgba(255, 255, 255, 0.12);
  --c-text: #1c262e;
  --c-text-2: #55656f;
  --c-text-3: #7c8a93;
  --c-line: #dce4e7;
  --c-paper: #ffffff;
  --c-mist: #f3f7f6;
  --c-amber: #ffcd78;
  --c-error: #d71a38;
  --c-on-dark: #f4f7f8;
  --c-on-dark-2: rgba(244, 247, 248, 0.72);

  /* --- Tipográfia --- */
  --ff-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Lato', 'Segoe UI', system-ui, sans-serif;
  --fs-0: 0.8125rem;
  --fs-1: 1rem;
  --fs-2: 1.1875rem;
  --fs-3: 1.375rem;
  --fs-4: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --fs-5: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
  --fs-6: clamp(2.1rem, 1.5rem + 3.2vw, 3.9rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* --- Ritmus --- */
  --container: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --shadow-1: 0 1px 2px rgba(22, 33, 43, 0.06), 0 12px 32px -16px rgba(22, 33, 43, 0.22);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 4.5rem;
}

/* --- Alaphelyzet --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.nav-open,
html.nav-open body {
  overflow: hidden;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  color: inherit;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Címsorokat nem választunk el automatikusan (a böngészők 2 betűs töredékeket is
   hagynak); csak a legkeskenyebb kijelzőn, ahol egy hosszú összetett szó
   („szoftverfejlesztés”) másképp nem férne el. */
h1,
h2,
h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
}

@media (max-width: 22em) {
  h1 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

h1 {
  font-size: var(--fs-6);
}

h2 {
  font-size: var(--fs-5);
}

h3 {
  font-size: var(--fs-4);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--ff-body);
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--lh-snug);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--c-turq-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--c-turq-600);
}

ul,
ol {
  padding-left: 1.25rem;
}

strong {
  font-weight: 700;
}

small {
  font-size: var(--fs-0);
}

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--space-7) 0;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-turq);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-turq);
  color: var(--c-ink);
}

/* --- Elrendezés --- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow {
  --container: 52rem;
}

.container--wide {
  --container: 84rem;
}

.section {
  padding-block: var(--section);
}

.section--tight {
  padding-block: calc(var(--section) * 0.6);
}

.section--flush-top {
  padding-top: 0;
}

.section--mist {
  background: var(--c-mist);
}

.section--ink {
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.section--ink a:not(.btn) {
  color: var(--c-turq);
}

.section--ink a:not(.btn):hover {
  color: #fff;
}

.section--ink .muted,
.section--ink .lead {
  color: var(--c-on-dark-2);
}

.bg-grid {
  background-color: var(--c-ink);
  background-image: radial-gradient(rgba(26, 188, 156, 0.16) 1px, transparent 1.2px);
  background-size: 28px 28px;
}

/* A Lato „0” karaktere széles, ezért a ch-értékek szűkebbek a megszokottnál:
   60ch ≈ 80 karakter soronként. */
.measure {
  max-width: 60ch;
}

.measure--narrow {
  max-width: 50ch;
}

.section-head .lead {
  max-width: 58ch;
}

.lead {
  font-size: var(--fs-2);
  line-height: 1.55;
  color: var(--c-text-2);
}

.muted {
  color: var(--c-text-2);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48em) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 60em) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .split--text-wide {
    grid-template-columns: 3fr 2fr;
  }

  .split--media-wide {
    grid-template-columns: 2fr 3fr;
  }

  .split--reverse > :first-child {
    order: 2;
  }

  .split--top {
    align-items: start;
  }
}

.stack > * + * {
  margin-top: var(--space-5);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--c-turq);
  color: var(--c-ink);
  font-weight: 700;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* --- Szakaszcímek --- */
.section-title {
  margin-bottom: var(--space-5);
}

.section-title::after {
  content: '';
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-top: 1rem;
  border-radius: 1px;
  background: var(--c-turq);
}

.section-title--center {
  text-align: center;
}

.section-title--center::after {
  margin-inline: auto;
}

.section-head {
  margin-bottom: var(--space-7);
}

.section-head--center {
  text-align: center;
}

.section-head--center .lead {
  margin-inline: auto;
}

/* --- Gombok --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font: 700 var(--fs-1) / 1 var(--ff-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.btn--primary {
  background: var(--c-turq);
  border-color: var(--c-turq);
  color: var(--c-ink);
}

.btn--primary:hover {
  background: var(--c-turq-600);
  border-color: var(--c-turq-600);
  color: var(--c-ink);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn--ghost:hover {
  background: rgba(26, 188, 156, 0.14);
  color: inherit;
}

.btn--link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-turq-700);
}

.btn--link:hover {
  color: var(--c-turq-600);
}

.btn--link .icon {
  transition: transform 0.2s var(--ease);
}

.btn--link:hover .icon {
  transform: translateX(3px);
}

.section--ink .btn--link {
  color: var(--c-turq);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: var(--fs-2);
}

/* --- Ikonok --- */
.icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/* --- Listák --- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.checklist li {
  position: relative;
  padding-left: 1.85rem;
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--c-turq-100);
}

.checklist li::after {
  content: '';
  position: absolute;
  left: 0.33rem;
  top: 0.55em;
  width: 0.45rem;
  height: 0.24rem;
  border-left: 2px solid var(--c-turq-700);
  border-bottom: 2px solid var(--c-turq-700);
  transform: rotate(-45deg);
}

.section--ink .checklist li::before {
  background: rgba(26, 188, 156, 0.18);
}

.section--ink .checklist li::after {
  border-color: var(--c-turq);
}

.checklist--cols {
  gap: 0.65rem 2rem;
}

@media (min-width: 48em) {
  .checklist--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Csempék hajszálvonalas ráccsal (nem lebegő kártyák) --- */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.tiles > * {
  background: var(--c-paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
}

.section--mist .tiles > * {
  background: var(--c-paper);
}

.section--ink .tiles {
  background: var(--c-ink-line);
  border-color: var(--c-ink-line);
}

.section--ink .tiles > * {
  background: var(--c-ink);
}

@media (min-width: 40em) {
  .tiles--2,
  .tiles--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .tiles--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tiles--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Any number of tiles without an empty cell in the last row (PKG-MFSEBC): 2 columns from 40em, an odd last tile
   takes the whole row; 3 columns from 64em on a 6-column grid, a last row of two tiles splits it in halves and a
   single last tile takes it whole. */
@media (min-width: 40em) {
  .tiles--fill {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiles--fill > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .tiles--fill {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tiles--fill > * {
    grid-column: span 2;
  }

  .tiles--fill > :last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .tiles--fill > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .tiles--fill > :last-child:nth-child(3n + 2),
  .tiles--fill > :nth-last-child(2):nth-child(3n + 1) {
    grid-column: span 3;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tile__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--c-turq-700);
}

.section--ink .tile__icon {
  color: var(--c-turq);
}

.tile h3 {
  font-size: var(--fs-3);
  margin: 0;
}

.tile p {
  color: var(--c-text-2);
  margin: 0;
}

.section--ink .tile p {
  color: var(--c-on-dark-2);
}

.tile > .btn--link {
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--space-2);
}

a.tile {
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease);
}

a.tile:hover {
  background: var(--c-turq-050);
}

/* A rács overflow:hidden levágná a külső körvonalat – befelé rajzoljuk. */
a.tile:focus-visible {
  outline-offset: -3px;
  border-radius: 0;
}

.section--ink a.tile:hover {
  background: var(--c-ink-2);
}

/* --- Képkeretek --- */
.frame {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--c-mist);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--ink {
  background: var(--c-ink-2);
}

.frame--contain img {
  object-fit: contain;
}

.frame--photo {
  box-shadow: var(--shadow-1);
}

/* Fehér hátterű illusztrációkhoz: nincs saját háttér és sarok, a képet a szakasz háttere fogadja. */
.frame--flat {
  background: transparent;
  border-radius: 0;
}

/* --- Kiemelt számok --- */
.stat__value {
  font: 300 clamp(2.6rem, 2rem + 3vw, 4.2rem) / 1 var(--ff-display);
  letter-spacing: -0.02em;
  color: var(--c-turq);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: var(--space-2);
  color: var(--c-text-2);
}

.section--ink .stat__label {
  color: var(--c-on-dark-2);
}

/* --- Űrlapok --- */
.form {
  display: grid;
  gap: var(--space-4);
}

.form__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40em) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field > label {
  font-size: var(--fs-0);
  font-weight: 700;
  color: var(--c-text-2);
}

.input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-s);
  background: var(--c-paper);
  font: inherit;
  color: var(--c-text);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.input::placeholder {
  color: var(--c-text-3);
}

.input:focus {
  outline: none;
  border-color: var(--c-turq);
  box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.22);
}

.input[aria-invalid='true'] {
  border-color: var(--c-error);
}

textarea.input {
  min-height: 9.5rem;
  resize: vertical;
}

.field__error {
  font-size: var(--fs-0);
  color: var(--c-error);
  min-height: 1.2em;
}

.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-0);
  color: var(--c-text-2);
  line-height: 1.5;
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  flex: none;
  accent-color: var(--c-turq-700);
}

.form-msg {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-s);
  font-size: var(--fs-0);
  line-height: 1.5;
}

.form-msg--ok {
  background: var(--c-turq-100);
  color: var(--c-turq-700);
}

.form-msg--err {
  background: #fde8eb;
  color: #9b1327;
}

.form-msg--info {
  background: #fff4de;
  color: #6b4a00;
}

.hp-field {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Lenyíló részletek (jogi szövegek) --- */
.disclosure {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.disclosure + .disclosure {
  border-top: 0;
}

.disclosure summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 0;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--c-turq-700);
  border-bottom: 2px solid var(--c-turq-700);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
  flex: none;
}

.disclosure[open] summary::after {
  transform: rotate(-135deg);
}

.disclosure > :not(summary) {
  padding-bottom: 1rem;
}

/* --- Hosszú szövegek (adatkezelés, pályázatok) --- */
.prose {
  max-width: 64ch;
}

.prose h2 {
  font-size: var(--fs-4);
  font-weight: 500;
  margin-top: 2.75rem;
}

.prose h3 {
  font-size: var(--fs-3);
  margin-top: 2rem;
}

.prose h4 {
  font-size: var(--fs-1);
  margin-top: 1.5rem;
}

.prose p,
.prose li {
  color: var(--c-text);
}

.prose ul,
.prose ol {
  margin: 0 0 1.25em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose a {
  overflow-wrap: anywhere;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-0);
  margin: 1.5rem 0;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--c-line);
}

.prose th {
  font-weight: 700;
  color: var(--c-text-2);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Definíciós lista (adatlap) --- */
.datalist {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

@media (min-width: 40em) {
  .datalist {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

.datalist dt {
  font-weight: 700;
  color: var(--c-text-2);
}

.datalist dd {
  margin: 0;
}

/* Egy oszlopban a címke–érték párok maradjanak együtt, a párok között legyen levegő. */
@media (max-width: 39.99em) {
  .datalist {
    row-gap: 0.15rem;
  }

  .datalist dd + dt {
    margin-top: var(--space-4);
  }
}

/* --- Kicsi címkék (mondatkezdő nagybetű, nem verzál) --- */
.kicker {
  display: block;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-0);
  color: var(--c-turq-700);
  margin-bottom: 0.6rem;
}

.section--ink .kicker {
  color: var(--c-turq);
}

/* --- Mozgás visszafogása --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Nyomtatás --- */
@media print {
  .site-header,
  .site-footer,
  .consent,
  .skip-link {
    display: none !important;
  }

  body {
    color: #000;
  }

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

/* ==========================================================================
   Shared components — the scoped <style> blocks of the Astro components as
   plain CSS, in the order of the Astro bundle (Header, Footer,
   ConsentDisclosure, ContactSection, CookieConsent; PageHero was inlined into
   the pages after it). Every selector starts with the root class of its
   component; Astro :global(x) became x. The Astro scoping added an attribute
   to every compound selector, the root-class prefix adds one class: the only
   place where that changed the winner is marked (Footer, logo link).
   SectionHeading, Logo and Icon have no own styles (.icon is above).
   ========================================================================== */

/* --- Header (components/Header.astro) --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(22, 33, 43, 0.94);
  color: var(--c-on-dark);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(22, 33, 43, 0.82);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-ink-line);
}

.site-header .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
}

.site-header .site-header__brand {
  display: inline-flex;
  color: #fff;
  flex: none;
}

.site-header .site-header__logo {
  /* Larger than the Astro original, but only via height: the viewBox keeps the aspect ratio, so it
     is not stretched; --header-h (4.5rem) leaves margin above and below, and space-between keeps the
     nav flush right, so the wider logo does not shift the other header items. */
  height: 2.75rem;
  width: auto;
}

.site-header .site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-header .site-header__icon--close,
.site-header.is-open .site-header__icon--open {
  display: none;
}

.site-header.is-open .site-header__icon--close {
  display: block;
}

.site-header .site-nav {
  display: none;
}

.site-header .site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.site-header .site-nav__list a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--c-on-dark-2);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.site-header .site-nav__list a:hover,
.site-header .site-nav__list a[aria-current='page'] {
  color: #fff;
  border-bottom-color: var(--c-turq);
}

/* "Termékek" dropdown (PKG-DCBC7D): a native <details>; the summary looks like the other menu items. */
.site-header .site-nav__group {
  position: relative;
}

.site-header .site-nav__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0;
  color: var(--c-on-dark-2);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.site-header .site-nav__summary::-webkit-details-marker {
  display: none;
}

.site-header .site-nav__summary:hover,
.site-header .site-nav__dropdown[open] > .site-nav__summary {
  color: #fff;
  border-bottom-color: var(--c-turq);
}

.site-header .site-nav__chevron {
  flex: none;
  transition: transform 0.2s var(--ease);
}

.site-header .site-nav__dropdown[open] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-header .site-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .site-nav__aside {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header .site-nav__cta {
  padding: 0.65rem 1.1rem;
  font-size: 0.9375rem;
}

.site-header .site-nav__social {
  display: inline-flex;
  color: var(--c-on-dark-2);
}

.site-header .site-nav__social:hover {
  color: var(--c-turq);
}

.site-header .site-nav__contact {
  display: none;
}

/* Mobil és tablet: teljes képernyős panel a fejléc alatt */
@media (max-width: 67.99em) {
  /* A backdrop-filter makes the header the containing block of its fixed descendants: the panel would be
     laid out inside the 72px header (an 80px strip with one visible link; an inherited Astro bug). With
     the menu open the header is solid ink anyway. */
  .site-header.is-open {
    backdrop-filter: none;
    background: var(--c-ink);
  }

  .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
    position: fixed;
    inset: var(--header-h) 0 0 0;
    padding: var(--space-6) var(--gutter) var(--space-7);
    background: var(--c-ink);
    overflow-y: auto;
  }

  .site-header.is-open .site-nav__list {
    flex-direction: column;
    gap: 0;
  }

  .site-header.is-open .site-nav__list a {
    display: block;
    padding: 0.9rem 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--c-ink-line);
  }

  .site-header.is-open .site-nav__list a[aria-current='page'] {
    color: var(--c-turq);
  }

  .site-header.is-open .site-nav__summary {
    display: flex;
    justify-content: space-between;
    padding: 0.9rem 0;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--c-ink-line);
  }

  .site-header.is-open .site-nav__dropdown[open] > .site-nav__summary {
    color: var(--c-turq);
  }

  .site-header.is-open .site-nav__chevron {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* The children sit indented under the group, one size smaller; the long product names wrap. */
  .site-header.is-open .site-nav__submenu {
    padding: var(--space-2) 0 var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--c-ink-line);
  }

  .site-header.is-open .site-nav__submenu a {
    padding: 0.6rem 0;
    font-size: var(--fs-2);
    white-space: normal;
    border-bottom: 0;
  }

  .site-header.is-open .site-nav__aside {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  .site-header.is-open .site-nav__cta {
    padding: 1rem;
    font-size: var(--fs-2);
  }

  .site-header.is-open .site-nav__social {
    display: none;
  }

  .site-header.is-open .site-nav__contact {
    display: grid;
    gap: 0.75rem;
  }

  .site-header .site-nav__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--c-on-dark-2);
    text-decoration: none;
  }
}

@media (min-width: 68em) {
  .site-header .site-header__toggle {
    display: none;
  }

  .site-header .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    flex: 1;
    justify-content: flex-end;
  }

  /* The dropdown panel hangs below the menu bar, left-aligned with its label. */
  .site-header .site-nav__submenu {
    position: absolute;
    top: calc(100% + 1.1rem);
    left: -1rem;
    min-width: 17rem;
    padding: var(--space-2);
    background: var(--c-ink);
    border: 1px solid var(--c-ink-line);
    border-radius: var(--radius-m);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  }

  .site-header .site-nav__submenu a {
    display: block;
    padding: 0.7rem 0.85rem;
    border-bottom: 0;
    border-radius: var(--radius-s);
  }

  .site-header .site-nav__submenu a:hover {
    color: #fff;
    background: var(--c-ink-3);
  }
}

/* Desktop menu with two dropdowns (PKG-MFSEBC): with "Iparág" the menu bar is wider than the 72rem container, so the
   menu items sit closer at every desktop width, and between 68em and 80em the logo and the menu font get one step
   smaller too. */
@media (min-width: 68em) {
  .site-header .site-nav {
    gap: 1.25rem;
  }

  .site-header .site-nav__list {
    gap: 0.9rem;
  }
}

@media (min-width: 68em) and (max-width: 79.99em) {
  .site-header .site-header__inner {
    gap: var(--space-4);
  }

  .site-header .site-header__logo {
    height: 2.25rem;
  }

  .site-header .site-nav__list a,
  .site-header .site-nav__summary {
    font-size: 0.875rem;
  }

  .site-header .site-nav__aside {
    gap: var(--space-3);
  }

  .site-header .site-nav__cta {
    padding-inline: 0.85rem;
  }
}

/* --- Footer (components/Footer.astro) --- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-on-dark-2);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-top: 2px solid var(--c-turq);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--c-on-dark-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .site-footer__grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
}

@media (min-width: 40em) {
  .site-footer .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .site-footer .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}

/* In Astro `.site-footer a` outranked this rule (0,2,1 vs 0,2,0), so its color never applied: the logo shows the
   link color and turns white on hover only. :where() keeps it below `.site-footer a` here too. */
.site-footer :where(.site-footer__logo-link) {
  display: inline-flex;
  color: #fff;
}

.site-footer .site-footer__logo {
  height: 2.1rem;
  width: auto;
}

.site-footer .site-footer__tagline {
  margin: 0.9rem 0 0.75rem;
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-turq);
}

.site-footer .site-footer__intro {
  max-width: 34ch;
}

.site-footer .site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-4);
  font-weight: 700;
}

.site-footer .site-footer__heading {
  font-family: var(--ff-body);
  font-size: var(--fs-1);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-4);
  letter-spacing: 0;
}

.site-footer .site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.site-footer .site-footer__contact {
  display: grid;
  gap: 0.7rem;
}

.site-footer .site-footer__contact a {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.site-footer .site-footer__contact .icon {
  color: var(--c-turq);
  margin-top: 0.15rem;
}

.site-footer .site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-ink-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  font-size: var(--fs-0);
}

.site-footer .site-footer__bottom p {
  margin: 0;
}

.site-footer .site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.site-footer .site-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer .site-footer__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-on-dark-2);
  cursor: pointer;
  font-size: inherit;
}

.site-footer .site-footer__linkbtn:hover {
  color: #fff;
}

/* --- ConsentDisclosure (components/ConsentDisclosure.astro) --- */
.consent-text {
  margin-top: 0.5rem;
  font-size: var(--fs-0);
  color: var(--c-text-2);
}

.consent-text summary {
  font-weight: 400;
  color: var(--c-turq-700);
  padding: 0.6rem 0;
}

.consent-text .consent-text__body p {
  margin-bottom: 0.75em;
  line-height: 1.5;
}

/* --- ContactSection (components/ContactSection.astro) --- */
.contact .contact__grid {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 60em) {
  .contact .contact__grid {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 6rem);
    align-items: start;
  }
}

.contact .contact__details {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.contact .contact__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: var(--c-text);
  text-decoration: none;
}

.contact .contact__item:hover {
  color: var(--c-turq-700);
}

.contact .contact__item .icon {
  color: var(--c-turq-700);
  margin-top: 0.1rem;
}

.contact .contact__label {
  display: block;
  font-size: var(--fs-0);
  color: var(--c-text-2);
}

.contact .contact__hint {
  display: block;
  font-size: var(--fs-0);
  color: var(--c-text-2);
}

.contact .contact__form {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.contact .contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.contact .contact__note {
  margin: 0;
  font-size: var(--fs-0);
  color: var(--c-text-2);
}

/* --- RecaptchaField (bot protection of the contact and the job application form, PKG-X6PF24) --- */
.recaptcha .recaptcha__widget {
  min-height: 78px;
}

.recaptcha .recaptcha__notice,
.recaptcha .recaptcha__noscript {
  margin: 0;
  font-size: var(--fs-0);
  line-height: 1.5;
  color: var(--c-text-2);
}

.recaptcha .recaptcha__noscript {
  color: var(--c-error);
}

/* The floating v3 badge would cover the cookie banner and the page corner; Google allows hiding it when
   the form shows the reCAPTCHA notice instead (.recaptcha__notice). */
.grecaptcha-badge {
  visibility: hidden;
}

/* --- CookieConsent (components/CookieConsent.astro) --- */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  padding: var(--gutter);
  pointer-events: none;
}

.consent .consent__box {
  pointer-events: auto;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  background: var(--c-ink);
  color: var(--c-on-dark);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-m);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

@media (min-width: 60em) {
  .consent .consent__box {
    margin-inline: 0 auto;
    margin-left: 0;
  }
}

.consent .consent__title {
  font-family: var(--ff-body);
  font-size: var(--fs-1);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.consent .consent__text {
  font-size: var(--fs-0);
  color: var(--c-on-dark-2);
  margin: 0 0 1rem;
}

.consent .consent__text a {
  color: var(--c-turq);
}

.consent .consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.consent .consent__actions .btn {
  padding: 0.7rem 1rem;
  font-size: var(--fs-0);
}

/* --- PageHero (components/PageHero.astro) ---
   Every subpage head has the same height and layout (PKG-BSKQ4C): one padding for all, and the inner grid gets a
   minimum height that fits the longest menu page at each breakpoint, with the content centred vertically. The
   title, the lead or the image therefore no longer changes how thick the dark head is. */
.page-hero {
  --page-hero-min-h: 30rem;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

@media (max-width: 23.99em) {
  .page-hero {
    --page-hero-min-h: 34rem;
  }
}

@media (min-width: 36em) {
  .page-hero {
    --page-hero-min-h: 23rem;
  }
}

@media (min-width: 48em) {
  .page-hero {
    --page-hero-min-h: 25.5rem;
  }
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 33, 43, 0.9) 0%, rgba(22, 33, 43, 0.35) 60%, rgba(22, 33, 43, 0) 100%);
  pointer-events: none;
}

.page-hero .page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  align-content: center;
  min-height: var(--page-hero-min-h);
}

.page-hero .page-hero__text {
  min-width: 0;
}

/* Narrow screens show the text only: an image under the text would make the head twice as tall as on the pages
   without one. From 48em the image sits on the right, never under the text. */
@media (max-width: 47.99em) {
  .page-hero .page-hero__media {
    display: none;
  }
}

/* On tablets the text column gets two thirds, so the longer titles do not wrap into extra lines. */
@media (min-width: 48em) {
  .page-hero.page-hero--media .page-hero__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}

@media (min-width: 60em) {
  .page-hero.page-hero--media .page-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.page-hero .page-hero__text h1 {
  max-width: 22ch;
  margin-bottom: 0.5em;
}

.page-hero .page-hero__lead {
  max-width: 58ch;
}

/* The buttons are either all stacked or all in one row, never wrapped half-way. Stacked, they share the width of
   the widest one (a single max-content column); from 36em they always fit side by side. */
.page-hero .page-hero__actions {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 36em) {
  .page-hero .page-hero__actions {
    display: flex;
    flex-wrap: nowrap;
  }
}

.page-hero .page-hero__media img,
.page-hero .page-hero__media picture {
  width: 100%;
}

.page-hero .page-hero__media .frame {
  background: var(--c-ink-2);
  max-height: var(--page-hero-min-h);
}

.page-hero .crumbs {
  margin-bottom: var(--space-5);
  font-size: var(--fs-0);
}

.page-hero .crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.page-hero .crumbs li + li::before {
  content: '/';
  color: var(--c-text-3);
  margin-right: 0.6rem;
}

.page-hero .crumbs a {
  color: var(--c-on-dark-2);
  text-decoration: none;
}

.page-hero .crumbs a:hover {
  color: #fff;
}

.page-hero .crumbs [aria-current='page'] {
  color: var(--c-turq);
}

/* ==========================================================================
   DownloadButton (Components/Site/DownloadButton.razor)
   A letöltés gomb kártyája. A gomb azonosítója a markupban áll, a hozzá tartozó
   PDF-et az admin állítja be; a kártya szövege az oldal saját szövege.
   ========================================================================== */

.download-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--c-line);
  background: var(--c-paper);
}

.download-card .download-card__badge {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-turq-700);
}

.download-card .download-card__title {
  margin: 0;
  font-size: var(--fs-3);
}

.download-card .download-card__text {
  margin: 0;
  color: var(--c-text-2);
}

.download-card .download-card__meta {
  margin: 0;
  font-size: var(--fs-0);
  color: var(--c-text-3);
}

/* A gomb a kártya aljára kerül, így az egymás melletti kártyák gombjai egy vonalban állnak. */
.download-card .download-card__action {
  margin: auto 0 0;
  padding-top: var(--space-3);
}