/* ================================================================
   PowerDMARC — Tools Mega Menu v6
   ALL rules scoped to .pd-tools-mega-panel — a class added by JS
   ONLY to the Tools dropdown. Every other Groovy mega menu
   (Platform, Services, Resources …) is completely unaffected.

   Column grouping (JS-built .pd-tools-col divs):
     col 1 → DMARC · SPF · DKIM
     col 2 → BIMI  · DNS Tools
     col 3 → MTA-STS · Security
   ================================================================ */

/* ── 0. OUTER GROOVY DROPDOWN PANEL (Tools only) ─────────────── */
/*
 * .pd-tools-dropdown-panel is added by JS to the .gm-dropdown-menu-wrapper
 * that wraps the Tools mega menu — never applied to other menus.
 *
 * width: 100% + max-width: 660px  → replaces Groovy's inline width:1010px
 * right: 20rem                    → shifts panel left so the nav triangle
 *                                   aligns with the Tools link. Adjust this
 *                                   value if the triangle drifts off-centre.
 */
.pd-tools-dropdown-panel {
    width: 100% !important;
    max-width: 720px !important;
    right: 20rem !important;
}

/* ── 1. OUTER WRAPPER ─────────────────────────────────────────── */

.pd-tools-mega-panel {
    display: block !important;
    position: static !important;
    width: auto !important;
    padding: 20px 22px 16px !important;
    box-sizing: border-box;
    background: #fff;
}

.pd-tools-mega-panel .gm-grid-container {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── 2. GRID ROW ─────────────────────────────────────────────────
   After JS runs (.pd-tools-restructured), the row contains three
   .pd-tools-col flex children — one per column.
   ─────────────────────────────────────────────────────────────── */

.pd-tools-mega-panel .gm-grid-row.pd-tools-restructured {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
    width: fit-content !important;
}

.pd-tools-mega-panel .gm-grid-row::before,
.pd-tools-mega-panel .gm-grid-row::after {
    display: none !important;
    content: none !important;
}

/* ── 3. COLUMN WRAPPERS ──────────────────────────────────────────
   flex:0 0 auto → column width = width of its widest content item.
   No borders. Tight column gap (14px each side).
   ─────────────────────────────────────────────────────────────── */

.pd-tools-mega-panel .pd-tools-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: none !important;
}

.pd-tools-mega-panel .pd-tools-col:nth-child(1) { padding-left: 0;    padding-right: 14px; }
.pd-tools-mega-panel .pd-tools-col:nth-child(2) { padding-left: 14px; padding-right: 14px; }
.pd-tools-mega-panel .pd-tools-col:nth-child(3) { padding-left: 14px; padding-right: 0; }

/* ── 4. CATEGORY CARD (.tcat equivalent) ───────────────────────── */

.pd-tools-mega-panel .gm-mega-menu__item {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px;
    align-items: start;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    width: auto !important;
    box-sizing: border-box;
    grid-column: unset !important;
    grid-row: unset !important;
    border: none !important;
}

.pd-tools-mega-panel .pd-tools-col .gm-mega-menu__item:last-child {
    margin-bottom: 0 !important;
}

.pd-tools-mega-panel .pd-tools-col .gm-mega-menu__item + .gm-mega-menu__item {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── 5. ICON BOX ─────────────────────────────────────────────────
   Uses the existing .gm-thumb-menu-item-wrapper image.
   ─────────────────────────────────────────────────────────────── */

.pd-tools-mega-panel .gm-thumb-menu-item-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    padding: 6px !important;
    box-sizing: border-box;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: flex-start;
}

.pd-tools-mega-panel .gm-thumb-menu-item-wrapper img.gm-thumb-menu-item {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-height: unset !important;
    display: block !important;
}

/* Icon background tints — scoped by column + position */
.pd-tools-mega-panel .pd-tools-col:nth-child(1) .gm-mega-menu__item:nth-child(1) .gm-thumb-menu-item-wrapper { background: #eef1fd; } /* DMARC     */
.pd-tools-mega-panel .pd-tools-col:nth-child(1) .gm-mega-menu__item:nth-child(2) .gm-thumb-menu-item-wrapper { background: #eaf7f2; } /* SPF       */
.pd-tools-mega-panel .pd-tools-col:nth-child(1) .gm-mega-menu__item:nth-child(3) .gm-thumb-menu-item-wrapper { background: #fef0ea; } /* DKIM      */
.pd-tools-mega-panel .pd-tools-col:nth-child(2) .gm-mega-menu__item:nth-child(1) .gm-thumb-menu-item-wrapper { background: #fef5e6; } /* BIMI      */
.pd-tools-mega-panel .pd-tools-col:nth-child(2) .gm-mega-menu__item:nth-child(2) .gm-thumb-menu-item-wrapper { background: #e6f8fb; } /* DNS Tools */
.pd-tools-mega-panel .pd-tools-col:nth-child(3) .gm-mega-menu__item:nth-child(1) .gm-thumb-menu-item-wrapper { background: #fef0ea; } /* MTA-STS   */
.pd-tools-mega-panel .pd-tools-col:nth-child(3) .gm-mega-menu__item:nth-child(2) .gm-thumb-menu-item-wrapper { background: #feeaee; } /* Security  */

/* ── 6. CATEGORY TITLE + DESCRIPTION ────────────────────────────── */

.pd-tools-mega-panel .gm-mega-menu__item__title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    min-height: 32px;
    padding: 0 0 5px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    cursor: default;
}

.pd-tools-mega-panel .gm-mega-menu__item__title .gm-anchor {
    display: contents !important;
    pointer-events: none;
}

.pd-tools-mega-panel .gm-mega-menu__item__title .gm-menu-item__txt-wrapper {
    display: block !important;
}

/* Category name (.tcat-title) */
.pd-tools-mega-panel .gm-mega-menu__item__title .gm-menu-item__txt {
    color: #0d1b2e !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    display: block !important;
    line-height: 1.2;
}

/* Description subtitles removed — title only */
.pd-tools-mega-panel .gm-mega-menu__item__title::after {
    display: none !important;
    content: none !important;
}

.pd-tools-mega-panel .gm-mega-menu__item__title::before {
    display: none !important;
    content: none !important;
}

/* Remove all hover effects on the category title wrapper — Groovy Menu
   and grid-33 default styles add unwanted highlight on these items.
   Only the individual tool links below should have hover states. */
.pd-tools-mega-panel .gm-mega-menu__item:hover .gm-mega-menu__item__title,
.pd-tools-mega-panel .gm-mega-menu__item__title:hover,
.pd-tools-mega-panel .gm-mega-menu__item__title .gm-anchor:hover,
.pd-tools-mega-panel .gm-mega-menu-title-item:hover {
    background: transparent !important;
    color: inherit !important;
    cursor: default !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* ── 7. TOOL LINKS (.tool-list / .tool-a) ───────────────────────── */

.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper {
    display: block !important;
    position: static !important;
    left: auto !important; top: auto !important;
    right: auto !important; bottom: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: max-content !important;
    max-height: none !important;
    min-height: unset !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
    transition: none !important;
}

.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* li — reset Groovy height overrides */
.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li {
    height: auto !important;
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
    width: auto !important;
    float: none !important;
    display: block !important;
}

.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li .gm-anchor {
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
}

/* .tool-a */
.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px;
    padding: 5px 7px !important;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.1s, color 0.1s;
    line-height: 1.3;
    width: 100% !important;
    box-sizing: border-box;
    height: auto !important;
    min-height: unset !important;
}

/* Arrow › — hidden, appears on hover */
.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a::after {
    content: '›' !important;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.1s, transform 0.1s, color 0.1s;
    display: inline !important;
}

.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a::before {
    display: none !important;
    content: none !important;
}

/* Hover */
.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a:hover {
    background: #eef1fd !important;
    color: #5274ec !important;
}

.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a:hover::after {
    opacity: 1;
    transform: translateX(2px);
    color: #5274ec;
}

/* Transparent Groovy span wrappers inside links */
.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a .gm-menu-item__txt-wrapper,
.pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a .gm-menu-item__txt {
    display: contents !important;
}

/* ── 8. MOBILE — restore Groovy defaults < 992px ─────────────────── */

@media (max-width: 991px) {

    .pd-tools-mega-panel {
        padding: 8px 0 !important;
        background: transparent !important;
    }

    .pd-tools-mega-panel .gm-grid-row.pd-tools-restructured {
        display: block !important;
    }

    .pd-tools-mega-panel .pd-tools-col {
        flex: none !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item {
        display: block !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    .pd-tools-mega-panel .gm-thumb-menu-item-wrapper {
        width: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item__title {
        display: block !important;
        min-height: unset;
        padding: 6px 0 !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item__title::after,
    .pd-tools-mega-panel .gm-mega-menu__item__title::before {
        display: none !important;
        content: none !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item__title .gm-menu-item__txt {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        white-space: normal !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper {
        grid-column: unset !important;
        grid-row: unset !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a {
        padding: 8px 0 !important;
        font-size: 14px !important;
        white-space: normal !important;
        height: auto !important;
    }

    .pd-tools-mega-panel .gm-mega-menu__item .gm-dropdown-menu-wrapper ul li a::after {
        display: none !important;
    }
}