/* LábMobil – weboldal stíluslap */

/* A színeket (--c-*) és betűméreteket (--fs-*) az admin felület Megjelenés
   menüpontja adja, a <head>-ben lévő <style> blokkban (src/theme.js). */

@media (forced-colors: active) {
    :root {
        --c-header: Canvas;
        --c-background: Canvas;
        --c-title: CanvasText;
        --c-subtitle: CanvasText;
        --c-subsubtitle: CanvasText;
        --c-text: CanvasText;
        --c-link: LinkText;
        --c-menuText: LinkText;
        --c-menuHover: CanvasText;
        --c-menuActive: CanvasText;
        --c-button: ButtonFace;
        --c-buttonText: ButtonText;
        --c-heroTint: Canvas;
    }
}

/* ---------- Alapok ---------- */

body {
    margin: 0;
    padding: 0;
    font-family: 'Lora', Georgia, serif;
    font-size: var(--fs-text);
    color: var(--c-text);
    background-color: var(--c-background);
}

/* Élesebb képátméretezés Chrome-ban */
@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) and (list-style-type: "*") {
    body { image-rendering: -webkit-optimize-contrast; }
}

img { border: none; }

a { color: var(--c-link); }

li { line-height: 2; }

button.plain-button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    font: unset;
    color: unset;
}

.site { background-color: var(--c-background); }

.skip-link {
    position: absolute;
    top: -200px;
    left: -9999px;
    z-index: 100;
    padding: 10px;
    background: var(--c-background);
    color: var(--c-text);
    text-decoration: none;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 20px;
    left: 20px;
}

/* ---------- Fejléc ---------- */

.site-header {
    position: relative;
    background-color: var(--c-header);
    transition: background-color 0.1s ease;
}

.site-header__bar {
    position: relative;
    max-width: 1500px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 40px;
    transition: padding 0.1s;
}

.site-logo {
    display: block;
    margin: 14px 0;
    text-align: center;
    text-decoration: none;
}

/* A logó egy szövegsorban ül: ez adja a kép alatti kis térközt. */
.site-logo__mark { display: inline-block; }

.site-logo img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 100px;
}

.site-nav {
    clear: both;
    margin: 12px -15px;
    line-height: 1;
    text-align: center;
}

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li {
    position: relative;
    display: inline-block;
    line-height: 1;
    text-align: center;
}

.site-nav a {
    display: inline-block;
    padding: 8px 15px;
    color: var(--c-menuText);
    text-decoration: none;
}

.site-nav a:hover { color: var(--c-menuHover); }

.site-nav a.is-active {
    color: var(--c-menuActive);
    font-weight: bolder;
}

.menu-toggle,
.menu-close { display: none; }

@supports not (hide-for-forced-colors) {
    .site-nav a:hover,
    .button:hover {
        transition-property: color, background-color, opacity, border-color, fill;
        transition-duration: 0.3s;
        transition-timing-function: ease;
    }
}

@media (min-width: 751px) and (min-height: 501px) {
    .site-header__bar { min-height: 74px; }
    .site-logo { margin-right: 41.6px; }
}

@media (max-width: 750px), (max-height: 500px) {
    .site-header__bar { padding-top: 45px; }
    .site-logo { margin: 0 0 25px; }
    .site-nav { margin: 0 0 5px; }
}

@media (max-width: 750px) {
    .site-header__bar { padding: 45px 20px 20px; }
}

@media (max-width: 420px) {
    .site-logo img { max-width: 220px; }
}

@media (max-width: 370px) {
    .site-logo img { max-width: 100%; }
}

/* Érintőképernyős kis kijelző: kompakt fejléc, hamburger menü.
   A .touch-nav osztályt a <head> szkriptje teszi a <html> elemre. */

@media (max-width: 750px), (max-height: 500px) {
    .touch-nav .site-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
    }

    /* A hamburger gombbal azonos széles üres hely a jobb oldalon,
       hogy a logó pontosan középre kerüljön. */
    .touch-nav .site-header__bar::after {
        content: "";
        flex: none;
        width: 55px;
        height: 55px;
        order: 2;
    }

    .touch-nav .site-header__bar.is-floating {
        position: fixed;
        z-index: 51;
        width: 100%;
        box-sizing: border-box;
        background-color: var(--c-header);
        transition: background-color 0.5s ease;
    }

    .touch-nav .site-logo {
        order: 1;
        flex: 1 1 auto;
        margin: 0;
    }

    .touch-nav .site-logo img {
        max-width: 240px;
        max-height: 32px;
    }

    .touch-nav .menu-toggle {
        display: block;
        order: 0;
        z-index: 52;
        width: 55px;
        height: 55px;
        padding: 0;
    }

    .touch-nav .menu-toggle svg {
        width: 55px;
        height: 55px;
        padding: 16px;
        box-sizing: border-box;
    }

    .touch-nav .menu-toggle svg *,
    .touch-nav .menu-close svg * {
        fill: var(--c-menuText);
        transition: fill 0.5s ease;
    }

    .touch-nav .site-nav {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -300px;
        z-index: 155;
        width: 100%;
        max-width: 430px;
        margin: 0;
        padding: 4.5em 0 0;
        overflow-y: auto;
        background-color: var(--c-header);
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
        transition: 0.2s;
    }

    .touch-nav .site-nav.is-open { left: 0; }

    .touch-nav .menu-close {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 3.5em;
        height: 3.5em;
        margin: 15px;
        padding: 0;
    }

    .touch-nav .menu-close svg {
        width: 1.5em;
        height: 1.5em;
        box-sizing: border-box;
    }

    .touch-nav .site-nav ul { padding: 15px; }

    .touch-nav .site-nav li {
        display: block;
        text-align: left;
    }

    .touch-nav .site-nav a {
        display: block;
        padding: 1em;
        line-height: 1.3;
        transition: none;
    }

    /* Ujjal koppintva nem kell fókuszkeret; Tab billentyű után megjelenik. */
    @media (pointer: coarse) {
        html:not(.keyboard-nav) a:focus-visible,
        html:not(.keyboard-nav) button:focus-visible {
            outline: none;
        }
    }
}

/* ---------- Szövegtartalom ---------- */

.prose {
    overflow-wrap: anywhere;
    line-height: 1.7;
    color: var(--c-text);
}

.prose p {
    margin-top: 0;
    margin-bottom: 1.6em;
}

.prose p:last-child { margin-bottom: 0; }

.prose b { font-weight: bold; }

.prose a { text-decoration: underline; }
.prose a:hover { text-decoration: none; }

.prose img {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

/* Címek: csak a Megjelenés menüpontban beállított méretek és színek */
.page-title,
.prose h1 {
    margin: 0 0 1.6em;
    font-size: var(--fs-h1);
    line-height: 1.7;
    font-weight: 700;
    color: var(--c-title);
    text-align: center;
}

.prose h2 {
    margin: 0 0 1em;
    font-size: var(--fs-h2);
    line-height: 1.7;
    font-weight: 700;
    color: var(--c-subtitle);
}

.prose h3 {
    margin: 0 0 1em;
    font-size: var(--fs-h3);
    line-height: 1.7;
    font-weight: 700;
    color: var(--c-subsubtitle);
}

.prose hr {
    margin: 0 0 1.6em;
}

.center { text-align: center; }

/* Középre igazított felsorolás: a lista középen, a sorok balra zárva */
.centered-list,
.center ul,
.hero__text ul {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Telefonszám-linkek a környező szöveg színével */
.prose a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
}

/* Szövegszerkesztőből beszúrt képek: igazítás és szélesség asztalon / mobilon */
.rich-img {
    height: auto;
    width: var(--w, auto);
}

.rich-img--center { margin: 0 auto; }
.rich-img--full { width: 100%; }
.rich-img--left { float: left; margin: 0 1.5em 1em 0; }
.rich-img--right { float: right; margin: 0 0 1em 1.5em; }

/* Képgaléria, árlista, GYIK képei */
.gallery-img {
    display: block;
    width: 90%;
    margin: 0 auto;
}

.prices-img {
    width: 100%;
    margin-bottom: 20px;
}

.faq-img {
    display: block;
    width: 80%;
    margin: 0 auto 3.4em;
}

/* Két hasábos elrendezés (Tájékoztató) */
.columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

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

@media (min-width: 751px) {
    .columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 750px) {
    .prose img {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .prose .rich-img { width: var(--wm, var(--w, auto)); }
    .prose .rich-img-m--left { float: left; margin: 0 1em 1em 0; }
    .prose .rich-img-m--right { float: right; margin: 0 0 1em 1em; }
    .prose .rich-img-m--center { float: none; margin: 0 auto; }
    .prose .rich-img-m--full { float: none; width: 100%; margin: 0; }
}

/* ---------- Gombok ---------- */

.buttons { padding-top: 40px; }

.button {
    display: inline-block;
    box-sizing: border-box;
    min-width: 9.7em;
    padding: 0.9em 1.45em;
    border: none;
    border-radius: 30px;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    color: var(--c-buttonText);
    background-color: var(--c-button);
}

@supports not (hide-for-forced-colors) {
    .button:hover { opacity: 0.8; }
}

.buttons .button:not(:last-child) {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Általános oldalak alján a gombsor középen */
.buttons--page {
    display: flex;
    justify-content: center;
}

.buttons--page .button { height: 50px; }

.hero .buttons .button { margin: 0 5px; }
.hero .buttons .button:not(:last-child) { margin-bottom: 10px; }

@media (max-width: 750px) {
    .button { min-width: 120px; }
}

/* ---------- Tartalmi szakaszok ---------- */

.content { background-color: var(--c-background); }

.content__inner {
    display: flow-root;
    max-width: 1500px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 40px;
}

@media (max-width: 750px) {
    .content__inner { padding: 20px; }
}

/* Kezdőlap: háttérképes, középre igazított doboz */
.hero {
    position: relative;
    z-index: 0;
}

.hero__inner {
    max-width: 1500px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 40px 40px;
}

.hero__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 43.75em;
    padding: 3.75em;
}

.hero__bg,
.hero__tint {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__bg { background: no-repeat center center / cover; }

.hero__tint {
    background-color: var(--c-heroTint);
    opacity: 0.6;
}

.hero__text {
    display: flow-root;
    box-sizing: border-box;
    min-width: 300px;
    max-width: 90%;
    text-align: center;
}

@media (max-width: 750px) {
    .hero__inner { padding: 0 20px 20px; }
    .hero__box {
        min-height: 31.25em;
        padding: 3.75em 1.25em;
    }
    .hero__text { max-width: 100%; }
}

/* ---------- Lábléc ---------- */

.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    background-color: var(--c-header);
}

.site-footer__text {
    font-size: 14px;
    color: var(--c-menuText);
    text-align: center;
}

@media (min-width: 751px) and (min-height: 501px) {
    .site-footer {
        flex-direction: row;
        align-items: flex-end;
    }
    .site-footer__text { flex: 1 1 30%; }
}

@media (max-width: 750px) {
    body { margin-bottom: 60px; }
}