/* ==========================================================================
   ENHANCED MEGA MENU
   .dropdown-li.mega-li > .dropdown-menu-custom.mega-menu.tabbed-mega.enhanced-mega

   Replaces the mega-menu rules that live in the <style> block of
   includes/menu.php (".enhanced-mega ..." rules and their media queries).
   Breakpoints follow Bootstrap 5: desktop >= 992px, tablet 576-991px,
   phone < 576px.
   ========================================================================== */

/* ---------- Design tokens ---------- */
.enhanced-mega {
    --mm-accent: #ff6600;              /* brand orange: borders, fills, decoration */
    --mm-accent-ink: #c2410c;          /* orange for TEXT on white (5.2:1, passes AA) */
    --mm-accent-soft: #fff4ec;
    --mm-ink: #0f172a;                 /* headings */
    --mm-body: #334155;                /* labels */
    --mm-muted: #475569;               /* descriptions (7.5:1 on white) */
    --mm-line: #e2e8f0;
    --mm-surface: #f8fafc;
    --mm-side-bg: #0f172a;
    --mm-side-bg-2: #1e293b;
    --mm-side-text: rgba(255, 255, 255, 0.78);
    --mm-radius: 16px;
    --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Shared: tab panels ---------- */
.enhanced-mega .tab-panel {
    display: none;
}

.enhanced-mega .tab-panel.active {
    display: block;
    animation: mmPanelIn 0.22s var(--mm-ease);
}

@keyframes mmPanelIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.enhanced-mega .thumb-grid-wrapper {
    height: auto;
    overflow: visible;
}

/* ---------- Shared: tab header ---------- */
.enhanced-mega .tab-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mm-line);
}

.enhanced-mega .tab-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mm-ink);
}

.enhanced-mega .tab-title i {
    color: var(--mm-accent);
    font-size: 0.95rem;
}

/* !important only to beat the global `p { font-size/line-height !important }` */
.enhanced-mega .tab-desc {
    margin: 0;
    max-width: none;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    font-weight: 400;
    color: var(--mm-muted);
}

/* ---------- Shared: service cards (icon left, text right) ---------- */
.enhanced-mega .thumb-grid {
    display: grid;
    gap: 12px;
}

.enhanced-mega .menu-service-card {
    --mm-icon: #ea580c;
    --mm-icon-bg: rgba(234, 88, 12, 0.1);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 0;
    padding: 16px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    transition: border-color 0.2s ease, background-color 0.2s ease,
                box-shadow 0.25s var(--mm-ease), transform 0.25s var(--mm-ease);
}

/* Icon colours, darkened from the originals to reach 3:1 against white */
.enhanced-mega .menu-service-card:nth-child(2) { --mm-icon: #16a34a; --mm-icon-bg: rgba(22, 163, 74, 0.1); }
.enhanced-mega .menu-service-card:nth-child(3) { --mm-icon: #2563eb; --mm-icon-bg: rgba(37, 99, 235, 0.1); }
.enhanced-mega .menu-service-card:nth-child(4) { --mm-icon: #7c3aed; --mm-icon-bg: rgba(124, 58, 237, 0.1); }
.enhanced-mega .menu-service-card:nth-child(5) { --mm-icon: #e11d48; --mm-icon-bg: rgba(225, 29, 72, 0.1); }

.enhanced-mega .menu-service-icon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 12px;
    background: var(--mm-icon-bg);
    transition: transform 0.25s var(--mm-ease);
}

.enhanced-mega .menu-service-icon i {
    font-size: 1.25rem;
    color: var(--mm-icon);
}

.enhanced-mega .menu-service-text {
    flex: 1;
    min-width: 0;
    padding-right: 14px;               /* room for the hover arrow */
}

.enhanced-mega .menu-service-title {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--mm-ink);
    transition: color 0.2s ease;
}

.enhanced-mega .menu-service-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    max-width: none;
    font-family: var(--font-sans);
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    font-weight: 400;
    color: var(--mm-muted);
}

/* The inline arrow got cut off by the 2-line clamp; draw one on the card instead */
.enhanced-mega .menu-service-desc i {
    display: none;
}

.enhanced-mega .menu-service-card::after {
    content: "\2192";
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--mm-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.25s var(--mm-ease);
}

@media (hover: hover) {
    .enhanced-mega .menu-service-card:hover {
        background: #fff;
        border-color: var(--mm-accent);
        box-shadow: 0 10px 24px -10px rgba(255, 102, 0, 0.35);
        transform: translateY(-2px);
    }

    .enhanced-mega .menu-service-card:hover .menu-service-title {
        color: var(--mm-accent-ink);
    }

    .enhanced-mega .menu-service-card:hover .menu-service-icon {
        transform: scale(1.06);
    }

    .enhanced-mega .menu-service-card:hover::after {
        opacity: 1;
        transform: none;
    }
}

.enhanced-mega .menu-service-card:active {
    background: var(--mm-accent-soft);
    border-color: var(--mm-accent);
}

.enhanced-mega .menu-service-card:focus-visible {
    outline: 2px solid var(--mm-accent);
    outline-offset: 2px;
    background: #fff;
}

/* ---------- Shared: badges ---------- */
.enhanced-mega .service-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mm-accent-ink);
}

.enhanced-mega .service-badge.green  { background: #15803d; }
.enhanced-mega .service-badge.orange { background: #b45309; }

/* ---------- Shared: tab buttons (works for <a> or <button>) ---------- */
.enhanced-mega .subcat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: var(--font-sans);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.enhanced-mega .subcat-link i {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

/* ==========================================================================
   DESKTOP  (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
    /* Position against the sticky navbar so the panel is centred on the
       page, not on the "What We Do" link (which pushed it off-screen on
       narrower desktops). */
    .navbar .mega-li {
        position: static;
    }

    .dropdown-menu-custom.enhanced-mega {
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1050;
        width: min(1200px, calc(100vw - 32px));
        min-width: 0;
        padding: 0;
        background: #fff;
        border: 0;
        border-top: 3px solid var(--mm-accent);
        border-radius: 0 0 var(--mm-radius) var(--mm-radius);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04),
                    0 28px 56px -16px rgba(15, 23, 42, 0.22);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
        /* Closing waits 120ms: a grace period while the pointer crosses
           the gap between the link and the panel. */
        transition: opacity 0.18s ease 0.12s,
                    transform 0.22s var(--mm-ease) 0.12s,
                    visibility 0s linear 0.3s;
    }

    .mega-li:hover > .enhanced-mega,
    .mega-li:focus-within > .enhanced-mega {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity 0.2s ease, transform 0.28s var(--mm-ease), visibility 0s;
    }

    .enhanced-mega .mega-menu-inner {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        min-height: 420px;           /* steady height while switching tabs */
        border-radius: 0 0 var(--mm-radius) var(--mm-radius);
        overflow: hidden;
    }

    /* Sidebar */
    .enhanced-mega .menu-sidebar {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        padding: 24px 0 20px;
        background: linear-gradient(180deg, var(--mm-side-bg) 0%, var(--mm-side-bg-2) 100%);
        border: 0;
    }

    .enhanced-mega .sidebar-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 12px;
        padding: 0 20px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .enhanced-mega .sidebar-header .sidebar-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.85rem;
        color: var(--mm-accent);
        background: rgba(255, 102, 0, 0.15);
    }

    .enhanced-mega .sidebar-header .sidebar-title {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
    }

    .enhanced-mega .subcat-list {
        margin: 0;
        padding: 0 12px 0 0;
        list-style: none;
    }

    .enhanced-mega .subcat-item {
        margin: 2px 0;
    }

    .enhanced-mega .subcat-link {
        min-height: 44px;
        padding: 10px 14px 10px 17px;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--mm-side-text);
        border-left: 3px solid transparent;
        border-radius: 0 10px 10px 0;
    }

    .enhanced-mega .subcat-link i {
        color: rgba(255, 255, 255, 0.45);
    }

    .enhanced-mega .subcat-link .tab-count {
        min-width: 24px;
        margin-left: auto;
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.08);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .enhanced-mega .subcat-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.06);
    }

    .enhanced-mega .subcat-link.active {
        font-weight: 600;
        color: #fff;
        background: rgba(255, 102, 0, 0.16);
        border-left-color: var(--mm-accent);
    }

    .enhanced-mega .subcat-link:hover i,
    .enhanced-mega .subcat-link.active i {
        color: var(--mm-accent);
    }

    .enhanced-mega .subcat-link.active .tab-count {
        color: #fff;
        background: var(--mm-accent);
    }

    .enhanced-mega .subcat-link:focus-visible {
        outline: 2px solid #ffb380;
        outline-offset: -2px;
    }

    .enhanced-mega .sidebar-footer {
        margin-top: auto;                /* pin "View all" to the bottom */
        padding: 16px 16px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .enhanced-mega .view-all-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        background: var(--mm-accent-ink);
        transition: background-color 0.2s ease, gap 0.25s var(--mm-ease);
    }

    .enhanced-mega .view-all-link:hover {
        background: #9a3412;
        gap: 12px;
    }

    .enhanced-mega .view-all-link:focus-visible {
        outline: 2px solid #ffb380;
        outline-offset: 2px;
    }

    .enhanced-mega .view-all-link i {
        font-size: 0.75rem;
    }

    /* Content */
    .enhanced-mega .menu-content {
        min-width: 0;
        min-height: 0;
        max-height: none;
        padding: 26px 30px 28px;
        overflow: visible;
        background: #fff;
    }

    /* 3 columns from ~1250px, 2 columns below that */
    .enhanced-mega .thumb-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* Small desktops / landscape tablets: tighten the top-level nav so the
   labels stop wrapping onto two lines ("About / Us", "Contact / Us") */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #mainNavbar .navbar-brand img {
        height: 60px;
    }

    #mainNavbar .nav-item {
        margin: 0;
    }

    #mainNavbar .nav-link {
        padding: 10px 9px !important;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    #mainNavbar .btn-consult {
        padding: 8px 16px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    #mainNavbar .nav-link {
        white-space: nowrap;
    }
}

/* Wide screens */
@media (min-width: 1600px) {
    .dropdown-menu-custom.enhanced-mega {
        width: min(1360px, calc(100vw - 48px));
    }

    .enhanced-mega .mega-menu-inner {
        grid-template-columns: 260px minmax(0, 1fr);
        min-height: 460px;
    }

    .enhanced-mega .menu-content {
        padding: 30px 36px 32px;
    }

    .enhanced-mega .thumb-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 14px;
    }

    .enhanced-mega .menu-service-card {
        padding: 18px;
    }

    .enhanced-mega .menu-service-icon {
        width: 50px;
        height: 50px;
    }

    .enhanced-mega .menu-service-icon i {
        font-size: 1.4rem;
    }

    .enhanced-mega .menu-service-title {
        font-size: 1rem;
    }

    .enhanced-mega .menu-service-desc {
        font-size: 0.875rem !important;
    }

    .enhanced-mega .tab-title {
        font-size: 1.15rem;
    }

    .enhanced-mega .tab-desc {
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   TABLET & PHONE  (< 992px) - accordion inside the collapsed navbar
   ========================================================================== */
@media (max-width: 991.98px) {
    /* No !important here: footer.php opens the menu with an inline
       display:block, which the old `display: none !important` blocked. */
    .dropdown-menu-custom.enhanced-mega {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        margin: 6px 0 10px;
        padding: 0;
        background: #fff;
        border: 1px solid var(--mm-line);
        border-top: 3px solid var(--mm-accent);
        border-radius: 12px;
        box-shadow: none;
        overflow: hidden;
    }

    .mega-li.active-mobile > .enhanced-mega {
        display: block;
    }

    /* The collapsed nav centres each item at its content width, so the
       nowrap pill row made this item wider than the screen and pushed the
       panel off the left edge. Stretch the item to the nav's width instead. */
    #mainNavbar .mega-li {
        align-self: stretch;
        width: 100%;
        min-width: 0;
        margin: 0;
        text-align: center;
    }

    .enhanced-mega,
    .enhanced-mega .mega-menu-inner,
    .enhanced-mega .subcat-list,
    .enhanced-mega .menu-content,
    .enhanced-mega .sidebar-footer {
        max-width: 100%;
        min-width: 0;
        text-align: left;
    }

    /* Flatten the sidebar so the order becomes: pills -> cards -> "View all" */
    .enhanced-mega .mega-menu-inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .enhanced-mega .menu-sidebar {
        display: contents;
    }

    .enhanced-mega .sidebar-header {
        display: none;
    }

    /* Category pills: one swipeable row instead of wrapping */
    .enhanced-mega .subcat-list {
        order: 1;
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 10px 12px;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        background: var(--mm-surface);
        border-bottom: 1px solid var(--mm-line);
    }

    .enhanced-mega .subcat-list::-webkit-scrollbar {
        display: none;
    }

    .enhanced-mega .subcat-item {
        flex: none;
        margin: 0;
        scroll-snap-align: start;
    }

    .enhanced-mega .subcat-link {
        width: auto;
        min-height: 40px;
        padding: 8px 14px;
        gap: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
        color: var(--mm-body);
        background: #fff;
        border: 1px solid var(--mm-line);
        border-radius: 999px;
    }

    .enhanced-mega .subcat-link i {
        color: #64748b;
    }

    .enhanced-mega .subcat-link .tab-count {
        display: none;
    }

    /* Tinted rather than solid orange: white text on #ff6600 is only 2.9:1 */
    .enhanced-mega .subcat-link.active {
        font-weight: 600;
        color: var(--mm-accent-ink);
        background: var(--mm-accent-soft);
        border-color: var(--mm-accent);
    }

    .enhanced-mega .subcat-link.active i {
        color: var(--mm-accent);
    }

    .enhanced-mega .subcat-link:focus-visible {
        outline: 2px solid var(--mm-accent);
        outline-offset: 2px;
    }

    /* Cards: no inner scroll box; the collapsed navbar already scrolls */
    .enhanced-mega .menu-content {
        order: 2;
        min-height: 0;
        max-height: none;
        padding: 14px 12px;
        overflow: visible;
    }

    .enhanced-mega .tab-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .enhanced-mega .tab-title {
        font-size: 0.98rem;
    }

    .enhanced-mega .tab-desc {
        font-size: 0.85rem !important;
    }

    .enhanced-mega .thumb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .enhanced-mega .menu-service-card {
        gap: 12px;
        padding: 12px;
    }

    .enhanced-mega .menu-service-card::after {
        display: none;
    }

    .enhanced-mega .menu-service-text {
        padding-right: 0;
    }

    .enhanced-mega .menu-service-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .enhanced-mega .menu-service-icon i {
        font-size: 1.1rem;
    }

    .enhanced-mega .menu-service-title {
        font-size: 0.9rem;
    }

    .enhanced-mega .menu-service-desc {
        font-size: 0.8rem !important;
    }

    .enhanced-mega .sidebar-footer {
        order: 3;
        margin: 0;
        padding: 0 12px 14px;
        border: 0;
    }

    .enhanced-mega .view-all-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        background: var(--mm-accent-ink);
    }
}

/* Phones: one card per row so titles and descriptions have room */
@media (max-width: 575.98px) {
    .enhanced-mega .thumb-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .enhanced-mega .menu-service-card {
        align-items: center;
    }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .enhanced-mega,
    .enhanced-mega * {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .enhanced-mega .menu-service-card:hover {
        transform: none;
    }
}