/* ==========================================================================
   Leenweb Breakdance Addons - Menu Mega Dropdown
   ========================================================================== */

.lwbda-mmdd-wrap {
    list-style: none;
    position: relative;
}

/* --- Trigger: erft van Breakdance ----------------------------------------- */
.lwbda-mmdd-trigger {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.lwbda-mmdd-trigger:focus { outline: none; }
.lwbda-mmdd-trigger-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    transition: transform 0.2s ease;
}
.lwbda-mmdd-trigger-caret svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}
.lwbda-mmdd-wrap.is-open .lwbda-mmdd-trigger-caret {
    transform: rotate(180deg);
}

/* --- Panel: alleen vertical slide-down animatie -------------------------- */
.lwbda-mmdd-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: var(--lwbda-mmdd-panel-spacing, 0);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
.lwbda-mmdd-wrap.is-open .lwbda-mmdd-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.lwbda-mmdd-panel-inner {
    background: var(--lwbda-mmdd-panel-bg, #ffffff);
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 2fr);
    gap: 0;
    /* Geen linker-padding: de linkerkolom staat vlak tegen de paneelrand,
       zodat het hover-vlak tot links kan doorlopen zonder buiten het paneel te komen. */
    padding: var(--lwbda-mmdd-panel-padding, 24px 24px 24px 0);
    min-height: var(--lwbda-mmdd-panel-min-height, 320px);
    width: var(--lwbda-mmdd-max-width, 1200px);
    max-width: 95vw;
    margin: 0 auto;
    box-shadow: var(--lwbda-mmdd-panel-shadow, 0 8px 24px rgba(0,0,0,0.12));
}

/* --- Left column ---------------------------------------------------------- */
.lwbda-mmdd-col-left {
    border-right: 1px solid #e5e7eb;
    padding-right: 16px;
}
.lwbda-mmdd-group + .lwbda-mmdd-group {
    margin-top: 24px;
}
.lwbda-mmdd-group-title {
    position: relative;
    display: inline-block;
    margin: 0 0 12px 24px;
    padding-bottom: 10px;
    font-size: var(--lwbda-mmdd-group-fs, 16px);
    font-weight: 700;
    color: var(--lwbda-mmdd-group-color, #0a1f3d);
}
.lwbda-mmdd-group-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* Standaard even breed als de titeltekst (dankzij inline-block).
       Vul "Underline breedte" in de Design-tab in voor een vaste breedte. */
    width: var(--lwbda-mmdd-group-underline-width, 100%);
    height: var(--lwbda-mmdd-group-underline-thickness, 2px);
    background: var(--lwbda-mmdd-group-underline, #c00);
}
.lwbda-mmdd-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lwbda-mmdd-cat-item + .lwbda-mmdd-cat-item {
    margin-top: 2px;
}
.lwbda-mmdd-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    /* Vult de volledige linkerkolom; het hover-vlak loopt zo tot de paneelrand
       (want de kolom staat vlak tegen die rand) en de tekst springt via
       padding-left netjes in, uitgelijnd met de titels. */
    width: 100%;
    padding: var(--lwbda-mmdd-cat-padding, 10px 16px 10px 24px);
    background: transparent;
    border: 0;
    color: var(--lwbda-mmdd-cat-color, #0a1f3d);
    text-decoration: none;
    font-size: var(--lwbda-mmdd-cat-fs, 15px);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    border-radius: var(--lwbda-mmdd-cat-hover-radius, 0);
    transition: background 0.15s ease, color 0.15s ease;
}
.lwbda-mmdd-cat-link:hover,
.lwbda-mmdd-cat-link.is-active {
    background: var(--lwbda-mmdd-cat-hover-bg, #f0f2f9);
    color: var(--lwbda-mmdd-cat-hover-color, #0a1f3d);
}
.lwbda-mmdd-cat-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--lwbda-mmdd-cat-chevron, #000000);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.lwbda-mmdd-cat-link:hover .lwbda-mmdd-cat-chevron,
.lwbda-mmdd-cat-link.is-active .lwbda-mmdd-cat-chevron {
    opacity: 1;
}
.lwbda-mmdd-cat-chevron svg {
    width: 16px;
    height: 16px;
}

/* --- Right column -------------------------------------------------------- */
.lwbda-mmdd-col-right {
    position: relative;
    padding-left: 24px;
}
.lwbda-mmdd-leaf-panel {
    display: none;
}
.lwbda-mmdd-leaf-panel.is-active {
    display: block;
}
.lwbda-mmdd-leaf-title {
    margin: 0 0 12px;
    font-size: var(--lwbda-mmdd-leaf-title-fs, 15px);
    font-weight: 700;
    color: var(--lwbda-mmdd-leaf-title-color, #0a1f3d);
}
.lwbda-mmdd-leaf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0 24px;
}
.lwbda-mmdd-leaf-list--cols-1 { grid-template-columns: 1fr; }
.lwbda-mmdd-leaf-list--cols-2 { grid-template-columns: 1fr 1fr; }
.lwbda-mmdd-leaf-link {
    display: block;
    padding-top: var(--lwbda-mmdd-leaf-padding, 8px);
    padding-bottom: var(--lwbda-mmdd-leaf-padding, 8px);
    color: var(--lwbda-mmdd-leaf-color, #0a1f3d);
    text-decoration: none;
    font-size: var(--lwbda-mmdd-leaf-fs, 14px);
    line-height: 1.4;
}
.lwbda-mmdd-leaf-link:hover {
    color: var(--lwbda-mmdd-leaf-hover-color, #c00);
    font-weight: 700;
}