/* ==========================================================================
   VKFA Accordion Menu Widget — Stylesheet v1.3
   Huisstijl: donkerblauw #1a3a5c | oranje #f5a020 | wit #ffffff
   ========================================================================== */

/* --------------------------------------------------------------------------
   Widget wrapper
   -------------------------------------------------------------------------- */
.vkfa-accordion-menu-widget {
    font-family: inherit;
}

/* Widget-titel */
.vkfa-accordion-menu-widget .widget-title,
.vkfa-accordion-menu-widget h2,
.vkfa-accordion-menu-widget h3 {
    background-color: #1a3a5c;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 4px 4px 0 0;
}

/* --------------------------------------------------------------------------
   Nav wrapper
   -------------------------------------------------------------------------- */
.vkfa-accordion-nav {
    border: 1px solid #d0dae6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    background: #ffffff;
}

/* --------------------------------------------------------------------------
   Lijsten — reset alle thema-marges en -padding
   -------------------------------------------------------------------------- */
.vkfa-accordion-list,
.vkfa-accordion-nav ul,
.vkfa-accordion-nav ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sublijst: standaard verborgen */
.vkfa-accordion-sub {
    display: none;
    background-color: #f0f4f8;
    border-top: 1px solid #d0dae6;
}

.vkfa-accordion-sub.vkfa-open {
    display: block;
    animation: vkfa-slide-down 0.2s ease forwards;
}

/* --------------------------------------------------------------------------
   Lijst-items — reset Divi .et_pb_widget ul li { margin-bottom: 0.5em }
   -------------------------------------------------------------------------- */
.vkfa-accordion-nav li,
.vkfa-accordion-list li,
.vkfa-accordion-sub li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.vkfa-accordion-list > li {
    border-bottom: 1px solid #d0dae6;
}

.vkfa-accordion-list > li:last-child {
    border-bottom: none;
}

.vkfa-accordion-sub > li {
    border-bottom: 1px solid #dce4ed;
}

.vkfa-accordion-sub > li:last-child {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   Item-rij (link + toggle-knop naast elkaar)
   -------------------------------------------------------------------------- */
.vkfa-item-row {
    display: flex !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Links — vaste padding, geen thema-overrides
   -------------------------------------------------------------------------- */
.vkfa-accordion-nav .vkfa-item-link,
.vkfa-accordion-nav a.vkfa-item-link {
    display: block !important;
    flex: 1 1 auto;
    padding: 0.65rem 1rem !important;
    margin: 0 !important;
    color: #1a3a5c !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    line-height: 1.35 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
    border: none !important;
    background: none;
}

.vkfa-accordion-nav .vkfa-item-link:hover,
.vkfa-accordion-nav a.vkfa-item-link:hover,
.vkfa-accordion-nav .vkfa-item-link:focus,
.vkfa-accordion-nav a.vkfa-item-link:focus {
    background-color: #e8f0f8 !important;
    color: #f5a020 !important;
    outline: none;
    text-decoration: none !important;
}

/* Actief / huidig item */
.vkfa-accordion-nav li.current-menu-item > .vkfa-item-link,
.vkfa-accordion-nav li.current-menu-item > .vkfa-item-row > .vkfa-item-link,
.vkfa-accordion-nav li.current-page-ancestor > .vkfa-item-row > .vkfa-item-link,
.vkfa-accordion-nav li.current-menu-ancestor > .vkfa-item-row > .vkfa-item-link,
.vkfa-accordion-nav li[data-active="true"] > .vkfa-item-link,
.vkfa-accordion-nav li[data-active="true"] > .vkfa-item-row > .vkfa-item-link {
    color: #f5a020 !important;
    background-color: #eef4fb !important;
}

/* Sub-niveau links iets ingerückt */
.vkfa-accordion-sub .vkfa-item-link,
.vkfa-accordion-sub a.vkfa-item-link {
    padding-left: 1.6rem !important;
    font-weight: 400;
    color: #2c4e72 !important;
    font-size: 0.875rem !important;
}

/* Derde niveau */
.vkfa-accordion-sub .vkfa-accordion-sub .vkfa-item-link,
.vkfa-accordion-sub .vkfa-accordion-sub a.vkfa-item-link {
    padding-left: 2.25rem !important;
}

/* --------------------------------------------------------------------------
   Toggle-knop — display:flex !important om Divi-overrides te voorkomen
   -------------------------------------------------------------------------- */
.vkfa-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid #d0dae6 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    transition: background-color 0.2s ease;
    color: #1a3a5c;
    box-shadow: none !important;
    outline: none;
    border-radius: 0 !important;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
}

.vkfa-toggle:hover,
.vkfa-toggle:focus {
    background-color: #1a3a5c !important;
    outline: none;
}

/* --------------------------------------------------------------------------
   Pijl-icoon — SVG chevron via background-image voor perfecte centrering
   -------------------------------------------------------------------------- */
.vkfa-toggle-icon {
    display: block !important;
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a3a5c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.25s ease;
    transform: rotate(0deg);
    margin: 0 !important;
    padding: 0 !important;
}

/* Pijl omhoog wanneer open */
.vkfa-toggle[aria-expanded="true"] .vkfa-toggle-icon {
    transform: rotate(180deg);
}

/* Wit pijltje bij hover/focus */
.vkfa-toggle:hover .vkfa-toggle-icon,
.vkfa-toggle:focus .vkfa-toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Oranje toggle bij actieve parent */
.vkfa-accordion-nav li.current-menu-ancestor > .vkfa-item-row > .vkfa-toggle,
.vkfa-accordion-nav li.current-page-ancestor > .vkfa-item-row > .vkfa-toggle,
.vkfa-accordion-nav li[data-active="true"] > .vkfa-item-row > .vkfa-toggle,
.vkfa-accordion-nav li[data-active-parent="true"] > .vkfa-item-row > .vkfa-toggle {
    background-color: #f5a020 !important;
}

.vkfa-accordion-nav li.current-menu-ancestor > .vkfa-item-row > .vkfa-toggle .vkfa-toggle-icon,
.vkfa-accordion-nav li.current-page-ancestor > .vkfa-item-row > .vkfa-toggle .vkfa-toggle-icon,
.vkfa-accordion-nav li[data-active="true"] > .vkfa-item-row > .vkfa-toggle .vkfa-toggle-icon,
.vkfa-accordion-nav li[data-active-parent="true"] > .vkfa-item-row > .vkfa-toggle .vkfa-toggle-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Animatie sublijst
   -------------------------------------------------------------------------- */
@keyframes vkfa-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Geen widget-titel: afgeronde bovenkant nav
   -------------------------------------------------------------------------- */
.vkfa-accordion-menu-widget:not(:has(.widget-title)) .vkfa-accordion-nav,
.vkfa-accordion-menu-widget:not(:has(h2)):not(:has(h3)) .vkfa-accordion-nav {
    border-top: 1px solid #d0dae6;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .vkfa-accordion-nav .vkfa-item-link,
    .vkfa-accordion-nav a.vkfa-item-link {
        padding: 0.75rem 1rem !important;
    }

    .vkfa-toggle {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
    }
}