/* Cross-browser reset for pixel-perfect rendering */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    border: none;
    /* Keep background centered vertically and horizontally */
    background-position: center center;
    background-repeat: no-repeat;
    /* Use cover so the image fills the viewport while maintaining aspect ratio */
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    /* Optional: uncomment to keep the background fixed during scroll
       background-attachment: fixed; */
}

/* Ensure the main page area fits within the viewport (above the fold) */
.page-root {
    min-height: 100vh; /* full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* distribute header, main, footer */
}

/* Header: keep logo scaled to viewport width */
.logo-img {
    max-width: 48vw; /* scale with viewport width */
    height: auto;
}

/* Make the video area flexible so it can shrink to fit above the fold */
/* Target the ratio inside the video column so it can shrink to fit */
.video-col > .ratio {
    /* Let the ratio element shrink if space is tight */
    flex: 1 1 auto;
    max-height: calc(100vh - 8rem); /* reserve space for header + footer */
}

/* Ensure the iframe fills the Bootstrap .ratio container exactly (prevents letterboxing/black bars) */
.ratio > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Footer: keep the button accessible and smaller on small screens */
footer a.btn {
    white-space: nowrap;
}

/* Ensure the download button sits vertically centered next to the video on large screens */
.row.align-items-center > .col-lg-auto {
    display: flex;
    align-items: center;
}

/* On small screens, ensure the button is centered under the video */
@media (max-width: 991.98px) {
    .row.align-items-center > .col-12.col-lg-auto {
        justify-content: center !important;
    }
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .logo-img { max-width: 75vw; }
    .container > .ratio { max-height: calc(100vh - 10rem); }
    footer a.btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
}

@media (max-height: 600px) {
    /* On short viewports, reduce borders and spacing so more content fits */
    iframe { border-width: 8px; border-radius: 6px; }
    header { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    footer { padding-bottom: 0.5rem; }
}

/* Replaces inline styles from HTML for better linting and separation */
.video-wrapper {
    min-height: 80vh;
}

.video-container {
    max-width: 900px;
    margin: 0 auto; /* center within the wrapper */
    overflow: hidden; /* clip any overflow */
}

.footer-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* Styling for iframe borders and transitions. The .ratio > iframe rule above handles sizing/positioning. */
.video-container {
    /* Decorative border sits on the container rather than the iframe element to avoid styling the embedded document directly */
    border-width: 16px;
    border-style: solid;
    border-color: white;
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box;
    /* Transitions for smooth changes between breakpoints */
    transition: border-width 240ms ease, border-radius 240ms ease, box-shadow 240ms ease, transform 240ms ease;
    will-change: border-width, border-radius;
}

.btn:hover {
    background-color: black !important;
    border-color: #2189FF !important;
    color: #white !important; /* Darker blue on hover */
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
    will-change: background-color, border-color, color, transform;
}

/* Mobile: reduce iframe border thickness so it fits better on small screens */
@media (max-width: 768px) {
    .video-container {
        border-width: 10px;
    }
}

/* Smooth transitions for logo and container resizing */
.logo-img {
    transition: max-width 240ms ease, transform 240ms ease;
}

.video-container {
    transition: max-width 240ms ease;
}

/* Smooth transition for button padding when switching layouts */
footer a.btn {
    transition: padding 200ms ease, transform 200ms ease;
    border: 1px solid #0A6FFD;
}

/* Respect user's preference for reduced motion: disable transitions and animations */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }
    .logo-img,
    .video-container,
    footer a.btn {
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}