/* ============================================
   LOCOLINK — MOBILE STYLESHEET
   Overrides voor schermen tot 640px breed.
   Desktop styles (styles.css) blijven ongewijzigd.
   ============================================ */

/* Pro teaser grid responsive */
@media (max-width: 768px) {
    .pro-teaser-section [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .pro-teaser-section [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== HORIZONTAL SCROLL PREVENTION ===== */
/* Prevent any element from causing horizontal overflow on mobile */
html {
    overflow-x: hidden;
    max-width: 100%;
}

@media (max-width: 768px) {
    /* Contain sections that have wide decorative pseudo-elements */
    section {
        overflow-x: hidden;
    }

    /* Siri floating commands can overflow on mobile */
    .siri-commands {
        overflow: hidden;
    }

    /* Gallery infinite scroll must be contained */
    .gallery-section {
        overflow: hidden;
    }

    /* Throttle visual */
    .throttle-section {
        overflow: hidden;
    }

    /* Multicontrol section */
    .multicontrol-section {
        overflow: hidden;
    }
}

/* Hide the mobile theme button and actions wrapper on desktop */
.nav-mobile-actions { display: none; }
.nav-mobile-theme { display: none; }

/* ===== NAVIGATION ===== */
@media (max-width: 640px) {

    nav { padding: 12px 0; }
    nav .container { padding: 0 16px; }

    /* Group: theme toggle + hamburger */
    .nav-mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Mobile theme toggle button */
    .nav-mobile-theme {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid var(--border-light);
        background: var(--bg-card);
        color: var(--text-primary);
        flex-shrink: 0;
        padding: 0;
    }

    .nav-mobile-theme svg {
        width: 18px;
        height: 18px;
    }

    /* Hamburger button styling */
    .nav-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid var(--border-light);
        background: var(--bg-card);
        font-size: 18px;
        color: var(--text-primary);
        flex-shrink: 0;
    }

    /* Mobile dropdown menu */
    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: rgba(8, 8, 13, 0.98);
        backdrop-filter: blur(24px) saturate(1.5);
        -webkit-backdrop-filter: blur(24px) saturate(1.5);
        padding: 12px 0 16px;
        border-bottom: 1px solid var(--border);
        gap: 0;
        z-index: 999;
    }

    [data-theme="light"] .nav-links.open {
        background: rgba(248, 248, 251, 0.98);
    }

    .nav-links.open li {
        width: 100%;
    }

    .nav-links.open a {
        display: block;
        padding: 11px 20px;
        font-size: 15px;
        border-radius: 0;
        color: var(--text-secondary);
    }

    .nav-links.open a:hover,
    .nav-links.open a.active {
        color: var(--text-primary);
        background: rgba(255,255,255,0.04);
    }

    [data-theme="light"] .nav-links.open a:hover,
    [data-theme="light"] .nav-links.open a.active {
        background: rgba(0,0,0,0.04);
    }

    /* Hide theme toggle from mobile dropdown (it's in the nav bar now) */
    .nav-links.open li:has(.theme-toggle) {
        display: none;
    }

    .nav-links.open .theme-toggle {
        width: 100%;
        height: 42px;
        border-radius: 8px;
        justify-content: center;
        gap: 8px;
        padding: 0 16px;
    }

    /* Download CTA button in menu */
    .nav-links.open li:has(.nav-cta) {
        padding: 4px 16px 4px;
    }

    .nav-links.open .nav-cta {
        display: block !important;
        text-align: center !important;
        padding: 12px 20px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        margin-top: 4px;
    }
}

/* ===== CONTAINERS & SPACING ===== */
@media (max-width: 640px) {
    .container,
    .container-sm,
    .container-lg {
        padding: 0 16px;
    }

    section { padding: 56px 0; }
    .page-header { padding: 110px 0 36px; }
    .section-title { letter-spacing: -0.5px; }
    .section-sub { font-size: 15px; }
}

/* ===== CARDS ===== */
@media (max-width: 640px) {
    .card { padding: 24px 20px; }
}

/* ===== FOOTER ===== */
@media (max-width: 640px) {
    footer { padding: 36px 0; }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        gap: 6px;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 20px;
    }
}

/* ===== COMPAT BAR ===== */
@media (max-width: 640px) {
    .compat-logos { gap: 20px; }
    .compat-item { font-size: 14px; }
}

/* ===== STATS BAR ===== */
@media (max-width: 480px) {
    .stats-bar { gap: 20px; padding: 36px 0; }
    .stat-number { font-size: 32px; }
}

/* ===== PRICING TOGGLE ===== */
@media (max-width: 400px) {
    .pricing-toggle { width: 100%; }
    .pricing-toggle-btn {
        flex: 1;
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ===== PRICE CARDS ===== */
@media (max-width: 640px) {
    .price-amount { font-size: 38px; }
}

/* ===== FAQ ===== */
@media (max-width: 640px) {
    .faq-item { padding: 18px 0; }
}

/* ===== BADGE ===== */
@media (max-width: 480px) {
    .badge { font-size: 12px; padding: 5px 12px; }
}

/* ===== GENERAL GRIDS ===== */
@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===== BTN GROUP ===== */
@media (max-width: 640px) {
    .btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .btn-group .btn { justify-content: center; }
}

/* ===== BETA SECTION ===== */
@media (max-width: 640px) {
    .beta-section {
        padding: 56px 0 40px;
    }

    .beta-section h2 {
        font-size: 1.6rem;
    }

    .beta-section p {
        font-size: 0.95rem;
        padding: 0 8px;
    }

    .beta-feedback-form {
        padding: 24px 20px;
        margin: 0 4px;
    }

    .beta-feedback-form input,
    .beta-feedback-form select {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }
}