/* =====================================================
   UNIVERSAL MOBILE RESPONSIVENESS FOR BARBRICKDESIGN
   Auto-included in all projects for consistent mobile UX
   ===================================================== */

/* Root Variables for Responsive Design */
:root {
    --mobile-padding: 12px;
    --tablet-padding: 20px;
    --desktop-padding: 32px;
    --touch-target-min: 44px;
    --mobile-font-size: 14px;
    --desktop-font-size: 16px;
}

/* Universal Mobile-First Base */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Mobile Viewport Fix */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%; /* Added for broader compatibility */
    font-size: var(--mobile-font-size);
}

@media (min-width: 769px) {
    html {
        font-size: var(--desktop-font-size);
    }
}

/* Responsive Container */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    padding: var(--mobile-padding);
}

@media (min-width: 769px) {
    body {
        padding: var(--tablet-padding);
    }
}

@media (min-width: 1025px) {
    body {
        padding: var(--desktop-padding);
    }
}

/* Touch-Friendly Buttons */
button, .btn, .auth-button, a.button, input[type="submit"], input[type="button"] {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 12px 20px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Touch-Friendly Input Fields */
input, textarea, select {
    font-size: 16px; /* Prevents iOS zoom */
    padding: 12px;
    border-radius: 8px;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    /* Stack navigation vertically */
    nav, .navigation {
        flex-direction: column;
        width: 100%;
    }
    
    nav a, .nav-link {
        display: block;
        width: 100%;
        padding: 15px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Fixed bottom navigation */
    .nav-bottom {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: inherit;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }
}

/* Responsive Grid */
.grid, .project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
}

@media (min-width: 600px) {
    .grid, .project-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .grid, .project-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

/* Responsive Tables */
@media (max-width: 768px) {
    table, .stat-table, .data-table {
        display: block;
        overflow-x: auto;
        width: 100%;
        max-width: 100vw;
        -webkit-overflow-scrolling: touch;
    }
    
    th, td {
        min-width: 80px;
        font-size: 14px;
        padding: 8px;
    }
    
    /* Hide less important columns on mobile */
    .hide-mobile {
        display: none;
    }
}

/* Responsive Images and Media */
img, video, canvas {
    max-width: 100%;
    height: auto;
}

/* 3D Canvas Responsiveness */
canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100vw;
}

/* Mobile Modal/Dialog */
@media (max-width: 768px) {
    .modal, .dialog, .popup {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px !important;
        padding: 15px !important;
    }
}

/* Hide Desktop-Only Elements */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Show Mobile-Only Elements */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
}

/* Responsive Typography */
h1 {
    font-size: 1.8em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media (min-width: 769px) {
    h1 {
        font-size: 2.5em;
    }
}

h2 {
    font-size: 1.5em;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media (min-width: 769px) {
    h2 {
        font-size: 2em;
    }
}

h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Prevent Text Overflow - Global Fix */
p, span, div, a, label, li, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Mobile: Force all headings to wrap properly */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* Prevent Long URLs and Emails from Overflowing */
a[href^="http"], a[href^="mailto:"] {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Code and Pre-formatted Text */
code, pre {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Mobile Card Layouts */
.card, .project-card {
    width: 100%;
    margin: 10px 0;
    padding: 15px;
}

@media (min-width: 769px) {
    .card, .project-card {
        padding: 20px;
    }
}

/* Performance Optimization for Mobile */
@media (max-width: 768px) {
    /* Disable expensive animations on mobile */
    .expensive-animation {
        animation: none !important;
        transition: none !important;
    }
    
    /* Reduce shadows */
    .shadow-heavy {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Disable background attachments */
    body {
        background-attachment: scroll !important;
    }
}

/* 3D Graphics Mobile Optimization */
@media (max-width: 768px), (max-device-width: 768px) {
    canvas, .three-js-canvas, .webgl-canvas {
        image-rendering: optimizeSpeed;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape Mode Optimization */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 10px;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    .nav-bottom {
        position: relative !important;
    }
}

/* Specific fix for .section-title on mobile - CRITICAL FIX */
@media (max-width: 768px) {
    .section-title, h2.section-title, .page-title, .title {
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 1.5em !important; /* Smaller on mobile */
        padding: 0 10px !important; /* Add padding to prevent edge touch */
        box-sizing: border-box !important;
    }
    
    /* Force any text with emojis to wrap properly */
    .section-title::before,
    .section-title::after {
        white-space: normal !important;
    }
}

/* Universal overflow fix for mobile - prevents horizontal scroll */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden;
        max-width: 100%;
        width: 100%;
        position: relative;
    }
    
    /* Prevent any container from causing horizontal scroll - but allow vertical */
    .container, .wrapper, main, section, article {
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: visible; /* Don't break vertical scrolling */
    }
    
    /* Exception: Allow horizontal scroll for specific elements that need it */
    .horizontal-scroll, .scrollable-x, .code-block, pre, code, 
    .stats-panel, .control-panel, .data-table, table {
        overflow-x: auto !important; /* Allow horizontal scroll where needed */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    }
}

/* Safe Area Insets for Notched Devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Scrollbar Styling for Mobile */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Accessibility - Focus States */
*:focus {
    outline: 2px solid #00aaff;
    outline-offset: 2px;
}

button:focus, a:focus, input:focus {
    outline: 2px solid #00aaff;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .no-print, .nav-bottom, nav, button {
        display: none !important;
    }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}