/* NO REMOVE */
.GA_app-list {
    max-width: none;
    text-align: left;
    justify-content: start;
}

.GA_app-list li {
    max-width: 180px;
    flex-basis: 180px;
}

.count-down {
    color: var(--primaryColor);
}


/* APPS MODAL — PLATFORM ICON LAYOUT Controls the spacing and size of Android, iOS, Apple TV, Fire TV, and Roku icons */
.app-list {
    max-width: none;
    justify-content: flex-start;
    gap: 12px;
}

.app-list li {
    min-width: 190px !important;
    flex-basis: 190px !important;
    max-width: 190px !important;
}

.app-list a.mobileandroid,
.app-list a.mobileios,
.app-list a.appletv,
.app-list a.firetv,
.app-list a.roku {
    display: block !important;
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto !important;

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* RESPONSIVE SIDE MENU TOGGLE Hidden on desktop and visible on smaller screens */
#menuToggle {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Show menu toggle on smaller screens */
@media screen and (max-width: 991px) {
    #menuToggle {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}


/*  GLOBAL FONT SIZE Slightly reduces regular text throughout the WebApp */
body,
p,
li,
label,
input,
textarea,
select {
    font-size: 15px !important;
}


/*  NAVIGATION AND BUTTON FONT SIZE Applies to header links, navigation, buttons, and footer menu */
header a,
nav a,
.btn,
.menu-item,
.footer-menu a {
    font-size: 15px !important;
}

@media screen and (max-width: 991px){
    #Home{
        grid-auto-rows: minmax(50dvw, auto) auto;
    }
}

@media screen and (max-width: 640px){
    #Home{
        grid-auto-rows: minmax(100dvw, auto) auto;
    }
}
/* HEADING FONT SIZES Controls H1 through H6 headings throughout the WebApp */
@media screen and (min-width: 991px){
    h1 {
        font-size: 34px !important;
    }
    
    h2 {
        font-size: 28px !important;
    }
    
    h3 {
        font-size: 23px !important;
    }
    
    h4 {
        font-size: 19px !important;
    }
    
    h5 {
        font-size: 17px !important;
    }
    
    h6 {
        font-size: 15px !important;
    }
}


/* DESCRIPTION AND METADATA FONT SIZE Applies to video descriptions, channel descriptions, metadata, and similar supporting text */
.description,
.video-description,
.channel-description,
.media-description,
.metadata,
.meta-data {
    font-size: 15px !important;
}

/* APPS BANNER — JAVASCRIPT-INJECTED VERSION Styles an .apps-banner element if one is added through HTML or JavaScript */
.apps-banner {
    width: 100%;
    margin: 0 0 24px;
    text-align: center;
}

.apps-banner img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .apps-banner {
        margin-bottom: 16px;
    }
}

/* APPS BANNER — CSS PSEUDO-ELEMENT VERSION Displays apps-banner.jpg above the platform icons */
.app-list::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1774 / 887;
    margin: 0 0 24px;

    background-image: url("/img/apps-banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    flex-basis: 100%;
}

/* ABOUT MODAL IMAGE Makes the About image responsive and match the Apps layout */
.about-image {
    width: 100%;
    max-width: 1420px;
    margin: 24px auto 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.about-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 210px);
    margin: 0 auto;
    object-fit: contain;
}

/*  MODAL SCROLLING Allows modal content to scroll vertically when needed and prevents horizontal overflow */
.modal-content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ABOUT MODAL — RESPONSIVE ADJUSTMENTS Reduces spacing and image height on smaller screens */
@media screen and (max-width: 991px) {
    .about-image {
        margin-top: 16px;
    }

    .about-image img {
        max-height: calc(100vh - 170px);
    }
}

.foot-nav {
    text-transform: uppercase;
}



.dropdown-menu .dropdown-btn {
    anchor-name: --dropdown-anchor;
}

/* 2. Style and position the popover dropdown menu */
.dropdown-menu .dropdown-content[popover] {
    /* Attach to the anchor button */
    position-anchor: --dropdown-anchor;
    /* top: anchor(bottom); */
    position-area: bottom;
    
    /* Reset default popover styles */
    margin: 10px 0 0 0;
    border: 1px solid rgba(85, 85, 85, .3);
    border-radius: 4px;
    padding: 0;
    background-color: var(--background);
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 3. Dropdown list items formatting */
.dropdown-menu .dropdown-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 16px;
    flex-direction: column;
}
.dropdown-menu .dropdown-content ul li {
    margin: 0;
    padding: 0;
    flex: 1;
}
.dropdown-menu .dropdown-content ul li:not(:last-child) {
    border-bottom: 1px solid rgba(85, 85, 85, .3);
}
.dropdown-menu .dropdown-content a,
.dropdown-menu .dropdown-content .dropdown-item {
    display: block!important;
    padding: 8px 16px!important;
    margin: 0!important;
    width: 100%!important;
    text-align: left!important;
    color: var(--text-color)!important;
    text-decoration: none!important;
}

.dropdown-menu .dropdown-content a:hover,
.dropdown-menu .dropdown-content .dropdown-item:hover {
    opacity: 0.9;
}

/* Contact page image and social icons */
.contact-page-top {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 28px;
    text-align: center;
}

.contact-page-top img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto 22px;
    object-fit: contain;
}

.contact-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.contact-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--primaryColor);
    text-decoration: none;
    font-size: 28px !important;
}

.contact-social-links a:hover {
    opacity: 0.8;
}