/* ═══════════════════════════════════════════════
   Mega Menu Hover Widget v3
   Native <details>/<summary> + overlay content
   ═══════════════════════════════════════════════ */

/* ── Accordion Container ── */
.mmh-accordion {
    display: flex;
    flex-direction: column;
}

/* ── Accordion Item (details element) ── */
.mmh-accordion-item {
    border: 1px solid #d5d8dc;
    position: relative;
}

.mmh-accordion-item + .mmh-accordion-item {
    border-top: none;
}

/* Remove default details marker */
.mmh-accordion-item > summary {
    list-style: none;
}

.mmh-accordion-item > summary::-webkit-details-marker {
    display: none;
}

.mmh-accordion-item > summary::marker {
    content: '';
}

/* ── Summary / Title ── */
.mmh-item-title {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    outline: none;
    background: transparent;
    transition: background-color 0.2s ease;
    user-select: none;
}

.mmh-item-title:hover {
    background-color: rgba(0,0,0,0.02);
}

.mmh-item-title-header {
    display: flex;
    align-items: center;
}

.mmh-item-title-text {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    color: inherit;
}

/* ── Icon ── */
.mmh-item-title-icon {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-inline-start: 10px;
    flex-shrink: 0;
}

.mmh-item-title-icon i,
.mmh-item-title-icon svg {
    width: 1em;
    height: 1em;
    font-size: inherit;
    fill: currentColor;
}

/* Icon toggle */
.mmh-icon-opened {
    display: none;
}

.mmh-accordion-item[open] .mmh-icon-closed {
    display: none;
}

.mmh-accordion-item[open] .mmh-icon-opened {
    display: inline-flex;
}

/* ── Content Container ── */
/* FRONTEND: Content overlays (position absolute) */

/* Frontend overlay mode - content floats above other content */
.mmh-frontend .mmh-accordion-item > .e-con,
.mmh-frontend .mmh-accordion-item > .e-child,
.mmh-frontend .mmh-accordion-item > .elementor-element {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    min-width: 100%;
}

/* ═══════════════════════════════════════════════
   EDITOR MODE
   In editor, <details> works natively as accordion
   Content is NOT overlayed (normal flow for editing)
   ═══════════════════════════════════════════════ */

/* Editor: normal flow for easy editing */
.elementor-editor-active .mmh-accordion-item > .e-con,
.elementor-editor-active .mmh-accordion-item > .e-child {
    position: static;
    box-shadow: none;
    border-radius: 0;
}

/* ═══════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mmh-frontend .mmh-accordion-item > .e-con,
    .mmh-frontend .mmh-accordion-item > .e-child,
    .mmh-frontend .mmh-accordion-item > .elementor-element {
        position: static;
        box-shadow: none;
        border-radius: 0;
    }
}