/* ============================================
   KADOHR - RESPONSIVE STYLESHEET
   Mobile-first enhancements, landscape, tablets
   ============================================ */

/* ---------- SMALL PHONES (< 360px) ---------- */
@media (max-width: 359px) {
    :root {
        --kd-nav-height-mobile: 56px;
    }
    
    .hero__title { font-size: 2rem !important; }
    .hero__subtitle { font-size: 0.9rem !important; }
    
    .profile-card__name { font-size: var(--kd-text-lg); }
    .profile-card__content { padding: var(--kd-space-4); padding-top: 48px; }
    
    .swipe-actions { gap: var(--kd-space-2); }
    .btn-icon { width: 48px; height: 48px; font-size: 1.25rem; }
    
    .card-stack { height: 460px; }
    
    .nav-label { font-size: 0.6rem; }
    .nav-link { min-width: 48px; padding: var(--kd-space-1) var(--kd-space-2); }
}

/* ---------- TABLET (768px - 1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content {
        padding-left: var(--kd-space-6);
        padding-right: var(--kd-space-6);
    }
    
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    
    .card-stack { max-width: 480px; height: 620px; }
    
    .chat-messages { max-width: 700px; margin: 0 auto; }
    
    .settings-section { max-width: 560px; }
}

/* ---------- LARGE DESKTOP (> 1440px) ---------- */
@media (min-width: 1440px) {
    :root {
        --kd-content-max-width: 1320px;
    }
    
    .main-content { max-width: var(--kd-content-max-width); }
    
    .features-grid { max-width: 1200px; }
    
    .card-stack { max-width: 460px; height: 600px; }
}

/* ---------- LANDSCAPE MODE (Phone Horizontal) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; padding: var(--kd-space-6) var(--kd-space-4); }
    .hero__title { font-size: 2rem; }
    
    .card-stack { height: 320px; max-width: 280px; }
    .profile-card__image { height: 60%; }
    .profile-card__content { padding-top: 32px; }
    .profile-card__bio { display: none; }
    .profile-card__tags { display: none; }
    
    .swipe-actions { margin-top: var(--kd-space-3); }
    
    .main-nav { position: fixed; top: 0; bottom: auto; border-top: none; border-bottom: 1px solid var(--kd-border-light); }
    .main-content { padding-top: calc(var(--kd-nav-height-mobile) + var(--kd-space-3)); padding-bottom: var(--kd-space-4); }
}

/* ---------- SAFE AREA (iPhone Notch / Dynamic Island) ---------- */
@supports (padding: max(0px)) {
    .main-nav {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        padding-left: max(var(--kd-space-4), env(safe-area-inset-left));
        padding-right: max(var(--kd-space-4), env(safe-area-inset-right));
    }
    
    .main-content {
        padding-left: max(var(--kd-space-4), env(safe-area-inset-left));
        padding-right: max(var(--kd-space-4), env(safe-area-inset-right));
    }
    
    .toast-container {
        top: max(var(--kd-space-4), env(safe-area-inset-top));
        right: max(var(--kd-space-4), env(safe-area-inset-right));
    }
    
    .fab-container {
        bottom: max(calc(var(--kd-nav-height-mobile) + var(--kd-space-4)), env(safe-area-inset-bottom));
    }
}

/* ---------- TOUCH DEVICE OPTIMIZATIONS ---------- */
@media (hover: none) and (pointer: coarse) {
    .btn:hover { transform: none; }
    .btn:active { transform: scale(0.96); }
    
    .card-hover:hover { transform: none; }
    
    .nav-link:hover { background: transparent; }
    .nav-link:active { background: var(--kd-border-light); }
    
    .match-card:hover { border-color: var(--kd-border-light); }
    
    /* Larger touch targets */
    .form-input, .form-textarea, .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    .chat-input-area .form-input { min-height: 48px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .float-orb { display: none; }
    
    .global-loader .loader-pulse::before { animation: none; }
    .loader-logo { animation: none; }
}

/* ---------- DARK MODE SUPPORT (System Preference) ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --kd-bg: #0F0F1A;
        --kd-surface: #1A1A2E;
        --kd-surface-elevated: #252540;
        --kd-border: #2D2D4A;
        --kd-border-light: #252540;
        --kd-text: #F1F1F4;
        --kd-text-secondary: #9CA3AF;
        --kd-text-muted: #6B7280;
    }
    
    .main-nav {
        background: rgba(26, 26, 46, 0.92);
        border-color: var(--kd-border);
    }
    
    .auth-overlay { background: rgba(15, 15, 26, 0.9); }
    
    .form-input, .form-textarea, .form-select {
        background: var(--kd-surface-elevated);
        border-color: var(--kd-border);
        color: var(--kd-text);
    }
    
    .feature-card, .settings-group, .match-card {
        background: var(--kd-surface);
        border-color: var(--kd-border);
    }
    
    .filter-bar { background: var(--kd-surface); }
    .filter-chip { background: var(--kd-border); }
    
    .profile-card__content {
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
    }
}

/* ---------- HIGH CONTRAST MODE ---------- */
@media (prefers-contrast: high) {
    :root {
        --kd-primary: #FF1A4C;
        --kd-text: #000000;
        --kd-border: #000000;
    }
    
    .btn-primary { border: 2px solid #000; }
    .profile-card { border: 2px solid var(--kd-border); }
}

/* ---------- PRINT (Disable everything) ---------- */
@media print {
    .main-nav, .swipe-actions, .fab-container, .auth-overlay, 
    .global-loader, .toast-container, .modal-backdrop, 
    .btn, .filter-bar { display: none !important; }
    
    .main-content { padding: 0; }
    body { background: white; color: black; }
}

/* ---------- KEYBOARD FOCUS VISIBLE ---------- */
:focus-visible {
    outline: 2px solid var(--kd-primary);
    outline-offset: 2px;
}

/* ---------- SCROLLBAR STYLING (Webkit) ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--kd-border);
    border-radius: var(--kd-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--kd-text-muted); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--kd-border) transparent; }