/* mobile.css */
/* Create by Claude AI */
/* DO NOT COPY WITHOUT PERMISSION */
/* Made for deverellmanning.github.io */
/* Mobile/Responsive Baseline Fixes */
/* Last Updated 5/29/2026 */


/* =========================================================
   GENERAL BASELINE — applies to all small/medium screens
   ========================================================= */

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

    /* Sidebar: hide the pull-out entirely on tablet/mobile
       since hover doesn't work reliably on touch devices */
    div.Sidebar {
        display: none;
    }

    /* Page sections: go full-width, drop heavy side padding */
    Page Section {
        width: 92%;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        --Section-Padding: 18px;
        font-size: 16px;
    }

    /* Title banner: account for reduced section padding */
    Page Section div.Title {
        width: calc(100% + var(--Section-Padding) * 2 + 4%);
        left: calc(-1 * var(--Section-Padding) - 2%);
    }

    Page Section:first-child{
    	margin-top: 4%;
    }

    Page Section div.Title h1 {
        font-size: 38px;
        margin: 18px;
    }

    Page Section div.Title h3 {
        font-size: 20px;
        margin: 12px;
    }

    /* Grid layouts: collapse to single column */
    Page Section.Col2PicLeft,
    Page Section.Col2PicRight,
    Page Section.Col3PicCent {
        display: block;
    }

    /* Images inside sections: full-width, preserve aspect ratio */
    Page Section img {
        width: 90%;
        height: auto;
        margin: 5%;
    }

    /* Tables: allow horizontal scroll instead of overflowing */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Code blocks: allow horizontal scroll, prevent text overflow */
    code, pre {
        overflow-x: auto;
        white-space: pre;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }

    /* Topbar: tighten up on smaller screens */
    div.Topbar {
        padding: 4px 8px;
    }

    div.Topbar .left,
    div.Topbar .cent,
    div.Topbar .right {
        width: 33%;
    }

    /* Footer: stack items vertically */
    Page Section.Footer,
    Page div.Footer,
    Page span.Footer {
        flex-direction: column;
        align-items: center;
    }

    Page Section.Footer img.logo {
        width: 60%;
    }

    page section.Footer quote,
    page div.Footer quote,
    page span.Footer quote {
        width: 90%;
    }

    /* Icon list: let icons wrap and center */
    div.icon-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}


/* =========================================================
   PHONE — portrait and small landscape
   ========================================================= */

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

    body {
        /* Background images are bandwidth-heavy; fall back to color on phones */
        background-image: none;
        background-color: #D0E4F5;
    }

    Page Section {
        width: 96%;
        --Section-Padding: 12px;
        font-size: 15px;
        line-height: 1.4em;
        border-radius: 3px;
    }

        Page Section:first-child{
    	margin-top: 8%;
    }

    Page Section div.Title h1 {
        font-size: 28px;
        letter-spacing: 1px;
        margin: 12px;
    }

    Page Section div.Title h3 {
        font-size: 16px;
        margin: 8px;
    }

    /* Top bar: tighten further; hide center slot if too cramped */
    div.Topbar {
        padding: 3px 6px;
        font-size: 14px;
    }

    div.Topbar .cent {
        display: none;
    }

    div.Topbar .left,
    div.Topbar .right {
        width: 48%;
    }

    /* Nav table: force full-width on phones */
    table.Nav-Table {
        width: 100%;
    }

    /* hr: full-width decorative rule */
    hr {
        width: 100%;
    }

    /* Footer logo: go bigger since we have room vertically */
    Page Section.Footer img.logo {
        width: 75%;
        margin: 5%;
    }
}


/* =========================================================
   LANDSCAPE PHONE — short viewport, wide
   ========================================================= */

@media screen and (max-height: 500px) and (orientation: landscape) {

    /* Topbar eats significant height in landscape — shrink it */
    div.Topbar {
        padding: 2px 8px;
        font-size: 13px;
    }

    Page Section:first-child {
        margin-top: 6%;
    }
}


/* =========================================================
   TOUCH — remove hover-dependent interactions
   ========================================================= */

@media (hover: none) {

    /* Table cells: skip the transition since there's no hover state */
    table td {
        transition: none;
    }

    /* Nav-Table: no hover highlights on touch */
    table.Nav-Table td:hover,
    table.Nav-Table tr:hover th:first-of-type {
        background: inherit;
        border: solid 1px var(--chromaM-L2);
    }

    /* Anchor hover glow: disable since touch taps don't linger */
    a:hover {
        text-shadow: none;
    }

    /* Icon list hover glow: same reason */
    div.icon-list img:hover {
        box-shadow: 0px 0px 8px 2px var(--chromaM-L2), inset 0px 0px 6px 4px var(--chromaM-L2);
    }
}