/* Disclosure controls are only shown on mobile when JavaScript is ready. */
.mobile-menu-toggle, .browser-toggle { display: none; }

/* The original 960px layout is kept above this breakpoint. */
@media (max-width: 959px) {
    body {
        min-width: 0;
        font-size: 16px;
        line-height: 1.6;
        overflow-wrap: break-word;
    }

    .container_12 {
        width: auto;
        margin-right: 16px;
        margin-left: 16px;
    }

    /* Reset both outer and nested columns of the old float-based grid. */
    .container_12 [class^="grid_"],
    .container_12 [class*=" grid_"] {
        box-sizing: border-box;
        display: block;
        float: none;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    img { max-width: 100%; height: auto; }
    iframe { max-width: 100%; }
    #content .post .entry-content img,
    #content .page .entry-content img { max-width: 100%; }

    #header { height: auto; margin-bottom: 24px; }
    #header .container_12 { position: relative; padding-top: 24px; }
    /* Anchor the hamburger to the whole header, not the old grid_9 column. */
    #header .container_12 > .grid_9 { position: static; }
    #logo { float: none; margin: 0 0 16px; }
    .mobile-enhanced #logo { margin-right: 60px; }
    .mobile-enhanced .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 24px;
        right: 0;
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 10px;
        background: #ff4a4a;
        color: #fff;
        border-radius: 2px;
    }
    .hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
    }
    .hamburger-icon { position: relative; }
    .hamburger-icon::before, .hamburger-icon::after { content: ''; position: absolute; left: 0; }
    .hamburger-icon::before { top: -7px; }
    .hamburger-icon::after { top: 7px; }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon { background: transparent; }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::before { top: 0; transform: rotate(45deg); }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::after { top: 0; transform: rotate(-45deg); }
    .navigation { float: none; margin: 0; font-size: 16px; }
    .mobile-enhanced .navigation { display: none; }
    .mobile-enhanced .navigation.is-open { display: block; }
    .navigation > ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    .mobile-enhanced .navigation > ul { display: block; }
    .navigation ul li { float: none; padding-left: 0; }
    .navigation ul a { padding: 7px 0; line-height: 30px; }

    /* Nested links stay accessible without a mouse or a hover-only menu. */
    .navigation ul li ul,
    .navigation ul li:hover ul,
    .navigation ul li.sfHover ul,
    .navigation ul li li:hover ul,
    .navigation ul li li.sfHover ul {
        position: static;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        padding: 0 0 0 12px;
    }

    .page-title { font-size: 24px; line-height: 1.4; }
    span.callus,
    h3 a.back-to-homepage { display: block; float: none; margin-top: 10px; }
    span.callus { font-size: 20px; }
    h3 a.back-to-homepage { font-size: 16px; }

    /* gridnav writes absolute positions and hides items with inline styles.
       On small screens show every item in normal flow, also after resizing. */
    #featuredCars_tj_container,
    #featuredCars_tj_container .tj_wrapper,
    #content .custom-post-type .auto-photos,
    #content .custom-post-type .auto-photos .post-thumbs .thumb-container {
        box-sizing: border-box;
        width: 100%;
        height: auto;
    }
    #featuredCars_tj_container .tj_gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    #featuredCars_tj_container .tj_gallery > li,
    #content .auto-photos .tj_gallery > li {
        position: static !important;
        display: block !important;
        float: none !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
    }
    #featuredCars_tj_container .tj_gallery > li { width: 100%; }
    #featuredCars_tj_container .tj_gallery img { display: block; width: 100%; }
    #featuredCars h5 { font-size: 16px; padding: 0; }
    #featuredCars .tj_nav,
    #content .auto-photos .tj_nav { display: none; }
    #content .custom-post-type .auto-photos .post-image { margin-bottom: 16px; }
    #content .auto-photos .post-image img { display: block; width: 100%; }
    #content .custom-post-type .auto-photos .post-thumbs .thumb-container { padding: 12px; }
    #content .auto-photos .tj_gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 12px;
    }
    #content .auto-photos .tj_gallery img { display: block; width: 100%; }

    #browser-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 20px;
        align-items: start;
    }
    #browser-options::after { display: none; }
    #browser-options > .browser-cat { display: contents; }
    #browser-options .browser-parameter { min-width: 0; }
    #browser-options .browser-parameter ul { margin-bottom: 0; }
    .mobile-enhanced .browser-title { display: none; }
    .mobile-enhanced .browser-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 12px;
        text-align: left;
        font: inherit;
        /* Override the old theme's !important white button text, also on hover. */
        color: #222 !important;
        background: #f2f2f2;
    }
    .browser-toggle .disclosure-icon { font-size: 24px; line-height: 1; }
    .mobile-enhanced #browser-options { display: none; }
    .mobile-enhanced #browser-options.is-open { display: grid; }
    .mobile-menu-toggle:focus-visible, .browser-toggle:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
    #browser .browser-cat a { display: inline-block; padding: 7px 0; }
    #browser ul.by-year li { float: none; width: auto; margin-right: 0; }

    #sidebar { width: 100%; margin: 32px 0 0; }
    #homeSearch { box-sizing: border-box; margin-top: 16px; padding: 16px; }
    input[type="text"], input[type="password"], select, textarea {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 44px;
        font-size: 16px;
        line-height: 1.5;
        padding: 8px;
    }
    /* Style the popup entries explicitly as well as the closed select. */
    #homeSearchForm select,
    #homeSearchForm select option,
    #homeSearchForm select optgroup {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.6;
        color: #222;
        background-color: #fff;
    }
    #homeSearchForm select { min-height: 48px; }
    #homeSearchForm select option { padding: 10px 12px; }
    #homeSearchForm select:disabled { color: #666; background-color: #f2f2f2; }
    #homeSearchForm input[type="text"] { width: calc((100% - 44px) / 2); }
    #homeSearchForm span.to { box-sizing: border-box; width: 44px; padding: 8px 0; text-align: center; }
    input[type="submit"], button, .button { min-height: 44px; max-width: 100%; font-size: 16px; white-space: normal; }
    .step-form, .step-form-wrap .step { width: 100%; }
    .step-form-wrap { float: none; margin: 16px 0; }
    #contactForm textarea { width: 100%; }
    /* The standard CAPTCHA is 304px wide; allow it to scroll on 320px phones. */
    #recaptcha_container { max-width: 100%; overflow-x: auto; }

    .listing .custom-post-type { float: none; width: 100%; }
    .listing .custom-post-type > .grid_3 { margin-bottom: 16px; }
    .listing .custom-post-type img { width: 100%; }
    .listing .custom-post-type ul.price { margin-top: 12px; }
    .listing .custom-post-type ul.price li { font-size: 20px; font-weight: 600; }
    .listing .custom-post-type ul.features,
    #content .custom-post-type .seller-info ul { float: none; }
    .listing .custom-post-type ul.features li,
    #content .custom-post-type .seller-info ul li { float: none; display: flow-root; }
    .listing span.state,
    .seller-info span.state { width: auto !important; }
    #content .custom-post-type .seller-info ul li span.state { float: none; }
    h4 span.price-detail { display: block; float: none; margin-top: 8px; }
    #content .custom-post-type .auto-features { box-sizing: border-box; width: 100%; }
    #content .custom-post-type .auto-features ul { float: none; }
    #content .custom-post-type .auto-features ul li { float: none; display: flow-root; text-align: left; }
    #content .custom-post-type .auto-features ul li span { width: 60%; }
    #content .dox_pager { box-sizing: border-box; width: 100%; height: auto; padding: 0; }
    #content .dox_pager a { display: inline-block; min-height: 44px; line-height: 44px; }
    #content .dox_pager span { width: auto; margin-right: 12px; }

    #footer .widget { margin-bottom: 28px; }
    #footer .dox_wid_show_posts h5,
    #sidebar .dox_wid_show_posts h5 { font-size: 16px; }
    #footer .dox_wid_browse_autos ul li { width: calc(50% - 20px); }
    #footer .dox_wid_browse_autos a { display: inline-block; padding: 7px 0; }
    #footer-contact-info ul li { display: block; height: auto; margin-bottom: 10px; padding-right: 0; }
    #footer-bottom { font-size: 14px; }
    #footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 16px; }
    #footer-bottom ul li { padding-right: 0; }
    #footer-bottom a { display: inline-block; padding: 7px 0; }
    #footer-bottom .footer-notice { float: none; text-align: left; margin-top: 16px; }
}

@media (max-width: 479px) {
    #featuredCars_tj_container .tj_gallery { grid-template-columns: minmax(0, 1fr); }
}