/* Hidden on desktop */
#hamburger-btn {
    display: none;
}

#mobile-banner {
    display: none;
}

/* Mobile responsive overrides */
@media screen and (max-width: 768px) {
    /* Sticky header/footer layout using flexbox */
    html, body {
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    #container {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Sticky header */
    #header {
        flex-shrink: 0 !important;
        position: relative !important;
        width: 100% !important;
        z-index: 100 !important;
        height: auto !important;
    }

    #header img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Hamburger button */
    #hamburger-btn {
        display: block !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 200 !important;
        background: rgba(204, 102, 0, 0.9) !important;
        color: white !important;
        border: none !important;
        font-size: 24px !important;
        line-height: 1 !important;
        padding: 6px 12px !important;
        cursor: pointer !important;
        border-radius: 4px !important;
    }

    #hamburger-btn.active {
        background: rgba(153, 85, 0, 0.95) !important;
    }

    /* Menu - hidden by default, dropdown when hamburger is active */
    #menu {
        display: none !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        height: auto !important;
        background: #CC6600 !important;
        z-index: 99 !important;
        box-sizing: border-box !important;
    }

    #menu.menu-open {
        display: block !important;
    }

    #menu a {
        display: block !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        text-decoration: none !important;
        font-size: 16px !important;
        width: auto !important;
    }

    #menu a:last-child {
        border-bottom: none !important;
    }

    #menu a:hover,
    #menu a:active {
        background: #995500 !important;
        text-decoration: none !important;
    }

    /* Mobile banner - closing message under header */
    #mobile-banner {
        display: block !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        background: #996600 !important;
        color: white !important;
        padding: 8px 15px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        z-index: 98 !important;
    }

    #mobile-banner a {
        color: #FFD700 !important;
        text-decoration: underline !important;
    }

    /* Scrollable content area */
    #content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Main text area fluid */
    .text {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        float: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 10px 5px !important;
        box-sizing: border-box !important;
        left: auto !important;
        top: auto !important;
    }

    /* Hide sidebar on mobile - content is in the mobile banner */
    #notes {
        display: none !important;
    }

    /* Sticky footer */
    #footer {
        flex-shrink: 0 !important;
        width: 100% !important;
        z-index: 100 !important;
        height: auto !important;
    }

    #footer img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Tables */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    td, th {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

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

    iframe, embed, object, video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Text overflow */
    p, li, span, a, h1, h2, h3, h4, h5, h6, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* Stack layouts vertically */
    #sidebar, #left, #right,
    .sidebar, .left, .right,
    #leftcol, #rightcol, #maincol,
    .leftcol, .rightcol, .maincol {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Headings */
    h1 { font-size: 1.6em !important; }
    h2 { font-size: 1.4em !important; }
    h3 { font-size: 1.2em !important; }

    /* Hide spacer elements */
    img[width="1"], img[height="1"],
    td[width="1"], td[height="1"] {
        display: none !important;
    }

    center { text-align: left !important; }
}

/* Small phones */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px !important;
    }

    #hamburger-btn {
        font-size: 20px !important;
        padding: 4px 10px !important;
    }

    #menu a {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }

    h1 { font-size: 1.4em !important; }
    h2 { font-size: 1.2em !important; }
    h3 { font-size: 1.1em !important; }
}