/**
 * Tools Responsive CSS
 * Comprehensive mobile-first responsive styles for all tool pages
 *
 * BREAKPOINTS (Industry Standard):
 * - Desktop: 1025px+ (default styles)
 * - Tablet Landscape: 769px - 1024px
 * - Tablet Portrait: 481px - 768px
 * - Mobile: 361px - 480px
 * - Small Mobile: 360px and below
 *
 * TYPOGRAPHY STANDARDS (WCAG/Material/Apple HIG):
 * - Body text: 16px minimum (WCAG)
 * - H1/Hero: 28-36px mobile, 48-64px desktop
 * - H2/Section: 24-28px mobile, 32-40px desktop
 * - H3/Cards: 18-20px mobile, 20-24px desktop
 * - Small text: 14px minimum (never below 12px)
 * - Buttons: 16px minimum
 * - Input fields: 16px (prevents iOS zoom)
 * - Line height: 1.5-1.7 for readability
 *
 * SPACING STANDARDS (8px Grid System):
 * - Mobile padding: 16px minimum
 * - Touch targets: 44px minimum (Apple), 48px (Google)
 * - Section spacing: 48-80px vertical
 *
 * ACCESSIBILITY:
 * - Color contrast: 4.5:1 minimum (WCAG AA)
 * - Focus states: Visible outline
 * - Reduced motion: Respected
 */

/* ============================================
   1. GLOBAL FIXES
   ============================================ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    box-sizing: border-box;
}

/* Max-width wrappers */
[style*="max-width: 1140px"],
[style*="max-width:1140px"] {
    box-sizing: border-box;
    width: 100%;
}

/* Prevent overflow */
svg { max-width: 100%; height: auto; }
img { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Global Table Scroll - All screen sizes */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.compare-table {
    width: 100%;
    min-width: 600px;
}
div[style*="border-radius"][style*="overflow: hidden"]:has(> table),
div[style*="border-radius"]:has(> .compare-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}


/* ============================================
   2. TABLET LANDSCAPE (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

    /* --- Layout --- */
    .section {
        padding: 60px 20px;
    }

    /* --- Grids --- */
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .info-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-grid {
        gap: 24px;
    }
}


/* ============================================
   3. TABLET PORTRAIT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* --- Layout --- */
    .section {
        padding: 40px 12px;
        width: 100%;
    }

    /* --- Typography --- */
    .section-title {
        font-size: 24px;
    }
    .section-subtitle {
        font-size: 16px;
    }
    .section-badge {
        font-size: 12px;
    }
    .section-header {
        margin-bottom: 28px;
        padding: 0 12px;
    }

    /* --- Grids: All to single column --- */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }
    .info-cards,
    .feature-cards,
    .path-cards,
    .pros-cons-grid,
    .number-grid {
        grid-template-columns: 1fr;
    }
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* --- Wrappers: Full width --- */
    [style*="max-width: 1140px"],
    [style*="max-width:1140px"],
    div[style*="max-width: 1140px"] {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* --- Hero --- */
    .hero {
        padding: 90px 12px 40px;
        width: 100%;
    }
    .hero-title {
        font-size: 28px;
    }
    .hero-subtitle {
        font-size: 16px;
    }

    /* --- Analyzer Card --- */
    .analyzer-card {
        padding: 20px;
    }
    .analyzer-input-wrapper {
        flex-direction: column;
    }
    .analyzer-btn {
        width: 100%;
    }

    /* --- Tables - Horizontal Scroll Wrapper --- */
    .table-scroll-wrapper,
    .compare-table-wrap,
    div:has(> table.compare-table),
    div:has(> .compare-table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .compare-table-wrap,
    [style*="overflow: hidden"] table,
    table.compare-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .compare-table {
        min-width: 600px;
        width: max-content;
    }
    .compare-table th,
    .compare-table td {
        padding: 12px;
        font-size: 14px;
        white-space: nowrap;
    }
    .compare-table td:last-child,
    .compare-table th:last-child {
        white-space: normal;
        min-width: 120px;
    }

    /* --- FAQ --- */
    .faq-question {
        font-size: 16px;
        padding: 18px 0;
    }
    .faq-answer p {
        font-size: 15px;
    }

    /* --- CTA --- */
    .cta-section {
        padding: 60px 16px;
    }
    .cta-title {
        font-size: 26px;
    }
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .cta-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* --- Footer --- */
    .footer {
        padding: 40px 16px 32px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* --- Modal --- */
    .modal-2col-layout {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================
   4. MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

    /* --- Layout (12px padding - balanced for mobile) --- */
    .section {
        padding: 48px 12px;
        width: 100%;
    }
    .section-header {
        margin-bottom: 24px;
        padding: 0;
    }

    /* --- Typography (industry standard sizes) --- */
    .section-title {
        font-size: 24px;
        line-height: 1.3;
    }
    .section-subtitle {
        font-size: 16px;
        line-height: 1.6;
    }
    .section-badge {
        font-size: 12px;
    }

    /* --- Wrappers: Full width with 12px padding --- */
    [style*="max-width: 1140px"],
    [style*="max-width:1140px"],
    .steps-container,
    .faq-list,
    .features-grid,
    .testimonials-grid,
    .pricing-grid,
    .cta-content,
    .footer-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    div[style*="max-width: 1140px; margin: 0 auto; padding: 0 24px"] {
        max-width: 100% !important;
        padding: 0 12px !important;
    }

    /* --- Hero --- */
    .hero {
        padding: 88px 12px 40px;
        width: 100%;
    }
    .hero-content {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    .hero-title {
        font-size: 28px;
        line-height: 1.2;
    }
    .hero-subtitle {
        font-size: 16px;
        line-height: 1.6;
    }
    .hero-badge {
        font-size: 12px;
        padding: 8px 14px;
    }

    /* --- Analyzer Card --- */
    .analyzer-card {
        padding: 20px;
        border-radius: 16px;
        width: 100%;
        max-width: 100%;
    }
    .analyzer-header {
        gap: 12px;
    }
    .analyzer-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .analyzer-title {
        font-size: 18px;
    }
    .analyzer-subtitle {
        font-size: 14px;
    }
    .analyzer-input {
        padding: 16px;
        font-size: 16px; /* Prevents iOS zoom */
    }
    .analyzer-btn {
        padding: 16px 24px;
        font-size: 16px;
        min-height: 48px; /* Google touch target */
    }
    .analyzer-hint {
        font-size: 14px;
    }

    /* --- Info Cards --- */
    .info-card {
        padding: 20px;
    }
    .info-card-icon {
        font-size: 24px;
    }
    .info-card-title {
        font-size: 16px;
    }
    .info-card-text {
        font-size: 15px;
        line-height: 1.6;
    }

    /* --- Steps --- */
    .step-card {
        padding: 20px;
    }
    .step-number {
        width: 52px;
        height: 52px;
        font-size: 20px;
        margin-bottom: 16px;
    }
    .step-title {
        font-size: 18px;
    }
    .step-desc {
        font-size: 16px;
        line-height: 1.6;
    }

    /* --- SVG Containers --- */
    [style*="border-radius: 16px"][style*="padding: 40px"] {
        padding: 20px 12px !important;
    }

    /* --- Tables - Mobile Scroll --- */
    .table-scroll-wrapper,
    div:has(> table.compare-table),
    div:has(> .compare-table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }
    .compare-table {
        min-width: 550px;
    }
    .compare-table th,
    .compare-table td {
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
    }
    .compare-table td:last-child {
        white-space: normal;
        min-width: 100px;
    }

    /* --- FAQ --- */
    .faq-list {
        padding: 0;
    }
    .faq-question {
        font-size: 15px;
        padding: 14px 0;
        gap: 12px;
    }
    .faq-icon {
        font-size: 20px;
    }
    .faq-answer p {
        font-size: 14px;
        padding-bottom: 16px;
    }

    /* --- Check List --- */
    .check-list li {
        font-size: 15px;
        padding: 10px 0;
        gap: 10px;
    }
    .check-icon {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    /* --- Number Cards --- */
    .number-card {
        padding: 16px;
    }
    .number-card-value {
        font-size: 26px;
    }
    .number-card-label {
        font-size: 13px;
    }

    /* --- Path Cards --- */
    .path-card {
        padding: 20px;
    }
    .path-icon {
        font-size: 32px;
    }
    .path-title {
        font-size: 17px;
    }
    .path-price {
        font-size: 26px;
    }

    /* --- Alert Boxes --- */
    .alert {
        padding: 12px;
        gap: 10px;
    }
    .alert-icon {
        font-size: 18px;
    }
    .alert-title {
        font-size: 14px;
    }
    .alert-text {
        font-size: 13px;
    }

    /* --- Buttons --- */
    .btn {
        padding: 12px 20px;
        font-size: 16px;
    }
    .btn-lg {
        padding: 14px 24px;
        font-size: 16px;
    }

    /* --- CTA Section --- */
    .cta-section {
        padding: 48px 12px;
    }
    .cta-title {
        font-size: 22px;
    }
    .cta-subtitle {
        font-size: 15px;
    }

    /* --- Audit Grade Cards --- */
    .audit-grade-card {
        padding: 16px;
    }
    .audit-grade {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    /* --- Feature Cards --- */
    .feature-card {
        padding: 20px;
    }
    .feature-icon-wrapper {
        width: 44px;
        height: 44px;
    }
    .feature-icon {
        font-size: 22px;
    }
    .feature-title {
        font-size: 17px;
    }
    .feature-desc {
        font-size: 15px;
    }

    /* --- Icon Boxes --- */
    .icon-box {
        padding: 16px;
        gap: 12px;
    }
    .icon-box-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .icon-box-title {
        font-size: 15px;
    }
    .icon-box-text {
        font-size: 14px;
    }

    /* --- Badges --- */
    .badge {
        padding: 4px 10px;
        font-size: 12px;
    }

    /* --- Progress Bars --- */
    .progress-label,
    .progress-value {
        font-size: 13px;
    }

    /* --- Timeline --- */
    .timeline {
        padding-left: 24px;
    }
    .timeline-dot {
        width: 20px;
        height: 20px;
        font-size: 10px;
        left: -24px;
    }
    .timeline-content {
        padding: 12px;
    }
    .timeline-title {
        font-size: 14px;
    }
    .timeline-text {
        font-size: 13px;
    }

    /* --- Testimonials --- */
    .testimonial-card {
        padding: 20px;
    }
    .testimonial-text {
        font-size: 15px;
    }
    .testimonial-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .testimonial-name {
        font-size: 15px;
    }
    .testimonial-handle {
        font-size: 13px;
    }

    /* --- Quote Box --- */
    .quote-box {
        padding: 16px 20px;
    }
    .quote-text {
        font-size: 15px;
    }
    .quote-author {
        font-size: 14px;
    }

    /* --- Pricing Cards --- */
    .pricing-card {
        padding: 24px 20px;
    }
    .pricing-amount {
        font-size: 36px;
    }
    .pricing-features li {
        font-size: 14px;
        padding: 8px 0;
    }
}


/* ============================================
   5. SMALL MOBILE (max-width: 360px)
   ============================================ */
@media (max-width: 360px) {

    /* --- Layout (10px padding for very small screens) --- */
    .section {
        padding: 40px 10px;
        width: 100%;
    }
    .section-header {
        padding: 0;
    }

    /* --- Typography --- */
    .section-title {
        font-size: 20px;
    }
    .hero-title {
        font-size: 22px;
    }
    .section-subtitle,
    .hero-subtitle {
        font-size: 15px;
    }
    .faq-question {
        font-size: 14px;
    }

    /* --- Wrappers --- */
    [style*="max-width: 1140px"],
    [style*="max-width:1140px"],
    div[style*="max-width: 1140px"] {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- Hero --- */
    .hero {
        padding: 80px 10px 32px;
        width: 100%;
    }

    /* --- Analyzer --- */
    .analyzer-card {
        padding: 16px;
        width: 100%;
    }

    /* --- Buttons --- */
    .btn {
        padding: 12px 18px;
        font-size: 15px;
        width: 100%;
    }

    /* --- Cards --- */
    .info-card,
    .feature-card,
    .path-card,
    .number-card,
    .audit-grade-card {
        width: 100%;
    }
}


/* ============================================
   6. SPECIAL CASES
   ============================================ */

/* --- Landscape Mode --- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding-top: 70px;
        padding-bottom: 24px;
    }
    .section {
        padding: 32px 16px;
    }
}

/* --- Touch Devices --- */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects */
    .feature-card:hover,
    .info-card:hover,
    .path-card:hover,
    .number-card:hover,
    .testimonial-card:hover {
        transform: none;
        box-shadow: none;
    }
    /* Larger tap targets */
    .faq-question {
        min-height: 48px;
    }
    .btn {
        min-height: 44px;
    }
    /* Smooth scrolling */
    [style*="overflow-x: auto"],
    .compare-table-wrap {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
}

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

/* --- High Contrast --- */
@media (prefers-contrast: high) {
    .section-badge,
    .badge,
    .tag {
        border: 1px solid currentColor;
    }
    .btn {
        border-width: 2px;
    }
}

/* --- Print --- */
@media print {
    .hero,
    .cta-section,
    .footer,
    .analyzer-card,
    .btn {
        display: none !important;
    }
    .section {
        padding: 20px 0;
        page-break-inside: avoid;
    }
}


/* ============================================
   7. BLOG SPECIFIC RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .blog-layout {
        padding: 24px 12px 60px;
    }
    .blog-hero {
        padding: 100px 12px 40px;
    }
    .blog-hero-title {
        font-size: 28px;
    }
    .blog-hero-subtitle {
        font-size: 16px;
    }
    .blog-single-title {
        font-size: 26px;
    }
    .blog-single-content {
        font-size: 16px;
    }
    .blog-single-content h2 {
        font-size: 22px;
    }
    .blog-single-content h3 {
        font-size: 18px;
    }
    .article-header {
        padding: 80px 12px 40px;
    }
}

@media (max-width: 480px) {
    .blog-layout {
        padding: 20px 12px 48px;
    }
    .blog-hero {
        padding: 88px 12px 32px;
    }
    .blog-hero-title {
        font-size: 24px;
    }
    .blog-card-content {
        padding: 16px;
    }
    .blog-card-title {
        font-size: 17px;
    }
    .blog-card-excerpt {
        font-size: 14px;
    }
    .blog-single {
        padding: 0;
    }
    .blog-single-content {
        font-size: 16px;
        line-height: 1.7;
    }
    .blog-single-content h2 {
        font-size: 20px;
        margin: 32px 0 16px;
    }
    .blog-single-content h3 {
        font-size: 17px;
    }
    .article-header {
        padding: 80px 12px 32px;
    }
    .article-title {
        font-size: 22px;
    }
    .article-description {
        font-size: 16px;
    }
}