/* ===== MCP PAGE — LAYOUT & MOBILE ===== */

/* Prevent page-level horizontal scroll on all browsers including iOS Safari */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ---- Two-column layout ---- */
.upload-container {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    box-sizing: border-box;
}

.upload-main {
    flex: 1;
    min-width: 0; /* prevent flex blowout */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.upload-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 1.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
}

/* ---- Override hero-upload-section for MCP (docs layout, not upload widget) ---- */
.upload-container .hero-upload-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-align: left;
}

/* ---- selfhost blocks need full width inside main ---- */
.upload-container .selfhost-content {
    max-width: 100%;
}

.upload-container .selfhost-intro {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
}

/* ---- Code blocks — scrollable, never overflow ---- */
.upload-container pre {
    overflow-x: auto;
    white-space: pre;
    max-width: 100%;
    border-radius: 8px;
    background: #f6f8fa;
    border: 1px solid #e2e8f0;
    padding: 1rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.upload-container pre code {
    white-space: pre;
    word-break: normal;
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* Sidebar pre blocks — always wrap, never overflow */
.upload-sidebar pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word;
    font-size: 0.78rem;
}

.upload-sidebar pre code {
    white-space: pre-wrap !important;
    word-break: break-all;
}

/* ---- Inline code ---- */
.upload-container code:not(pre code) {
    background: #f1f5f9;
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: 0.88em;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ---- Paragraphs ---- */
.upload-container p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---- Ordered / unordered lists ---- */
.upload-container ol,
.upload-container ul:not(.deployment-notes-list) {
    padding-left: 1.5rem;
    line-height: 1.7;
}

.upload-container li {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.deployment-notes-list {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #374151;
}

.deployment-notes-list li {
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---- Headings inside content ---- */
.upload-container .selfhost-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.upload-container .selfhost-content h4 {
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
    font-size: 1rem;
}

/* ---- Sidebar card ---- */
.cta-controls {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
}

/* ===== RESPONSIVE ===== */

/*
 * All stacking (flex-direction:column, sidebar full-width) is handled by
 * HeroSection.cshtml's own <style> block at ≤900px. Our job here is:
 *  1. Prevent any child from making the section wider than the viewport
 *  2. Make pre blocks wrap instead of overflow
 */

/* Clip horizontal overflow at the section level so nothing can push the page wider */
@media (max-width: 900px) {
    /* Outer page wrapper: border-box so padding doesn't push it wider than 100vw */
    #HeroSection {
        box-sizing: border-box;
        max-width: 100%;
    }

    .hero-section {
        overflow-x: hidden;
        box-sizing: border-box;
        max-width: 100%;
        /* Reduce excessive side padding — #HeroSection div already adds 16px each side */
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Hero image and text below the MCP content must stay within the section */
    .hero-image,
    .hero-section .subtitle,
    .hero-section .subheading {
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .upload-container {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .upload-main,
    .upload-sidebar {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Pre blocks wrap on all stacked-layout widths */
    .upload-container pre {
        white-space: pre-wrap !important;
        word-break: break-all;
        overflow-x: hidden;
    }

    .upload-container pre code {
        white-space: pre-wrap !important;
        word-break: break-all;
    }

    /* H1 too large for phone — scale down */
    .heading-xl {
        font-size: 1.6rem !important;
        line-height: 1.25;
    }
}

/* Mobile: smaller font / padding */
@media (max-width: 700px) {
    .upload-container pre {
        font-size: 0.76rem;
        padding: 0.75rem;
    }

    .upload-container .selfhost-content h3 {
        font-size: 1.05rem;
        margin-top: 1.5rem;
    }

    .upload-container .selfhost-content h4 {
        font-size: 0.95rem;
    }

    .selfhost-title {
        font-size: 1.4rem !important;
    }

    .selfhost-intro {
        font-size: 0.95rem;
    }
}

/* Small mobile */
@media (max-width: 420px) {
    .upload-container pre {
        font-size: 0.72rem;
    }

    .cta-controls {
        padding: 1rem;
    }
}