/* =====================================================================
   Bodajk - Akadálymentesítési javítások (WCAG 2.1 AA)
   Készült a DMÜ Digitális Szolgáltatások Felügyelete ellenőrzése alapján
   (DMÜ/DSZF/648-1/2026). Ez a fájl külön tartja az akadálymentesítési
   stílusokat, hogy könnyen karbantartható és visszavonható legyen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) UGRÓLINK (skip link) – a fő tartalomra ugrás
   A tab-sorrend első eleme; alaphelyzetben rejtett, fókuszra megjelenik.
   --------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 1000000;
    padding: 10px 18px;
    background: #017cc2;
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   2) LÁTHATÓ BILLENTYŰFÓKUSZ
   Minden interaktív elemen jól látható fókuszjelzés. A :focus-visible
   csak billentyűzetes fókusznál jelenik meg, egérkattintásnál nem zavar.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.page-box:focus-visible,
.mainmenu-link:focus-visible,
.page-navigation a:focus-visible,
.lang-selector a:focus-visible {
    outline: 3px solid #ffbf00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #003a5d !important;
}

/* Tartalék azon böngészőkre, amelyek nem ismerik a :focus-visible-t */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
}

/* A csempe stílusú gombok (főoldali dobozok) – a fókusz a kattintható
   linkre kerül, ezt emeljük ki erőteljesen a grafikus felületen is. */
a:focus-visible .page-box,
.page-box a:focus-visible {
    outline: 3px solid #ffbf00 !important;
    outline-offset: -3px !important;
}

/* A fő tartalom (main) fókuszálható ugrólink-célként, de ne kapjon
   körvonalat, amikor programatikusan kap fókuszt. */
#main-content:focus {
    outline: none;
}

/* ---------------------------------------------------------------------
   3) DEKORATÍV CÍMSOROK PÓTLÁSA
   A korábbi, csak dekorációs h4 elemeket <p>-re cseréltük; itt
   állítjuk vissza az eredeti megjelenést, hogy a látvány ne változzon.
   --------------------------------------------------------------------- */
.site-subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin: 10px 0;
    padding: 0;
}
.weather-box .weather-line {
    padding: 0 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin: 10px 0;
}

/* ---------------------------------------------------------------------
   4) AKADÁLYMENTESÍTÉSI NYILATKOZAT lábléc-link
   --------------------------------------------------------------------- */
.footer-a11y-link {
    color: #015a8f;
    text-decoration: underline;
    font-weight: 600;
}
.footer-a11y-link:hover,
.footer-a11y-link:focus {
    color: #003a5d;
}

/* ---------------------------------------------------------------------
   5) SÜTI (COOKIE) PANEL – akadálymentes párbeszédpanel megjelenés
   A fókuszkezelést az accessibility.js végzi; itt a vizuális fókuszt
   és a kontrasztot biztosítjuk.
   --------------------------------------------------------------------- */
.cc-window:focus,
.cc-window .cc-btn:focus,
.cc-window .cc-link:focus {
    outline: 3px solid #ffbf00 !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   6) NAGYÍTHATÓSÁG / REFLOW (WCAG 1.4.10)
   Cél: 200%-os nagyításnál (és kis nézetablaknál) ne legyen szükség
   vízszintes görgetésre. A tartalmi elemek alkalmazkodjanak a
   rendelkezésre álló szélességhez.
   --------------------------------------------------------------------- */

/* A bekezdésekbe ágyazott képek, táblázatok, beágyazott tartalmak
   sosem lóghatnak ki a tartalom területéből. */
.article-content img,
.article-content iframe,
.article-content video,
.article-content embed,
.article-content object {
    max-width: 100%;
    height: auto;
}

/* Hosszú szavak, URL-ek tördelése, hogy ne feszítsék szét a tartalmat. */
.article-content,
.article-content p,
.article-content li,
.article-content td {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Széles táblázatok: a táblázaton belüli görgetés megengedett, de a
   teljes oldal vízszintesen nem görög. */
.article-content table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* A főoldal abszolút pozicionált fejléc-blokkja kis szélességnél
   (pl. 200% nagyítás 1280px-en ~ 640px) ne okozzon kilógást. */
@media (max-width: 991px) {
    .page-content .welcome-landing {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    .lang-selector {
        position: static !important;
        left: auto !important;
    }
}

/* Biztonsági háló: a teljes dokumentum ne görögjön vízszintesen a
   beágyazott tartalmak miatt. (A tartalom nem vész el, csak tördelődik.) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------
   7) TARTALMI KIEMELÉS CÍMSOR HELYETT (T4 segédosztályok)
   Akkor használd ezeket a SZERKESZTŐFELÜLETEN, ha csak VIZUÁLIS kiemelés
   kell (nagyobb/színes/félkövér szöveg), de a szöveg NEM új szakaszt nyit.
   Így a megjelenés címsoré, de a képernyőolvasó nem címsorként olvassa.
   Valódi szakaszcímhez továbbra is a szerkesztő „Címsor 3/4” funkcióját
   használd (a helyes szinten), NE ezeket az osztályokat.

   Használat a forrásnézetben, normál bekezdésen:
     <p class="tartalom-cimsor">Polgármesteri határozatok:</p>
     <span class="tartalom-kiemeles">fontos rész</span>
   --------------------------------------------------------------------- */
.article-content .tartalom-cimsor {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #017cc2;
    margin: 18px 0 8px;
    line-height: 1.2;
}
.article-content .tartalom-kiemeles {
    font-weight: 700;
}