/* =========================================================
   KEŠET V4 – MINIMAL CLEAN
   (oblouk/sloupy/sokl + obsah + menu v oblouku + mobil roleta)
   ========================================================= */

/* základ stránky */
html, body {
    height: 100%;
}

    body.kweb-body {
        margin: 0;
        min-height: 100vh;
        background: #f1dfb5;
        position: relative;
        overflow-x: hidden;
    }

    /* ---------------------------------------------------------
   V4 proměnné – počítané z originálu 787px (motiv.jpg)
   --------------------------------------------------------- */
    body.kweb-v4 {
        --frame-w: min(1120px, 100vw);
        /* 104px sloup při 787px */
        --col-w: calc(var(--frame-w) * 104 / 787);
        /* motiv.jpg: 787 × 273 */
        --arch-h: calc(var(--frame-w) * 273 / 787);
        /* horní hlavice (lefttop/righttop) je 27px (zbytek „do 42“ je v motivu) */
        --cap-top-h: calc(var(--frame-w) * 27 / 787);
        /* spodní hlavice (leftfoot/rightfoot) je celá 42px */
        --cap-bottom-h: calc(var(--frame-w) * 42 / 787);
        /* foot.png je „tenký“ – 16px */
        --foot-h: calc(var(--frame-w) * 16 / 787);
        /* jemné překryvy (doladíš podle oka) */
        --overlap-arch: 6px;
        --overlap-foot: 12px;
        /* kde začne obsah pod obloukem */
        --content-top: calc(var(--arch-h) - var(--cap-top-h) + 26px);
    }

        /* ---------------------------------------------------------
   Dekorační frame (oblouk + sloupy + sokl)
   --------------------------------------------------------- */
        body.kweb-v4 .kweb-frame {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 40; /* dekorace NAD obsahem */
        }

        /* Oblouk */
        body.kweb-v4 .kweb-arch {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            width: var(--frame-w);
            height: var(--arch-h);
            /*background: url("../images/kweb/v3/motiv.jpg") no-repeat center top;*/
            background: url("../images/kweb/v3/motiv.png") no-repeat center top;
            background-size: 100% 100%;
            opacity: 1; /* ať nic neprosvítá */
        }

        /* Sloupy – kontejnery */
        body.kweb-v4 .kweb-col {
            position: absolute;
            width: var(--col-w);
            top: calc(var(--arch-h) - var(--cap-top-h) + var(--overlap-arch));
            bottom: calc(var(--foot-h) - var(--overlap-foot));
        }

        body.kweb-v4 .kweb-col-left {
            left: calc(50% - (var(--frame-w) / 2));
        }

        body.kweb-v4 .kweb-col-right {
            left: calc(50% + (var(--frame-w) / 2) - var(--col-w));
        }

        /* segmenty sloupu */
        body.kweb-v4 .kweb-col-top,
        body.kweb-v4 .kweb-col-body,
        body.kweb-v4 .kweb-col-bottom {
            position: absolute;
            left: 0;
            right: 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
        }

        body.kweb-v4 .kweb-col-top {
            top: 16px;
            height: var(--cap-top-h);
        }

        body.kweb-v4 .kweb-col-left .kweb-col-top {
            background-image: url("../images/kweb/v3/lefttop.png");
        }

        body.kweb-v4 .kweb-col-right .kweb-col-top {
            background-image: url("../images/kweb/v3/righttop.png");
        }

        body.kweb-v4 .kweb-col-bottom {
            bottom: 0;
            height: var(--cap-bottom-h);
        }

        body.kweb-v4 .kweb-col-left .kweb-col-bottom {
            background-image: url("../images/kweb/v3/leftfoot.png");
        }

        body.kweb-v4 .kweb-col-right .kweb-col-bottom {
            background-image: url("../images/kweb/v3/rightfoot.png");
        }

        body.kweb-v4 .kweb-col-body {
            top: var(--cap-top-h);
            bottom: var(--cap-bottom-h);
            background-repeat: repeat-y;
            background-position: center top;
            background-size: 100% auto;
        }

        body.kweb-v4 .kweb-col-left .kweb-col-body {
            background-image: url("../images/kweb/v3/leftrep.png");
        }

        body.kweb-v4 .kweb-col-right .kweb-col-body {
            background-image: url("../images/kweb/v3/rightrep.png");
        }

        /* Sokl (foot.png) */
        body.kweb-v4 .kweb-foot {
            position: fixed; /* vždy dole ve viewportu */
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: var(--frame-w);
            height: var(--foot-h);
            z-index: 90; /* úplně nahoře dole */
            pointer-events: none;
        }

        body.kweb-v4 .kweb-foot-center {
            position: absolute;
            inset: 0;
            background-image: url("../images/kweb/v3/foot.png");
            background-repeat: repeat-x;
            background-position: center bottom;
            background-size: auto 100%;
        }

        /* ---------------------------------------------------------
   Živé UI (obsah) – POD dekorací
   --------------------------------------------------------- */
        body.kweb-v4 .kweb-header {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: var(--frame-w);
            z-index: 120; /* nad dekorací */
            padding-top: 12px;
        }

            /* V4: staré horní menu pryč, necháme jen menu v oblouku */
            body.kweb-v4 .kweb-header nav {
                display: none !important;
            }

        body.kweb-v4 .kweb-main,
        body.kweb-v4 .kweb-footer {
            position: relative;
            z-index: 20; /* POD dekorací (oblouk překryje text) */
        }

        body.kweb-v4 .kweb-main {
            padding-top: var(--content-top);
            padding-bottom: calc(var(--foot-h) + 24px);
        }

        /* obsahové okno mezi sloupy */
        body.kweb-v4 .kweb-panel {
            width: calc(var(--frame-w) - (2 * var(--col-w)));
            margin: 0 auto;
            padding: 0 12px;
        }

        /* ---------------------------------------------------------
   Menu v oblouku – desktop/mobil toggle infrastruktura
   (předpoklad: .kweb-arch-nav obsahuje input#kwebNavToggle + label.kweb-burger + nav.kweb-arch-menu)
   --------------------------------------------------------- */
        body.kweb-v4 .kweb-nav-toggle {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        body.kweb-v4 .kweb-arch-nav {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            /* pro desktop to ještě upraví media query (koeficient 0,50) */
            top: calc(var(--arch-h) * 0.38 + 6px);
            width: min(640px, calc(var(--frame-w) - 80px));
            z-index: 200;
            pointer-events: auto; /* aby šlo klikat */
            box-sizing: border-box;
        }

        /* základní „plát“ + layout tlačítek */
        body.kweb-v4 .kweb-arch-menu {
            position: relative; /* kvůli pseudo „rolničkám“ */
            padding: 10px 12px;
            border-radius: 18px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            background: rgba(255,255,255,.35);
            border: 1px solid rgba(0,0,0,.10);
            backdrop-filter: blur(4px);
            box-shadow: 0 8px 24px rgba(0,0,0,.12);
        }

            body.kweb-v4 .kweb-arch-menu a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: calc((100% - 4 * 8px) / 5); /* 5 v řadě */
                max-width: 140px;
                padding: 8px 10px;
                border-radius: 12px;
                background: rgba(255,255,255,.45);
                border: 1px solid rgba(0,0,0,.12);
                text-decoration: none;
                color: #111;
            }

        body.kweb-v4 .kweb-burger {
            display: none;
        }

/* ---------------------------------------------------------
   Mobil: sloupy pryč, menu jako overlay roleta
   --------------------------------------------------------- */
@media (max-width: 720px) {
    body.kweb-v4 {
        --frame-w: 100vw;
        --col-w: 0px;
    }

        body.kweb-v4 .kweb-col {
            display: none;
        }

        body.kweb-v4 .kweb-panel {
            width: auto;
        }

        /* burger vždy nahoře vlevo */
        body.kweb-v4 .kweb-arch-nav {
            position: fixed;
            top: 10px;
            left: 10px;
            transform: none;
            width: auto;
            z-index: 500;
            padding: 0;
        }

        body.kweb-v4 .kweb-burger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 54px;
            height: 54px;
            border-radius: 16px;
            background: rgba(255,255,255,.70);
            border: 1px solid rgba(0,0,0,.15);
            box-shadow: 0 8px 24px rgba(0,0,0,.18);
            cursor: pointer;
            user-select: none;
            font-size: 28px;
            line-height: 1;
        }

        /* roleta panel */
        body.kweb-v4 .kweb-arch-menu {
            position: fixed;
            top: 76px;
            left: 12px;
            right: 12px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-10px);
            transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
            background: rgba(255,255,255,.70);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(0,0,0,.15);
            border-radius: 18px;
            box-shadow: 0 18px 50px rgba(0,0,0,.22);
            padding: 12px;
            z-index: 510;
        }

        body.kweb-v4 .kweb-nav-toggle:checked ~ .kweb-arch-menu {
            max-height: calc(100vh - 96px);
            opacity: 1;
            transform: translateY(0);
            overflow: auto;
        }

        body.kweb-v4 .kweb-arch-menu a {
            width: calc((100% - 12px) / 2);
            max-width: none;
            padding: 14px 12px;
            border-radius: 14px;
        }
}

/* ztlumení obsahu při otevřené roletě (Chrome/Edge OK) */
body.kweb-v4:has(#kwebNavToggle:checked) .kweb-main {
    filter: blur(0.6px) saturate(0.9);
    opacity: 0.85;
    pointer-events: none;
}

/* ---------------------------------------------------------
   DESKTOP: pergamenová "rulička" v oblouku (hover rozbalení)
   --------------------------------------------------------- */
@media (min-width: 721px) {

    /* koeficient 0,50 + pohodlnější hit-area */
    body.kweb-v4 .kweb-arch-nav {
        top: calc(var(--arch-h) * 0.50 + 6px) !important;
        width: min(520px, calc(var(--frame-w) - 140px)) !important;
        padding: 6px; /* hover polštář – netřese se to */
    }

    /* pergamenový plát */
    body.kweb-v4 .kweb-arch-menu {
        background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.34));
        border: 1px solid rgba(80,60,20,.18);
        box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
        /* “svitek”: zmenšený */
        max-height: 64px;
        overflow: hidden;
        transition: max-height .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease;
        transform-origin: top center;
    }

        /* jemné boční "rolničky" */
        body.kweb-v4 .kweb-arch-menu::before,
        body.kweb-v4 .kweb-arch-menu::after {
            content: "";
            position: absolute;
            top: 10px;
            bottom: 10px;
            width: 16px;
            border-radius: 999px;
            background: rgba(210,190,140,.35);
            box-shadow: inset 0 0 0 1px rgba(80,60,20,.16), 0 6px 14px rgba(0,0,0,.10);
            opacity: .75;
            pointer-events: none;
        }

        body.kweb-v4 .kweb-arch-menu::before {
            left: 10px;
        }

        body.kweb-v4 .kweb-arch-menu::after {
            right: 10px;
        }

        /* tlačítka – méně “plast”, víc pergamen */
        body.kweb-v4 .kweb-arch-menu a {
            background: rgba(255,255,255,.22) !important;
            border-color: rgba(80,60,20,.16) !important;
        }

    /* ROZVINUTÍ: najetí myší na celý blok */
    body.kweb-v4 .kweb-arch-nav:hover .kweb-arch-menu {
        max-height: 240px;
        background: linear-gradient(to bottom, rgba(255,255,255,.26), rgba(255,255,255,.46));
        box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
        transform: translateY(3px); /* lehké „sednutí“ */
        overflow: visible;
    }
}
/* ladicí rámečky */
body.kweb-v4 .kweb-arch {
    outline: 3px solid red !important;
    background-color: rgba(255,0,0,.05) !important;
}

body.kweb-v4 .kweb-col {
    outline: 2px solid lime !important;
    background-color: rgba(0,255,0,.03) !important;
}

body.kweb-v4 .kweb-foot {
    outline: 2px solid cyan !important;
    background-color: rgba(0,255,255,.03) !important;
}