/* =========================================
   EXACT SOLARICA NAVBAR STYLES
========================================= */

:root {
    --nav-slate-900: #0f172a;
    --nav-slate-800: #1e293b;
    --nav-slate-600: #475569;
    --nav-slate-50: #f8fafc;
    --nav-orange-600: #ea580c;
    --nav-orange-50: #fff7ed;
    --nav-blue-600: #2563eb;
    --nav-purple-600: #9333ea;
    --nav-green-600: #16a34a;
}

/* --- Fix 1: Make sure the whole navbar is above index page animations --- */
.nav-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 99999!important; /* Increased to block index page elements */
    font-family: sans-serif; 
}

.nav-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; font-family: sans-serif; }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .nav-container { padding: 0 3rem; } }

/* --- Top Bar --- */
.nav-top-bar { background: #0f1712; color: rgba(255,255,255,0.9); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid rgba(255,255,255,0.1); overflow: hidden; max-height: 30px; transition: all 0.5s ease-in-out; }
.nav-top-bar.scrolled { max-height: 0; opacity: 0; padding: 0; border: none; }
.top-bar-inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 0.5rem 0; gap: 0.5rem; }
@media (min-width: 768px) { .top-bar-inner { flex-direction: row; } }
.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 1.5rem; }
.top-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none;text-transform: lowercase; color: inherit; transition: color 0.3s; }
.top-link:hover { color: var(--nav-orange-600); }
.top-divider { color: rgba(255,255,255,0.2); display: none; }
@media (min-width: 768px) { .top-divider, .hide-mobile { display: inline; } }
@media (max-width: 767px) { .hide-mobile { display: none; } }
.top-socials { display: flex; gap: 0.75rem; color: rgba(255,255,255,0.6); }
.top-socials a { transition: all 0.3s; color: inherit; }
.social-hover-fb:hover { color: #1877F2; transform: scale(1.1); }
.social-hover-tw:hover { color: #1DA1F2; transform: scale(1.1); }
.social-hover-ig:hover { color: #E4405F; transform: scale(1.1); }
.social-hover-in:hover { color: #0A66C2; transform: scale(1.1); }

/* --- Main Header --- */
.nav-main-header { padding: 0.1rem 0.1rem 0; transition: all 0.5s ease-in-out; max-width: 1400px; margin: 0 auto; }
@media (min-width: 768px) { .nav-main-header { padding-left: 3rem; padding-right: 3rem; } }
.nav-main-header.scrolled { padding-top: 0rem; }
.header-relative { position: relative; display: flex; justify-content: space-between; height: 6rem; align-items: center; }

/* Logo */
.logo-container { z-index: 20; transition: all 0.5s; transform-origin: left; }
.logo-container.scrolled { transform: scale(0.9); }
.logo-link { display: block; position: relative; height: 5rem; width: 16rem; transition: transform 0.3s; }
.logo-link:hover { transform: scale(1.05); }
.logo-img { height: 100%; width: 100%; object-fit: contain; object-position: left; }

/* --- Desktop Nav (Glassmorphism Pill) --- */
.desktop-nav { display: none; align-items: center; padding: 0.5rem 1rem; border-radius: 9999px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; transition: all 0.5s; background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.nav-main-header.scrolled .desktop-nav { background: rgba(255,255,255,0.95); border-color: rgba(254,215,170,0.5); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
@media (min-width: 1024px) { .desktop-nav { display: flex; } }

.nav-item { position: relative; padding: 0 0.25rem; }
.nav-pill { padding: 0.6rem 1rem; font-size: 0.875rem; font-weight: 700; border-radius: 9999px; display: flex; align-items: center; gap: 0.375rem; transition: all 0.3s; color: var(--nav-slate-600); text-decoration: none; }
.nav-pill:hover, .nav-item.has-dropdown:hover > .nav-pill { color: var(--nav-orange-600); background: var(--nav-orange-50); }
.chevron { font-size: 10px; transition: transform 0.3s; }
.nav-item.has-dropdown:hover .chevron { transform: rotate(180deg); }

/* =========================================
   PURE CSS DROPDOWNS (Matches Image Exactly)
========================================= */
.mega-menu, .standard-dropdown { 
    position: absolute; 
    top: calc(100% + 15px); /* Drops just below the pill */
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(15px); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 999; 
    background: rgba(255,255,255,0.98); 
    backdrop-filter: blur(24px); 
    border-radius: 1.5rem; 
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15); 
    border: 1px solid rgba(255,255,255,0.8); 
}

/* Show on hover */
.nav-item.has-dropdown:hover .mega-menu, 
.nav-item.has-dropdown:hover .standard-dropdown { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(-50%) translateY(0); 
}

/* Standard Dropdown */
.standard-dropdown { left: 50%; transform: translateX(-50%) translateY(15px); width: 14rem; padding: 0.75rem; }
.nav-item.has-dropdown:hover .standard-dropdown { transform: translateX(-50%) translateY(0); }
.standard-dropdown a { display: block; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--nav-slate-600); border-radius: 0.75rem; text-decoration: none; transition: all 0.2s; border-bottom: 1px solid var(--nav-slate-50); }
.standard-dropdown a:last-child { border-bottom: none; }
.standard-dropdown a:hover { color: var(--nav-orange-600); background: var(--nav-orange-50); }

/* Mega Menu (Specific to image) */
.mega-menu { 
    left: 160%; /* Pulls the left edge to the exact horizontal center of your tab button */
    transform: translateX(-50%) translateY(15px); /* Mathematically shifts it back perfectly to center it */
    width: auto; /* Allow container box to dynamically size down around columns */
    min-width: 820px; /* Perfect width for 3 structural columns */
    max-width: 95vw;
    padding: 2.5rem 3.5rem; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-bg-pattern { position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background: repeating-linear-gradient(45deg, transparent, transparent 10px, #000 10px, #000 11px); }

.mega-grid { 
    position: relative; 
    z-index: 10; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* CHANGED FROM 4 TO 3: Removes the empty blank space track on the right */
    gap: 3.5rem; /* Spacious, well-proportioned horizontal column padding */
}
.mega-col { display: flex; flex-direction: column; } /* Removed border lines */

.mega-header h3 { font-size: 0.8rem; font-weight: 900; line-height: 1.3; margin-bottom: 0.25rem; }
.mega-bar { height: 3px; width: 2.5rem; border-radius: 9999px; margin-bottom: 1.25rem; }

.text-orange { color: var(--nav-orange-600); } .bg-orange { background-color: var(--nav-orange-600); }
.text-blue { color: var(--nav-blue-600); } .bg-blue { background-color: var(--nav-blue-600); }
.text-purple { color: var(--nav-purple-600); } .bg-purple { background-color: var(--nav-purple-600); }
.text-green { color: var(--nav-green-600); } .bg-green { background-color: var(--nav-green-600); }

.mega-links { display: flex; flex-direction: column; gap: 0.5rem; }
.mega-links a { font-size: 0.875rem; font-weight: 500; color: var(--nav-slate-600); text-decoration: none; transition: all 0.2s; }
.mega-links a:hover { color: var(--nav-slate-900); transform: translateX(5px); font-weight: 700; }

/* --- Contact Button & Mobile Toggle --- */
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.btn-contact-nav { display: none; align-items: center; gap: 0.5rem; background: linear-gradient(to right, #d1f366, #c2e840); color: var(--nav-slate-900); padding: 0.75rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transition: all 0.3s; }
.btn-contact-nav:hover { background: linear-gradient(to right, #d1f366, #b0d630); transform: scale(1.05); }
@media (min-width: 1024px) { .btn-contact-nav { display: flex; } }



/* --- Fix 2: Add solid white background to the toggle button --- */
.mobile-toggle-btn { 
    display: block; 
    padding: 0.75rem 1rem; 
    color: var(--nav-slate-800); 
    background: #ffffff; /* FIXED: Removed var(--white) */
    border: none; 
    border-radius: 9999px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    cursor: pointer; 
    font-size: 1.25rem; 
}
@media (min-width: 1024px) { .mobile-toggle-btn { display: none; } }

/* --- Fix 3: Add solid white background and z-index to the mobile menu --- */
.mobile-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    background: #ffffff; /* FIXED: Removed var(--white) */
    border-top: 1px solid var(--nav-slate-100); 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    z-index: 9999; /* FIXED: Keeps menu above everything */
    height: 90vh; 
    overflow-y: auto; 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(-20px); 
    transition: all 0.3s; 
}
.mobile-menu.open { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

.mobile-menu-inner { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-link { font-size: 1.25rem; font-weight: 700; color: var(--nav-slate-800); text-decoration: none; display: block; border-bottom: 1px solid var(--nav-slate-100); padding-bottom: 0.75rem; }



/* --- Mobile Menu Accordion Styles --- */
.mobile-item { border-bottom: 1px solid #f1f5f9; }
.mobile-link-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    background: none; 
    border: none; 
    padding: 0 0 0.75rem 0; 
    cursor: pointer; 
}
.mobile-link-flex i { transition: transform 0.3s; }
.mobile-link.border-none { border-bottom: none; }
.mobile-dropdown-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-out; 
    background: #f8fafc; 
    border-radius: 1rem; 
    margin-bottom: 0.5rem; 
}
.mobile-item.active .mobile-dropdown-content { padding-bottom: 1rem; }

.mobile-sub-group { padding: 1rem 1rem 0; }
.mobile-sub-header { 
    display: block; 
    font-size: 0.7rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    margin-bottom: 0.5rem; 
}
.mobile-sub-group a { 
    display: block; 
    padding: 0.5rem 0; 
    font-size: 0.9rem; 
    color: #475569; 
    text-decoration: none; 
    transition: color 0.3s; 
}
.mobile-sub-group a:hover { color: #0f172a; font-weight: 600; }



/* breadcrumb */

/* =========================================
   AUTOMATED BREADCRUMB NAVIGATION STYLES
========================================= */
.breadcrumb-nav {
    width: 100%;
  margin-bottom: -10rem;
    margin-top: 8rem; /* Clears your fixed 6rem navbar header */
    background-color: #f8fafc; /* Matches your slate-50 canvas background */
    /* border-bottom: 1px solid #e2e8f0; */
}

.breadcrumb-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Individual Breadcrumb Slots */
.breadcrumb-item {
    display: flex;
    align-items: center;
    color: #64748b; /* Clean slate-500 tint */
}

.breadcrumb-item a {
    color: #475569; /* Interactive slate-600 tint */
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: #ea580c; /* Shifts to brand orange on interaction state */
}

/* Separator Arrows between tracks */
.breadcrumb-item:not(:last-child)::after {
    content: "\f105"; /* FontAwesome Right Angle Arrow Icon code */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 0.5rem;
    margin-right: 0.25rem;
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Active Terminus Text styling */
.breadcrumb-item.active {
    color: #ea580c; /* Brand Highlight Orange for the current active view */
    pointer-events: none; /* Prevents clicking the page you are already on */
}