/* =========================================================================
   HW Plus CMS - "alap" referencia-tema
   =========================================================================

   SZANDEKOSAN KERETRENDSZER NELKUL
     Ez a stiluslap nem hasznal Bootstrapet vagy barmely mas keretrendszert.
     Ezzel bizonyitjuk, hogy a CMS-mag SEMMILYEN CSS-keretrendszert nem
     feltetelez (temaszerzodes 2. szabaly). Egy masik tema nyugodtan hozhat
     Bootstrap 4-et, 5-ot vagy sajat rendszert.

   AMI NINCS BENNE
     - beegetett domain vagy abszolut utvonal (szerzodes 10. szabaly)
     - kulso CDN-rol toltott betutipus (GDPR es offline mukodes miatt)
     - ugyfelspecifikus szin, logo vagy arculati elem (szerzodes 9. szabaly)

   RESZPONZIVITAS
     Mobile-first: az alap elrendezes egyoszlopos, a nagyobb kepernyokre
     media query epul ra. Vizszintes gorgetes sehol nem keletkezik.
   ========================================================================= */

:root {
    --szoveg:        #23272f;
    --halvany:       #5f6672;
    --hatter:        #ffffff;
    --hatter-halvany:#f5f6f8;
    --keret:         #e2e5ea;
    --kiemeles:      #1f5fa9;
    --sugar:         6px;
    --sav:           1.25rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--szoveg);
    background: var(--hatter);
}

img { max-width: 100%; height: auto; }

a { color: var(--kiemeles); }
a:hover, a:focus-visible { text-decoration: none; }

/* Lathato fokusz: billentyuzetes navigacio eseten kotelezo. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--kiemeles);
    outline-offset: 2px;
}

.tarolo {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 var(--sav);
}

/* ---------------------------------------------------------------- fejlec */

.fejlec {
    border-bottom: 1px solid var(--keret);
    background: var(--hatter);
}

.fejlec-sav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.marka {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--szoveg);
    text-decoration: none;
}

.fomenu { margin-left: auto; }

.fomenu ul,
.lablec ul,
.nyelvvalto ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nyelvvalto ul { gap: .5rem; }

.nyelvvalto span[aria-current] {
    font-weight: 600;
    color: var(--halvany);
}

/* --------------------------------------------------------------- tartalom */

.tartalom { padding: 2.5rem 0; }

h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2rem 0 .5rem;
}

p { margin: 0 0 1rem; }

.lead {
    font-size: 1.1rem;
    color: var(--halvany);
}

.datumok {
    font-size: .875rem;
    color: var(--halvany);
}

.ures {
    padding: 1.5rem;
    border: 1px dashed var(--keret);
    border-radius: var(--sugar);
    color: var(--halvany);
    text-align: center;
}

.gomb {
    display: inline-block;
    padding: .6rem 1.1rem;
    border-radius: var(--sugar);
    background: var(--kiemeles);
    color: #fff;
    text-decoration: none;
}

/* ------------------------------------------------------------- listak */

.bejegyzesek,
.talalatok {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bejegyzesek > li,
.talalatok > li {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--keret);
}

.bejegyzesek > li:first-child h2,
.talalatok > li:first-child h2 { margin-top: 0; }

/* -------------------------------------------------------------- kereso */

.kereso-urlap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.kereso-urlap label {
    flex: 1 0 100%;
    font-size: .875rem;
    color: var(--halvany);
}

.kereso-urlap input {
    flex: 1 1 16rem;
    min-height: 2.75rem;   /* kenyelmes erintesi meret mobilon */
    padding: .5rem .75rem;
    font: inherit;
    border: 1px solid var(--keret);
    border-radius: var(--sugar);
}

.kereso-urlap button {
    min-height: 2.75rem;
    padding: .5rem 1.25rem;
    font: inherit;
    color: #fff;
    background: var(--kiemeles);
    border: 0;
    border-radius: var(--sugar);
    cursor: pointer;
}

/* -------------------------------------------------------------- blokkok */

.blokkok { background: var(--hatter-halvany); }
.blokkok .blokk { padding: 1.5rem 0; }

/* --------------------------------------------------------------- lablec */

.lablec {
    padding: 2rem 0;
    border-top: 1px solid var(--keret);
    background: var(--hatter-halvany);
    font-size: .9rem;
}

.lablec-jog {
    margin: 1rem 0 0;
    color: var(--halvany);
}

/* ------------------------------------------------------- nagyobb kepernyo */

@media (min-width: 48em) {
    h1 { font-size: 2.25rem; }
    .tartalom { padding: 3.5rem 0; }
}

/* -------------------------------------------------- sotet mod tamogatasa */

@media (prefers-color-scheme: dark) {
    :root {
        --szoveg:         #e6e8ec;
        --halvany:        #a4abb8;
        --hatter:         #16181d;
        --hatter-halvany: #1d2026;
        --keret:          #2c3038;
        --kiemeles:       #6ea8f0;
    }
    .gomb { color: #16181d; }
    .kereso-urlap button { color: #16181d; }
}