/* ==========================================================================
   KC STARTER — Mega-menu "Wat doen we"
   ==========================================================================
   Rijk dropdown-paneel onder het hoofdmenu-item "Wat doen we".
   Server-side gerenderd via inc/mega-menu.php; geopend via assets/js/mega-menu.js.
   Kleuren/font via theme.json-presets (met veilige fallback-hex).
   Zie _kc/css-uitzonderingen.md.

   Secties:
     1. Positionering (paneel onder de witte header-balk)
     2. Het paneel zelf (kaart, openen/sluiten)
     3. Grid (kolom 1 parents + kolom 2 losse | kolom 3 CTA)
     4. Diensten met subdiensten (kolom 1)
     5. Losse diensten (kolom 2)
     6. CTA-paneel (kolom 3)
     7. Onderbalk
     8. Standaard core-dropdown van "Wat doen we" onderdrukken
     9. Mobiel: paneel verbergen (mobiele nav volgt later apart)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Positionering — de witte header-balk wordt de positie-context
   -------------------------------------------------------------------------- */
.wp-block-group.alignfull.has-base-background-color:has(.kc-mega) {
    position: relative;
}

/* --------------------------------------------------------------------------
   2. Het paneel zelf
   -------------------------------------------------------------------------- */
.kc-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 12px 40px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    font-family: var(--wp--preset--font-family--body, 'Inter', sans-serif);
}

.kc-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease;
}

.kc-mega__card {
    max-width: 1240px;
    margin: 0 auto;
    background: var(--wp--preset--color--base, #ffffff);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(27, 42, 74, .22);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Grid: links de diensten (main), rechts het CTA-paneel
   -------------------------------------------------------------------------- */
.kc-mega__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 gelijke kolommen: 33,33,33% */
    align-items: stretch;
}

.kc-mega__eyebrow {
    grid-column: 1 / 3;
    grid-row: 1;
    margin: 0;
    padding: 30px 0 0 36px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-2, #D4974A);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kc-mega__eyebrow .fa-gem {
    font-size: 0.72em;
}

/* Icoon-bolletje, gedeeld door kolom 1 + 2 */
.kc-mega__ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-3, #f8f9fc);
    color: var(--wp--preset--color--accent-2, #D4974A);
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   4. Kolom 1 — diensten MÉT subdiensten
   -------------------------------------------------------------------------- */
.kc-mega__col {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kc-mega__col--1 {
    grid-column: 1;
    padding: 18px 24px 36px 36px;
}

.kc-mega__col--2 {
    grid-column: 2;
    padding: 18px 24px 36px 30px;
    border-left: 1px solid #ececf1;
}

.kc-mega__cat-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.kc-mega__cat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kc-mega__cat-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--contrast, #1b2a4a);
}

.kc-mega__cat-desc {
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--wp--preset--color--custom-color-3, #4a5568);
}

.kc-mega__cat-link:hover .kc-mega__cat-title {
    color: var(--wp--preset--color--accent-4, #2b4c7e);
}

.kc-mega__sub {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 0 0 58px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kc-mega__sub a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--wp--preset--color--custom-color-3, #4a5568);
    transition: color .15s ease;
}

.kc-mega__sub a .fa-angle-right {
    font-size: 0.7em;
    color: var(--wp--preset--color--accent-2, #D4974A);
    transition: transform .15s ease;
}

.kc-mega__sub a:hover {
    color: var(--wp--preset--color--accent-2, #D4974A);
}

.kc-mega__sub a:hover .fa-angle-right {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   5. Kolom 2 — losse diensten
   -------------------------------------------------------------------------- */
/* "Hoe werken we" — bewust afwijkend (gestippelde rand, teal icoon),
   zodat duidelijk is dat het GÉÉN dienst is. */
.kc-mega__aside {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    padding: 12px 14px;
    text-decoration: none;
    border: 1px dashed var(--wp--preset--color--custom-color-4, #bec2c9);
    border-radius: 12px;
    transition: border-color .15s ease, background-color .15s ease;
}

.kc-mega__aside:hover {
    border-color: var(--wp--preset--color--accent-1, #79a8be);
    background: var(--wp--preset--color--accent-3, #f8f9fc);
}

.kc-mega__aside .kc-mega__ico {
    background: rgba(121, 168, 190, .16);
    color: var(--wp--preset--color--accent-1, #79a8be);
}

.kc-mega__item {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 10px;
    border-radius: 12px;
    transition: background-color .15s ease;
}

.kc-mega__item:hover {
    background: var(--wp--preset--color--accent-3, #f8f9fc);
}

.kc-mega__item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kc-mega__item-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--contrast, #1b2a4a);
}

.kc-mega__item-desc {
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--wp--preset--color--custom-color-3, #4a5568);
}

/* --------------------------------------------------------------------------
   6. Kolom 3 — donker CTA-paneel
   -------------------------------------------------------------------------- */
.kc-mega__cta {
    grid-column: 3;
    grid-row: 1 / 3;
    background: var(--wp--preset--color--custom-color-1, #696156);
    color: var(--wp--preset--color--base, #ffffff);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-mega__cta-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent-2, #D4974A);
}

.kc-mega__cta-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wp--preset--color--base, #ffffff);
}

.kc-mega__cta-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.kc-mega__cta-btn {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--wp--preset--color--accent-2, #D4974A);
    color: var(--wp--preset--color--base, #ffffff);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 13px 22px;
    border-radius: 10px;
    transition: filter .15s ease, transform .15s ease;
}

.kc-mega__cta-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.kc-mega__cta-btn .fa-arrow-right {
    transition: transform .15s ease;
}

.kc-mega__cta-btn:hover .fa-arrow-right {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   7. Onderbalk — "Bekijk alle diensten in één overzicht"
   -------------------------------------------------------------------------- */
.kc-mega__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 36px;
    border-top: 1px solid #ececf1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--wp--preset--color--contrast, #1b2a4a);
    transition: background-color .15s ease;
}

.kc-mega__all:hover {
    background: var(--wp--preset--color--accent-3, #f8f9fc);
}

.kc-mega__all .fa-arrow-right {
    color: var(--wp--preset--color--accent-2, #D4974A);
    transition: transform .15s ease;
}

.kc-mega__all:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   8. Standaard core-dropdown van "Wat doen we" onderdrukken (desktop)
      Het rijke paneel vervangt de gewone flyout, dus die verbergen we.
   -------------------------------------------------------------------------- */
.wp-block-navigation .kc-mega-trigger > .wp-block-navigation__submenu-container {
    display: none;
}

/* Chevron van de trigger laten staan, maar geen klik-only gedrag forceren. */

/* --------------------------------------------------------------------------
   9. Mobiel — paneel verbergen (mobiele navigatie volgt later apart)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .kc-mega {
        display: none;
    }
}