/* Wrapper for the fixed banner */
.c2-banner-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%); /* start fully above the viewport */
    z-index: 9999;
    overflow: hidden;
    display: inline-block;
    animation: c2BannerSlideDown 0.7s ease-out forwards;
}

/* Make the clickable area fill the wrapper */
.c2-banner-wrapper .c2-banner-link {
    display: block;
    height: 100%;
}

/* Image scales by height, width follows image aspect ratio automatically */
.c2-banner-wrapper img {
    display: block;
    height: 100%;
    width: auto;
}

/* Slide in from above, stop exactly at the top edge */
@keyframes c2BannerSlideDown {
    0% {
        transform: translate(-50%, -100%);
    }
    100% {
        transform: translate(-50%, 0);
    }
}

/* ===== Banner variant INSIDE the hamburger menu (cloned via JS) ===== */
/* Geometry / layout only – NO visibility here */
.c2-banner-wrapper.c2-banner-in-menu {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    animation: none;
    z-index: auto;

    /* keep same height as original via inline style */
    width: auto;
    max-width: none;
    margin: 1rem auto;
    align-self: center; /* plays nice with flex containers */
}

/* In the menu, keep aspect ratio: height controls width */
.c2-banner-wrapper.c2-banner-in-menu img {
    height: 100%;
    width: auto;
}

/* ===== Visibility rules ===== */

/* When "inside burger" mode is enabled:
   - Hide the menu clone by default (both desktop & mobile) */
body.c2-banner-in-nav-mobile .c2-banner-wrapper.c2-banner-in-menu {
    display: none;
}

/* When nav is actually in burger mode (hamburger visible via JS):
   - Hide the fixed banner */
body.c2-banner-in-nav-mobile.c2-nav-is-burger .c2-banner-wrapper:not(.c2-banner-in-menu) {
    display: none;
}

/* When nav is in burger mode:
   - Show the clone inside the menu */
body.c2-banner-in-nav-mobile.c2-nav-is-burger .c2-banner-wrapper.c2-banner-in-menu {
    display: inline-block;
}