/* =====================================================================
   Téli-Nyári – akadálymentes mód és közös akadálymentességi elemek
   (App\Support\TnAkadaly, public/js/tn-akadaly.js, docs/102-teli-nyari.md)
   - ugrólink, képernyőolvasós rejtett szöveg, élő régió, fókuszjelzés
   - a fejléc "Akadálymentes" panelje
   - négy, egymástól független mód a <html> osztályain: tn-a-nagy,
     tn-a-kontraszt, tn-a-tag, tn-a-mozgas (a fej inline szkriptje teszi
     fel, első kirajzolás előtt – nem villan)
   ===================================================================== */

/* ------------------------------------------------ ugrólink, rejtett szöveg */
.tn-ugras { position: fixed; left: 12px; top: 10px; z-index: 300; padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--ej, #0B1322); border: 3px solid var(--ej, #0B1322); font-weight: 700; font-size: 15px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); transform: translateY(-200%) }
.tn-ugras:focus, .tn-ugras:focus-visible { transform: none; outline: 3px solid #24508F; outline-offset: 2px }
.tn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
main#tartalom:focus { outline: 0 }

/* telefonon a fejléc ikonjainak felirata vizuálisan rejtett, de a képernyőolvasó felolvassa (eddig display:none volt:
   a "Belépés" link név nélkül maradt) */
@media (max-width: 560px) {
  .tn-ikon .szo { display: inline; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
}

/* ------------------------------------------------ fókuszjelzés (normál módban is)
   Világos háttéren sötétkék, sötét háttéren (lábléc, hírsáv, sötét sávok) borostyán gyűrű – mindkettő 3:1 fölött. */
:root { --tn-fokusz: #24508F }
.tn-hir, .tn-lab, .msav, .tn-sotet, [data-tn-sotet] { --tn-fokusz: #FFC23D }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--tn-fokusz); outline-offset: 2px }
canvas:focus-visible { outline-offset: -3px }

/* ------------------------------------------------ fejléc: Akadálymentes gomb + panel */
.tn-fej-sor { position: relative }
.nincs-js .tn-akadaly { display: none }
.tn-akadaly-gomb { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px }
.tn-akadaly-gomb[aria-expanded="true"], html.tn-akadaly .tn-akadaly-gomb { background: var(--kek-h, #E9EEF6); color: var(--kek, #24508F) }
.tn-akadaly-gomb .tni { width: 22px; height: 22px }
.tn-akadaly-panel { position: absolute; top: calc(100% + 6px); right: 20px; z-index: 95; width: 360px; max-width: calc(100% - 40px); background: #fff; color: var(--tinta, #0B1224); border: 1px solid var(--vonal-e, #CCD3E2); border-radius: var(--r, 14px); box-shadow: 0 30px 60px -24px rgba(11, 19, 34, .45); padding: 18px }
.tn-akadaly-panel h2 { font-size: 18px; letter-spacing: -.01em; margin: 0 0 4px }
.tn-akadaly-panel > p { font-size: 13.5px; color: var(--tinta-2, #4A5470); margin: 0 0 10px; line-height: 1.5 }
.tn-akadaly-kapcs { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 8px; padding: 8px 12px 8px 14px; border: 1.5px solid var(--vonal-e, #CCD3E2); border-radius: 12px; background: #fff; color: inherit; font: inherit; font-weight: 700; font-size: 15px; text-align: left; cursor: pointer }
.tn-akadaly-kapcs:hover { border-color: var(--kek, #24508F) }
.tn-akadaly-kapcs .kapcs { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 13px; background: #6B7591; transition: background .2s }
.tn-akadaly-kapcs .kapcs::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s }
.tn-akadaly-kapcs[aria-pressed="true"] { border-color: var(--kek, #24508F); background: var(--kek-h, #E9EEF6) }
.tn-akadaly-kapcs[aria-pressed="true"] .kapcs { background: var(--kek, #24508F) }
.tn-akadaly-kapcs[aria-pressed="true"] .kapcs::after { transform: translateX(18px) }
.tn-akadaly-lab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 14px; font-size: 13.5px }
.tn-akadaly-lab a { color: var(--kek, #24508F); font-weight: 700; text-decoration: underline; text-underline-offset: 2px }
.tn-akadaly-lab button { border: 0; background: none; padding: 6px 0; color: var(--tinta-2, #4A5470); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
/* keskenyebb gepen (es nagy betuvel, ahol a lap ~1,18-szoros) csak az ikon latszik - a felirat a kepernyoolvasonak
   megmarad; igy a fejlec sora nem tolodik ki */
@media (max-width: 1240px) {
  .tn-akadaly-gomb .szo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .tn-akadaly-gomb { padding: 0 12px }
}
html.tn-a-nagy .tn-ikon .szo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
html.tn-a-nagy .tn-ikon { padding: 0 11px }
@media (max-width: 560px) {
  /* a harmadik fejlec-ikon miatt a logo-sor ne torjon: szukebb gomb, kisebb koz */
  .tn-akadaly-gomb { padding: 0 8px }
  .tn-ikonok { gap: 4px }
  .tn-akadaly-panel { left: 16px; right: 16px; width: auto; max-width: none }
}
@media (max-width: 400px) {
  /* 360-400 px-es telefonon a logo 4 px-szel alacsonyabb, igy a logo es a harom ikon egy sorban marad */
  .tn-jel img, .tn-fej.gordult .tn-jel img { height: 24px }
}

/* fejlec-kereso: 981-1100 px kozott (es nagy betuvel) a sor kitolodott (a mezo nem zsugorodott a tartalma ala) */
.tn-kereso { min-width: 0 }
.tn-kereso input { width: 0 }

/* rendelés lépései (kosár, pénztár): az "overflow-x: auto" miatt a Chrome billentyűvel fókuszálható görgető dobozt
   csinált belőle (fókuszjelzés nélkül), pedig nincs mit görgetni - a lépések kiférnek, akadálymentes módban tördelődnek */
.tn .tnk-lepes { overflow: clip }
html.tn-akadaly .tnk-lepes { flex-wrap: wrap; row-gap: 8px }
html.tn-akadaly .tnk-lepes .cs { min-width: 10px; margin: 0 6px }

/* telefonon az also sav (es a ragado kosar-sav) ne takarja a billentyuzettel fokuszalt elemet */
@media (max-width: 760px) { html { scroll-padding-bottom: calc(var(--msav-m, 64px) + 84px) } }

/* gorgetesre eloltuno elemek (.tn-rev*): ha a billentyuzet-fokusz bennuk van, azonnal latszanak (a fokuszalt elem
   ne legyen atlatszo, amig a beusztatas tart) */
.tn-rev:focus-within, .tn-rev-bal:focus-within, .tn-rev-nagy:focus-within { opacity: 1 !important; transform: none !important; transition: none !important }

/* ================================================ MÓDOK ================================================ */

/* ---- nagyobb betű: az egész lap ~18%-kal nagyobb (a betűméretek px-ben vannak, ezért nagyítás, nem rem); a tördelés
   úgy alakul, mint egy keskenyebb képernyőn, oldalra csúszás nélkül */
html.tn-a-nagy body { zoom: 1.18 }

/* ---- erős kontraszt: tokenek sötétebbre, átlátszó üveg helyett tömör felületek, aláhúzott szöveges linkek */
html.tn-a-kontraszt {
  --tinta: #000000; --tinta-2: #1C2230; --tinta-3: #2C3345;
  --vonal: #5F6882; --vonal-e: #2C3345; --hatter: #FFFFFF;
  --kek: #0A3570; --kek-s: #072957; --kek-h: #E3EBF7; --primary: #0A3570;
  --zold: #075C3B; --narancs-s: #6B4300; --nap-s: #6B4300; --piros: #A3160C;
  --grad: linear-gradient(118deg, #0A3570, #0A3570);
  --tn-fokusz: #000000;
}
html.tn-a-kontraszt body { background: #fff; color: #000 }
html.tn-a-kontraszt .grad-szoveg { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit }
html.tn-a-kontraszt .tn-fej { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid #000 }
html.tn-a-kontraszt .tn-menu { border-top-color: #000 }
html.tn-a-kontraszt .tn-menu a { color: #000 }
html.tn-a-kontraszt .tn-menu a.on, html.tn-a-kontraszt .tn-menu a:hover { background: #000; color: #fff }
html.tn-a-kontraszt .tn-kereso { background: #fff; border: 2px solid #000 }
html.tn-a-kontraszt .tn-kereso input::placeholder, html.tn-a-kontraszt ::placeholder { color: #2C3345; opacity: 1 }
html.tn-a-kontraszt .be, html.tn-a-kontraszt input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), html.tn-a-kontraszt select, html.tn-a-kontraszt textarea { border: 2px solid #2C3345 }
html.tn-a-kontraszt .tn-kereso input:not([type="radio"]):not([type="checkbox"]):not([type="range"]) { border: 0 }
html.tn-a-kontraszt .tk, html.tn-a-kontraszt .kartya, html.tn-a-kontraszt .tn-panel, html.tn-a-kontraszt .valaszto { border: 2px solid #2C3345 }
html.tn-a-kontraszt main p a:not(.g), html.tn-a-kontraszt main li a:not(.g), html.tn-a-kontraszt .tn-lab a:not(.g), html.tn-a-kontraszt label a { text-decoration: underline; text-underline-offset: 2px }
html.tn-a-kontraszt .g-uveg, html.tn-a-kontraszt .g-k { border: 2px solid currentColor }
html.tn-a-kontraszt .tn-hir, html.tn-a-kontraszt .tn-lab { background: #000; color: #fff }
html.tn-a-kontraszt .tn-lab p, html.tn-a-kontraszt .tn-lab a, html.tn-a-kontraszt .tn-lab span, html.tn-a-kontraszt .tn-konnyu-kapcs { color: #fff }
html.tn-a-kontraszt .tn-hir, html.tn-a-kontraszt .tn-lab, html.tn-a-kontraszt .msav, html.tn-a-kontraszt .tn-sotet, html.tn-a-kontraszt [data-tn-sotet] { --tn-fokusz: #FFD400 }
html.tn-a-kontraszt a:focus-visible, html.tn-a-kontraszt button:focus-visible, html.tn-a-kontraszt input:focus-visible, html.tn-a-kontraszt select:focus-visible,
html.tn-a-kontraszt textarea:focus-visible, html.tn-a-kontraszt summary:focus-visible, html.tn-a-kontraszt [tabindex]:focus-visible { outline-width: 4px }
/* képre írt szöveg (hős, kategóriakártyák): erősebb sötétítés a kép fölött */
html.tn-a-kontraszt .tnh-kepek img, html.tn-a-kontraszt .tn-kat img { filter: brightness(.55) }

/* ---- tágabb szöveg: WCAG 1.4.12 értékek (betűköz .12em, szóköz .16em, sortáv 1.5+), hosszú szó törhet */
html.tn-a-tag body, html.tn-a-tag body * { letter-spacing: .12em !important; word-spacing: .16em !important }
html.tn-a-tag body { line-height: 1.7 }
html.tn-a-tag p, html.tn-a-tag li, html.tn-a-tag dd, html.tn-a-tag dt, html.tn-a-tag label, html.tn-a-tag td, html.tn-a-tag th { line-height: 1.7 !important }
html.tn-a-tag p { margin-bottom: 1.1em }
html.tn-a-tag h1, html.tn-a-tag h2, html.tn-a-tag h3, html.tn-a-tag h4 { line-height: 1.3; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto }
html.tn-a-tag main, html.tn-a-tag footer { overflow-wrap: anywhere }
html.tn-a-tag .tnk-ossz { white-space: normal; flex-wrap: wrap; gap: 0 8px }

/* termekoldal telefonon: az egy oszlop ne a tartalom legszelesebb sorahoz igazodjon (320 px-es atfolyas,
   nagy betuvel is) */
@media (max-width: 960px) { .tn .tt-racs { grid-template-columns: minmax(0, 1fr) } }

/* ---- animációk szüneteltetése: ugyanaz, mint a "kevesebb mozgás" rendszerbeállítás (a JS-t a fej szkript a
   matchMedia-n keresztül értesíti), plusz a nehéz látvány (részecskék, nyomvonal) ki */
html.tn-a-mozgas { scroll-behavior: auto }
html.tn-a-mozgas *, html.tn-a-mozgas *::before, html.tn-a-mozgas *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important }
html.tn-a-mozgas .tn-rev, html.tn-a-mozgas .tn-rev-bal, html.tn-a-mozgas .tn-rev-nagy { opacity: 1; transform: none }
html.tn-a-mozgas .tn-hir-sav { animation: none !important }
html.tn-a-mozgas canvas[data-reszecske], html.tn-a-mozgas canvas[data-tn-nyomvonal], html.tn-a-mozgas .tn-csik { display: none }

/* a mezok sajat fokuszallapota (keret + halvany gyuru) billentyuzetnel nem eleg eros: kulon gyuru */
.be:focus-visible, .tn-kereso input:focus-visible { outline: 3px solid var(--tn-fokusz); outline-offset: 1px }
.tn-kereso input:focus-visible { outline-offset: -3px; border-radius: 999px }

/* urlap-hiba a mezo alatt (tn-akadaly.js: aria-describedby) */
.tn-mezo-hiba { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: #B42318 }
[aria-invalid="true"].be, input[aria-invalid="true"] { border-color: #B42318 }
[data-tn-hiba-osszegzo]:focus { outline: 3px solid #B42318; outline-offset: 2px }

/* a kozos foglalo (partials/foglalo_mezok) lepesszama a premium narancson 2,3:1 volt: a sotetebb arnyalat (csak itt,
   a Kocsigumi kinezete nem valtozik) */
.tn .fg-fej .fg-lepes-szam { color: var(--narancs-s) }
.tn [data-fg="nap"][data-allapot="aktiv"] [data-fg="nap-a"] { color: #066640 }
.tn [data-fg="nap"][data-ma] [data-fg="nap-d"] { color: var(--narancs-s) }

/* ------------------------------------------------ nyilatkozat oldal (/akadalymentesseg) */
.tnak { max-width: 860px; padding-top: 28px; padding-bottom: 64px }
.tnak-morzsa { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--tinta-2); margin-bottom: 14px }
.tnak h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px }
.tnak h2 { font-size: 22px; letter-spacing: -.01em; margin: 34px 0 10px }
.tnak h3 { font-size: 17px; margin: 18px 0 8px }
.tnak p, .tnak li { font-size: 16px; line-height: 1.65; color: var(--tinta) }
.tnak ul { padding-left: 22px; margin: 0 0 10px }
.tnak li { margin-bottom: 6px }
.tnak a { color: var(--kek); font-weight: 600; text-decoration: underline; text-underline-offset: 2px }
.tnak .tnak-bev { font-size: 17px }
.tnak-allapot { display: inline-block; padding: 10px 14px; border-radius: 12px; background: var(--kek-h); border: 1px solid var(--vonal-e) }
.tnak-korlat li span { display: block; color: var(--tinta-2) }
.tnak .tnak-datum { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--vonal); font-size: 14px; color: var(--tinta-2) }