/* ======================================================================
   NAV DROPDOWN — Mega Menu for Products / Solutions / About
   Load after main.css:  <link rel="stylesheet" href="nav-dropdown.css">
   ====================================================================== */

/* ── Nav Item with Dropdown ── */
.nav-item { position: relative; }
.nav-item > .nav-link { display: flex; align-items: center; gap: 4px; }
.nav-chevron {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: transform 0.25s ease, opacity 0.25s ease;
    margin-left: 2px;
}
.nav-item:hover .nav-chevron,
.nav-item.open .nav-chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}

/* ── Dropdown Panel (shared) ── */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    pointer-events: none;
}
.nav-item:hover .nav-dropdown,
.nav-item.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Arrow */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-left: 1px solid rgba(0,0,0,0.06);
    border-radius: 2px 0 0 0;
    z-index: 1;
}
/* Hover bridge — prevents gap between nav-link and dropdown */
.nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 12px;
    display: none;
}
.nav-item:hover::after { display: block; }

/* ── Dropdown Inner Layout ── */
.nav-dropdown__inner {
    display: flex;
    min-width: 480px;
    overflow: hidden;
    border-radius: 12px;
}

/* Left: Links */
.nav-dropdown__links {
    flex: 1;
    padding: 20px 24px;
    min-width: 240px;
}
.nav-dropdown__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    padding: 0 10px;
    margin-bottom: 8px;
}
.nav-dropdown__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    line-height: 1.4;
}
.nav-dropdown__link:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.nav-dropdown__link-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.nav-dropdown__link-icon.blue   { background: #eff6ff; color: #3b82f6; }
.nav-dropdown__link-icon.violet { background: #f5f3ff; color: #8b5cf6; }
.nav-dropdown__link-icon.amber  { background: #fffbeb; color: #f59e0b; }
.nav-dropdown__link-icon.green  { background: #ecfdf5; color: #10b981; }
.nav-dropdown__link-icon.rose   { background: #fff1f2; color: #f43f5e; }
.nav-dropdown__link-icon.gray   { background: #f8fafc; color: #64748b; }
.nav-dropdown__link-text {
    display: flex;
    flex-direction: column;
}
.nav-dropdown__link-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0f172a;
}
.nav-dropdown__link-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 1px;
}
/* Separator */
.nav-dropdown__sep {
    height: 1px;
    background: #f1f5f9;
    margin: 8px 10px;
}
/* View All link at bottom */
.nav-dropdown__all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #3b82f6;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.15s ease;
}
.nav-dropdown__all:hover { background: #eff6ff; }
.nav-dropdown__all i { font-size: 0.7rem; }

/* Right: Featured Card */
.nav-dropdown__featured {
    width: 200px;
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.nav-dropdown__featured::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
    border-radius: 50%;
}
.nav-dropdown__featured-img {
    width: 100%;
    flex: 1;
    min-height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.05);
}
.nav-dropdown__featured-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.95);
}
.nav-dropdown__featured-desc {
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
}
.nav-dropdown__featured-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
    transition: color 0.15s;
}
.nav-dropdown__featured-link:hover { color: #7dd3fc; }

/* ── About dropdown: right-aligned ── */
.nav-item--right .nav-dropdown {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
}
.nav-item--right:hover .nav-dropdown,
.nav-item--right.open .nav-dropdown {
    transform: translateX(0) translateY(0);
}
.nav-item--right .nav-dropdown::before {
    left: auto;
    right: 32px;
    transform: rotate(45deg);
}

/* ── About: no featured card, compact list ── */
.nav-dropdown--compact .nav-dropdown__inner {
    min-width: 480px;
}

/* ── Solutions dropdown: hide descriptions for compact height ── */
.nav-dropdown--solutions .nav-dropdown__link-desc {
    display: none;
}

/* ── Homepage dark mode overrides ── */
body.page-home .nav-dropdown {
    background: rgba(15,23,42,0.96);
    border-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
body.page-home .nav-dropdown::before {
    background: rgba(15,23,42,0.96);
    border-color: rgba(255,255,255,0.08);
}
body.page-home .nav-dropdown__label { color: rgba(255,255,255,0.4); }
body.page-home .nav-dropdown__link { color: rgba(255,255,255,0.7); }
body.page-home .nav-dropdown__link:hover { background: rgba(255,255,255,0.06); color: #fff; }
body.page-home .nav-dropdown__link-title { color: rgba(255,255,255,0.95); }
body.page-home .nav-dropdown__link-desc { color: rgba(255,255,255,0.35); }
body.page-home .nav-dropdown__sep { background: rgba(255,255,255,0.06); }
body.page-home .nav-dropdown__all { color: #38bdf8; }
body.page-home .nav-dropdown__all:hover { background: rgba(56,189,248,0.08); }
body.page-home .nav-dropdown__link-icon.blue   { background: rgba(59,130,246,0.12); color: #60a5fa; }
body.page-home .nav-dropdown__link-icon.violet { background: rgba(139,92,246,0.12); color: #a78bfa; }
body.page-home .nav-dropdown__link-icon.amber  { background: rgba(245,158,11,0.12); color: #fbbf24; }
body.page-home .nav-dropdown__link-icon.green  { background: rgba(16,185,129,0.12); color: #34d399; }
body.page-home .nav-dropdown__link-icon.rose   { background: rgba(244,63,94,0.12);  color: #fb7185; }
body.page-home .nav-dropdown__link-icon.gray   { background: rgba(255,255,255,0.06); color: #94a3b8; }
body.page-home .nav-dropdown__featured {
    background: linear-gradient(135deg, rgba(30,58,95,0.6), rgba(15,23,42,0.8));
    border-left: 1px solid rgba(255,255,255,0.06);
}

/* ── Footer: tighter column gap (−15%) + intro text style ── */
.footer-grid { gap: 2.55rem; }
.footer-tagline {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.7;
    margin: var(--sp-4) 0;
}

/* ── Desktop: hide mobile sub-links ── */
.mobile-sub { display: none; }

/* ── Mobile: hide dropdowns, show in mobile nav ── */
@media (max-width: 768px) {
    .nav-chevron { display: none; }
    .nav-dropdown { display: none !important; }
    .nav-item::after { display: none !important; }
    .nav-item { display: block; width: 100%; }

    /* Mobile sub-links */
    .main-nav.open .mobile-sub {
        display: flex;
        flex-direction: column;
        padding-left: 16px;
        margin-top: -8px;
        margin-bottom: 8px;
    }
    .mobile-sub {
        display: none;
    }
    .mobile-sub a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        font-size: 0.9375rem;
        color: var(--gray-500);
        text-decoration: none;
        border-radius: 6px;
        transition: 0.15s;
    }
    .mobile-sub a:hover { background: var(--gray-50); color: var(--gray-900); }
    .mobile-sub a i { font-size: 0.8rem; width: 18px; text-align: center; opacity: 0.5; }
}