/* ===== Site-wide layout polish ===== */

:root {
    /* Kényelmes oldalpadding: mobilon kisebb, desktopon nagyobb */
    --page-pad: clamp(16px, 4vw, 56px);

    /* Egységes tartalomszélesség desktopon (állítsd: 980–1240 px ízlés szerint) */
    --container-max: 1140px;

    /* Hosszú szöveghez ideális sorhossz */
    --text-max: 72ch;
}

/* 1) Egységes oldalsó padding MINDEN .container-nek a fő wrapperen belül */
.main-wrapper-first .container {
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
}

/* 2) Egységes max-width desktopon (összerántja a header/banner/section/footer szélességét) */
@media (min-width: 992px) {
    .main-wrapper-first .container {
        max-width: var(--container-max);
    }
}

/* 3) Olvashatóság: sortáv + szövegblokkok szélessége a "szöveges" szekciókban */
.about-generic-area,
.generic-area,
.section-gap {
    line-height: 1.65;
}

.about-generic-area p,
.about-generic-area ul,
.about-generic-area h3,
.about-generic-area h4,
.about-generic-area h5,
.generic-area p,
.generic-area ul,
.section-gap p,
.section-gap ul {
    max-width: var(--text-max);
    margin-left: auto;
    margin-right: auto;
}

/* 4) Listák levegősebbek */
.unordered-list li {
    margin-bottom: 0.35rem;
}

/* 5) Képek reszponzívak (sok “szétcsúszás” oka) */
img {
    max-width: 100%;
    height: auto;
}

/* 6) Billentyűzet fókusz látható */
a:focus,
button:focus,
[role="button"]:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}