/* =========================================================================
 * ZK Elementor Mega Menu — v1.1.0
 * Floating dropdown menu (desktop-only).
 * All colors, sizes, fonts, and icons are driven by CSS vars + Elementor controls.
 * ========================================================================= */

.zkmm {
    /* ---- Tokens (overridden by Elementor controls) ---- */
    --zkmm-menu-bg: transparent;
    --zkmm-pill-bg: #ffffff;
    --zkmm-pill-bg-active: #ececec;
    --zkmm-panel-bg: transparent;
    --zkmm-card-bg: #ffffff;
    --zkmm-text-color: #111111;
    --zkmm-text-color-hover: #0b5a6b;
    --zkmm-active-bg: #ececec;
    --zkmm-pointer-color: #d63384;
    --zkmm-pointer-thickness: 3px;
    --zkmm-radius: 16px;
    --zkmm-icon-color: #0b5a6b;
    --zkmm-icon-color-hover: #000000;
    --zkmm-panel-min-w: 320px;
    --zkmm-panel-max-w: 1280px;
    --zkmm-panel-offset: 28px;
    --zkmm-card-gap: 14px;
    --zkmm-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.18), 0 6px 14px -8px rgba(15, 23, 42, 0.12);

    color: var(--zkmm-text-color);
    width: 100%;
    position: relative;
}

.zkmm *,
.zkmm *::before,
.zkmm *::after {
    box-sizing: border-box;
}

/* Shadow variants — applied to each card, not the wrapper */
.zkmm-shadow-none .zkmm__submenu-col,
.zkmm-shadow-none .zkmm__content-col,
.zkmm-shadow-none .zkmm__featured { box-shadow: none; }
.zkmm-shadow-soft .zkmm__submenu-col,
.zkmm-shadow-soft .zkmm__content-col,
.zkmm-shadow-soft .zkmm__featured { box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.18); }
.zkmm-shadow-medium .zkmm__submenu-col,
.zkmm-shadow-medium .zkmm__content-col,
.zkmm-shadow-medium .zkmm__featured { box-shadow: var(--zkmm-shadow); }
.zkmm-shadow-strong .zkmm__submenu-col,
.zkmm-shadow-strong .zkmm__content-col,
.zkmm-shadow-strong .zkmm__featured { box-shadow: 0 30px 60px -18px rgba(15, 23, 42, 0.32), 0 10px 22px -8px rgba(15, 23, 42, 0.18); }

/* =========================================================================
 * TOP MENU BAR — transparent, items are individual pills
 * ========================================================================= */
.zkmm__top {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--zkmm-menu-bg);
    padding: 0;
    position: relative;
}

.zkmm__top-item {
    position: relative; /* anchors the floating panel for left/center/right alignments */
}

/* Top-level button / link — always a pill */
.zkmm__tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: var(--zkmm-pill-bg);
    color: inherit;
    cursor: pointer;
    padding: 14px 22px;
    border-radius: calc(var(--zkmm-radius) - 4px);
    font-size: 18px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
    white-space: normal;          /* allow wrapping when titles are long */
    text-align: left;
    max-width: 100%;
}

.zkmm__tab-btn:hover,
.zkmm__tab-btn:focus-visible {
    color: var(--zkmm-text-color-hover);
    outline: none;
}

.zkmm__tab-btn[aria-expanded="true"] {
    background: var(--zkmm-pill-bg-active);
    color: var(--zkmm-text-color-hover);
}

/* Active underline pointer — on the open/active dropdown item AND on hover
 * for plain link tabs (which have no panel to expand and otherwise wouldn't
 * receive any pill / pointer treatment). */
.zkmm__tab-btn[aria-expanded="true"]::after,
.zkmm__tab-btn--link:hover::after,
.zkmm__tab-btn--link:focus-visible::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 8px;
    height: var(--zkmm-pointer-thickness);
    border-radius: 999px;
    background: var(--zkmm-pointer-color);
}

/* Pill background on hover for link tabs (matches active dropdown styling) */
.zkmm__tab-btn--link:hover,
.zkmm__tab-btn--link:focus-visible {
    background: var(--zkmm-pill-bg-active);
    color: var(--zkmm-text-color-hover);
}

/* Caret */
.zkmm__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    color: currentColor;
    flex: 0 0 auto;
}

.zkmm__tab-btn[aria-expanded="true"] .zkmm__caret {
    transform: rotate(180deg);
}

/* =========================================================================
 * FLOATING PANEL (desktop) — transparent wrapper containing 1–3 cards
 * ========================================================================= */
/* Top item becomes the anchor; we use static positioning so JS can position
   the panel relative to .zkmm itself and clamp it to the nav width. */
.zkmm__top-item.has-children { position: static; }

.zkmm__panel {
    position: absolute;
    top: 100%;
    margin-top: var(--zkmm-panel-offset);
    background: var(--zkmm-panel-bg);    /* transparent by default */
    z-index: 1000;
    min-width: var(--zkmm-panel-min-w);
    max-width: var(--zkmm-panel-max-w);
    width: max-content;                  /* fit content within min/max */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    /* JS sets `left` (and removes `right`) at runtime to anchor under the
       active top item and clamp to the nav width — these defaults apply
       only as a no-JS fallback. */
    left: 0;
}

.zkmm__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Smoothly slide horizontally when shifting between left-anchor and
       right-anchor positions (e.g. opening/closing the right card). Only
       enabled while open so the initial appearance doesn't sweep across. */
    transition: opacity 0.18s ease, transform 0.18s ease, left 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Invisible bridge so cursor can cross the gap without closing the panel */
.zkmm__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--zkmm-panel-offset) * -1);
    height: var(--zkmm-panel-offset);
}

/* Default: split layout (left groups + right leaves) — cards size to content,
   no inner padding on the wrapper, only a gap between cards. */
.zkmm__panel-grid {
    display: flex;
    align-items: flex-start;
    gap: var(--zkmm-card-gap);
    padding: 0;
    flex-wrap: nowrap;
}

/* Single-column panel (no 3rd-level children) */
.zkmm__panel--single {
    min-width: 0;
    width: max-content;
    max-width: var(--zkmm-panel-max-w);
}
.zkmm__panel--single .zkmm__panel-grid {
    padding: 0;
    gap: 0;
}

/* Independent rounded cards — each is its own visual element */
.zkmm__submenu-col,
.zkmm__content-col,
.zkmm__featured {
    background: var(--zkmm-card-bg);
    border-radius: var(--zkmm-radius);
    padding: 12px;
    box-shadow: var(--zkmm-shadow);
}

/* Left card (group list): fixed-ish width */
.zkmm__submenu-col {
    width: max-content;
    min-width: 220px;
    max-width: 360px;
    flex: 0 0 auto;
}

/* Right card (active group's leaves): sized to content */
.zkmm__content-col {
    width: max-content;
    min-width: 240px;
    max-width: 720px;
    flex: 0 0 auto;
    align-self: flex-start;        /* right card only as tall as its own content */
}

/* Hide the right card entirely when the active group is childless (mixed-children menus). */
.zkmm__panel--split.zkmm__panel--no-content .zkmm__content-col {
    display: none;
}
/* CSS-only fallback: hide the right card when no leaf-grid inside is active. */
.zkmm__panel--split .zkmm__content-col:not(:has(.zkmm__leaf-grid.is-active)) {
    display: none;
}
.zkmm__content-col--full {
    /* Single-column case — just the leaf list, fits content */
    width: max-content;
    min-width: 220px;
}

/* Submenu group buttons (left column) */
.zkmm__submenu-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 14px 16px 18px;
    border-radius: calc(var(--zkmm-radius) - 8px);
    font-size: 17px;
    margin-bottom: 6px;
    line-height: 1.3;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.zkmm__submenu-btn:focus-visible,
.zkmm__submenu-btn.is-active {
    background: var(--zkmm-active-bg);
    color: var(--zkmm-text-color-hover);
    outline: none;
}

/* Underline indicator: ONLY on the active row, never on raw :hover.
   Hover state is driven by JS adding .is-active so we get exactly one
   highlighted row at a time and no "stuck" hover artifacts. */
.zkmm__submenu-btn.is-active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 36px;
    bottom: 6px;
    height: var(--zkmm-pointer-thickness);
    border-radius: 999px;
    background: var(--zkmm-pointer-color);
}

.zkmm__submenu-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;       /* wrap long titles */
}

/* Childless rows in split mode — plain link, no chevron, same hit area + active style. */
.zkmm__submenu-btn--leaf {
    text-decoration: none;
    color: inherit;
}
.zkmm__submenu-btn--leaf:hover,
.zkmm__submenu-btn--leaf:focus-visible,
.zkmm__submenu-btn--leaf.is-active {
    text-decoration: none;
}

.zkmm__arrow {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1;
    color: currentColor;
    margin-left: 10px;
}

/* =========================================================================
 * LEAF LIST (single-column panels) — vertical, text-only
 * ========================================================================= */
.zkmm__leaf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zkmm__leaf-list-item { margin: 0; }

.zkmm__leaf-link--text {
    position: relative;
    display: block;
    padding: 10px 14px 14px;       /* extra bottom space for the underline */
    border-radius: calc(var(--zkmm-radius) - 8px);
    text-decoration: none;
    color: inherit;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
    transition: background-color 0.18s ease, color 0.18s ease;
    min-width: 220px;
}
.zkmm__leaf-link--text:hover,
.zkmm__leaf-link--text:focus-visible {
    background: var(--zkmm-active-bg);
    color: var(--zkmm-text-color-hover);
    outline: none;
}

/* Pointer underline on hover/focus — same treatment as the rest of the menu */
.zkmm__leaf-link--text:hover::after,
.zkmm__leaf-link--text:focus-visible::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: var(--zkmm-pointer-thickness);
    border-radius: 999px;
    background: var(--zkmm-pointer-color);
}

/* =========================================================================
 * LEAF GRID (right column of split layout)
 * ========================================================================= */
.zkmm__leaf-grid {
    display: none;
    grid-template-columns: repeat(var(--zkmm-leaf-cols, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--zkmm-leaf-rows, 1), auto);
    grid-auto-flow: column;        /* fill columns top-to-bottom, then move right */
    gap: 4px 10px;
    align-content: start;
    align-self: start;             /* don't stretch to match the left card's height */
}

.zkmm__leaf-grid.is-active {
    display: grid;
}

.zkmm__leaf-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: calc(var(--zkmm-radius) - 8px);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.zkmm__leaf-link:hover,
.zkmm__leaf-link:focus-visible {
    background: var(--zkmm-active-bg);
    color: var(--zkmm-text-color-hover);
    outline: none;
}

.zkmm__leaf-link:hover .zkmm__icon,
.zkmm__leaf-link:focus-visible .zkmm__icon {
    color: var(--zkmm-icon-color-hover);
}

.zkmm__icon {
    color: var(--zkmm-icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}
.zkmm__icon i {
    font-size: inherit;
    line-height: 1;
}
.zkmm__icon svg {
    display: block;
    fill: currentColor;
    color: currentColor;
}

.zkmm__leaf-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
    word-break: break-word;       /* wrap long titles */
    overflow-wrap: anywhere;
}

/* =========================================================================
 * FEATURED CARD (right column of split layout when configured)
 * ========================================================================= */
.zkmm__featured {
    background: var(--zkmm-card-bg);
    border-radius: calc(var(--zkmm-radius) - 4px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--zkmm-text-color);
}

.zkmm__featured-image {
    width: 100%;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

.zkmm__featured-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.zkmm__featured-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zkmm-pointer-color);
    margin: 0;
}

.zkmm__featured-title {
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.zkmm__featured-desc {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}

.zkmm__featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--zkmm-pointer-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.zkmm__featured-cta:hover,
.zkmm__featured-cta:focus-visible {
    transform: translateY(-1px);
    outline: none;
    opacity: 0.92;
}
.zkmm__featured-cta span { transition: transform 0.15s ease; }
.zkmm__featured-cta:hover span { transform: translateX(2px); }

/* =========================================================================
 * EMPTY / FALLBACK STATES
 * ========================================================================= */
.zkmm-empty,
.zkmm__submenu-fallback {
    padding: 16px;
    border-radius: 12px;
    background: #f4f4f4;
}

/* =========================================================================
 * REDUCED MOTION
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .zkmm__panel,
    .zkmm__tab-btn,
    .zkmm__submenu-btn,
    .zkmm__leaf-link,
    .zkmm__caret {
        transition: none !important;
    }
}