/* ============================================================
   Spectre Mobile/Responsive Overrides
   Loaded AFTER skin.css to override fixed-width Nova layout
   on tablets and phones.
   ============================================================ */

/* Tablet and below */
@media (max-width: 1000px) {
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px;
        box-sizing: border-box;
    }
    #head {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px auto !important;
        height: auto !important;
        min-height: 60px;
    }
    #body {
        background-size: 100% auto !important;
        background-position: top center !important;
        margin: 0 0 1em 0 !important;
    }
    #upper-body {
        height: auto !important;
        min-height: 80px;
        padding-top: 12px;
    }
    #menu {
        margin-top: 50px !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    /* Stack nav items vertically on small screens */
    #menu .nav-main ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    #menu .nav-main ul li {
        float: none !important;
        flex: 1 1 auto;
        margin: 0 !important;
    }
    #menu .nav-main ul li a {
        display: block !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
        text-align: center;
    }
}

/* Phone and below — move sidebar below content, full width */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    /* .nav-sub mobile handled by spectre-mobile.css hamburger drawer */

    /* Content takes full width since sidebar dropped down */
    .content {
        width: 100% !important;
        margin-right: 0 !important;
        padding: 0.8em !important;
        box-sizing: border-box;
    }

    /* Sign-in container */
    .signin-container {
        position: static !important;
        float: none !important;
        text-align: center !important;
        padding: 8px !important;
        margin-top: 0 !important;
    }
    .signin {
        display: inline-block !important;
        padding: 6px 14px !important;
        font-size: 0.8rem !important;
    }

    /* Page headings smaller */
    h1.page-head { font-size: 1.4rem !important; }
    h2.page-subhead { font-size: 1.1rem !important; }

    /* Tables: convert to stacked cards */
    table {
        font-size: 0.85rem;
    }
    th, td {
        padding: 6px 4px !important;
    }

    /* Forms: stack labels above inputs */
    .kbd-form p,
    .post-form p {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .kbd-form kbd,
    .post-form kbd {
        text-align: left !important;
        min-width: 0 !important;
    }
    .kbd-form input, .kbd-form select, .kbd-form textarea,
    .post-form input, .post-form select, .post-form textarea {
        width: 100% !important;
        max-width: none !important;
    }

    /* Manifest cards: smaller, 2-up grid */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .crew-card-img, .crew-card-placeholder {
        height: 140px !important;
    }
    .crew-card-name { font-size: 0.8rem !important; }
    .crew-card-position { font-size: 0.7rem !important; }

    /* Featuring banner portraits smaller */
    .portrait-img, .portrait-placeholder {
        width: 120px !important;
        height: 152px !important;
    }
    .portrait-wrap { width: 120px !important; }
    .featuring-portraits { gap: 12px !important; }

    /* Post nav buttons stack on mobile */
    .post-nav-bar {
        flex-direction: column !important;
    }
    .post-nav-btn, .post-nav-btn.post-nav-next {
        max-width: 100% !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* Bio profile header stacks */
    .bio-profile-header {
        flex-direction: column !important;
    }
    .bio-profile-image img {
        max-width: 100% !important;
    }

    /* Audit log entries readable on phone */
    .audit-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    /* Welcome page mission banner */
    .main-mission-banner img,
    .featuring-mission-img {
        height: auto !important;
        max-height: 200px !important;
    }
}

/* Very small phones (iPhone SE etc) */
@media (max-width: 380px) {
    .cards-grid {
        grid-template-columns: 1fr !important;
    }
    .crew-card-img, .crew-card-placeholder {
        height: 200px !important;
    }
    .nav-sub ul {
        grid-template-columns: 1fr !important;
    }
    #menu .nav-main ul li a {
        font-size: 0.78rem !important;
        padding: 6px 8px !important;
    }
}