/* cv_mobile.css - Optimized for screens up to 768px */

@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden; /* Prevent horizontal shimmy */
        overflow-y: visible !important; /* Ensure vertical scroll is "standard" */
        height: auto !important;
    }

    body {
        padding-top: 60px;
    }

    /* Reset layout containers */
    #main {
        width: 95% !important;
        margin: 10px auto !important;
        padding: 15px !important;
        font-size: 16px !important; /* Better legibility on mobile */
        line-height: 1.4 !important;
        box-shadow: none !important; /* Cleaner look for small screens */
    }

    #nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.95); /* Slight transparency looks modern */
        backdrop-filter: blur(5px); /* Blurs content behind it */
        border-bottom: 1px solid #A30000;
        padding: 0px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        /* Flexbox Magic */
        display: flex !important;
        justify-content: space-around; /* Spreads items evenly */
        align-items: center;
        height: 50px; /* Fixed height for consistency */
    }

    /* Make sure the links stay on one line to save space */
    #nav li {
        flex: 1; /* Each item takes up equal space */
        text-align: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    #nav li a {
        display: block; /* Makes the entire area clickable */
        font-size: 14px !important; /* Slightly smaller to fit all 4 comfortably */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 50px !important; /* Match the nav height to center vertically */
        font-weight: 600 !important;
        color: #A30000 !important;
        text-decoration: none;
    }

    /* Active state or Hover hint */
    #nav li a:active {
        background: rgba(163, 0, 0, 0.1);
        color: #222 !important;
    }

    /* Add some padding to the top of main so the sticky nav doesn't cover your name */
    #main {
        margin-top: 0 !important;
    }

    #nav li.gototop {
        display: none; /* Usually redundant on mobile with fast scrolling */
    }

    /* Header & Address stacking */
    h1#name {
        float: none !important;
        text-align: center;
        font-size: 32px !important;
    }

    address {
        float: none !important;
        text-align: center;
        padding: 10px 0 !important;
        font-style: normal;
    }

    /* Fix the Definition Lists (The CV meat) */
    #main dl:not(:first-of-type) {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    dt {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        margin-top: 1.5em;
        color: #A30000;
    }

    dd {
        margin: 0.2em 0 0 0 !important;
        padding-left: 15px !important;
        border-left: 2px solid #A30000 !important;
    }

    /* Responsive Images & Lightbox grids */
    ul.lightboxthing li {
        width: 45% !important; /* Side-by-side thumbnails */
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    img.scale {
        height: auto;
    }

    /* Remove absolute positioning for moar/overlays to prevent horizontal scroll */
    .js .moar {
        width: 90% !important;
        left: 5% !important;
        margin: 0 !important;
        position: fixed !important;
        top: 10% !important;
        height: auto !important;
    }

    a.anchor {
        width: 0px;
        height: 0px;
        position: absolute;
        overflow: hidden;
        margin-top: -870px;
    }
}