/* 1GT.web.mobile.css - responsive overlay, loaded after 1GT.web.css.
   Desktop rendering untouched: every rule here applies only on small screens. */

/* mobile hamburger menu markup lives in the shared menu include;
   invisible on desktop, armed by the media query below */
.mobile-menu-toggle, .mobile-menu-button, .mobile-drawer { display: none; }

/* philosophy readmore: essay spanned the full desktop width - cap the
   column for readability (mobile keeps its own media-query padding) */
#pwrap .ptext { max-width: 900px; margin-left: auto; margin-right: auto; }

@media screen and (max-width: 700px) {

    html, body { margin: 0; padding: 0; }

    /* let stacked content flow vertically instead of table rows */
    .table-line { display: block; }
    .table-half {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 12px;
    }

    /* scale desktop display fonts down for phones */
    #gallery_controls p { font-size: 44px !important; }
    #title1 { font-size: 22px !important; }
    #title2 { font-size: 30px !important; }
    .text-notice { font-size: 40px !important; }
    .text-medium { font-size: 26px !important; }
    .text-small { font-size: 16px !important; }
    .ptitle { font-size: 26px !important; }
    .ptext { font-size: 18px !important; }

    /* philosophy full text carries 100px inline side padding */
    .ptext { padding: 0 16px 40px 16px !important; }

    /* hamburger menu replaces both nav rows (too tall / submenu always visible).
       Opens via the ☰ checkbox or #mobile-drawer URL hash. */
    #centeredmenu, #philo_menu, #philomenu { display: none !important; }
    .mobile-menu-button {
        display: block;
        width: 60%;
        margin: 12px auto;
        padding: 12px;
        background-color: #4CAF50;
        color: white;
        font-size: 18px;
        text-align: center;
        border-radius: 12px;
        cursor: pointer;
    }
    .mobile-drawer a {
        display: block;
        padding: 13px;
        font-size: 20px;
        text-align: center;
        color: #1a1a1a;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid #e0dccf;
        text-decoration: none;
    }
    .mobile-drawer .drawer-group {
        display: block;
        padding: 8px;
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #7a7466;
    }
    .mobile-menu-toggle:checked ~ .mobile-drawer,
    .mobile-drawer:target { display: block; }
    #philomenu li {
        font-size: 18px !important;
        width: auto !important;
        padding: 10px 18px !important;
    }
    /* elf pinned at 300px on homepage too - element is id=img_elf, not a class */
    #img_elf,
    #img_elf:hover,
    .img_elf,
    .img_elf:hover,
    .img_elf_scrolling {
        height: 90px !important;
        min-height: 0 !important;
    }

    /* elf chat text */
    .elf_chat { font-size: large !important; }

    /* homepage elf bubble: ~250px + xx-large font overflows phones -
       compact pill like harmony's */
    #div_elf { max-width: 92vw; }
    #button_elf_bubble {
        width: auto !important;
        max-width: 70vw;
        font-size: 14px !important;
        padding: 12px 14px;
        white-space: normal;
    }

    /* fixed-position footer overlays reading on small screens */
    #footer { position: static !important; bottom: auto !important; margin-top: 40px; }

    /* universal safety net: nothing wider than the viewport */
    img { max-width: 100% !important; height: auto !important; }
    #scw1 { max-width: 100% !important; }
}