/* Desktop header + mega menu restyle (mu-plugins/social-team-pwa.php). Rules scoped to min-width: 769px.
   Markup comes from each theme's components/header.php and js/components/mega-menu.js; selectors are
   prefixed with .mega-menu-header so they outrank the theme's core.min.css.
   Header bar: logo · quick links · separator · tabs (same elements, same order).
   Panel: top bar (back · icon · trail/title/subtitle · CTAs · close) + 3-column cards grid. */

@media (min-width: 769px) {
    .mega-menu-header {
        --dm-ink: #0F1F33;
        --dm-ink-2: #2B3A4D;
        --dm-brand: #2E8FC7;
        --dm-brand-deep: #2478A9;
        --dm-soft: #E3F1FA;
        --dm-muted: #6B7C90;
        --dm-line: #E7EDF3;
        --dm-line-2: #E1E8EF;
        --dm-hover: #F5F8FB;
        --dm-hover-2: #F1F5F9;
    }

    .mega-menu-header .header-main-bar svg,
    .mega-menu-header .menu-container svg {
        display: block;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ---------- header bar ---------- */

    /* Logo at the start, and the links + tabs as one centred block, so the
       empty space is split evenly instead of piling up on one side. */
    .mega-menu-header .header-main-bar {
        justify-content: flex-start;
        gap: 20px;
        max-width: 1400px;
        min-height: 72px;
        padding: 0 24px;
    }

    .mega-menu-header .header-nav-wrapper {
        gap: 20px;
        margin-inline: auto;
    }

    .mega-menu-header .header-logo a {
        display: flex;
        align-items: center;
    }

    .mega-menu-header .header-logo img {
        height: 52px;
        width: auto;
    }

    .mega-menu-header .quick-links-list {
        gap: 6px;
    }

    .mega-menu-header .quick-link-item a {
        display: block;
        padding: 8px 12px;
        border-radius: 9px;
        color: var(--dm-ink-2);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .mega-menu-header .quick-link-item a:hover,
    .mega-menu-header .quick-link-item a:focus-visible {
        background: var(--dm-hover);
        color: var(--dm-ink);
    }

    .mega-menu-header .quick-link-item a[aria-current="page"] {
        background: var(--dm-hover-2);
        color: var(--dm-ink);
    }

    .mega-menu-header .nav-separator {
        width: 1px;
        height: 22px;
        margin: 0;
        background: var(--dm-line-2);
    }

    .mega-menu-header .tabs-list {
        gap: 4px;
    }

    .mega-menu-header .tab-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 8px 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--dm-ink-2);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .mega-menu-header .tab-btn:hover,
    .mega-menu-header .tab-btn:focus-visible {
        background: var(--dm-hover);
        color: var(--dm-ink);
    }

    .mega-menu-header .tab-btn .arrow-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 13px;
        height: 13px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: #9AA9B8;
        font-size: 0;
        line-height: 0;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .mega-menu-header .tab-btn .arrow-icon svg {
        width: 13px;
        height: 13px;
        stroke-width: 2.2;
    }

    .mega-menu-header .tab-btn[aria-expanded="true"],
    .mega-menu-header .tab-btn[aria-expanded="true"]:hover,
    .mega-menu-header .tab-btn[aria-expanded="true"]:focus,
    .mega-menu-header .tab-btn[aria-expanded="true"]:active {
        background: #EEF6FC;
        color: var(--dm-ink);
    }

    .mega-menu-header .tab-btn[aria-expanded="true"] .arrow-icon {
        color: var(--dm-brand);
        transform: rotate(180deg);
    }

    /* ---------- panel ---------- */

    .mega-menu-header .menu-container {
        min-height: 0;
        border-top: 1px solid var(--dm-line);
        border-bottom: 1px solid var(--dm-line);
        background: #fff;
        box-shadow: 0 30px 50px -30px rgba(15, 31, 51, 0.45);
    }

    .mega-menu-header .menu-container.visible {
        display: flex;
        flex-direction: column;
    }

    /* Top bar (the old breadcrumb bar, moved into the panel by mega-menu.js) */
    .mega-menu-header .breadcrumb-container {
        display: none;
        flex: none;
        align-items: center;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 16px max(28px, calc((100% - 1200px) / 2 + 28px));
        background: linear-gradient(180deg, #FBFCFE, #fff);
        border-bottom: 1px solid #EEF2F6;
    }

    .mega-menu-header .breadcrumb-container.visible {
        display: flex;
    }

    .mega-menu-header .back-btn,
    .mega-menu-header .back-btn:hover,
    .mega-menu-header .back-btn:focus,
    .mega-menu-header .back-btn:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--dm-line-2);
        border-radius: 10px;
        background: #fff !important;
        color: var(--dm-ink);
        transform: none;
    }

    .mega-menu-header .back-btn:hover {
        border-color: #C9D4DF;
        background: var(--dm-hover) !important;
    }

    .mega-menu-header .back-btn svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    .mega-menu-header .back-btn span {
        display: none;
    }

    .mega-menu-header .breadcrumb-container.is-root .back-btn {
        display: none;
    }

    .mega-menu-header .dm-tile {
        display: grid;
        place-items: center;
        flex: none;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: var(--dm-soft);
        color: var(--dm-brand);
    }

    .mega-menu-header .dm-tile svg {
        width: 22px;
        height: 22px;
    }

    .mega-menu-header .dm-heading {
        display: grid;
        gap: 2px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .mega-menu-header .breadcrumb-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 4px;
        flex: none;
        margin: 0;
        padding: 0;
        font-size: 12px;
        line-height: 1.5;
    }

    .mega-menu-header .breadcrumb-container.is-root .breadcrumb-list {
        display: none;
    }

    .mega-menu-header .breadcrumb-item {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .mega-menu-header .breadcrumb-btn {
        margin: 0;
        padding: 0 2px;
        border: 0;
        border-radius: 4px;
        background: none;
        color: var(--dm-brand);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
    }

    .mega-menu-header .breadcrumb-btn:hover,
    .mega-menu-header .breadcrumb-btn:focus-visible {
        background: none;
        color: var(--dm-brand-deep);
        text-decoration: underline;
    }

    .mega-menu-header .breadcrumb-separator {
        display: inline-flex;
        margin: 0;
        color: #9AA9B8;
    }

    .mega-menu-header .breadcrumb-separator svg {
        width: 12px;
        height: 12px;
        stroke-width: 2.2;
    }

    .mega-menu-header .dm-title {
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: var(--dm-ink);
        font-family: var(--font-primary);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mega-menu-header .dm-sub {
        margin: 0;
        overflow: hidden;
        color: var(--dm-muted);
        font-size: 12.5px;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mega-menu-header .dm-acts {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
        margin-inline-start: auto;
    }

    .mega-menu-header .dm-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 38px;
        padding: 0 16px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .mega-menu-header .dm-cta svg {
        width: 16px;
        height: 16px;
    }

    .mega-menu-header .dm-cta--light {
        height: 36px;
        border: 1.5px solid var(--dm-ink);
        background: #fff;
        color: var(--dm-ink);
    }

    .mega-menu-header .dm-cta--light:hover,
    .mega-menu-header .dm-cta--light:focus-visible {
        background: var(--dm-hover);
        color: var(--dm-ink);
    }

    .mega-menu-header .dm-cta--dark {
        background: var(--dm-ink);
        color: #fff;
    }

    .mega-menu-header .dm-cta--dark svg {
        color: #4DAFE4;
    }

    .mega-menu-header .dm-cta--dark:hover,
    .mega-menu-header .dm-cta--dark:focus-visible {
        background: #1C3557;
        color: #fff;
    }

    .mega-menu-header .close-menu-btn,
    .mega-menu-header .close-menu-btn:focus,
    .mega-menu-header .close-menu-btn:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--dm-line-2);
        border-radius: 10px;
        background: var(--dm-hover);
        color: var(--dm-ink);
    }

    .mega-menu-header .close-menu-btn:hover {
        border-color: #C9D4DF;
        background: #EEF2F6;
        color: var(--dm-ink);
    }

    .mega-menu-header .close-menu-btn svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    .mega-menu-header .close-menu-btn span {
        display: none;
    }

    /* Scroll area */
    .mega-menu-header .menu-body {
        flex: 1 1 auto;
        max-height: min(70vh, 640px);
        padding: 0;
        overflow-y: auto;
        background: #fff;
        overscroll-behavior: contain;
    }

    .mega-menu-header .menu-columns {
        display: block;
        flex: none;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    /* ---------- cards ---------- */

    .mega-menu-header .category-cards-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 18px 28px 22px;
        background: none;
        border: 0;
    }

    .mega-menu-header .category-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        height: auto;
        min-height: 0;
        padding: 14px;
        overflow: visible;
        background: #fff;
        border: 1px solid var(--dm-line);
        border-radius: 14px;
        box-shadow: none;
        text-align: start;
        cursor: default;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .mega-menu-header .category-card.has-children {
        cursor: pointer;
    }

    .mega-menu-header .category-card::before,
    .mega-menu-header .category-card::after,
    .mega-menu-header .category-card.has-children::after {
        content: none;
        display: none;
    }

    .mega-menu-header .category-card:hover {
        border-color: #BFDDF0;
        box-shadow: 0 8px 20px -12px rgba(46, 143, 199, 0.5);
        transform: none;
    }

    .mega-menu-header .category-card-content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        text-align: start;
    }

    .mega-menu-header .category-card-icon,
    .mega-menu-header .category-card:hover .category-card-icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        margin: 0;
        border-radius: 12px;
        background: var(--dm-soft);
        color: var(--dm-brand);
        font-size: 0;
        box-shadow: none;
        filter: none;
        transform: none;
    }

    .mega-menu-header .category-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .mega-menu-header .category-card-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mega-menu-header .category-card-title,
    .mega-menu-header .category-card:hover .category-card-title {
        margin: 0;
        color: var(--dm-ink);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }

    .mega-menu-header .category-card-desc {
        display: -webkit-box;
        max-width: none;
        margin-top: 3px;
        overflow: hidden;
        color: var(--dm-muted);
        font-size: 12px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .mega-menu-header .card-actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: auto;
        margin: 0;
    }

    .mega-menu-header .card-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: none;
        height: 32px;
        padding: 0 12px;
        border: 0;
        border-radius: 9px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .mega-menu-header .card-btn svg {
        width: 14px;
        height: 14px;
        stroke-width: 2;
        transform: none;
    }

    .mega-menu-header .btn-visit,
    .mega-menu-header .btn-visit:focus {
        background: var(--dm-brand);
        color: #fff;
        box-shadow: none;
    }

    .mega-menu-header .btn-visit:hover {
        background: var(--dm-brand-deep);
        color: #fff;
        box-shadow: none;
    }

    .mega-menu-header .btn-explore,
    .mega-menu-header .btn-explore:focus {
        height: 30px;
        border: 1.5px solid #BFDDF0;
        background: #fff;
        color: var(--dm-brand) !important;
    }

    .mega-menu-header .btn-explore:hover {
        border-color: #9CCBE9;
        background: #F1F7FC;
    }

    .mega-menu-header .btn-navigate,
    .mega-menu-header .btn-navigate:focus,
    .mega-menu-header .btn-navigate:active {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        flex: none;
        height: 28px;
        margin: 0;
        margin-inline-start: auto;
        padding: 0 8px;
        border: 0;
        border-radius: 8px;
        background: #F1F7FC;
        color: var(--dm-brand);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        transition: background-color 0.15s ease;
    }

    .mega-menu-header .btn-navigate:hover {
        background: var(--dm-soft);
        color: var(--dm-brand);
    }

    .mega-menu-header .btn-navigate svg {
        width: 13px;
        height: 13px;
        stroke-width: 2.2;
    }

    /* ---------- focus ---------- */

    .mega-menu-header .menu-container :is(a, button):focus-visible,
    .mega-menu-header .quick-link-item a:focus-visible {
        outline: 2px solid var(--dm-brand);
        outline-offset: 2px;
    }
}

/* Single-row header (the theme wraps the nav under the logo up to 1024px) */
@media (min-width: 1025px) {
    .mega-menu-header .header-main-bar {
        height: 72px;
        flex-wrap: nowrap;
    }

    /* Open tab: 3px brand line on the bottom edge of the 72px bar (button is 38px, centred) */
    .mega-menu-header .tab-btn[aria-expanded="true"]::after {
        content: "";
        position: absolute;
        inset-inline: 12px;
        bottom: -17px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--dm-brand);
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    .mega-menu-header .header-main-bar *,
    .mega-menu-header .menu-container,
    .mega-menu-header .menu-container * {
        transition: none !important;
        animation: none !important;
    }
}

/* Packages dropdown: shown when a site has several package pages and no hub. */
@media (min-width: 769px) {
    .mega-menu-header .dm-pkg {
        position: relative;
        flex: none;
    }

    .mega-menu-header .dm-pkg > .dm-cta svg:last-child {
        width: 13px;
        height: 13px;
        transition: transform 0.2s ease;
    }

    .mega-menu-header .dm-pkg > .dm-cta[aria-expanded="true"] svg:last-child {
        transform: rotate(180deg);
    }

    .mega-menu-header .dm-pkg-list:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline-end: 0;
        z-index: 20;
        min-width: 280px;
        max-height: 60vh;
        overflow-y: auto;
        padding: 6px;
        display: grid;
        gap: 2px;
        background: #fff;
        border: 1px solid #E7EDF3;
        border-radius: 14px;
        box-shadow: 0 18px 36px -18px rgba(15, 31, 51, 0.45);
    }

    .mega-menu-header .dm-pkg-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #2B3A4D;
        text-decoration: none;
        line-height: 1.4;
    }

    .mega-menu-header .dm-pkg-list a svg {
        width: 17px;
        height: 17px;
        color: #2E8FC7;
        flex: none;
    }

    .mega-menu-header .dm-pkg-list a:hover,
    .mega-menu-header .dm-pkg-list a:focus-visible {
        background: #F1F7FC;
        color: #0F1F33;
    }
}

/* Tablets: the theme wraps the nav under the logo, leaving a 110px header with
   an empty first row. Keep it on one row with tighter type instead. */
@media (min-width: 769px) and (max-width: 1024px) {
    .mega-menu-header .header-main-bar {
        flex-wrap: nowrap;
        min-height: 76px;
        gap: 12px;
        padding-inline: 18px;
    }

    .mega-menu-header .header-logo img {
        height: 46px;
    }

    .mega-menu-header .header-nav-wrapper {
        flex: 1;
        min-width: 0;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-end;
    }

    .mega-menu-header .header-nav-wrapper::-webkit-scrollbar {
        display: none;
    }

    .mega-menu-header .quick-links-list,
    .mega-menu-header .tabs-list {
        flex-wrap: nowrap;
        gap: 2px;
    }

    .mega-menu-header .quick-link-item a,
    .mega-menu-header .tab-btn {
        padding: 7px 9px;
        font-size: 13px;
        white-space: nowrap;
    }
}