/* ==========================================================================
   Services mega menu
   Markup: includes/header.blade.php  ·  Data: config/service_menu.php
   Desktop (>= 992px): a floating card under the header with a promo panel on
   the left, a grid of six group cards, and a "More services" strip below.
     >= 1200px  promo left, three-column card grid
     992-1199px promo becomes a slim banner above the grid
     <  992px   the mobile sidebar is used; its nested groups are styled at the bottom
   Colours and fonts come from the shared tokens in colors.css / global.css.
   ========================================================================== */

/* --- Panel (transparent; the card inside it is the visible surface) -------- */

/* The parent item stops being the positioning context so the panel can span the header. */
.header-area-all .main-menu-ex > ul > li.ax-mega { position: static; }

.header-area-all .ax-mega__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100vh - var(--ax-header-h) - 8px);
    max-height: calc(100dvh - var(--ax-header-h) - 8px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 0 20px;
    /* Frosted backdrop: the page behind the card is softly blurred, as in the design. */
    background: color-mix(in srgb, var(--ax-white) 38%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    pointer-events: none;       /* only the card below takes the pointer, not the empty sides */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--ax-dur-sm) var(--ax-ease),
                transform var(--ax-dur-sm) var(--ax-ease),
                visibility 0s linear var(--ax-dur-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--ax-blue-400) transparent;
}
.header-area-all .ax-mega__panel::-webkit-scrollbar { width: 8px; }
.header-area-all .ax-mega__panel::-webkit-scrollbar-thumb { background: var(--ax-blue-400); border-radius: 8px; }
.header-area-all .ax-mega__panel::-webkit-scrollbar-track { background: transparent; }

.header-area-all .ax-mega__panel > .container {
    max-width: 1500px;
    padding-left: 24px;
    padding-right: 24px;
}

.header-area-all .ax-mega:hover > .ax-mega__panel,
.header-area-all .ax-mega.is-open > .ax-mega__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Invisible bridge: keeps the panel open while the pointer crosses the gap between the nav link and the card.
   The panel is hidden until hover, so the Services link carries the bridge itself. */
.header-area-all .main-menu-ex > ul > li.ax-mega > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40px;
}
.header-area-all .ax-mega__shell::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
/* Same bridge for the Trainings and Offshoring dropdowns: the item itself reaches down to the list. */
.header-area-all .main-menu-ex > ul > li.dropdown-menu-parrent:not(.ax-mega)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40px;
}

/* --- The card ------------------------------------------------------------- */

.header-area-all .ax-mega__shell {
    position: relative;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas:
        "promo grid"
        "more  more";
    gap: 16px 18px;
    padding: 18px;
    pointer-events: auto;
    background: var(--ax-white);
    border: 1px solid color-mix(in srgb, var(--ax-line) 70%, transparent);
    border-radius: 28px;
    box-shadow: 0 30px 60px color-mix(in srgb, var(--ax-navy-900) 18%, transparent);
}

/* --- Promo ---------------------------------------------------------------- */

.header-area-all .ax-mega__promo {
    grid-area: promo;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 26px;
    color: var(--ax-white);
    background: linear-gradient(165deg,
        var(--ax-navy-900) 0%,
        var(--ax-navy-800) 38%,
        var(--ax-blue-600) 100%);
    border-radius: 20px;
}
/* Team photo, fading up into the gradient. The photo is bright, so a navy-to-blue tint sits over it to keep
   the button and the panel's brand colours readable; the square portrait is cropped to fill the panel so her face sits below the button. */
.header-area-all .ax-mega__promo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54%;
    z-index: -1;
    background:
        linear-gradient(0deg,
            color-mix(in srgb, var(--ax-navy-900) 58%, transparent) 0%,
            color-mix(in srgb, var(--ax-blue-600) 34%, transparent) 55%,
            color-mix(in srgb, var(--ax-blue-600) 12%, transparent) 100%),
        url("../../public/media/mega-menu-01.png") 50% 18% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}
/* Diagonal cyan accent in the top-right corner. */
.header-area-all .ax-mega__promo::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    z-index: -1;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ax-cyan-400) 85%, transparent) 0%,
        color-mix(in srgb, var(--ax-blue-500) 25%, transparent) 100%);
    clip-path: polygon(46% 0, 100% 0, 100% 54%);
}
.header-area-all .ax-mega__promo-eyebrow {
    font-family: var(--ax-font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ax-cyan-400);
}
.header-area-all .ax-mega__promo-title {
    margin: 16px 0 14px;
    font-family: var(--ax-font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ax-white);
}
.header-area-all .ax-mega__promo-title span { color: var(--ax-cyan-400); }
.header-area-all .ax-mega__promo-text {
    margin: 0 0 22px;
    font-family: var(--ax-font-sans);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.55;
    color: color-mix(in srgb, var(--ax-white) 90%, transparent);
}
/* Selector is specific enough to beat the legacy `.main-menu-ex li a` rules. */
.header-area-all .main-menu-ex .ax-mega__promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px !important;
    font-family: var(--ax-font-sans);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ax-white);
    border: 1.5px solid color-mix(in srgb, var(--ax-white) 80%, transparent);
    border-radius: 100px;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease),
                border-color var(--ax-dur-sm) var(--ax-ease);
}
.header-area-all .main-menu-ex .ax-mega__promo-cta:hover,
.header-area-all .main-menu-ex .ax-mega__promo-cta:focus-visible {
    color: var(--ax-navy-900);
    background: var(--ax-white);
    border-color: var(--ax-white);
}

/* Icons: the legacy `.main-menu-ex li a svg` rule forces 14px, a 2px downward shift and left padding
   on every icon inside a nav link. Reset it here so each icon takes its container's size and centres exactly. */
.header-area-all .ax-mega__panel a svg {
    position: static;
    top: auto;
    padding: 0;
    font-size: inherit;
    vertical-align: 0;
}

/* --- Card grid ------------------------------------------------------------ */

.header-area-all .ax-mega__grid {
    grid-area: grid;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* One accent colour per card (the shared --ax-val-* tokens). */
.header-area-all .ax-mega__col--workforce { --ax-tone: var(--ax-val-blue); }
.header-area-all .ax-mega__col--talent    { --ax-tone: var(--ax-val-teal); }
.header-area-all .ax-mega__col--advisory  { --ax-tone: var(--ax-val-purple); }
.header-area-all .ax-mega__col--learning  { --ax-tone: var(--ax-val-orange); }
.header-area-all .ax-mega__col--culture   { --ax-tone: var(--ax-val-red); }
.header-area-all .ax-mega__col--strategy  { --ax-tone: var(--ax-val-indigo); }

.header-area-all .ax-mega__col {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 16px 10px;
    background: var(--ax-white);
    border: 1px solid color-mix(in srgb, var(--ax-line) 55%, transparent);
    border-radius: 20px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ax-navy-900) 8%, transparent);
}

/* --- Card header (the whole row is the group's link) ------------------------ */

/* Padding is !important to beat the legacy `.main-menu-ex li a` rule at <= 1200px. */
.header-area-all .main-menu-ex .ax-mega__head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 0 0 12px !important;
    font-family: var(--ax-font-sans);
    color: var(--ax-navy-900);
    border-bottom: 1px solid var(--ax-line);
}
.header-area-all .main-menu-ex .ax-mega__head:hover { color: var(--ax-navy-900); }

.header-area-all .ax-mega__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: var(--ax-tone);
    background: color-mix(in srgb, var(--ax-tone) 13%, var(--ax-white));
    border-radius: 50%;
    transition: transform var(--ax-dur-sm) var(--ax-ease);
}
.header-area-all .ax-mega__head:hover .ax-mega__badge { transform: scale(1.06); }

.header-area-all .ax-mega__headtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.header-area-all .ax-mega__title {
    padding-right: 40px;        /* clear of the arrow button */
    font-size: 13px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: .04em;
    overflow-wrap: normal;
    text-transform: uppercase;
}
.header-area-all .ax-mega__go {
    position: absolute;
    top: 13px;              /* centred on the 48px icon; the header link is the positioning parent */
    right: 10px;            /* breathing room from the card edge */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 9px;
    color: var(--ax-blue-600);
    background: var(--ax-blue-100);
    border-radius: 50%;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
.header-area-all .ax-mega__head:hover .ax-mega__go,
.header-area-all .ax-mega__head:focus-visible .ax-mega__go { color: var(--ax-white); background: var(--ax-blue-600); }

/* --- Link rows --------------------------------------------------------------- */

.header-area-all .ax-mega__links {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: 220px;          /* five rows; a longer list (HR Advisory) scrolls inside the card */
    margin-top: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: auto;  /* at the end of the list the wheel continues on to the panel */
    scrollbar-gutter: stable;   /* the scrollbar gets its own lane instead of covering the row chevrons */
    scrollbar-width: thin;
    scrollbar-color: var(--ax-blue-400) transparent;
}
.header-area-all .ax-mega__links::-webkit-scrollbar { width: 6px; }
.header-area-all .ax-mega__links::-webkit-scrollbar-thumb { background: var(--ax-blue-400); border-radius: 6px; }
.header-area-all .ax-mega__links::-webkit-scrollbar-track { background: transparent; }

/* Row, shared by the group lists and the "More services" strip.
   Padding is !important to beat the legacy `.main-menu-ex li a` rule at <= 1200px. */
.header-area-all .ax-mega__links a,
.header-area-all .ax-mega__more > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 28px 4px 4px !important;
    font-family: var(--ax-font-sans);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ax-ink);
    border-radius: 12px;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
.header-area-all .ax-mega__links a {
    flex: 0 0 auto;
    min-height: 44px;           /* every row fits two lines, so all rows share one height */
}
.header-area-all .ax-mega__links a + a { box-shadow: 0 -1px 0 color-mix(in srgb, var(--ax-line) 70%, transparent); }

.header-area-all .ax-mega__ico {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 15px;
    color: var(--ax-navy-700);
    background: color-mix(in srgb, var(--ax-blue-100) 75%, var(--ax-white));
    border-radius: 10px;
    transition: color var(--ax-dur-sm) var(--ax-ease),
                background var(--ax-dur-sm) var(--ax-ease);
}
.header-area-all .ax-mega__label { min-width: 0; }

.header-area-all .ax-mega__links a::after,
.header-area-all .ax-mega__more > a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: 2px solid var(--ax-ink-soft);
    border-right: 2px solid var(--ax-ink-soft);
    transform: rotate(45deg);
    transition: transform var(--ax-dur-sm) var(--ax-ease),
                border-color var(--ax-dur-sm) var(--ax-ease);
}
.header-area-all .ax-mega__links a:hover,
.header-area-all .ax-mega__links a:focus-visible,
.header-area-all .ax-mega__more > a:hover,
.header-area-all .ax-mega__more > a:focus-visible {
    color: var(--ax-blue-600);
    background: var(--ax-paper);
    box-shadow: none;
}
.header-area-all .ax-mega__links a:hover .ax-mega__ico,
.header-area-all .ax-mega__links a:focus-visible .ax-mega__ico,
.header-area-all .ax-mega__more > a:hover .ax-mega__ico,
.header-area-all .ax-mega__more > a:focus-visible .ax-mega__ico {
    color: var(--ax-white);
    background: var(--ax-blue-600);
}
.header-area-all .ax-mega__links a:hover::after,
.header-area-all .ax-mega__links a:focus-visible::after,
.header-area-all .ax-mega__more > a:hover::after,
.header-area-all .ax-mega__more > a:focus-visible::after {
    border-color: var(--ax-blue-600);
    transform: translateX(3px) rotate(45deg);
}
/* The row after a hovered one drops its divider so the highlight stays clean. */
.header-area-all .ax-mega__links a:hover + a { box-shadow: none; }

/* --- "More services" strip --------------------------------------------------- */

.header-area-all .ax-mega__more {
    grid-area: more;
    display: grid;
    grid-template-columns: 230px repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--ax-line) 70%, transparent);
}
.header-area-all .ax-mega__more-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-right: 16px;
    border-right: 1px solid var(--ax-line);
}
.header-area-all .ax-mega__more-label {
    font-family: var(--ax-font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ax-ink-soft);
}
.header-area-all .ax-mega__more-text {
    font-family: var(--ax-font-sans);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ax-ink-soft);
}
.header-area-all .ax-mega__more > a {
    min-height: 58px;
    padding: 8px 30px 8px 12px !important;
    background: var(--ax-white);
    border: 1px solid var(--ax-line);
    border-radius: 14px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ax-navy-900) 5%, transparent);
}

/* --- Small desktop (992px - 1199px): promo becomes a slim banner ------------- */

@media (max-width: 1199px) {
    .header-area-all .ax-mega__shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "promo"
            "grid"
            "more";
    }
    .header-area-all .ax-mega__promo {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 18px;
        padding: 14px 20px;
        background-position: center 30%;
    }
    .header-area-all .ax-mega__promo::after,
    .header-area-all .ax-mega__promo::before { display: none; }
    .header-area-all .ax-mega__promo-eyebrow { display: none; }
    .header-area-all .ax-mega__promo-title { margin: 0; font-size: 1.15rem; }
    .header-area-all .ax-mega__promo-text { display: none; }
    .header-area-all .main-menu-ex .ax-mega__promo-cta { margin-left: auto; }

    .header-area-all .ax-mega__more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .header-area-all .ax-mega__more-intro { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; padding: 0; border-right: 0; }
}

/* --- Mobile / tablet sidebar: nested groups under "Services" ----------------- */

@media (max-width: 991px) {
    .mobile-nav .sub-menu .ax-mobile-group,
    .mobile-nav .sub-menu .ax-mobile-all { padding: 0; border-bottom: 0; }

    .mobile-nav .ax-mobile-group > a,
    .mobile-nav .ax-mobile-all > a { font-weight: 700; color: var(--ax-cyan-300); }
    .mobile-nav .ax-mobile-group > .sub-menu { padding-left: 14px; }
    .mobile-nav .ax-mobile-group > .sub-menu li { border-bottom: 0; }

    /* Icon before every Services entry (Font Awesome swaps <i> for <svg>, so match on the class) */
    .mobile-nav .ax-mobile-group a > [class*="fa-"],
    .mobile-nav .ax-mobile-all a > [class*="fa-"] {
        flex: 0 0 22px;
        width: 22px;
        margin-right: 12px;
        font-size: 14px;
        text-align: center;
        color: var(--ax-cyan-400);
    }
    .mobile-nav .ax-mobile-group > .sub-menu a { font-weight: 500; }
    .mobile-nav .ax-mobile-group > .sub-menu a > [class*="fa-"] { color: var(--ax-blue-400); }
}

@media (prefers-reduced-motion: reduce) {
    .header-area-all .ax-mega__panel,
    .header-area-all .ax-mega__links a,
    .header-area-all .ax-mega__more > a,
    .header-area-all .ax-mega__badge,
    .header-area-all .ax-mega__promo-cta { transition: none; }
}