/* Dynamic Tab ACF – Frontend Styles
   Stijl afgestemd op heteffectievewerken.nl
   ──────────────────────────────────────────
   Kleurpalet:
     Zwart tekst  : #111
     Groen accent : #7a9e3b
     Lichtgrijs   : #d8d8d8
     Wit          : #fff
*/

/* ════════════════════════════════════════════════════════════
   Reset: verwijder browser-focus-ring van ALLE knoppen
   ════════════════════════════════════════════════════════════ */

.dta-wrapper button,
.dta-wrapper button:focus,
.dta-wrapper button:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
}

/* Toegankelijk focus alleen bij toetsenbordnavigatie */
.dta-wrapper button:focus-visible {
    outline: 2px solid #7a9e3b !important;
    outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   DESKTOP: tabs
   ════════════════════════════════════════════════════════════ */

.dta-wrapper {
    display: flex;
    flex-direction: column;
}

.dta-accordion-wrap {
    display: none;
}

/* ── Navigatiebalk ───────────────────────────────────────── */
.dta-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Tab-knoppen ─────────────────────────────────────────── */
.dta-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 20px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    font-family: inherit;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
}

.dta-tab-btn.is-active {
    z-index: 1;
}

/* ── Tab-panels ──────────────────────────────────────────── */
.dta-panels { flex: 1; }

.dta-tab-panel {
    padding: 24px;
    border: 1px solid #ddd;
    background: #fff;
}

.dta-tab-panel[hidden] { display: none; }

/* ── Navigatie-positie varianten ─────────────────────────── */
.dta-nav-top { flex-direction: column; }
.dta-nav-top .dta-nav { margin-bottom: -1px; }
.dta-nav-top .dta-tab-btn { border-radius: 4px 4px 0 0; border-bottom-color: transparent; }

.dta-nav-bottom { flex-direction: column-reverse; }
.dta-nav-bottom .dta-nav { margin-top: -1px; }
.dta-nav-bottom .dta-tab-btn { border-radius: 0 0 4px 4px; border-top-color: transparent; }

.dta-nav-left { flex-direction: row; align-items: flex-start; }
.dta-nav-left .dta-nav { flex-direction: column; margin-right: -1px; }
.dta-nav-left .dta-tab-btn { border-radius: 4px 0 0 4px; border-right-color: transparent; border-bottom-color: #ddd; width: 100%; }

.dta-nav-right { flex-direction: row-reverse; align-items: flex-start; }
.dta-nav-right .dta-nav { flex-direction: column; margin-left: -1px; }
.dta-nav-right .dta-tab-btn { border-radius: 0 4px 4px 0; border-left-color: transparent; border-bottom-color: #ddd; width: 100%; }

/* ════════════════════════════════════════════════════════════
   MOBIEL: accordion
   ════════════════════════════════════════════════════════════ */

.dta-wrapper.dta-is-accordion .dta-nav,
.dta-wrapper.dta-is-accordion .dta-panels {
    display: none !important;
}

.dta-wrapper.dta-is-accordion .dta-accordion-wrap {
    display: block;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.dta-accordion-wrap {
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* ── Item scheiding ──────────────────────────────────────── */
.dta-accordion-item + .dta-accordion-item {
    border-top: 1px solid #d8d8d8;
}

/* ── Header knop ─────────────────────────────────────────── */
.dta-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: #111;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    transition: background 0.15s ease;
}

.dta-accordion-btn:hover {
    background: rgba(0, 0, 0, .02);
}

/* ── Titel ───────────────────────────────────────────────── */
.dta-accordion-title {
    flex: 1;
    line-height: 1.3;
}

/* ── Plus/kruis icoon ────────────────────────────────────── */
.dta-accordion-icon {
    flex-shrink: 0;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #7a9e3b;
    transition: transform 0.25s ease;
    user-select: none;
}

.dta-accordion-item.is-open .dta-accordion-icon {
    transform: rotate(45deg);
}

/* ── Panel ───────────────────────────────────────────────── */
.dta-accordion-panel {
    padding: 0 24px 22px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.dta-accordion-panel[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════
   FAQ herhaler
   ════════════════════════════════════════════════════════════ */

.dta-faq {
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.dta-faq-item + .dta-faq-item {
    border-top: 1px solid #d8d8d8;
}

/* ── Vraag knop ──────────────────────────────────────────── */
.dta-faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    color: #111;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    transition: background 0.15s ease;
}

.dta-faq-btn:hover {
    background: rgba(0, 0, 0, .02);
}

/* ── Vraagtekst ──────────────────────────────────────────── */
.dta-faq-vraag {
    flex: 1;
    line-height: 1.3;
}

/* ── Plus/kruis icoon ────────────────────────────────────── */
.dta-faq-icon {
    flex-shrink: 0;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #7a9e3b;
    transition: transform 0.25s ease;
    user-select: none;
}

.dta-faq-item.is-open .dta-faq-icon {
    transform: rotate(45deg);
}

/* ── Antwoord ────────────────────────────────────────────── */
.dta-faq-antwoord {
    padding: 0 24px 22px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.dta-faq-antwoord[hidden] { display: none; }

/* ── Tekstafbreking: nooit uit beeld lopen ───────────────────
   Twee oorzaken van horizontale overflow worden hier afgevangen:
   1. Een flex-item heeft standaard min-width:auto en krimpt daardoor niet
      onder zijn min-content-breedte. min-width:0 heft dat op.
   2. Veel thema's zetten button { white-space: nowrap }, waardoor een lange
      vraag op één regel blijft en het +-icoon uit beeld duwt.
   Geldt voor zowel de FAQ als de accordion — die hebben dezelfde opbouw. */
.dta-faq,
.dta-faq-item,
.dta-faq-btn,
.dta-accordion-wrap,
.dta-accordion-item,
.dta-accordion-btn {
    max-width: 100%;
}

.dta-faq-btn,
.dta-accordion-btn {
    white-space: normal;
    align-items: flex-start; /* icoon bovenaan uitlijnen bij meerregelige tekst */
}

.dta-faq-vraag,
.dta-accordion-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dta-faq-icon,
.dta-accordion-icon {
    flex: 0 0 auto;
}

.dta-faq-antwoord,
.dta-accordion-panel {
    overflow-wrap: break-word;
}

/* Panelen mogen als flex-item krimpen (relevant bij nav links/rechts). */
.dta-panels,
.dta-tab-panel,
.dta-panel-inner,
.dta-standalone-panel {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ════════════════════════════════════════════════════════════
   USP lijst
   ════════════════════════════════════════════════════════════ */

.dta-usp-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dta-usp-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    list-style: none !important;
}

.dta-usp-item::before,
.dta-usp-item::marker {
    display: none !important;
    content: none !important;
}

.dta-usp-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    margin-top: 2px;
    color: #7a9e3b;
}

.dta-usp-check-svg {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    flex-shrink: 0;
}

.dta-usp-icon img {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    object-fit: contain;
    border-radius: 50%;
}

.dta-usp-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.dta-usp-primary {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
}

.dta-usp-secondary {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    opacity: .7;
}

/* ════════════════════════════════════════════════════════════
   Gedeelde veld-stijlen
   ════════════════════════════════════════════════════════════ */

/* Inline <style>-blokken van Elementor/shortcodes mogen nooit als tekst
   zichtbaar zijn. Sommige thema's overschrijven de browser-UA "display:none"
   voor <style>-elementen. display:none verbergt de tekst maar de browser
   parseert de CSS-regels gewoon — de opmaak wordt correct toegepast. */
.dta-wrapper style,
.dta-wrapper noscript,
.dta-standalone-panels style,
.dta-standalone-panels noscript,
.dta-field-wysiwyg style,
.dta-field-wysiwyg noscript {
    display: none !important;
    visibility: hidden !important;
}

.dta-field-video iframe,
.dta-field-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
}

.dta-field-image { margin: 0; }
.dta-field-image > img { display: block; max-width: 100%; width: 100%; height: auto; }
.dta-field-image figcaption { margin-top: 8px; font-size: 13px; color: #666; }

.dta-repeater-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.dta-repeater-table th,
.dta-repeater-table td {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}
.dta-repeater-table thead th {
    background: #f5f5f5;
    font-weight: 600;
}

.dta-empty-notice {
    padding: 20px;
    border: 2px dashed #d8d8d8;
    border-radius: 8px;
    text-align: center;
    color: #888;
}

/* ── Elementor template-tab ──────────────────────────────── */
.dta-has-template {
    padding: 0; /* template bepaalt zelf de spacing */
}

.dta-notice {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
}

.dta-notice--warn {
    background: #fff8e1;
    border-left: 3px solid #f59e0b;
    color: #333;
}

/* ════════════════════════════════════════════════════════════
   Standalone nav widget (dta_tab_nav)
   ════════════════════════════════════════════════════════════ */

.dta-standalone-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dta-standalone-nav--vertical {
    flex-direction: column;
}

/* Knoppen: erven de stijl van .dta-tab-btn zodat alles consistent is */
.dta-standalone-nav .dta-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 20px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    font-family: inherit;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
}

.dta-standalone-nav .dta-nav-btn:focus,
.dta-standalone-nav .dta-nav-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.dta-standalone-nav .dta-nav-btn:focus-visible {
    outline: 2px solid #7a9e3b !important;
    outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   Standalone content panels widget (dta_tab_content)
   ════════════════════════════════════════════════════════════ */

.dta-standalone-panels {
    position: relative;
}

.dta-standalone-panel {
    padding: 24px;
    border: 1px solid #ddd;
    background: #fff;
}

.dta-standalone-panel[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════
   Mobiele accordion voor de losse widgets
   ────────────────────────────────────────────────────────────
   Onder het ingestelde breekpunt zet JavaScript de klasse
   .dta-acc-mode op zowel de navigatie als de panelen. De tabbalk
   verdwijnt dan en elk paneel krijgt een eigen uitklapkop.
   De koppen staan altijd in de HTML, maar zijn op desktop verborgen.
   ════════════════════════════════════════════════════════════ */

/* Kop is standaard verborgen en wordt alleen in accordion-modus getoond.
   !important is nodig omdat thema's vaak een eigen display-waarde op álle
   <button>-elementen zetten — zonder dit verschijnt de kop ook op desktop. */
.dta-standalone-panels .dta-acc-header,
.dta-acc-header {
    display: none !important;
}

/* Tabbalk verbergen zodra de accordion actief is */
.dta-standalone-nav.dta-acc-mode { display: none !important; }

.dta-standalone-panels.dta-acc-mode {
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* Alle panelen tonen; de eigen paneelopmaak wordt uitgezet zodat de
   accordion één samenhangend blok vormt. !important is nodig omdat de
   Elementor-stijlregels voor .dta-standalone-panel specifieker zijn. */
.dta-standalone-panels.dta-acc-mode .dta-standalone-panel {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

.dta-standalone-panels.dta-acc-mode .dta-standalone-panel + .dta-standalone-panel {
    border-top: 1px solid #d8d8d8 !important;
}

.dta-standalone-panels.dta-acc-mode .dta-acc-header {
    display: flex !important;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: transparent;
    /* border/radius met !important: houdt thema-knopstijlen (randen, pillen)
       buiten de accordion-kop. */
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: left;
    color: #111;
    white-space: normal;
    -webkit-appearance: none;
    outline: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
}

.dta-standalone-panels.dta-acc-mode .dta-acc-header:focus-visible {
    outline: 2px solid #7a9e3b !important;
    outline-offset: -2px;
}

.dta-standalone-panels.dta-acc-mode .dta-acc-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dta-standalone-panels.dta-acc-mode .dta-acc-icon {
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: #7a9e3b;
    margin-top: 2px;
    transition: transform 0.25s ease;
    user-select: none;
}

.dta-standalone-panels.dta-acc-mode .dta-standalone-panel.is-open .dta-acc-icon {
    transform: rotate(45deg);
}

.dta-standalone-panels.dta-acc-mode .dta-acc-body {
    display: none;
    padding: 0 18px 18px;
}

.dta-standalone-panels.dta-acc-mode .dta-standalone-panel.is-open .dta-acc-body {
    display: block;
}

/* ── Mobiele horizontale scroll-tabs ─────────────────────── */
@media (max-width: 768px) {
    /* Tabs scrollen horizontaal i.p.v. afbreken */
    .dta-nav,
    .dta-standalone-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;      /* Firefox */
        padding-bottom: 1px;        /* voorkomt afkappen van border-bottom */
    }

    .dta-nav::-webkit-scrollbar,
    .dta-standalone-nav::-webkit-scrollbar {
        display: none;              /* Chrome / Safari */
    }

    /* Knoppen: niet indrukken */
    .dta-tab-btn,
    .dta-standalone-nav .dta-nav-btn {
        flex-shrink: 0;
    }

    /* FAQ / accordion: compactere maten zodat lange vragen passen */
    .dta-faq-btn,
    .dta-accordion-btn {
        padding: 16px 18px;
        gap: 12px;
        font-size: 14px;
        letter-spacing: 0;
    }

    .dta-faq-antwoord,
    .dta-accordion-panel {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
    }

    .dta-faq-icon,
    .dta-accordion-icon {
        font-size: 22px;
        margin-top: 2px; /* optisch uitlijnen met de eerste tekstregel */
    }

    /* Panelen: minder padding zodat er meer tekstbreedte overblijft */
    .dta-tab-panel,
    .dta-standalone-panel {
        padding: 18px 16px;
    }
}

/* Accordion (actief via JS dta-is-accordion class — zie widget breakpoint-instelling) */
/* Zonder JS: standaard worden tabs getoond (geen accordion-fallback meer) */