/* ================================================================
   MOBILE-FIRST OPTIMIZATIONS FOR CLAIMBAZEN.NL
   ================================================================ */

/* =================================================================
   BASE MOBILE STYLES
   ================================================================= */

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

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

/* =================================================================
   RESPONSIVE TABLES
   ================================================================= */

/* Tables scroll horizontally on mobile */
@media (max-width: 768px) {
    .compensation-table,
    .comparison-table table,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    /* Ensure table cells have minimum width for readability */
    table th,
    table td {
        min-width: 100px;
        font-size: 0.9rem;
        padding: 8px !important;
    }

    /* First column should be sticky for context */
    table th:first-child,
    table td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    }

    table thead th:first-child {
        background: #f5f5f5;
    }
}

/* Very small screens - make tables even more compact */
@media (max-width: 480px) {
    table th,
    table td {
        font-size: 0.85rem;
        padding: 6px !important;
        min-width: 80px;
    }
}

/* =================================================================
   TOUCH-FRIENDLY BUTTONS & LINKS
   ================================================================= */

/* Ensure all buttons are touch-friendly (min 44px height) */
@media (max-width: 768px) {
    .btn,
    a.btn,
    button {
        min-height: 44px;
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* Stack CTA buttons vertically on mobile */
    .hero-cta,
    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .hero-cta .btn,
    .cta-buttons .btn {
        width: 100%;
        text-align: center;
    }
}

/* =================================================================
   TYPOGRAPHY - MOBILE READABILITY
   ================================================================= */

@media (max-width: 768px) {
    /* Ensure base font size is readable */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Scale down headings appropriately */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    h4 {
        font-size: 1.1rem;
    }

    /* Ensure paragraphs are readable */
    p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
}

/* =================================================================
   HERO SECTION - MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 768px) {
    .page-hero,
    .hero-wrap {
        padding: 2rem 0 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.5;
    }

    .smartengeld-range,
    .range-amount {
        font-size: 1.1rem !important;
    }

    /* Breadcrumb mobile styling */
    .breadcrumb,
    .breadcrumbs {
        font-size: 0.85rem;
        flex-wrap: wrap;
    }
}

/* =================================================================
   SIDEBAR - MOBILE STACKING
   ================================================================= */

@media (max-width: 991px) {
    .content-grid {
        display: block !important;
    }

    .content-main {
        width: 100% !important;
        margin-bottom: 2rem;
    }

    .content-sidebar {
        width: 100% !important;
        margin-top: 2rem;
    }

    .sidebar-card {
        margin-bottom: 1.5rem;
    }
}

/* =================================================================
   LISTS & CONTENT ELEMENTS
   ================================================================= */

@media (max-width: 768px) {
    /* Injury tags grid */
    .injury-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .injury-tag {
        width: 100%;
        padding: 10px;
        font-size: 0.9rem;
    }

    /* Lists with proper spacing */
    ul, ol {
        padding-left: 1.25rem;
    }

    li {
        margin-bottom: 0.5rem;
    }
}

/* =================================================================
   FORMS - MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 10px;
    }

    label {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        display: block;
    }
}

/* =================================================================
   NAVBAR - MOBILE IMPROVEMENTS
   ================================================================= */

@media (max-width: 991px) {
    /* Ensure navbar is properly spaced */
    .navbar {
        padding: 0.75rem 1rem;
    }

    /* Mobile menu spacing */
    .navbar-collapse {
        margin-top: 1rem;
    }

    .navbar-nav {
        padding: 0;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0 !important;
        font-size: 1rem;
    }

    /* Hamburger menu should be visible and touch-friendly */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* =================================================================
   FLOATING CTA WIDGET - MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 768px) {
    .claim-widget {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: calc(100% - 2rem);
    }

    .claim-widget .btn {
        width: 100%;
    }
}

/* =================================================================
   FAQ ACCORDION - MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 768px) {
    .faq-item {
        margin-bottom: 1rem;
    }

    .faq-item h4 {
        font-size: 1.05rem;
        line-height: 1.4;
        padding-right: 2rem; /* Space for toggle icon if present */
    }

    .faq-item p {
        font-size: 0.95rem;
    }
}

/* =================================================================
   WARNING/INFO BOXES - MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 768px) {
    .cta-box,
    .warning-box,
    .info-box {
        padding: 1rem !important;
        margin: 1.5rem 0;
    }

    .cta-box h3,
    .warning-box h4 {
        font-size: 1.15rem;
    }
}

/* =================================================================
   SPACING & PADDING - MOBILE ADJUSTMENTS
   ================================================================= */

@media (max-width: 768px) {
    /* Reduce padding on containers for more screen space */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Section spacing */
    section {
        padding: 2rem 0;
    }

    /* Card spacing */
    .card,
    .sidebar-card {
        padding: 1rem;
    }
}

/* =================================================================
   HORIZONTAL SCROLLING PREVENTION
   ================================================================= */

* {
    max-width: 100%;
}

/* Allow specific elements to exceed if they have scroll */
table,
pre,
code {
    max-width: 100%;
}

/* =================================================================
   TOUCH TARGET SIZES (WCAG 2.5.5)
   ================================================================= */

@media (max-width: 768px) {
    /* All interactive elements should be at least 44x44px */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Exception for inline text links */
    p a,
    li a {
        min-height: auto;
        min-width: auto;
        display: inline;
    }
}

/* =================================================================
   LANDSCAPE MOBILE OPTIMIZATION
   ================================================================= */

@media (max-width: 896px) and (orientation: landscape) {
    .hero-wrap,
    .page-hero {
        padding: 1.5rem 0 !important;
    }

    .hero-wrap h1,
    .page-hero h1 {
        font-size: 1.5rem !important;
    }
}

/* =================================================================
   VERY SMALL SCREENS (< 375px)
   ================================================================= */

@media (max-width: 374px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* =================================================================
   PERFORMANCE - SMOOTH SCROLLING
   ================================================================= */

@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* =================================================================
   PRINT STYLES - BONUS
   ================================================================= */

@media print {
    .navbar,
    .claim-widget,
    .cta-box,
    .hero-cta,
    .sidebar-card {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 {
        font-size: 18pt;
    }

    h2 {
        font-size: 16pt;
    }

    h3 {
        font-size: 14pt;
    }
}