/* =============================================================
   Dionach Mega Menu — on-brand extension for WPBF child theme
   Uses theme CSS vars: --primary, --dark, --darkAlt, --light, --font
   ============================================================= */

/* ── Position context for the panel ─────────────────── */
.wpbf-navigation {
    position: relative;
    overflow: visible !important;
}

/* ── Suppress native WPBF dropdowns for mega items ──── */
#menu-item-8134.dmp-trigger > .sub-menu,
#menu-item-11242.dmp-trigger > .sub-menu {
    display:        none !important;
    visibility:     hidden !important;
    opacity:        0 !important;
    pointer-events: none !important;
    height:         0 !important;
    overflow:       hidden !important;
}

/* ── Mega panel shell ─────────────────────────────────── */
.dmp-panel {
    display:    block !important; /* Override any WPBF sub-menu display:none rules */
    position:   absolute;
    top:        100%;
    left:       0;
    right:      0;
    width:      100%;
    background: var(--dark);
    border-top: 3px solid var(--primary);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    z-index:    9999;

    /* Entry animation — hidden via opacity/pointer-events, not display */
    opacity:        0;
    transform:      translateY(-8px);
    pointer-events: none;
    transition:     opacity 0.2s ease, transform 0.2s ease;
    visibility:     visible !important;
}

.dmp-panel.is-open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* ── Inner max-width wrapper ─────────────────────────── */
.dmp-inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 2rem;
    display:   flex;
}

/* ── LEFT: Tab rail (Services) ───────────────────────── */
.dmp-rail {
    width:          210px;
    flex-shrink:    0;
    border-right:   1px solid rgba(255, 255, 255, 0.08);
    padding:        28px 0;
    display:        flex;
    flex-direction: column;
}

.dmp-rail-label {
    font-family:     var(--font);
    font-size:       10px;
    font-weight:     700;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    color:           rgba(255, 255, 255, 0.35);
    padding:         0 20px 14px;
    margin:          0;
}

.dmp-tab {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         11px 20px;
    background:      none;
    border:          none;
    border-left:     2px solid transparent;
    font-family:     var(--font);
    font-size:       14.5px;
    font-weight:     500;
    color:           rgba(255, 255, 255, 0.8);
    cursor:          pointer;
    text-align:      left;
    transition:      color 0.15s, background 0.15s, border-color 0.15s;
    width:           100%;
}

.dmp-tab:hover {
    color:      #fff;
    background: rgba(255, 255, 255, 0.05);
}

.dmp-tab.is-active {
    color:            var(--primary);
    background:       rgba(244, 180, 3, 0.08);
    border-left-color: var(--primary);
}

.dmp-tab-arrow {
    font-style:  normal;
    font-size:   16px;
    line-height: 1;
    opacity:     0;
    transform:   translateX(-4px);
    transition:  opacity 0.15s, transform 0.15s;
    color:       var(--primary);
    flex-shrink: 0;
}

.dmp-tab:hover .dmp-tab-arrow,
.dmp-tab.is-active .dmp-tab-arrow {
    opacity:   1;
    transform: translateX(0);
}

/* ── CENTRE: Service panes ───────────────────────────── */
.dmp-panes {
    flex:    1;
    min-width: 0;
    padding: 28px 28px 28px 30px;
}

.dmp-pane {
    display: none;
}

.dmp-pane.is-active {
    display: block;
}

.dmp-pane-heading {
    font-family:    var(--font);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--primary);
    margin:         0 0 16px;
}

.dmp-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   2px;
}

.dmp-grid-item {
    display:         flex;
    align-items:     flex-start;
    gap:             12px;
    padding:         10px 12px;
    border-radius:   6px;
    text-decoration: none !important;
    transition:      background 0.15s;
}

.dmp-grid-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dmp-item-icon {
    width:       32px;
    height:      32px;
    flex-shrink: 0;
    border-radius: 6px;
    background:  rgba(244, 180, 3, 0.1);
    border:      1px solid rgba(244, 180, 3, 0.18);
    display:     flex;
    align-items: center;
    justify-content: center;
    margin-top:  1px;
}

.dmp-item-icon svg {
    width:          15px;
    height:         15px;
    stroke:         var(--primary);
    fill:           none;
    stroke-width:   1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmp-item-name {
    display:       block;
    font-family:   var(--font);
    font-size:     14px;
    font-weight:   600;
    color:         #fff !important;
    line-height:   1.3;
    margin-bottom: 3px;
    transition:    color 0.15s;
}

.dmp-grid-item:hover .dmp-item-name {
    color: var(--primary) !important;
}

.dmp-item-desc {
    display:     block;
    font-family: var(--font);
    font-size:   12.5px;
    color:       rgba(255, 255, 255, 0.68);
    line-height: 1.5;
}

/* Section divider within pane (e.g. "Adversary Simulation") */
.dmp-section-label {
    grid-column:    1 / -1;
    font-family:    var(--font);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.28);
    padding:        14px 12px 4px;
    margin-top:     4px;
    border-top:     1px solid rgba(255, 255, 255, 0.06);
}

.dmp-section-label:first-child {
    border-top:  none;
    margin-top:  0;
    padding-top: 0;
}

/* ── RIGHT: CTA panel ────────────────────────────────── */
.dmp-cta {
    width:           220px;
    flex-shrink:     0;
    border-left:     1px solid rgba(255, 255, 255, 0.08);
    padding:         28px 22px;
    display:         flex;
    flex-direction:  column;
    background:      rgba(244, 180, 3, 0.03);
}

.dmp-cta-title {
    font-family:  var(--font);
    font-size:    15px;
    font-weight:  700;
    color:        #fff;
    line-height:  1.35;
    margin:       0 0 10px;
}

.dmp-cta-body {
    font-family: var(--font);
    font-size:   12.5px;
    color:       rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin:      0 0 18px;
    flex:        1;
}

.dmp-cta-btn {
    display:         block;
    text-align:      center;
    padding:         10px 16px;
    background:      var(--primary);
    color:           var(--dark) !important;
    text-decoration: none !important;
    font-family:     var(--font);
    font-size:       13px;
    font-weight:     700;
    border-radius:   4px;
    transition:      filter 0.15s;
}

.dmp-cta-btn:hover {
    filter: brightness(1.1);
}

.dmp-cta-accreds {
    margin-top:  20px;
    padding-top: 16px;
    border-top:  1px solid rgba(255, 255, 255, 0.07);
}

.dmp-cta-accreds-label {
    font-family:    var(--font);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.28);
    margin:         0 0 8px;
}

.dmp-accred-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       5px;
}

.dmp-accred-pill {
    padding:      3px 8px;
    background:   rgba(255, 255, 255, 0.05);
    border:       1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    font-family:  var(--font);
    font-size:    10px;
    font-weight:  600;
    color:        rgba(255, 255, 255, 0.55);
}

/* ── Industries: full-width grid ─────────────────────── */
.dmp-industries-inner {
    flex-direction: column;
    padding:        28px 0;
    min-height:     auto;
}

.dmp-industries-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.dmp-industries-title {
    font-family:    var(--font);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--primary);
    margin:         0;
}

.dmp-industries-all {
    font-family:     var(--font);
    font-size:       12px;
    color:           rgba(255, 255, 255, 0.45);
    text-decoration: none !important;
    transition:      color 0.15s;
}

.dmp-industries-all:hover {
    color: var(--primary);
}

.dmp-industries-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   4px;
}

.dmp-industry-item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         14px;
    border-radius:   6px;
    text-decoration: none !important;
    transition:      background 0.15s;
}

.dmp-industry-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dmp-industry-icon {
    width:       36px;
    height:      36px;
    flex-shrink: 0;
    border-radius: 7px;
    background:  rgba(255, 255, 255, 0.05);
    border:      1px solid rgba(255, 255, 255, 0.07);
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.15s, border-color 0.15s;
}

.dmp-industry-icon svg {
    width:          18px;
    height:         18px;
    stroke:         rgba(255, 255, 255, 0.6);
    fill:           none;
    stroke-width:   1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:     stroke 0.15s;
}

.dmp-industry-item:hover .dmp-industry-icon {
    background:   rgba(244, 180, 3, 0.1);
    border-color: rgba(244, 180, 3, 0.2);
}

.dmp-industry-item:hover .dmp-industry-icon svg {
    stroke: var(--primary);
}

.dmp-industry-name {
    font-family: var(--font);
    font-size:   14px;
    font-weight: 500;
    color:       rgba(255, 255, 255, 0.9);
    line-height: 1.35;
    transition:  color 0.15s;
}

.dmp-industry-item:hover .dmp-industry-name {
    color: #fff;
}



/* ── Mobile: hide mega panels, restore native dropdowns ─ */
@media (max-width: 1024px) {
    .dmp-panel {
        display: none !important;
    }

    #menu-item-8134.dmp-trigger > .sub-menu,
    #menu-item-11242.dmp-trigger > .sub-menu {
        display:        block !important;
        visibility:     visible !important;
        opacity:        1 !important;
        pointer-events: auto !important;
        height:         auto !important;
        overflow:       visible !important;
    }
}