/* ========================================
   Responsive Design Styles
   Mobile First Approach
   ======================================== */

/* Base mobile styles (up to 576px) */
@media screen and (max-width: 576px) {
    /* Typography */
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    .display-4 {
        font-size: 2.2rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }

    /* Navigation */
    .navbar-brand {
        font-size: 1.2rem !important;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
    }
    
    /* Hero Sections */
    .hero, .hero-trending, .hero-generator {
        min-height: 60vh !important;
        padding: 60px 0 !important;
    }
    
    .hero h1, .hero-trending h1, .hero-generator h1 {
        font-size: 2.2rem !important;
    }
    
    .hero-icon {
        font-size: 2rem !important;
    }
    
    /* Cards */
    .category-card, .tool-card-large, .bio-card {
        padding: 20px !important;
    }
    
    .category-grid, .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Bio Cards */
    .bio-content {
        font-size: 0.95rem !important;
    }
    
    .bio-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .copy-btn {
        width: 100%;
    }
    
    /* Search Bar */
    .search-bar {
        width: 90% !important;
        margin: 1rem auto !important;
    }
    
    .search-bar input {
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Tools Section */
    .tools-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Symbol Library */
    .symbol-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .symbol-card {
        padding: 10px !important;
    }
    
    .symbol-char {
        font-size: 1.5rem !important;
    }
    
    .symbol-name {
        font-size: 0.7rem !important;
    }
    
    /* Font Converter */
    .font-preview {
        padding: 1rem !important;
    }
    
    .converted-text {
        font-size: 1.2rem !important;
        word-break: break-all;
    }
    
    /* Forms */
    .form-control, .form-select {
        font-size: 16px !important; /* Prevents zoom on mobile */
        padding: 10px !important;
    }
    
    .btn-lg {
        padding: 10px 20px !important;
        font-size: 1rem !important;
    }
    
    /* Tables & Grids */
    .table-responsive {
        font-size: 0.9rem;
    }
    
    /* Footer */
    .footer {
        padding: 3rem 0 1.5rem !important;
        text-align: center;
    }
    
    .footer h4 {
        margin-top: 20px;
    }
    
    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .footer-links li {
        margin: 0 !important;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem !important;
    }
    
    .modal-content {
        padding: 1rem !important;
    }
    
    /* Timeline */
    .timeline::before {
        left: 20px !important;
    }
    
    .timeline-item {
        padding-left: 50px !important;
    }
    
    .timeline-marker {
        left: 10px !important;
    }
    
    /* Categories Navigation */
    .category-tabs, .month-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    
    .category-tab, .month-btn {
        white-space: nowrap;
        padding: 8px 15px !important;
    }
    
    /* Designer Tools */
    .designer-layout {
        grid-template-columns: 1fr !important;
    }
    
    .designer-sidebar {
        position: static !important;
        margin-bottom: 20px;
    }
    
    /* Stats Cards */
    .stat-bubble {
        padding: 10px !important;
        min-width: 80px !important;
    }
    
    .stat-number {
        font-size: 1.2rem !important;
    }
    
    /* Quick Links */
    .quick-links-grid {
        justify-content: center;
    }
    
    .quick-link {
        width: 100%;
        justify-content: center;
    }
}

/* Tablets (576px - 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    /* Typography */
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    .display-4 {
        font-size: 2.5rem !important;
    }
    
    /* Navigation */
    .navbar-nav {
        padding: 1rem 0;
    }
    
    .nav-link {
        padding: 0.5rem 1rem !important;
    }
    
    /* Hero Sections */
    .hero, .hero-trending, .hero-generator {
        min-height: 50vh !important;
    }
    
    /* Grids */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .symbol-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Bio Cards */
    .bio-card {
        margin-bottom: 1rem;
    }
    
    /* Forms */
    .input-group-lg {
        flex-direction: column;
    }
    
    .input-group-lg > * {
        width: 100%;
        border-radius: 10px !important;
        margin: 5px 0 !important;
    }
    
    /* Sidebar */
    .designer-sidebar {
        position: static !important;
        margin-bottom: 20px;
    }
    
    .designer-layout {
        grid-template-columns: 1fr !important;
    }
    
    /* Footer */
    .footer .col-md-6 {
        margin-bottom: 20px;
    }
}

/* Small Laptops (768px - 992px) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    /* Grids */
    .category-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .symbol-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    /* Bio Cards */
    .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Sidebar */
    .designer-layout {
        grid-template-columns: 200px 1fr 200px !important;
    }
}

/* Large Laptops (992px - 1200px) */
@media screen and (min-width: 993px) and (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .symbol-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* 4K and Ultra-wide (over 1400px) */
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    h1 {
        font-size: 4rem !important;
    }
    
    .hero h1 {
        font-size: 4.5rem !important;
    }
    
    .category-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .symbol-grid {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}

/* Landscape Mode */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .hero, .hero-trending, .hero-generator {
        min-height: 100vh !important;
        padding: 100px 0 !important;
    }
    
    .navbar {
        padding: 0.5rem 0 !important;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .footer,
    .copy-btn,
    .btn,
    .social-links,
    .newsletter-form {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}

/* Accessibility - Reduced Motion */
@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;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body.dark-mode-support {
        background: #1a1a2e;
        color: #f0f0f0;
    }
    
    .dark-mode-support .card,
    .dark-mode-support .bio-card,
    .dark-mode-support .category-card,
    .dark-mode-support .tool-card-large {
        background: #16213e;
        color: #f0f0f0;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    * {
        border-color: black !important;
    }
    
    .btn,
    .copy-btn {
        border: 2px solid black !important;
    }
}

/* iPhone Notch Support */
@supports (padding: max(0px)) {
    .container,
    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
    
    .footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
}

/* Responsive Font Sizes */
@media screen and (max-width: 320px) {
    html {
        font-size: 14px;
    }
    
    .symbol-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .btn-copy-large {
        font-size: 0.9rem !important;
        padding: 10px !important;
    }
}

/* Responsive Spacing */
@media screen and (max-width: 768px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive Tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive Embeds */
iframe {
    max-width: 100%;
}

/* Responsive Flex Wrap */
.flex-responsive {
    flex-wrap: wrap;
}

/* Responsive Text Alignment */
@media screen and (max-width: 576px) {
    .text-sm-center {
        text-align: center !important;
    }
    
    .text-sm-left {
        text-align: left !important;
    }
    
    .text-sm-right {
        text-align: right !important;
    }
}

/* Responsive Display Classes */
@media screen and (max-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
    
    .d-sm-block {
        display: block !important;
    }
    
    .d-sm-flex {
        display: flex !important;
    }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
}

/* Responsive Borders */
@media screen and (max-width: 576px) {
    .border-sm-0 {
        border: 0 !important;
    }
    
    .border-sm-top {
        border-top: 1px solid #dee2e6 !important;
    }
}

/* Responsive Shadows */
@media screen and (max-width: 576px) {
    .shadow-sm-responsive {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }
}

/* Responsive Z-index management */
@media screen and (max-width: 768px) {
    .navbar {
        z-index: 1030;
    }
    
    .modal {
        z-index: 1050;
    }
    
    .dropdown-menu {
        z-index: 1040;
    }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .copy-btn,
    .category-card {
        min-height: 44px;
        min-width: 44px;
    }
    
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Responsive SVG Icons */
.icon-responsive {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Responsive loading states */
@media screen and (max-width: 576px) {
    .loading-spinner {
        width: 30px !important;
        height: 30px !important;
    }
}