/* ============================================================================
   IMMORTAL NEXUS - COMPREHENSIVE VIEWPORT OPTIMIZATIONS
   Complete responsive design system for all screen sizes
   ============================================================================ */

/* ============================================================================
   DESKTOP LARGE (1440px+) - Ultra-wide and 4K displays
   ============================================================================ */
@media (min-width: 1440px) {
    .container, main {
        max-width: 1400px;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 4rem;
        line-height: 1.1;
    }

    .hero p {
        font-size: 1.4rem;
        max-width: 600px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .highlight-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    .section-title h2 {
        font-size: 3.2rem;
    }

    .feature-card {
        padding: 2.5rem;
    }
}

/* ============================================================================
   DESKTOP (1200px - 1439px) - Standard desktop
   ============================================================================ */
@media (min-width: 1200px) and (max-width: 1439px) {
    .hero h1 {
        font-size: 3.5rem;
        line-height: 1.1;
    }

    .hero p {
        font-size: 1.25rem;
        max-width: 550px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    .highlight-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .section-title h2 {
        font-size: 2.8rem;
    }
}

/* ============================================================================
   LAPTOP (1024px - 1199px) - Laptop screens
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
    .container {
        padding: 0 2rem;
    }

    .hero {
        padding: 8rem 0 6rem 0;
    }

    .hero h1 {
        font-size: 3.2rem;
        line-height: 1.1;
    }

    .hero p {
        font-size: 1.2rem;
        max-width: 500px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 800px;
        margin: 0 auto;
    }

    .highlight-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .section-title h2 {
        font-size: 2.6rem;
    }

    .feature-card {
        padding: 2rem;
    }

    .highlight-item {
        padding: 1.5rem;
    }
}

/* ============================================================================
   TABLET LANDSCAPE (768px - 1023px) - iPad landscape, small laptops
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 1.5rem;
    }

    .hero {
        padding: 6rem 0 5rem 0;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.8rem;
        line-height: 1.2;
    }

    .hero p {
        font-size: 1.1rem;
        max-width: 450px;
        margin: 0 auto 2rem auto;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 1.5rem;
        justify-content: center;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .highlight-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .section-title h2 {
        font-size: 2.4rem;
    }

    .feature-card {
        padding: 1.8rem;
    }

    .feature-card h3 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .feature-card p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .highlight-item {
        padding: 1.25rem;
    }

    .highlight-item h4 {
        font-size: 1.4rem;
    }

    /* Navigation optimizations */
    .nav-links {
        gap: 1.5rem;
    }

    .nav-links a {
        font-size: 0.95rem;
    }
}

/* ============================================================================
   TABLET PORTRAIT (481px - 767px) - iPad portrait, large phones landscape
   ============================================================================ */
@media (min-width: 481px) and (max-width: 767px) {
    .container {
        padding: 0 1rem;
    }

    .hero {
        padding: 5rem 0 4rem 0;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .hero p {
        font-size: 1.05rem;
        max-width: 400px;
        margin: 0 auto 2rem auto;
        line-height: 1.6;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        max-width: 280px;
        margin: 0 auto;
    }

    .btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 400px;
        margin: 0 auto;
    }

    .highlight-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-title {
        text-align: center;
        margin-bottom: 2rem;
    }

    .section-title h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-title p {
        font-size: 1rem;
        max-width: 350px;
        margin: 0 auto;
    }

    .feature-card {
        padding: 1.5rem;
        text-align: center;
    }

    .feature-card h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .feature-card p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .highlight-item {
        padding: 1rem;
    }

    .highlight-item h4 {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .highlight-item p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Navigation becomes hamburger menu */
    .nav-links {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }
}

/* ============================================================================
   MOBILE LARGE (415px - 480px) - iPhone Plus, large Android phones
   ============================================================================ */
@media (min-width: 415px) and (max-width: 480px) {
    .hero h1 {
        font-size: 2.3rem;
        line-height: 1.2;
    }

    .hero p {
        font-size: 1rem;
        max-width: 350px;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .feature-card h3 {
        font-size: 1.4rem;
    }

    .feature-card p {
        font-size: 0.9rem;
    }
}

/* ============================================================================
   MOBILE STANDARD (375px - 414px) - iPhone standard, most Android phones
   ============================================================================ */
@media (min-width: 375px) and (max-width: 414px) {
    .container {
        padding: 0 0.875rem;
    }

    .hero {
        padding: 4rem 0 3rem 0;
    }

    /* Ensure features grid cards don't overflow */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        max-width: 100%;
    }

    /* Prevent highlight items from being too wide */
    .highlight-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.1rem;
        line-height: 1.2;
        margin-bottom: 1.25rem;
    }

    .hero p {
        font-size: 0.95rem;
        max-width: 320px;
        line-height: 1.6;
    }

    .hero-buttons {
        gap: 0.875rem;
        max-width: 260px;
    }

    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }

    .section {
        padding: 3rem 0;
    }

    .section-title h2 {
        font-size: 1.9rem;
        margin-bottom: 0.75rem;
    }

    .section-title p {
        font-size: 0.95rem;
        max-width: 300px;
    }

    .features-grid {
        gap: 1.25rem;
        max-width: 350px;
    }

    .feature-card {
        padding: 1.125rem;
    }

    .feature-card h3 {
        font-size: 1.3rem;
        margin-bottom: 0.875rem;
    }

    .feature-card p {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .highlight-item {
        padding: 0.875rem;
    }

    .highlight-item h4 {
        font-size: 1.2rem;
        margin-bottom: 0.625rem;
    }

    .highlight-item p {
        font-size: 0.875rem;
    }
}

/* ============================================================================
   MOBILE SMALL (320px - 374px) - iPhone SE, small Android phones
   ============================================================================ */
@media (max-width: 374px) {
    .container {
        padding: 0 0.75rem;
    }

    .hero {
        padding: 3.5rem 0 2.5rem 0;
    }

    .hero h1 {
        font-size: 1.9rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero p {
        font-size: 0.9rem;
        max-width: 280px;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .hero-buttons {
        gap: 0.75rem;
        max-width: 240px;
    }

    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .section {
        padding: 2.5rem 0;
    }

    .section-title {
        margin-bottom: 1.5rem;
    }

    .section-title h2 {
        font-size: 1.7rem;
        margin-bottom: 0.625rem;
    }

    .section-title p {
        font-size: 0.9rem;
        max-width: 260px;
    }

    .features-grid {
        gap: 1rem;
        max-width: 300px;
    }

    .feature-card {
        padding: 1rem;
    }

    .feature-card h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .feature-card p {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .highlight-grid {
        gap: 0.875rem;
    }

    .highlight-item {
        padding: 0.75rem;
    }

    .highlight-item h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .highlight-item p {
        font-size: 0.8rem;
        line-height: 1.5;
    }
}

/* ============================================================================
   MODAL AND OVERLAY OPTIMIZATIONS - All screen sizes
   ============================================================================ */

/* Desktop modals */
@media (min-width: 768px) {
    .modal {
        padding: 2rem;
    }

    .modal-content, .message-modal-content {
        max-width: 500px;
        padding: 2rem;
        border-radius: 12px;
    }

    .modal h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* Tablet modals */
@media (min-width: 481px) and (max-width: 767px) {
    .modal {
        padding: 1.5rem;
    }

    .modal-content, .message-modal-content {
        max-width: 90vw;
        padding: 1.5rem;
        border-radius: 10px;
    }

    .modal h3 {
        font-size: 1.4rem;
    }

    .modal input, .modal textarea {
        font-size: 1rem;
    }
}

/* Mobile modals */
@media (max-width: 480px) {
    .modal {
        padding: 1rem;
    }

    .modal-content, .message-modal-content {
        max-width: 95vw;
        width: 95vw;
        padding: 1rem;
        border-radius: 8px;
        margin: 1rem;
    }

    .modal h3 {
        font-size: 1.3rem;
        margin-bottom: 0.875rem;
    }

    .modal input, .modal textarea {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-actions .btn {
        width: 100%;
    }
}

/* ============================================================================
   FLOATING ELEMENTS OPTIMIZATIONS
   ============================================================================ */

/* Desktop floating elements */
@media (min-width: 768px) {
    .floating-buttons {
        right: 2rem;
        bottom: 2rem;
        gap: 1rem;
    }

    .show-users-btn, .theme-toggle {
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }

    /* Active users sidebar responsive styles moved to components/shared/active-users.css */
}

/* Mobile floating elements */
@media (max-width: 767px) {
    .floating-buttons {
        right: 1rem;
        bottom: 1rem;
        gap: 0.75rem;
    }

    .show-users-btn, .theme-toggle {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    /* Active users sidebar mobile styles moved to components/shared/active-users.css */
}

/* ============================================================================
   TYPOGRAPHY FINE-TUNING - Consistent scaling across all viewports
   ============================================================================ */

/* Ensure consistent line heights */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

p, span, div {
    line-height: 1.6;
}

/* Prevent text overflow on all screen sizes */
.text-container {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Ensure buttons are always touchable on mobile */
@media (max-width: 767px) {
    .btn, button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================================
   ACCESSIBILITY AND TOUCH OPTIMIZATIONS
   ============================================================================ */

/* Increase touch targets on mobile */
@media (max-width: 767px) {
    a, button, .clickable {
        min-height: 44px;
        padding: 0.75rem;
    }

    /* Ensure adequate spacing between interactive elements */
    .nav-links a + a,
    .btn + .btn,
    .feature-card + .feature-card {
        margin-top: 0.5rem;
    }
}

/* Focus states for all interactive elements */
a:focus, button:focus, input:focus, textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================================
   CRITICAL OVERFLOW PROTECTION - All screen sizes
   ============================================================================ */

/* Prevent any element from causing horizontal scroll */
/* EXCEPTION: Exclude header, navigation, and flex container elements that need precise sizing */
*:not(header):not(header *):not(.header-controls):not(.header-controls *):not(.user-menu):not(.user-menu *):not(.mobile-nav-toggle):not(.logo):not(.logo *) {
    box-sizing: border-box;
    max-width: 100%;
}

/* Ensure header elements can flex properly without width constraints */
header, header *, .header-controls, .header-controls *, .user-menu, .user-menu *, .mobile-nav-toggle, .logo, .logo * {
    box-sizing: border-box;
    /* NO max-width constraint - let flex handle sizing */
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

.container, .features-grid, .highlight-grid {
    width: 100%;
    max-width: 100%;
}

/* Ensure text never overflows */
h1, h2, h3, h4, h5, h6, p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================================================
   GRID SYSTEM IMPROVEMENTS
   ============================================================================ */

/* Ensure grids work on all screens */
.features-grid {
    display: grid;
    width: 100%;
    margin: 0 auto;
}

.highlight-grid {
    display: grid;
    width: 100%;
}

/* Ensure cards never exceed container width */
.feature-card, .highlight-item {
    max-width: 100%;
    min-width: 0; /* Allow flex items to shrink below content size */
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Reduce animations on smaller screens for better performance */
@media (max-width: 767px) {
    * {
        transition-duration: 0.2s !important;
    }

    .feature-card:hover {
        transform: none !important;
    }

    /* Reduce box shadows for better mobile performance */
    .feature-card, .highlight-item {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Optimize background images for mobile */
@media (max-width: 767px) {
    .hero {
        background-attachment: scroll !important;
    }
}