/* ==========================================================================
   hero-events.css
   Enfold Child Theme – Hero Header für Events, Posts, Portfolios
   PHP-Werte werden via wp_head als CSS Custom Properties gesetzt (in hero-events.php)
   ========================================================================== */

/* =========================================================
   DESKTOP-TRIM: Slider-Gap entfernen
   ========================================================= */
@media (min-width: 768px) {
    .entry-content .avia-fullwidth-slider.container_wrap.fullsize {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .entry-content {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    footer.entry-footer {
        margin-top: 0;
    }
}

/* =========================================================
   HERO-CONTAINER
   ========================================================= */
.hero-initial {
    position: relative;
    width: 100%;
    height: var(--hero-height-desktop);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% var(--hero-parallax-offset);
    margin-top: calc(-1 * var(--hero-parallax-offset));
    z-index: var(--hero-zindex);
    overflow: hidden;
    --sticky-offset-bottom: var(--hero-sticky-top);
}

/* =========================================================
   BUTTON INITIAL (im Hero, vor Sticky)
   ========================================================= */
.hero-initial .hero-cta.initial-fade {
    position: absolute;
    top: var(--hero-button-top-desktop);
    right: var(--hero-button-right-desktop);
    z-index: var(--hero-zindex-button);
    opacity: 0;
    border-radius: 50px;
    animation: heroFadeIn var(--hero-fadein-duration) var(--hero-transition-timing) var(--hero-fadein-delay) forwards;
}

/* =========================================================
   FADE-IN ANIMATION
   ========================================================= */
@keyframes heroFadeIn {
    to { opacity: 1; }
}

/* =========================================================
   BUTTON STICKY
   ========================================================= */
.hero-cta.sticky {
    position: fixed;
    top: var(--hero-sticky-top);
    right: var(--hero-button-right-desktop);
    z-index: var(--hero-zindex-button);
    transform: translateZ(0);
    border-radius: 50px;
    will-change: transform;
}

.hero-cta.fade-out {
    opacity: 0;
    animation: none;
}

/* =========================================================
   MOBILE REGELN
   ========================================================= */
@media (max-width: 767px) {

    body.av_header_transparency #main > .container_wrap_first {
        margin-top: var(--hero-main-offset-mobile);
    }

    .hero-initial {
        height: var(--hero-height-mobile);
    }

    .hero-initial h1.moved-title {
        position: absolute;
        bottom: var(--hero-title-mobile-bottom);
        left: var(--hero-title-mobile-left);
        z-index: var(--hero-title-mobile-zindex);
        margin: 0;
        color: #ffffff;
        font-size: var(--hero-title-mobile-fontsize);
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
    }

    .hero-initial .hero-cta {
        top: var(--hero-button-top-mobile);
        right: var(--hero-button-right-mobile);
    }

    .hero-cta.sticky {
        right: var(--hero-button-right-mobile);
    }

    .entry-content h1 { display: none; }
}

/* =========================================================
   DESKTOP REGELN
   ========================================================= */
@media (min-width: 768px) {

    body > header > #header_meta nav ul li a {
        color: #ffffff;
        display: inline-block;
    }

    body > header > #header_meta nav ul {
        display: block;
        float: left;
        width: auto;
        white-space: nowrap;
        line-height: 30px;
    }

    #header {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: var(--hero-header-zindex);
    }

    /* Admin-Bar-Offset wird via PHP inline gesetzt (logged-in-Kondition) */

    body.av_header_transparency #main {
        margin-top: var(--hero-main-offset-desktop);
    }

    .hero-initial h1.moved-title {
        position: absolute;
        bottom: var(--hero-title-desktop-bottom);
        left: var(--hero-title-desktop-left);
        z-index: var(--hero-title-desktop-zindex);
        margin: 0;
        color: #ffffff;
        font-size: var(--hero-title-desktop-fontsize);
        background-color: rgba(0, 0, 0, 0.5);
        padding: 7px 15px;
    }

    .entry-content h1 { display: none; }
}

/* =========================================================
   MOBILE HEADER (Burger, Nav, Adminbar)
   ========================================================= */
@media only screen and (max-width: 767px) {

    #wpadminbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%;
        z-index: var(--hero-zindex-wpadminbar);
    }

    #top #header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: var(--hero-zindex-header);
    }

    #top #header_meta {
        position: relative;
        z-index: var(--hero-zindex-header-meta);
        border-bottom: none;
    }

    #top #header_main {
        position: sticky;
        top: 0;
        z-index: var(--hero-zindex-header);
    }

    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special {
        right: calc(var(--hero-burger-right));
    }

    #top #header_meta .sub_menu a { color: #fff; }
    #top #header_meta .sub_menu .sub-menu a { color: #00af83; }
    #top #header_meta .sub_menu ul > li:last-child { padding-right: 10px; }

    /* Burger – inaktiv (weiß) */
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger:not(.av-active-burger) .av-hamburger-inner,
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger:not(.av-active-burger) .av-hamburger-inner::before,
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger:not(.av-active-burger) .av-hamburger-inner::after {
        background-color: #ffffff;
    }

    /* Burger – aktiv (grün) */
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger.av-active-burger .av-hamburger-inner,
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger--spin.is-active .av-hamburger-inner {
        background-color: #00af83 !important;
    }

    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger.av-active-burger .av-hamburger-inner::before,
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger--spin.is-active .av-hamburger-inner::before {
        background-color: #00af83;
    }

    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger.av-active-burger .av-hamburger-inner::after,
    html.responsive #top #header_main .av-burger-menu-main.menu-item-avia-special
        .av-hamburger--spin.is-active .av-hamburger-inner::after {
        background-color: #00af83 !important;
    }

    #top #header_main > div { vertical-align: top; }

    #av-burger-menu-ul { text-align: left; padding: 120px 0; }

    #av-burger-menu-ul li[role="menuitem"] { height: auto; }
    #av-burger-menu-ul li a {
        display: block;
        height: auto;
        line-height: normal;
        padding: 15px 50px 15px 50px;
        box-sizing: border-box;
    }
    #av-burger-menu-ul ul.sub-menu li a          { padding: 15px 50px 15px 70px; }
    #av-burger-menu-ul ul.sub-menu ul.sub-menu li a { padding: 15px 50px 15px 90px; }
}