/* ===========================================================================
   Navbar dropdowns (About us / Specialisation / Solutions) — same design language as the
   rest of the site: frosted glass, rounded corners, brand gradient, soft purple shadows.

   Loaded AFTER style.css and header-glass.css (see layout/base.html). header-glass.css forces
   `.mega-menu { background:#fff !important }`, so the rules here use `header .mega-menu`
   (more specific) with !important where they need to beat that.

   Anatomy
     .mega-menu            floating frosted panel, a small gap under the navbar, rounded all round,
                           brand-colour line along the top edge
       .mega-left          gradient feature card (title + one-line description)
       .mega-columns       the link area
         .col a            link rows
           .boldmenu       rich rows: icon chip + title + description
           (no .boldmenu)  compact rows: dot + title
         .ab-div           category headings inside the Specialisation menu
   =========================================================================== */

header .mega-menu {
    --dd-ink: #2b0b4f;
    --dd-muted: #6b5a86;
    --dd-purple: #511396;
    --dd-grad: linear-gradient(90deg, rgba(185, 0, 255, .85), rgba(0, 88, 255, .85));
    --dd-flow: linear-gradient(90deg, #B51BB5, #F0A400, #AC20BC, #43D2E0);
    --dd-ease: cubic-bezier(.2, .8, .2, 1);
}

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

header .mega-menu {
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 0;
    margin-top: 12px;                     /* floats just below the navbar */
    padding: 26px;
    gap: 22px;
    align-items: stretch;
    box-sizing: border-box;

    background:
        radial-gradient(circle at 100% 0%, rgba(67, 210, 224, .18), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(181, 27, 181, .10), transparent 44%),
        rgba(255, 255, 255, .93) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(81, 19, 150, .14);
    border-radius: 28px;
    box-shadow: 0 34px 80px rgba(35, 8, 75, .30), 0 2px 0 rgba(255, 255, 255, .6) inset;

    transform: translateY(14px) scale(.985);
    transform-origin: 50% 0;
    transition:
        opacity .28s ease,
        transform .38s var(--dd-ease),
        visibility .28s ease;
}

/* invisible bridge over the gap, so the menu doesn't close while the pointer crosses it */
header .mega-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

/* brand-colour line along the top edge */
header .mega-menu::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 34px;
    right: 34px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: var(--dd-flow);
    opacity: .9;
    pointer-events: none;
}

header .mega-dropdown:hover .mega-menu,
header .mega-dropdown:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* the open item's label stays underlined while its panel is showing */
header .nav ul li.mega-dropdown:hover > a::after,
header .nav ul li.mega-dropdown:focus-within > a::after {
    transform: scaleX(1);
}

/* ---------- left feature card ------------------------------------------------ */

header .mega-menu .mega-left {
    position: relative;
    flex: 0 0 clamp(200px, 19vw, 260px);
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: 26px 24px;
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 6%, rgba(255, 255, 255, .26), transparent 46%),
        radial-gradient(circle at 0% 100%, rgba(67, 210, 224, .45), transparent 52%),
        linear-gradient(150deg, #B900FF 0%, #5a2bd8 52%, #0058ff 100%);
    box-shadow: 0 18px 40px rgba(120, 20, 220, .34);
}

header .mega-menu .mega-left::after {     /* soft ring ornament */
    content: "";
    position: absolute;
    right: -46px;
    top: -46px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255, 255, 255, .05);
    pointer-events: none;
}

header .mega-menu .mega-left h1 {
    position: relative;
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
}

header .mega-menu .mega-left p {
    position: relative;
    margin: .65rem 0 0;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

/* ---------- the link area ---------------------------------------------------- */

header .mega-menu .mega-columns {
    flex: 1 1 auto;
    min-width: 0;
    gap: 14px;
    justify-content: flex-start;
    align-items: flex-start;
}

header .mega-menu .col {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
}

/* compact rows (Specialisation links, Industries): dot + title */
header .mega-menu .col a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 9px 38px 9px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--dd-ink);
    transform: none;
    transition: background .25s ease, border-color .25s ease, transform .3s var(--dd-ease), box-shadow .25s ease;
}

header .mega-menu .col a::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dd-grad);
    transition: transform .3s var(--dd-ease);
}

header .mega-menu .col a::after {            /* arrow that slides in on hover */
    content: "\2192";
    position: absolute;
    right: 14px;
    top: 50%;
    font-size: 1.05rem;
    line-height: 1;
    color: #8a1fd8;
    opacity: 0;
    transform: translate(-8px, -50%);
    transition: opacity .25s ease, transform .3s var(--dd-ease);
}

header .mega-menu .col a h2 {
    margin: 0;
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    color: var(--dd-ink);
}

header .mega-menu .col a:hover,
header .mega-menu .col a:focus-visible {
    text-decoration: none;
    background: linear-gradient(90deg, rgba(185, 0, 255, .08), rgba(0, 88, 255, .07));
    border-color: rgba(138, 31, 216, .16);
    transform: translateX(4px);
    outline: none;
}

header .mega-menu .col a:hover::before { transform: scale(1.5); }

header .mega-menu .col a:hover::after,
header .mega-menu .col a:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}

/* the title turns gradient on hover (same effect as before, now consistently) */
header .mega-menu .col a:hover h2 {
    background: var(--dd-grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- rich rows (About us, Solutions): icon chip + title + description ---- */

header .mega-menu .boldmenu a {
    display: block;
    padding: 14px 44px 14px 14px;
    border-radius: 20px;
}

header .mega-menu .boldmenu a::before { display: none; }

header .mega-menu .boldmenu a::after {
    right: 16px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #fff;
    border-radius: 50%;
    background: var(--dd-grad);
    box-shadow: 0 8px 18px rgba(120, 20, 220, .32);
}

header .mega-menu .boldmenu a:hover,
header .mega-menu .boldmenu a:focus-visible {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(138, 31, 216, .18);
    box-shadow: 0 14px 30px rgba(81, 19, 150, .14);
    transform: translateY(-2px);
}

header .mega-menu .boldmenu .ab-div {
    align-items: center;
    gap: 14px;
    padding: 0;
}

header .mega-menu .ab-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 10px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7edff 0%, #e8f3ff 100%);
    border: 1px solid rgba(138, 31, 216, .14);
    box-shadow: 0 6px 14px rgba(81, 19, 150, .08);
    transition: transform .35s var(--dd-ease), background .25s ease;
}

header .mega-menu .ab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header .mega-menu .col a:hover .ab-icon {
    transform: rotate(-6deg) scale(1.06);
    background: linear-gradient(145deg, #f1dcff 0%, #d7ebff 100%);
}

header .mega-menu .col a:hover .ab-icon img { animation: none; }

header .mega-menu .ab-topcont { width: auto; flex: 1 1 auto; min-width: 0; }

header .mega-menu .boldmenu .ab-topcont h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

header .mega-menu .ab-topcont p {
    margin: .2rem 0 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--dd-muted);
}

/* ---------- Specialisation: category headings -------------------------------- */

header .mega-menu .specialisation .col > .ab-div {
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    padding: 0 4px 12px;
    border-bottom: 1px solid rgba(81, 19, 150, .12);
}

header .mega-menu .specialisation .col > .ab-div:not(:first-child) { margin-top: 16px; }

header .mega-menu .specialisation .col > .ab-div .ab-icon {
    margin: 0;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 13px;
}

header .mega-menu .specialisation .col > .ab-div h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: normal;
    background: var(--dd-grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Solutions: Industries column ------------------------------------- */

header .mega-menu .border-left-1 {
    flex: 0 0 clamp(200px, 17vw, 250px);
    padding-left: 24px;
}

header .mega-menu .border-left-1::before {
    top: 0;
    bottom: 0;
    height: auto;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(81, 19, 150, .28) 25%, rgba(81, 19, 150, .28) 75%, transparent);
}

header .mega-menu .col > h2 {
    margin: 0 0 8px 12px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: normal;
    color: var(--dd-purple);
}

/* ---------- entrance: items rise in one after another ------------------------ */

@keyframes dd-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

header .mega-dropdown:hover .mega-menu .mega-left,
header .mega-dropdown:hover .mega-menu .col > *,
header .mega-dropdown:focus-within .mega-menu .mega-left,
header .mega-dropdown:focus-within .mega-menu .col > * {
    animation: dd-rise .5s var(--dd-ease) backwards;
}

header .mega-dropdown:hover .mega-menu .col > :nth-child(1) { animation-delay: .04s; }
header .mega-dropdown:hover .mega-menu .col > :nth-child(2) { animation-delay: .08s; }
header .mega-dropdown:hover .mega-menu .col > :nth-child(3) { animation-delay: .12s; }
header .mega-dropdown:hover .mega-menu .col > :nth-child(4) { animation-delay: .16s; }
header .mega-dropdown:hover .mega-menu .col > :nth-child(5) { animation-delay: .20s; }
header .mega-dropdown:hover .mega-menu .col > :nth-child(6) { animation-delay: .24s; }
header .mega-dropdown:hover .mega-menu .col > :nth-child(n+7) { animation-delay: .28s; }

/* ---------- simple (non-mega) dropdowns, same material ----------------------- */

header .dropdown-menu {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(81, 19, 150, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .93) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 24px 56px rgba(35, 8, 75, .26);
}

header .dropdown-menu a {
    padding: 10px 14px;
    border-radius: 12px;
    color: #2b0b4f;
}

header .dropdown-menu a:hover { background: rgba(138, 31, 216, .08); }

@media (prefers-reduced-motion: reduce) {
    header .mega-menu { transition: opacity .2s ease, visibility .2s ease; transform: none; }
    header .mega-dropdown:hover .mega-menu .mega-left,
    header .mega-dropdown:hover .mega-menu .col > *,
    header .mega-dropdown:focus-within .mega-menu .mega-left,
    header .mega-dropdown:focus-within .mega-menu .col > * { animation: none; }
}