/* ====================================
   SHARED MOBILE STYLES
   Add this to all pages: <link rel="stylesheet" href="mobile.css">
   ==================================== */

@media (max-width: 768px) {

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Logo size on mobile */
    .logo img,
    header img:first-of-type,
    .header img:first-of-type {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Make page layouts stack vertically */
    .page-layout,
    .content-wrapper,
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sidebar handling - hide fixed sidebars */
    .sidebar:not(.floating-sidebar),
    .toc-sidebar,
    .page-sidebar,
    .nav-sidebar {
        display: none !important;
    }

    /* Make main content full width */
    .main-content,
    .page-content,
    .content-area {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 1rem !important;
        box-sizing: border-box;
    }

    /* Headers */
    h1 {
        font-size: 1.5rem !important;
        word-wrap: break-word;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* Tables - make scrollable */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Grid layouts - single column */
    .team-grid,
    .roles-grid,
    .cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* TOC / On This Page - make horizontal scrollable or stack */
    .toc,
    .on-this-page {
        position: static !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    /* Fix text overflow */
    p,
    li,
    span {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure proper spacing at bottom */
    main,
    .content {
        padding-bottom: 5rem !important;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Form elements - prevent iOS zoom */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Cards */
    .card,
    .box,
    .panel {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    h1 {
        font-size: 1.3rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    .container,
    .content,
    main {
        padding: 0.75rem !important;
    }
}