/* --- mobile.css: Global Mobile Optimizations & Form Enhancements --- */

/* Ensure horizontal scroll limits exist and fix paint issues on iOS */
body {
    overflow-x: hidden;
    background-attachment: scroll !important; /* fixes iOS lag with fixed backgrounds */
}

/* Base Typography & Tap Targets */
button, input, select, textarea, .btn, .nav-menu a {
    min-height: 44px; /* Apple UI Guideline touch target size */
}

input, select, textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
}

/* ── Hero Section ── */
@media (max-width: 768px) {
    .hero {
        padding: 80px 15px;
    }
    .main-heading {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
        line-height: 1.2;
    }
    .subtitle {
        font-size: clamp(1rem, 4vw, 1.4rem) !important;
    }
    /* Reduce size of background orbs to prevent horizontal layout break */
    .hero::before, .hero::after {
        width: 250px;
        height: 250px;
    }
    .hero::before { left: -100px; top: -50px; }
    .hero::after { right: -100px; bottom: -50px; }
}

/* ── Navigation Menu (Mobile) ── */
@media (max-width: 768px) {
    .nav-brand h2 {
        font-size: 1.5rem;
    }
    .nav-toggle {
        display: block !important;
    }
    .nav-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(15px);
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        border-bottom: 1px solid rgba(124,58,237,0.35);
        gap: 0 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .nav-menu.open {
        max-height: 400px; /* enough to show all links */
        padding: 1rem 0;
    }
    .nav-menu a {
        padding: 15px 20px !important;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .nav-menu a:last-child {
        border-bottom: none;
    }
    .nav-register-pill {
        margin: 15px auto !important;
        display: block;
        width: max-content;
    }
}

/* ── Generic Sections & Padding ── */
@media (max-width: 768px) {
    .upcoming-events, .past-events, .highlights-section, 
    .partners-section, .ongoing-events-section,
    .mission-section, .vision-section {
        padding: 40px 15px !important;
        margin: 20px 10px !important;
        border-radius: 12px !important;
    }
    
    .upcoming-events h2, .past-events h2,
    .highlights-section h2, .partners-section h2,
    .content-wrapper h1, .content-wrapper h2,
    .page-header h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        margin-bottom: 2rem !important;
    }
}

/* ── Contact Page ── */
@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 15px;
    }
    .contact-form-section {
        padding: 2rem 1.5rem !important;
    }
}

/* ── Footer ── */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
        padding: 0 20px;
    }
    .footer-section h3 {
        margin-bottom: 1rem !important;
    }
    .social-icons {
        justify-content: center !important;
    }
}

/* ── User Panel / Admin Grids ── */
@media (max-width: 600px) {
    .registrations-grid, .registrations-modern-grid {
        grid-template-columns: 1fr !important;
    }
    .registration-card, .registration-modern-card {
        margin: 0 10px;
    }
    .card-actions {
        flex-direction: column;
    }
    .btn-action {
        width: 100%;
        justify-content: center;
        padding: 12px !important;
    }
}

/* ── Form Optimizations ── */
@media (max-width: 768px) {
    .registration-form {
        padding: clamp(1.2rem, 5vw, 2.5rem) !important;
        border-radius: clamp(12px, 3vw, 20px) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    }
    .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 6px;
    }
    .form-row {
        flex-direction: column;
        margin: 0 !important;
    }
    .form-col {
        padding: 0 !important;
        width: 100% !important;
    }
    .reg-type-toggle {
        flex-direction: column;
    }
    .btn-register-hub, .btn-submit {
        width: 100%;
        text-align: center;
        min-height: 56px;
    }
    #totalPriceDisplay, .total-price {
        font-size: 1.15rem !important;
        padding: 12px 16px !important;
        border-radius: 10px;
    }
    
    /* Participant Cards (NSO) */
    .participant-card {
        border-radius: 10px !important;
        margin-bottom: 1.2rem !important;
    }
    .participant-card-header {
        font-size: 1rem !important;
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    .participant-card-body {
        padding: 14px !important;
    }
}

/* ── Segment Cards ── */
@media (max-width: 600px) {
    .segment-groups {
        flex-direction: column !important;
    }
    .segment-card {
        width: 100% !important;
        margin-bottom: 12px;
    }
    .segment-card-header {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Action Buttons (top of form) */
@media (max-width: 576px) {
    .action-buttons-right {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
    }
    .action-buttons-right a, .action-buttons-right button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center;
    }
}

/* ── Hub Event Cards ── */
@media (max-width: 600px) {
    .event-hub-grid, .events-container, .events-grid {
        grid-template-columns: 1fr !important;
    }
    .event-hub-card, .event-card {
        border-radius: 10px !important;
        margin: 0 auto;
    }
}

/* Enhance Focus States for Modern Feel */
.form-control:focus, input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15) !important;
}

/* Payment Instructions Mobile Tweaks */
@media (max-width: 480px) {
    .payment-instructions, div[style*="background:#f1f5f9"] {
        font-size: 0.88rem !important;
        padding: 12px !important;
        word-break: break-word;
    }
    .payment-instructions img {
        max-width: 100% !important;
        height: auto;
    }
}