/* ============================================
   LEGAL PAGES — SMARTPHONE (344px – 600px)
   Covers: privacy-policy.html, terms-of-use.html
   NOTE: footer + hero title already handled by
         drive-thru-solutions-mobile.css (loaded on both pages)
   ============================================ */

@media only screen and (min-width: 344px) and (max-width: 600px) {

    /* ============================================
       MAIN CONTENT AREA
       Inner div has inline: padding: 40px 30px
       Reduce side padding on small screens
       ============================================ */

    #main-page-content .content-row > div[style*="max-width: 900px"] {
        padding: 30px 16px !important;
    }

    /* h1 inside content (inline font-size: 36px) — fine as-is but reduce slightly */
    #main-page-content .content-row > div[style*="max-width: 900px"] h1[style*="font-size: 36px"] {
        font-size: 26px !important;
        margin-bottom: 24px !important;
        word-wrap: break-word !important;
    }

    /* h2 headings (inline font-size: 20px) — keep, just ensure wrap */
    #main-page-content .content-row > div[style*="max-width: 900px"] h2[style*="font-size: 20px"] {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    /* h3 headings (inline font-size: 18px) */
    #main-page-content .content-row > div[style*="max-width: 900px"] h3[style*="font-size: 18px"] {
        font-size: 15px !important;
    }

    /* List indentation — reduce on small screens */
    #main-page-content .content-row > div[style*="max-width: 900px"] ul[style*="margin-left: 30px"],
    #main-page-content .content-row > div[style*="max-width: 900px"] ol[style*="margin-left: 30px"] {
        margin-left: 18px !important;
    }

}