/* letswatchvr.com static site — small overrides on top of bridge theme CSS */

/* ---- logo: theme hides .q_logo a until its JS runs; static has no JS, show it ----
   theme JS also sizes .q_logo a (82px at top, 50px sticky); CSS replaces that */
.q_logo a {
    visibility: visible;
    height: 82px;
}
header.sticky .q_logo a {
    height: 50px;
}

/* ---- header: transparent in flow at top; on scroll becomes fixed navy sticky bar ----
   (bridge CSS + customDesign footer.css provide the states; JS adds the classes) */
header.page_header .header_bottom,
header.page_header .logo_wrapper,
header.page_header .q_logo a,
header.page_header .q_logo img {
    -webkit-transition: height .25s ease, background-color .25s ease, box-shadow .25s ease;
    transition: height .25s ease, background-color .25s ease, box-shadow .25s ease;
}
/* mobile: solid blue bar so white logo/menu stay visible (customDesign forces transparent) */
@media only screen and (max-width: 1000px) {
    header .header_bottom {
        background-color: rgba(27, 92, 182, 1) !important;
    }
}

/* ---- legal/cookies pages: original spacing comes from per-page VC custom CSS
       (p { margin-bottom: 24px }) injected inline, exactly like the WP originals ---- */

/* ---- hero slider (replaces Revolution Slider) ---- */
.rev_slider_wrapper {
    position: relative;
    /* keep the wrapper's box (hero is absolute): banners are 1920x960 (2:1) */
    aspect-ratio: 2 / 1;
}
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
}
.hero-slider .hero-slide {
    display: none;
}
.hero-slider .hero-slide.active {
    display: block;
    animation: hero-fade .8s ease;
}
.hero-slider .hero-slide img {
    display: block;
    width: 100%;
    height: auto;
}
@keyframes hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- back to top: base rule in theme hides it (display:none), re-enable when .on ---- */
#back_to_top.on {
    display: block;
}

/* ---- cookie consent bar (replaces webtoffee widget) ---- */
#cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    font-family: Raleway, sans-serif;
}
#cookie-consent-bar #cookie-law-info-bar {
    max-width: 100%;
}
#cookie-consent-bar #cookie-law-info-bar span {
    display: block;
}
#cookie-consent-bar #cookie-law-info-bar a[role='button'] {
    text-decoration: none;
    float: none !important;
    display: inline-block !important;
    margin: 10px 8px 0 0 !important;
    vertical-align: middle;
}
#cookie-consent-bar #cookie-law-info-bar {
    overflow: auto;
}