/* ============================================================
   Site-responsive.css
   
   This file is ADDITIVE - it sits on top of Site.css.
   It adds mobile/responsive behavior without modifying any
   existing styles. Removing this file restores the original
   desktop-only behavior completely.
   
   Breakpoint strategy:
     - Above 992px (Bootstrap's "lg"): site looks exactly as today
     - Below 992px: 3-column table collapses to single column,
       left column hides (replaced by hamburger menu), right
       sponsor column stacks BELOW the main content, header
       image scales, hamburger menu takes over from asp:Menu
   ============================================================ */


/* -----------------------------------------------------------
   DESKTOP DEFAULTS (>= 992px)
   These preserve the original 1000px fixed-width look.
   ----------------------------------------------------------- */

.responsive-wrapper {
    width: 100%;
}

.responsive-outer-table,
.responsive-inner-table {
    max-width: 1000px;
    width: 1000px;
    margin: 0 auto;
}

.responsive-header-img {
    width: 1000px;
    max-width: 100%;
    height: auto;
}


/* -----------------------------------------------------------
   MOBILE / TABLET (< 992px)
   This is where the responsive magic happens.
   ----------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Outer tables become full-width fluid containers */
    .responsive-outer-table,
    .responsive-inner-table {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide the left column (old sidebar nav, login, social).
       It's been replaced by the offcanvas hamburger menu. */
    .responsive-left-col {
        display: none !important;
    }

    /* Right sponsor column: STACK below main content on mobile
       instead of hiding it. Sponsors stay visible.
       Note: override the inline width="150" HTML attribute too. */
    .responsive-right-col {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        background-color: #ffffff !important;
        padding: 12px 8px !important;
        text-align: center !important;
    }

    /* On mobile, lay out sponsor logos horizontally in a wrapping
       flex row rather than the vertical stack used on desktop.
       This keeps the sponsor section from being a giant vertical
       scroll on phones. */
    .responsive-right-col .sponsor {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .responsive-right-col .sponsor tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .responsive-right-col .sponsor tr {
        display: inline-block;
        flex: 0 0 auto;
    }

    .responsive-right-col .sponsor td {
        height: auto !important;
        padding: 4px !important;
    }

    .responsive-right-col .sponsor img {
        max-width: 150px;
        height: auto;
    }

    /* Force the center content column to fill the row.
       Override the fixed 712px/862px width from Site.css. */
    .responsive-center-col,
    .MainContent,
    .MainContentNoSponsors {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        margin: 4px !important;
        display: block;
    }

    /* The table row collapses: each <td> becomes a block */
    .responsive-content-row > td {
        display: block;
        width: 100%;
    }

    /* Make the banner Telerik rotator behave on small screens.
       It still renders at 690x150 internally, but at least the
       container won't blow out the viewport. */
    .responsive-banner {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Header image scales to viewport */
    .responsive-header-img {
        width: 100%;
        height: auto;
    }

    /* Hide the asp:Image header on mobile - the Bootstrap navbar
       already shows the site name. This avoids two headers stacked.
       Comment this out if you want both. */
    .responsive-header-row {
        display: none;
    }
}


/* -----------------------------------------------------------
   MOBILE BRAND LOGO
   Logo in the top navbar and offcanvas header.
   Uses !important to win over any inline width/height that
   ASP.NET Image controls or the original Site.css may apply.
   ----------------------------------------------------------- */
.mobile-brand-logo {
    height: 40px !important;
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain;
}

.offcanvas-brand-logo {
    height: 50px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain;
}

/* On very narrow phones (< 400px), shrink further so the
   hamburger button stays visible alongside the logo. */
@media (max-width: 399.98px) {
    .mobile-brand-logo {
        height: 32px !important;
        max-width: 180px !important;
    }
}


/* -----------------------------------------------------------
   MOBILE OFFCANVAS MENU TWEAKS
   Make the slide-out menu look like the rest of the site.
   Using very high specificity (id + class + element) to win
   over Telerik stylesheets that load after this file.
   ----------------------------------------------------------- */
body div#mobileNav.offcanvas a.nav-link,
body div#mobileNav.offcanvas .nav-link {
    color: #fff !important;
    padding: 16px 14px !important;
    font-size: 20px !important;
    font-family: Verdana, Helvetica, Arial !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

body div#mobileNav.offcanvas a.nav-link:hover,
body div#mobileNav.offcanvas a.nav-link:focus {
    background-color: #000 !important;
    color: #fff !important;
}

/* The sitemap titles contain <BR /> tags - allow them to render
   as line breaks within the mobile menu links. */
.offcanvas .nav-link br {
    display: inline;
}


/* -----------------------------------------------------------
   DATA TABLE HORIZONTAL SCROLL HELPER
   
   This is OPTIONAL but very useful for your data-heavy pages.
   If you add the class "table-scroll-mobile" to any wide table
   on a content page, it will get a horizontal scrollbar on
   mobile instead of blowing out the layout.
   
   Example usage on a content page:
     <div class="table-scroll-mobile">
        <asp:GridView ... />
     </div>
   ----------------------------------------------------------- */
@media (max-width: 991.98px) {
    .table-scroll-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* -----------------------------------------------------------
   ENSURE BOOTSTRAP NAVBAR DOESN'T INHERIT WEIRD STYLES
   ----------------------------------------------------------- */
.navbar .navbar-brand {
    font-family: Verdana, Helvetica, Arial;
    font-weight: bold;
}


/* -----------------------------------------------------------
   ADMIN MASTER PAGE RESPONSIVE RULES
   The admin page is a 2-column layout (nav + content) with a
   red theme instead of gray. Same collapse-to-stack pattern.
   ----------------------------------------------------------- */

/* Desktop default for admin: keep the 1000px width */
.responsive-outer-table-admin,
.responsive-inner-table-admin {
    max-width: 1000px;
    width: 1000px;
    margin: 0 auto;
}

@media (max-width: 991.98px) {

    /* Admin tables go full-width on mobile */
    .responsive-outer-table-admin,
    .responsive-inner-table-admin {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide the admin desktop sidebar nav - hamburger replaces it */
    .responsive-admin-left-col {
        display: none !important;
    }

    /* Admin content cell takes full width */
    .responsive-admin-center-col {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px !important;
    }

    /* Stack the admin content row's cells */
    .responsive-admin-content-row > td {
        display: block;
        width: 100%;
    }

    /* Hide the giant "Administration" header on mobile -
       the red navbar already shows we're in admin. */
    .responsive-admin-header {
        display: none !important;
    }

    /* Admin content padding tightens on mobile */
    .adminmain {
        padding: 4px !important;
        margin: 0 !important;
    }
}

/* Admin offcanvas menu styling - red theme tweaks.
   Same high-specificity strategy to win over Telerik styles. */
body div#mobileNavAdmin.offcanvas a.nav-link,
body div#mobileNavAdmin.offcanvas .nav-link {
    color: #fff !important;
    padding: 14px 12px !important;
    font-family: Verdana, Helvetica, Arial !important;
    font-size: 18px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

body div#mobileNavAdmin.offcanvas a.nav-link:hover,
body div#mobileNavAdmin.offcanvas a.nav-link:focus {
    background-color: rgba(0,0,0,0.25) !important;
    color: #fff !important;
}

/* Override the .small Bootstrap class on child links */
body div#mobileNavAdmin.offcanvas a.nav-link.small {
    font-size: 16px !important;
}

.admin-menu-group-header {
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 4px;
    font-size: 16px !important;
    color: #fff;
}