/* ==========================================================================
   CarePDF - Responsive & Media Queries
   ========================================================================== */

/* ==========================================================================
   1. Breakpoint Variables Reference
   - Mobile: < 480px
   - Mobile Large: 480px - 639px
   - Tablet: 640px - 767px
   - Tablet Large: 768px - 991px
   - Desktop: 992px - 1279px
   - Desktop Large: >= 1280px
   ========================================================================== */

/* ==========================================================================
   2. Container Responsive Sizes
   ========================================================================== */

@media (max-width: 1279px) {
    .container {
        padding-inline: var(--spacing-lg);
    }
}

@media (max-width: 991px) {
    .container {
        padding-inline: var(--spacing-md);
    }
}

/* ==========================================================================
   3. Typography Responsive
   ========================================================================== */

@media (max-width: 767px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: var(--text-3xl);
    }

    h2 {
        font-size: var(--text-2xl);
    }

    h3 {
        font-size: var(--text-xl);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* ==========================================================================
   4. Grid Responsive Utilities
   ========================================================================== */

@media (max-width: 991px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) {

    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   5. Display Responsive Utilities
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet and below */
@media (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   6. Spacing Responsive Utilities
   ========================================================================== */

@media (max-width: 767px) {
    .section {
        padding-block: var(--spacing-2xl);
    }

    .mb-2xl-mobile {
        margin-bottom: var(--spacing-2xl);
    }

    .mt-xl-mobile {
        margin-top: var(--spacing-xl);
    }
}

/* ==========================================================================
   7. Button Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: var(--text-sm);
    }

    .btn-lg {
        padding: 0.875rem 1.5rem;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   8. Form Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .form-control {
        padding: 0.625rem 0.875rem;
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }
}

/* ==========================================================================
   9. Card Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .card {
        padding: var(--spacing-lg);
    }
}

/* ==========================================================================
   10. Table Responsive
   ========================================================================== */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .table-responsive table {
        min-width: 600px;
    }
}

/* ==========================================================================
   11. Flex Responsive Utilities
   ========================================================================== */

@media (max-width: 767px) {
    .flex-col-mobile {
        flex-direction: column;
    }

    .items-start-mobile {
        align-items: flex-start;
    }

    .text-center-mobile {
        text-align: center;
    }

    .w-100-mobile {
        width: 100%;
    }
}

/* ==========================================================================
   12. Section Header Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .section-header h2 {
        font-size: var(--text-2xl);
    }

    .section-header p {
        font-size: var(--text-base);
    }

    .section-header-modern h2 {
        font-size: var(--text-2xl);
    }
}

/* ==========================================================================
   13. Modal Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .modal-content-sm {
        margin: var(--spacing-md);
        padding: var(--spacing-xl);
    }
}

/* ==========================================================================
   14. Navigation Touch Improvements
   ========================================================================== */

@media (max-width: 991px) {

    /* Larger touch targets */
    .navbar-links li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Smooth scrolling for mobile nav */
    .navbar-menu {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   15. Performance Optimizations
   ========================================================================== */

/* Reduce animations on mobile for performance */
@media (max-width: 767px) {

    .animate-fade-in,
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-scale-in {
        animation-duration: 0.3s;
    }
}

/* Respect user preferences for 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;
    }

    .animate-fade-in,
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-scale-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   16. Dark Mode Support (Optional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Uncomment to enable auto dark mode
    :root {
        --gray-50: #0f172a;
        --gray-100: #1e293b;
        --gray-200: #334155;
        --gray-300: #475569;
        --gray-400: #64748b;
        --gray-500: #94a3b8;
        --gray-600: #cbd5e1;
        --gray-700: #e2e8f0;
        --gray-800: #f1f5f9;
        --gray-900: #f8fafc;
    }

    body {
        background-color: #0f172a;
        color: #e2e8f0;
    }
    */
}

/* ==========================================================================
   17. High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --primary: #dc2626;
        --gray-400: #6b7280;
        --gray-600: #374151;
    }

    .btn-primary {
        border: 2px solid currentColor;
    }

    a:focus,
    button:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ==========================================================================
   18. Print Styles
   ========================================================================== */

@media print {

    .navbar,
    .footer,
    .tool-sidebar,
    .ad-slot,
    .ad-widget,
    .btn,
    .upload-zone,
    .mobile-menu-btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .tool-page {
        padding-top: 0;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    /* Show URL next to links */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }
}

/* ==========================================================================
   19. Landscape Phone Adjustments
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-modern {
        min-height: auto;
        padding: 80px 0 40px;
    }

    .navbar-content {
        height: 56px;
    }

    .tool-page {
        padding-top: 56px;
    }
}

/* ==========================================================================
   20. Large Screen Enhancements
   ========================================================================== */

@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .hero-title {
        font-size: 4.5rem;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }
}