/* =====================================================================
   FAQcraft Pro — Responsive Module
   Breakpoints written as CSS custom properties and overridden by JS
   using the values from plugin settings.
   ===================================================================== */

/* ── Global Reset ──────────────────────────────────────────────────── */
.faqcraft-wrap,
.faqcraft-wrap * {
    box-sizing: border-box;
}

/* ── Touch Optimization ────────────────────────────────────────────── */
.faqcraft-accordion__trigger,
.faqcraft-tab-btn,
.faqcraft-search-bar__input {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP  (> 1024px)  — already handled by base styles
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   TABLET  (≤ 1024px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Grid: 2 columns on tablet */
    .faqcraft-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tabs: allow wrapping */
    .faqcraft-tab-list {
        gap: 2px;
    }

    .faqcraft-tab-btn {
        font-size: 0.85rem;
        padding: 9px 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Grid: single column ──────────────────────────────────── */
    .faqcraft-grid {
        grid-template-columns: 1fr;
    }

    /* ── Accordion: tighter padding ───────────────────────────── */
    .faqcraft-accordion__trigger {
        padding: 14px 16px;
        font-size: 0.95rem;
    }

    .faqcraft-accordion__answer {
        padding: 0 16px 14px;
    }

    /* ── Tabs: scroll horizontally ────────────────────────────── */
    .faqcraft-tab-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .faqcraft-tab-list::-webkit-scrollbar {
        display: none;
    }

    .faqcraft-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    /* ── Search bar: full width ───────────────────────────────── */
    .faqcraft-search-bar__input {
        font-size: 16px;
        /* Prevent iOS zoom on focus */
    }

    /* ── Theme overrides (reduce padding on mobile) ───────────── */
    .faqcraft-theme-modern-dark {
        padding: 16px;
    }

    .faqcraft-theme-bold-gradient {
        padding: 16px;
        border-radius: 14px;
    }

    /* ── Card expand: always show full answer ─────────────────── */
    .faqcraft-card__answer {
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .faqcraft-card__expand-btn {
        display: none;
    }

    /* ── Typography scaling ───────────────────────────────────── */
    .faqcraft-card__question {
        font-size: 0.95rem;
    }

    .faqcraft-card__answer {
        font-size: 0.88rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 480px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .faqcraft-accordion__trigger {
        font-size: 0.9rem;
        padding: 12px 14px;
    }

    .faqcraft-accordion__chevron svg {
        width: 16px;
        height: 16px;
    }

    .faqcraft-card {
        padding: 18px 16px;
    }

    .faqcraft-card__question {
        font-size: 0.9rem;
    }

    .faqcraft-search-bar__input {
        padding: 11px 40px;
        font-size: 16px;
    }

    /* Stack tab buttons vertically on very small screens */
    .faqcraft-tab-list {
        flex-direction: column;
        border-bottom: none;
        gap: 4px;
    }

    .faqcraft-tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;
        border-radius: var(--fc-radius, 8px);
        text-align: left;
        margin-bottom: 0;
        background: var(--fc-item-bg, #f9fafb);
    }

    .faqcraft-tab-btn.is-active {
        border-left-color: var(--fc-accent, #4A6CF7);
        background: rgba(74, 108, 247, .06);
    }

    .faqcraft-tab-panel {
        margin-top: 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT  — clean, no decorations
   ══════════════════════════════════════════════════════════════════════ */
@media print {

    .faqcraft-accordion__panel[hidden] {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
    }

    .faqcraft-accordion__chevron {
        display: none;
    }

    .faqcraft-search-bar {
        display: none;
    }

    .faqcraft-tab-list {
        display: none;
    }

    .faqcraft-tab-panel {
        display: block !important;
    }

    .faqcraft-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .faqcraft-card__expand-btn {
        display: none;
    }

    .faqcraft-theme-modern-dark,
    .faqcraft-theme-bold-gradient {
        background: white !important;
        color: black !important;
        --fc-question-color: black;
        --fc-answer-color: #333;
        --fc-item-bg: white;
        --fc-border: #ccc;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE  (OS level preference)
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

    /* Only override for themes that don't handle dark explicitly */
    .faqcraft-theme-minimal-light {
        --fc-fg: #e2e8f0;
        --fc-answer-color: #94a3b8;
        --fc-question-color: #f1f5f9;
        --fc-border: #374151;
        --fc-item-bg: #1f2937;
        --fc-trigger-hover: rgba(74, 108, 247, .1);
    }

    .faqcraft-theme-corporate-clean {
        --fc-fg: #e2e8f0;
        --fc-answer-color: #94a3b8;
        --fc-question-color: #f1f5f9;
        --fc-border: #374151;
        --fc-item-bg: #1e2533;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   RTL SUPPORT
   ══════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .faqcraft-accordion__trigger {
    flex-direction: row-reverse;
}

[dir="rtl"] .faqcraft-search-bar__icon {
    left: auto;
    right: 14px;
}

[dir="rtl"] .faqcraft-search-bar__input {
    padding: 13px 44px 13px 44px;
}

[dir="rtl"] .faqcraft-search-bar__clear {
    right: auto;
    left: 12px;
}

[dir="rtl"] .faqcraft-theme-corporate-clean .faqcraft-accordion__trigger {
    border-left: none;
    border-right: 4px solid transparent;
}

[dir="rtl"] .faqcraft-theme-corporate-clean .faqcraft-accordion__item.is-open .faqcraft-accordion__trigger {
    border-right-color: var(--fc-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE (keyboard nav)
   ══════════════════════════════════════════════════════════════════════ */
.faqcraft-wrap *:focus {
    outline: none;
}

.faqcraft-wrap *:focus-visible {
    outline: 3px solid var(--fc-accent, #4A6CF7);
    outline-offset: 2px;
    border-radius: 4px;
}