/*
 * Akadálymentesítési eszköztár – oldalra ható stílusok (WCAG 2.1)
 * A widget saját kinézete az a11y.js-ben van (Shadow DOM), így az oldal
 * CSS-e nem tudja szétszedni, és fordítva.
 * Az osztályokat az a11y.js teszi a <html> elemre: a11y-<funkció>.
 */

/* ---------- Mindig aktív javítások ---------- */

/* 2.4.1 Blokkok átugrása – "Ugrás a tartalomra" link */
.a11y-skip {
    position: fixed;
    left: 16px;
    top: -200px;
    z-index: 2147483646;
    padding: 12px 18px;
    background: #000;
    color: #fff !important;
    font: 600 16px/1.2 Arial, Helvetica, sans-serif;
    text-decoration: underline;
    border-radius: 0 0 6px 6px;
    transition: none !important;
}
.a11y-skip:focus {
    top: 0 !important;
    outline: 3px solid #ffbf47 !important;
    outline-offset: 0 !important;
}

/* 2.4.7 Látható fókusz – billentyűzettel mindig látszódjon, hol állunk */
:not(#a11y-host):focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .85);
}
/* az átugrás célpontja programból kap fókuszt, ott ne legyen keret */
[data-a11y-target]:focus { outline: none !important; box-shadow: none !important; }

/* 2.1.1 Billentyűzet – a lenyíló menük fókuszra is nyíljanak meg, ne csak egérrel */
@media (min-width: 992px) {
    nav li:focus-within > ul,
    nav li:focus-within > .sub-menu,
    .main-menu li:focus-within > ul,
    .dreamit-header-menu li:focus-within > .sub-menu,
    .dreamit-header-menu li:focus-within > ul {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* képernyőolvasónak szóló, vizuálisan rejtett szöveg */
.a11y-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;
}

/* ---------- Magas kontraszt (1.4.3 / 1.4.6 / 1.4.11) ---------- */
html.a11y-contrast body,
html.a11y-contrast body *:not(#a11y-host) {
    background-color: #000 !important;
    color: #ffff00 !important;          /* citromsárga szöveg fekete háttéren (19.5:1) */
    border-color: #ffff00 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
/* a role="img" + aria-label háttérképek tartalmi képek, azok maradjanak meg */
html.a11y-contrast body *:not(#a11y-host):not([role="img"]),
html.a11y-contrast body *::before,
html.a11y-contrast body *::after {
    background-image: none !important;
}
html.a11y-contrast body *::before,
html.a11y-contrast body *::after {
    background-color: transparent !important;
}
/* kiválasztott fül / aktuális oldal: kontrasztos módban se csak színnel különüljön el (1.4.1) */
html.a11y-contrast body :is([aria-selected="true"], [aria-current]:not([aria-current="false"])):not(#a11y-x) {
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 4px !important;
}
/* üres díszítő elemek (ikonbetűs <i>, a lejátszás gomb „ripple” köre, szöveg fölé tett háttérréteg) ne takarjanak el semmit */
html.a11y-contrast body :is(i, div, span):empty:not(:is(button, .btn, [role="button"]) *):not(#a11y-x),
html.a11y-contrast body :is(img, svg, picture):not(#a11y-x),
html.a11y-contrast body :is(div, figure, picture):not([class*="btn"]):has(:is(img, svg, video)):not(:has(:is(p, h1, h2, h3, h4, h5, h6, li, td, th, label, button, input, select, textarea, strong, b))):not(#a11y-x) {
    background-color: transparent !important;
}
/* keretből rajzolt díszítő álelemek (pl. gomb rámutatási animáció) se legyenek színesek */
html.a11y-contrast body *::before,
html.a11y-contrast body *::after {
    border-color: #000 !important;
}
/* sliderek / képes fejlécek: a tárolók átlátszók, csak a szöveg mögött legyen fekete (ne takarja el a képet) */
html.a11y-contrast body :is(.owl-carousel, .slick-slider, .nivoSlider, [class*="slider"]) :is(div, section, article, figure, ul, li):not(#a11y-x) {
    background-color: transparent !important;
}
html.a11y-contrast body :is(.owl-carousel, .slick-slider, .nivoSlider, [class*="slider"]) :is(h1, h2, h3, h4, h5, h6, p):not(#a11y-x) {
    width: fit-content;
    max-width: 100%;
    background-color: #000 !important;
    padding-left: .2em;
    padding-right: .2em;
}
/* a linkek is citromsárgák, aláhúzással és félkövérrel különülnek el a szövegtől */
html.a11y-contrast a,
html.a11y-contrast a * {
    color: #ffff00 !important;
}
html.a11y-contrast a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    font-weight: 700 !important;
}
html.a11y-contrast button,
html.a11y-contrast input,
html.a11y-contrast select,
html.a11y-contrast textarea {
    border: 2px solid #ffff00 !important;
}
/* gombok: sárga háttér, fekete felirat (mint az aktív fül a mintán) */
html.a11y-contrast body button:not(.a11y-skip),
html.a11y-contrast body .btn,
html.a11y-contrast body input[type="submit"],
html.a11y-contrast body input[type="button"],
html.a11y-contrast body .active > a.nav-link,
html.a11y-contrast body a.nav-link.active {
    background-color: #ffff00 !important;
    color: #000 !important;
}
html.a11y-contrast body button:not(.a11y-skip) *,
html.a11y-contrast body .btn * { color: #000 !important; }
html.a11y-contrast ::placeholder { color: #e6e600 !important; opacity: 1; }
html.a11y-contrast img,
html.a11y-contrast video { opacity: .9; }

/* ---------- Szürkeárnyalatos ---------- */
/* a <html>-en lévő filter nem rontja el a position:fixed elemeket */
html.a11y-grayscale { filter: grayscale(1); }

/* ---------- Linkek kiemelése (1.4.1) ---------- */
html.a11y-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em !important;
    outline: 2px dashed #ffbf47 !important;
    outline-offset: 2px !important;
}
html.a11y-links a:focus-visible { outline: 3px solid #ffbf47 !important; }

/* ---------- Olvasható betűtípus ---------- */
/* az ikonfontok (Font Awesome, Bootstrap Icons, flaticon…) ki vannak zárva, különben négyzet jelenne meg helyettük */
html.a11y-font body *:not(#a11y-host):not(i):not([class*="icon"]):not([class^="fa"]):not([class*=" fa"]):not([class^="bi"]):not([class*=" bi"]):not([class*="flaticon"]):not([class*="dripicons"]) {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* ---------- Nagyobb sor-, betű- és szóköz (1.4.12) ---------- */
html.a11y-spacing body *:not(#a11y-host):not(i):not([class*="icon"]):not([class^="fa"]):not([class*=" fa"]):not([class^="bi"]):not([class*=" bi"]):not([class*="flaticon"]):not([class*="dripicons"]) {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}
html.a11y-spacing body p { margin-bottom: 2em !important; }

/* ---------- Animációk megállítása (2.2.2 / 2.3.1) ---------- */
html.a11y-motion,
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}
/* WOW.js / animate.css: az animációra váró elemek is látszódjanak */
html.a11y-motion .wow,
html.a11y-motion .animated { visibility: visible !important; opacity: 1 !important; }

/* ---------- Képek elrejtése ---------- */
html.a11y-noimg body img,
html.a11y-noimg body picture,
html.a11y-noimg body input[type="image"],
html.a11y-noimg body [role="img"]:not(svg) {
    visibility: hidden !important;
}
html.a11y-noimg body *:not(#a11y-host),
html.a11y-noimg body *::before,
html.a11y-noimg body *::after {
    background-image: none !important;
}

/* ---------- Videók elrejtése ---------- */
html.a11y-novideo body video,
html.a11y-novideo body [data-a11y-video],
html.a11y-novideo body .mfp-iframe-holder .mfp-content {
    display: none !important;
}

/* ---------- Nagy egérmutató ---------- */
html.a11y-cursor,
html.a11y-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.2-6.6.9 3.9 7.5-2.9 1.4-3.8-7.5L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor a *,
html.a11y-cursor button,
html.a11y-cursor button *,
html.a11y-cursor [role="button"],
html.a11y-cursor label,
html.a11y-cursor select,
html.a11y-cursor summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.2-6.6.9 3.9 7.5-2.9 1.4-3.8-7.5L4 20z' fill='%231a5fb4' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, pointer !important;
}

/* ---------- Erős fókuszkiemelés ---------- */
html.a11y-focus *:not(#a11y-host):focus-visible {
    outline: 4px solid #ffbf47 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 8px #000 !important;
}

/* ---------- Bármely funkció aktív: a valódi leírás nélküli tartalmi képek elrejtése ---------- */
/* (az automatikusan "‹cím› – N. kép" leírást kapott és az alt nélküli képek) */
html.a11y-any img[data-a11y-autoalt],
html.a11y-any body img:not([alt]) {
    display: none !important;
}

/* ---------- Felső "Akadálymentes nézet" kapcsoló ([data-a11y-switch] helyére) – a nyiregyhaza.hu mintájára ---------- */
.a11y-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 8px;
    padding: 6px 4px;               /* nagyobb kattintható terület */
    border: 0;
    background: none;
    color: #fff;                    /* a szem színe sötét fejlécen */
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}
.a11y-switch--dark { color: #0c0c0c; }  /* világos fejlécen (pl. hello) */
.a11y-switch--dark .a11y-switch__track { border-color: #6b6b6b; }  /* 1.4.11: fehér háttéren a sáv kerete 5.3:1 */
.a11y-switch__track {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 28px;
    height: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}
.a11y-switch__thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0c0c0c;
    transition: transform .15s ease-in-out;
}
.a11y-switch__eye { width: 15px; height: 15px; flex: 0 0 auto; }
.a11y-switch__eye--on { display: none; }
.a11y-switch[aria-checked="true"] .a11y-switch__track { background: #ffff00; border-color: #ffff00; }
.a11y-switch[aria-checked="true"] .a11y-switch__thumb { transform: translateX(12px); }
.a11y-switch[aria-checked="true"] .a11y-switch__eye--off { display: none; }
.a11y-switch[aria-checked="true"] .a11y-switch__eye--on { display: inline; color: #ffff00; }
@media (prefers-reduced-motion: reduce) { .a11y-switch__thumb { transition: none; } }
/* magas kontrasztban is maradjon pontosan ilyen (a kontraszt-szabály :not(#id) miatt erős) */
html.a11y-contrast body .a11y-switch:not(#a11y-x),
html.a11y-contrast body .a11y-switch:not(#a11y-x) svg,
html.a11y-contrast body .a11y-switch:not(#a11y-x) svg * { background-color: transparent !important; border-color: transparent !important; }
html.a11y-contrast body .a11y-switch:not(#a11y-x) .a11y-switch__track { background-color: #fff !important; border-color: #ddd !important; }
html.a11y-contrast body .a11y-switch[aria-checked="true"]:not(#a11y-x) .a11y-switch__track { background-color: #ffff00 !important; border-color: #ffff00 !important; }
html.a11y-contrast body .a11y-switch:not(#a11y-x) .a11y-switch__thumb { background-color: #0c0c0c !important; }
html.a11y-contrast body .a11y-switch[aria-checked="true"]:not(#a11y-x) .a11y-switch__eye--on { color: #ffff00 !important; }

/* ---------- Automatikus sliderek Szünet/Lejátszás gombja (2.2.2) – az a11y.js teszi be ---------- */
/* helye oldalanként állítható: --a11y-cpause-top / -bottom / -left / -right */
.a11y-cpause {
    position: absolute;
    top: var(--a11y-cpause-top, auto);
    bottom: var(--a11y-cpause-bottom, 12px);
    left: var(--a11y-cpause-left, 12px);
    right: var(--a11y-cpause-right, auto);
    z-index: 30;
    min-width: 24px;
    min-height: 24px;
    margin: 0;
    padding: 5px 12px;
    border: 2px solid #fff;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font: 600 14px/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.a11y-cpause:hover { background: #333; }