/* ============================================================
   DR CHARMAINE ELLIOTT: UNIVERSAL MOBILE RESPONSIVENESS PATCH
   ============================================================ */

/* 1. ROOT & CONTAINER STABILITY */
:root {
    --side-padding: 2rem;
}

.container, .header-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
    box-sizing: border-box !important;
}

/* 2. GLOBAL MOBILE OVERRIDES (Viewport < 768px) */
@media (max-width: 768px) {
    
    /* Typography Scaling */
    h1, .hero-title {
        font-size: clamp(2.2rem, 10vw, 3rem) !important; /* Prevents 5.5rem breakage */
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    h2, .section-title {
        font-size: 1.8rem !important;
    }

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

    p, .hero-content p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }

    .meta-tag {
        font-size: 0.6rem !important;
        letter-spacing: 0.2em !important;
    }

    /* Grid & Layout Stacking */
    .vault-grid, 
    .footer-grid, 
    .mandate-grid, 
    .protocol-grid, 
    .range-grid,
    .variable-grid,
    .module-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    /* Ledger & Row Fixes */
    .vault-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 2.5rem 0 !important;
        gap: 1rem !important;
        text-align: left !important;
    }

    .vault-action {
        text-align: left !important;
        margin-top: 0.5rem !important;
    }

    /* Mandate Index Bar (Horizontal Swipe) */
    .mandate-index-bar {
        top: 5.5rem !important; /* Adjust based on firm-header height */
    }

    .index-inner {
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Allows Principal to swipe through mandates */
        justify-content: flex-start !important;
        padding-bottom: 0.75rem !important;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem !important;
    }

    .index-link {
        white-space: nowrap !important;
        font-size: 0.55rem !important;
        letter-spacing: 0.1em !important;
    }

    /* Form & Profile Adjustments */
    .triage-form, .variable-box, .mandate-card {
        padding: 2.5rem !important;
    }

    .profile-container {
        margin-top: -6rem !important; /* Pulls profile up slightly less on mobile */
    }

    .profile-container > div {
        padding: 3rem !important;
    }

    .profile-container div[style*="display: grid"] {
        display: flex !important;
        flex-direction: column-reverse !important; /* Places text above image for better flow */
        gap: 3rem !important;
    }

    /* Footer Legal Alignment */
    .container[style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

    /* Navigation button alignment */
    .firm-header {
        padding: 1.5rem 0 !important;
    }

    /* Ensure images never overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 3. ADDITIONAL POLISH FOR SMALL PHONES (< 480px) */
@media (max-width: 480px) {
    :root {
        --side-padding: 1.5rem;
    }
    
    .hero-visual, .hero-visual-private {
        padding: 10rem 0 12rem 0 !important;
    }
}