/*
  Reset es elem-alapertelmezesek - ADR-010.

  Ez a fajl CSAK szemantikus tokent hasznalhat (DS-BRAND-002).
  Nyers szinertek vagy --color-* primitiv itt tilos; ezt architecture teszt orzi.

  Ide NEM kerul layout es nem kerul komponens - azok sajat reteget kapnak.
*/

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /*
      A "hidden" ATTRIBUTUM MINDIG REJT (2026-09-26).

      A bongeszo a [hidden]-t a SAJAT alapstilusaval rejti (display: none) - es
      az a leggyengebb szabaly: barmelyik szerzoi display felulirja. Ezert egy
      <div class="pwa-install" hidden> a .pwa-install { display: grid } miatt
      SOSEM rejtozott el - minden bejelentkezett lapon latszott, es a bezaro
      gomb (ami hidden = true-t allitott) semmit nem csinalt. Ugyanigy a
      .button osztalyu, hidden-nel indulo gombok (a kereso "A kozelemben"-je, a
      nyitvatartas masolasa) JS nelkul is ott alltak - halott gombkent.

      A hibat bongeszos meres fogta meg (hidden: true, display: grid). A tesztek
      az attributumot allitottak, nem a lathatosagot - es az attributum rendben
      volt. A kepernyokepeket elsore "elavult kepkocka"-kent magyaraztam, pedig
      valodiak voltak.

      MIERT A RESET RETEGBEN, !IMPORTANT-TAL: fontos deklaracioknal a reteg-
      sorrend MEGFORDUL, tehat a legkorabbi reteg nyer. Igy egyetlen kesobbi
      komponens-szabaly sem tudja felulirni - pontosan ez kell. A HTML-szabvany
      szandeka is ez, es a legtobb CSS-reset ugyanezt tartalmazza.
    */
    [hidden] {
        display: none !important;
    }

    body {
        margin: 0;
    }

    /* A cim-margok a layout reteg dolga, ne az elem hozza magaval. */
    h1,
    h2,
    h3,
    h4,
    p,
    figure {
        margin-block: 0;
    }

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

    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    /* Accessibility: reduced motion tiszteletben tartasa. */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer base {
    body {
        font-family: var(--font-family-base);
        font-size: var(--font-size-body);
        line-height: var(--line-height-base);
        color: var(--text-primary);
        background: var(--surface-default);
        /* Ruben #81/B1: egy szokoz nelkuli hosszu szo (URL, begepelt szoveg) ne feszitse szet a lapot. */
        overflow-wrap: break-word;
    }

    /*
      Ruben #81/B1: a felhasznalo altal irt szabad szoveg (uzenet, hazirend, leiras, bemutatkozas,
      ertekeles, lemondas indoka) bekezdesben vagy dd-ben jelenik meg. Az "anywhere" - a break-word-del
      szemben - a min-content szelesseget is csokkenti, igy grid- es flex-elemben sem tolja ki az
      oszlopot: egy 3000 karakteres, szokoz nelkuli uzenet mobilon 1560 px szelesre nyitotta a lapot.
    */
    p,
    dd,
    blockquote {
        overflow-wrap: anywhere;
    }

    /*
      A cimsorok sajat sorkozt kapnak: az 1.5-os torzs-ertek nagy meretben
      szetesove teszi a tobbsoros cimet.
      A text-wrap: balance a tobbsoros cimsort egyenletesen tordeli, igy nem
      marad egyetlen arva szo az utolso sorban.
    */
    h1,
    h2,
    h3 {
        /* A cimsorok a display betutipust kapjak (design-audit.md: KEEP) -
           a karakter nagy meretben latszik, folyoszovegben zavarna. */
        font-family: var(--font-family-display);
        font-weight: 600;
        line-height: var(--line-height-heading);
        text-wrap: balance;
    }

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

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

    h3 {
        font-size: var(--font-size-h3);
    }

    a {
        color: var(--text-primary);
        /*
          Az alahuzas SZINE a brand, a szoveg viszont a teljes kontrasztu
          --text-primary marad: igy a link felismerheto, de nem kell a
          brandszinnek 4.5:1-et hoznia folyoszovegben.
          Az offset azert kell, mert a p es g szarai kulonben belelognak
          az alahuzasba.
        */
        text-decoration-color: var(--brand-primary);
        text-underline-offset: 0.15em;
    }

    a:hover {
        color: var(--brand-primary);
    }

    /*
      A vekony betuk sotet hatteren "kover-ebbnek" latszanak (halation), ezert
      a legtobb sotet felulet finomabb rasztert kap. Ez nem eszteticizmus: a
      simitas nelkul a 16px-es Inter sotet alapon szemcsesnek hat.
    */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /*
      Focus state - accessibility miatt KOTELEZO (docs/design/accessibility.md 3.).
      Az outline: none helyettesites nelkul hiba, nem stilusdontes.

      KETGYURUS technika, es ez nem diszites: a WCAG 2.4.11 szerint a focus
      indikatornak a SZOMSZEDOS szinekhez kepest kell 3:1-et hoznia. Egyetlen
      gyuru vagy a vilagos oldalon, vagy a sotet gomb hatteren bukna el -
      attol fuggoen, milyen szinu, es a gomb SAJAT hattere is szomszed.

      A box-shadow toltl ki az outline-offset altal nyitott rest egy vilagos
      haloval, az outline pedig ezen kivul fut. Igy legalabb az egyik gyuru
      minden hatteren elvalik.
    */
    :focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px var(--focus-ring-halo);
    }

    /*
      Touch target (accessibility.md 8.) - a mobil az elsodleges platform
      (responsive.md). A vezerlok magassaga sosem eshet a WCAG 2.5.8 alá.
    */
    button,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: var(--touch-target-min);
    }
}

/*
  Reduced motion - accessibility.md 10. pont.
  Nem "kikapcsoljuk az animaciot", hanem a rendszer szintu keresnek
  engedelmeskedunk. Az 0.01ms (nem 0) szandekos: igy a transitionend
  esemeny tovabbra is lefut, tehat a rá epulo logika nem all le.
*/
@media (prefers-reduced-motion: reduce) {
    @layer base {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer utilities {
    /*
      Csak kepernyoolvasonak szolo szoveg - a vizualis elrejtes NEM
      display:none, mert az a felolvasasbol is kivenne.
    */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}