/* -------------------------------------------------
   Mobile overrides for bluebonnetpups.com
   Target: screens 768px wide and smaller (phones)
   Goal:
   - Stop horizontal scrolling
   - Stack the 2 columns (main content + sidebar)
   - Make menu links finger-friendly
   - Make images shrink instead of blowing layout wide
--------------------------------------------------*/
@media screen and (max-width: 768px) {

    /* 0. Global safety: don't force desktop width on iPhone */
    html, body {
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* 1. Gantry grid system cleanup
       Your layout uses .rt-container, .rt-grid-8, .rt-grid-4, etc.
       On desktop they float and have fixed widths.
       On mobile we want full-width stacked blocks.
    */
    .rt-container,
    .rt-grid-12,
    .rt-grid-8,
    .rt-grid-4,
    #rt-main,
    #rt-main .rt-grid-8,
    #rt-sidebar-c,
    #rt-main-surround,
    #rt-header,
    #rt-showcase,
    #rt-top,
    #rt-footer,
    #rt-copyright {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box;
    }

    /* 2. Two-column area specifically:
       Left/main content is in .rt-grid-8
       Sidebar is in .rt-grid-4 (#rt-sidebar-c lives inside it)
       We force both to behave like full-width blocks, stacked.
    */
    .rt-grid-8,
    .rt-grid-4,
    #rt-sidebar-c {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 20px 0 !important;
        padding: 12px !important;
        box-sizing: border-box;
        border: 0 !important;
    }

    /* 3. Slides / showcase area
       The slideshow wrapper is #showplus_images_slides
       and internally it’s forcing width:890px;height:270px in <style>.
       On phones, that 890px is what causes the horizontal scroll.
       We override it here.
    */
    #showplus_images_slides {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 16px auto !important;
        padding: 0 !important;
        box-sizing: border-box;
        overflow: hidden !important;
    }

    #showplus_images_slides > .showplusx-slideshow {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #showplus_images_slides img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 4. Main nav at the top (inside #rt-header)
       You’ve got:
         <ul class="nav menu ">
           <li class="item-28"><a ...>Home</a></li>
           ...
       We’ll stack those links vertically and make them easy to tap.
    */
    #rt-header ul.nav.menu,
    #rt-header ul.nav.menu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    #rt-header ul.nav.menu li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid #ccc !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    /* 5. Sidebar "Main Menu" module
       That’s also a <ul class="nav menu "> list, just inside the sidebar.
       We’ll apply the same tap-friendly behavior sitewide.
    */
    .module-body ul.nav.menu,
    .module-body ul.nav.menu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .module-body ul.nav.menu li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid #ccc !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    /* Handle the nested submenu (<ul class="nav-child ...">) so it doesn't indent off-screen */
    .module-body ul.nav.menu li ul.nav-child {
        padding-left: 12px !important;
        border-left: 2px solid #ccc !important;
        margin-bottom: 8px !important;
    }

    .module-body ul.nav.menu li ul.nav-child li a {
        border-bottom: 1px solid #eee !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        padding: 8px 12px !important;
    }

    /* 6. Images in content
       Example: the <img> tags in the table with the intro text.
       We make them responsive so they don't push past screen width.
    */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 7. Tables in main content
       The homepage text is in a big <table>.
       On phones, tables love to force sideways scroll.
       We force 100% width and allow wr