/* 3. MOBILE LAYOUT (Phones & Tablets under 900px) */
@media screen and (max-width: 900px) {

    body {
        font-size: 12pt !important;
    }

    /* Stack the Sidebar and Content vertically */
    #content_container {
        flex-direction: column;
    }

    /* Make Sidebar full width and reset borders */
    #page_nav_container {
        /*width: 100% !important;*/ /* Force override */
        border-right: none;
        border-bottom: 2px solid #b9953d; /* Separator line */
        padding: 15px;
        margin: 0; /* Remove margin */
    }

    /* Make Main Content full width */
    #Content {
        /*width: 100% !important;*/
        margin-left: 0 !important; /* overrides JS if it tries to run */
        border-left: none;
        padding: 10px;
    }

    /* Allow Navbar to grow taller if links wrap */
    #Header, #Navbar {
        position: relative !important;
        overflow: visible !important;
    }

        #Navbar.expanded {
            height: auto !important;
            padding-bottom: 8px;
        }

        #Navbar.collapsed {
            height: 48px !important;
            min-height: 48px !important;
            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }

    /* Show the mobile toggle */
    #nav_toggle {
        display: inline-block !important;
        visibility: visible !important;
        z-index: 100000 !important;
        min-width: 36px !important;
        min-height: 36px !important;
        line-height: 1 !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    /* Make nav links inline-block when not expanded (so they wrap nicely) */
    #Navbar a {
        font-size: 16px !important;
    }

    #Navbar > a {
        display: none !important;
    }

    /* Ensure the collapsed state truly hides links on mobile */
    #Navbar.collapsed > a {
        display: none !important;
    }

    /* When the nav is expanded show links stacked */
    #Navbar.expanded a {
        display: block;
        text-align: left;
    }

    #Navbar.expanded > a {
        display: block !important;
        text-align: left !important;
        padding: 10px 14px !important;
        line-height: 1.4 !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
        background-color: #083e6a !important;
    }

    /* Adjust Logo height for mobile */
    #Logo {
        height: 120px; /* Smaller than the desktop 250px */
        padding-bottom: 0 !important; /* remove the spacer that creates the white gap */
        background-size: contain !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }

    #LogoImg {
        max-height: 120px; /* smaller on phones */
    }

    .data_body {
        /*    margin-top: 25px;*/
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 24px;
        align-items: stretch;
        width: 100%;
        padding: 10px 0;
    }

    .data_detail {
        box-sizing: border-box;
        overflow: hidden;
        padding-left: 12px; /* reduce any internal left padding that can cause overflow */
        padding-right: 12px;
        width: 100%;
        max-width: 100%;
        scale: 0.85; /* Slightly reduce size to help fit content */
    }

        /* Stack the inner area of data_detail for small screens */
        .data_detail > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px;
        }

            /* Override inline widths (e.g. width: 10% / 90%) set in templates */
            .data_detail > div > div {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

    .data_detail_picture {
        /*        width: 100% !important;
        margin: 0 auto 8px !important;*/
        text-align: center !important;
    }

        .data_detail_picture img {
            max-width: 120px !important;
            width: 100% !important;
            height: auto !important;
            display: inline-block !important;
        }

    .data_detail_text {
        width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Make any inner tables wrap content instead of forcing width */
    .data_detail table {
        /*        width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse;*/
        display: block !important;
        width: 100% !important;
    }

    .data_detail tbody {
        display: block !important;
        width: 100% !important;
    }

    .data_detail tr {
        display: flex !important;
        /*flex-wrap: wrap !important;*/
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        border-bottom: none !important;
    }

    .data_detail td {
        display: block !important;
        width: 50% !important;
        box-sizing: border-box !important;
        padding: 6px 8px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: left !important;
    }

        /* styling for label vs value columns */
        .data_detail td:nth-of-type(2n+1) {
            font-weight: 600 !important;
            color: #191919 !important;
            /*width: 85px !important;*/
            width: 25% !important;
        }

        .data_detail td:nth-of-type(2n) {
            text-align: center !important;
            font-family: 'Roboto Mono', monospace !important;
            font-size: 11.5pt !important;
            /*            width: 150px !important;*/
            width: 75% !important;
        }

    .political_party img {
        scale: 0.75 !important;
    }

    #Footer table td {
        scale: 0.85 !important;
    }

    /* Mobile-friendly definition list layout */
    dl {
        display: block !important;
        margin: 12px 0 !important;
        padding: 0 !important;
    }

        /* Make terms and descriptions full-width stacked items */
        dl dt,
        dl dd {
            display: block !important;
            width: 100% !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 8px 12px !important; /* larger tap area */
            word-break: break-word !important;
        }

        /* Visual contrast for labels (terms) */
        dl dt {
            text-align: left !important;
            font-weight: 700 !important;
            color: #001b56 !important; /* consistent with site header/nav */
            background: transparent !important;
        }

        /* Values (descriptions) with clear separation */
        dl dd {
            padding-left: 0 !important;
            color: #222 !important;
            border-bottom: 1px solid #e6e6e6 !important;
            padding-top: 6px !important;
            padding-bottom: 10px !important;
        }

            /* Remove bottom border on last description for cleanliness */
            dl dd:last-child {
                border-bottom: none !important;
                padding-bottom: 0 !important;
            }

    /* Responsive misc-details: stack columns and make media responsive */
    #misc_details_container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        max-height: none !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

        /* Force each column to full width on narrow screens */
        #misc_details_container > div {
            width: 100% !important;
        }

    /* Make the district map fluid */
    #district_map_container {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

        /* Target the server-side Image output for the map */
        #district_map_container img {
            width: 100% !important;
            height: auto !important;
            max-height: 420px !important;
            object-fit: contain !important;
            border: 2px solid #000 !important;
            display: block !important;
            margin: 0 auto !important;
        }

    /* Remove the inline transform scale and let the chart wrapper size itself */
    #misc_details_container div[style*="transform"] {
        transform: none !important;
        transform-origin: initial !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        height: auto !important;
    }

    /* ASP.NET Chart renders an IMG; target by id fragment to make it responsive */
    img[id*="crtVote_Breakout"] {
        width: 100% !important;
        height: auto !important;
        max-width: 800px !important;
        display: block !important;
        margin: 0 auto !important;
    }
}