/* ============================================
   WitsNSkills - Mobile Responsive CSS
   ============================================ */

/* Base mobile styles (up to 767px) */
@media (max-width: 767px) {
    
    /* Container */
    .container {
        padding: 0 16px !important;
    }
    
    /* Typography */
    h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 16px !important;
    }
    
    /* Dashboard Layout */
    .dash-header {
        padding: 20px 0 !important;
    }
    
    .dash-header h1 {
        font-size: 20px !important;
    }
    
    .dash-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Metrics Row */
    .metrics-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .metric-card {
        padding: 12px !important;
    }
    
    .metric-value {
        font-size: 18px !important;
    }
    
    /* Cards */
    .card {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    /* Assessment items */
    .assessment-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* Profile section */
    .profile-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    /* Report section */
    .career-card {
        padding: 16px !important;
    }
    
    .career-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .career-title {
        font-size: 16px !important;
    }
    
    .fit-pct {
        font-size: 24px !important;
    }
    
    .fit-bar-wrap {
        margin: 12px 0 !important;
    }
    
    /* CRI Badge */
    .cri-badge {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .cri-score {
        font-size: 36px !important;
    }
    
    /* Quick Links */
    .quick-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .quick-links a {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* Buttons */
    .btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    .btn-sm {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    /* Footer */
    .footer-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    
    .footer-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .footer-links a {
        font-size: 11px !important;
    }
    
    /* Assessment Cards Grid */
    .assessment-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Report Grid */
    .report-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Pricing Grid */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .plan-card {
        padding: 20px !important;
    }
    
    /* Hero Section */
    .hero {
        padding: 40px 0 !important;
    }
    
    .hero h1 {
        font-size: 24px !important;
    }
    
    .hero p {
        font-size: 15px !important;
    }
    
    .hero-btns {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .hero-btns .btn {
        width: 100% !important;
        max-width: 250px !important;
    }
    
    /* Hero Stats */
    .hero-stats {
        flex-direction: column !important;
    }
    
    .hero-stat {
        border-right: none !important;
        border-bottom: 0.5px solid var(--border) !important;
    }
    
    .hero-stat:last-child {
        border-bottom: none !important;
    }
    
    /* Steps Grid */
    .steps-grid {
        grid-template-columns: 1fr !important;
    }
    
    .step {
        border-right: none !important;
        border-bottom: 0.5px solid var(--border) !important;
    }
    
    .step:last-child {
        border-bottom: none !important;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Tables */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table {
        min-width: 600px !important;
    }
    
    /* Flash Messages */
    .flash {
        margin: 12px 16px !important;
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    /* Auth Card */
    .auth-card {
        padding: 24px !important;
        margin: 16px !important;
    }
    
    .auth-title {
        font-size: 20px !important;
    }
    
    /* Progress Bars */
    .progress-bar {
        height: 6px !important;
    }
    
    /* Touch targets - minimum 44px for mobile */
    a, button, .btn, .clickable {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
}

/* Tablet styles (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 0 24px !important;
    }
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .report-grid {
        gap: 24px !important;
    }
    
    .dash-grid {
        gap: 20px !important;
    }
    
    .assessment-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small phones (up to 480px) */
@media (max-width: 480px) {
    .nav-actions .btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    
    .nav-logo {
        font-size: 16px !important;
    }
    
    h1 {
        font-size: 20px !important;
    }
    
    .metrics-row {
        grid-template-columns: 1fr !important;
    }
    
    .career-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .fit-pct {
        font-size: 20px !important;
    }
    
    .cri-score {
        font-size: 32px !important;
    }
    
    .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .profile-info {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape mode fix for mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .nav-mobile-menu {
        padding: 60px 20px 20px !important;
    }
    
    .nav-mobile-menu a {
        padding: 8px 0 !important;
    }
    
    body.menu-open {
        overflow: hidden !important;
    }
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}