/* ===== Camp Up — webfonty Round 8 ===== */
@font-face {
    font-family: 'round_8one';
    src: url('../fonts/round8-one-webfont.woff2') format('woff2'),
         url('../fonts/round8-one-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8two';
    src: url('../fonts/round8-two-webfont.woff2') format('woff2'),
         url('../fonts/round8-two-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8three';
    src: url('../fonts/round8-three-webfont.woff2') format('woff2'),
         url('../fonts/round8-three-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8four';
    src: url('../fonts/round8-four-webfont.woff2') format('woff2'),
         url('../fonts/round8-four-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8five';
    src: url('../fonts/round8-five-webfont.woff2') format('woff2'),
         url('../fonts/round8-five-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8six';
    src: url('../fonts/round8-six-webfont.woff2') format('woff2'),
         url('../fonts/round8-six-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8seven';
    src: url('../fonts/round8-seven-webfont.woff2') format('woff2'),
         url('../fonts/round8-seven-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'round_8eight';
    src: url('../fonts/round8-eight-webfont.woff2') format('woff2'),
         url('../fonts/round8-eight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== Pomocné třídy pro Elementor (pole "CSS Classes") ===== */

/* Box kroku se šipkou vpravo (lišta KROK 1-3 na titulce).
   Použití: na kontejner kroku přidat třídu wx-arrow-box. */
.wx-arrow-box {
    position: relative;
    border-radius: 14px 0 0 14px;
}
.wx-arrow-box::after {
    content: '';
    position: absolute;
    left: calc(100% - 1px);
    top: 0;
    bottom: 0;
    width: 26px;
    background: inherit;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Šipkový box kroků 2 a 3 — pozadí z dodané grafiky sipka.svg */
.wx-arrow-svg {
    background-image: url('/wp-content/uploads/2026/07/sipka.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100%;
}
/* na mobilu se kroky skládají pod sebe — šipka by nedávala smysl */
@media (max-width: 767px) {
    .wx-arrow-svg {
        background-image: none;
    }
}

/* Rozbalovací menu nesmí odsouvat obsah stránky (jinak web po kliku na
   hamburger „odskočí" dolů) — na desktopu ho vyjmeme z toku. */
@media (min-width: 1025px) {
    .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        position: absolute;
        right: 0;
        top: 100%;
        min-width: 300px;
        z-index: 999;
    }
}

/* Čtvercový poměr stran (obrázky karet víkendovek) */
.wx-square {
    aspect-ratio: 1 / 1;
}

/* Vlastní play tlačítko vycentrované nad fotkou */
.wx-yt-play {
    transform: translate(-50%, -50%);
}
.wx-yt-play a {
    cursor: pointer;
    display: block;
}

/* ===== Karty víkendovek — stín při najetí ===== */
.wx-card {
    transition: box-shadow .28s ease, transform .28s ease;
}
.wx-card:hover {
    box-shadow: 0 22px 45px rgba(0, 6, 60, .55);
    transform: translateY(-4px);
}

/* ===== Hero titulky — animace při načtení ===== */

/* obloha se objeví prolnutím */
.wx-sky img {
    animation: wxSkyIn 1.6s ease-in-out both;
}
@keyframes wxSkyIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* táborák: nejdřív snímek bez ohně, pak se prolne snímek s ohněm */
.wx-fire-on img {
    animation: wxFireIn 1.1s ease-in 1.5s both;
}
@keyframes wxFireIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-sky img,
    .wx-fire-on img {
        animation: none;
    }
}