/* Ultimate Modern Navbar Styles (Refined for Consistent Blue Theme) */
/* Core Layout Overrides */
nav.navbar.navbar-custom {
    /* Link to global palette */
    --nav-height: 72px; /* was 86px -> reduce for tablets */
    --nav-bg: rgba(15,23,42,0.55); /* deep slate translucent */
    --nav-bg-scrolled: rgba(15,23,42,0.78);
    --nav-border: rgba(255,255,255,0.08);
    --nav-blur: 18px;
    --nav-color: #000; /* CHANGED to black for light theme readability */
    /* Harmonized accents (use site blues) */
    --nav-accent: var(--primary-color, #2563eb);
    --nav-accent-rgb: 37,99,235; /* #2563eb */
    --nav-accent-2: var(--primary-light, #3b82f6);
    --nav-accent-3: var(--accent-light, #60a5fa);
    --nav-gradient: linear-gradient(135deg,var(--nav-accent) 0%,var(--nav-accent-2) 55%,var(--nav-accent-3) 100%);
    --indicator-size: 40px;
    --indicator-bg: rgba(var(--nav-accent-rgb),0.16);
    --indicator-border: rgba(var(--nav-accent-rgb),0.40);
    --dropdown-bg: rgba(23,37,84,0.92); /* navy-like (tailwind slate + brand) */
    --dropdown-border: rgba(255,255,255,0.07);
    --dropdown-shadow: 0 8px 24px -6px rgba(0,0,0,0.45),0 4px 12px -4px rgba(0,0,0,0.35);
    --ease-spring: cubic-bezier(.4,0,.2,1);
    --underline-height: 2px;
    --underline-radius: 2px;
    --glow-size: 110px;
    --glow-blur: 38px;
    --focus-ring: 0 0 0 3px rgba(var(--nav-accent-rgb),0.35);
}

/* Dark theme adjustments (tie into existing data-theme) */
[data-theme='dark'] nav.navbar.navbar-custom {
    --nav-bg: rgba(30,41,59,0.55);
    --nav-bg-scrolled: rgba(30,41,59,0.80);
    --dropdown-bg: rgba(30,41,59,0.95);
    --nav-color: #e2e8f0;
    --dropdown-border: rgba(255,255,255,0.06);
}

nav.navbar.navbar-custom {
    backdrop-filter: blur(var(--nav-blur));
    -webkit-backdrop-filter: blur(var(--nav-blur));
    background: linear-gradient(140deg,var(--nav-bg) 0%,rgba(255,255,255,0.02) 100%);
    border: 1px solid var(--nav-border);
    border-radius: 24px;
    margin-top: 8px; /* was 14px */
    padding: 6px 18px!important; /* was 10px 22px */
    transition: background .6s var(--ease-spring),border-color .6s var(--ease-spring),transform .6s var(--ease-spring),box-shadow .6s var(--ease-spring);
    position: relative;
    overflow: visible;
    animation: navReveal .75s var(--ease-spring) .1s backwards;
    min-height: var(--nav-height);
    width: 100%;
    box-sizing: border-box;
}

nav.navbar.navbar-custom.scrolled {
    background: var(--nav-bg-scrolled);
    transform: translateY(-3px) scale(.992);
    box-shadow: 0 10px 32px -10px rgba(0,0,0,.45);
}

/* Container adjustments for proper width */
nav.navbar.navbar-custom .container {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow: visible !important;
}

/* Navbar brand logo fixes */
.navbar-brand {
    margin-right: 0;
    margin-left: auto;
    padding: 0;
    display: flex !important;
    align-items: center;
}

.logo-container {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: 58px;
}

.logo-container .logo-image {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 58px;
}

.logo-container .logo-image img {
    max-height: 58px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Fallback when logo fails to load */
.logo-container.no-logo .logo-image {
    display: none !important;
}

.logo-container.no-logo .logo-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    background: var(--nav-gradient);
    border-radius: 12px;
    color: white;
    font-size: 24px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.logo-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nav-color);
    margin: 0;
}

.logo-subtitle {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--nav-color);
    opacity: 0.8;
    margin: 0;
}

/* Wrapper */
.ultimate-navbar-wrapper { 
    position: relative; 
    width: 100%; 
    flex: 1;
    overflow: visible !important;
}

.ultimate-navbar { 
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 2px; 
    width: 100%;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ultimate-navbar::-webkit-scrollbar {
    display: none;
}

/* iPad specific adjustments */
@media (min-width: 768px) and (max-width: 1199.98px) {
    nav.navbar.navbar-custom {
        margin-top: 6px;
        padding: 4px 16px !important;
        border-radius: 20px;
        overflow: visible !important;
    }
    
    .ultimate-navbar {
        gap: 1px;
        padding-right: 8px;
        overflow: visible !important;
    }
    
    .ultimate-navbar .nav-link.ultimate-link {
        font-size: 13px;
        padding: 8px 12px !important;
    }
    
    .logo-container {
        gap: 8px;
        height: 52px;
    }
    
    .logo-container .logo-image {
        min-width: 52px;
        height: 52px;
    }
    
    .logo-container .logo-image img {
        max-height: 52px !important;
    }
    
    .logo-title {
        font-size: 16px;
    }
    
    .logo-subtitle {
        font-size: 11px;
    }
}

/* Visual enhancer gradient layer (soft, aligned with brand) */
.navbar-visual-enhancer { position:absolute; inset:0; pointer-events:none; border-radius:22px; background:radial-gradient(circle at 40% 60%,rgba(var(--nav-accent-rgb),0.10),transparent 70%),linear-gradient(120deg,rgba(var(--nav-accent-rgb),0.07),transparent 65%); mix-blend-mode: plus-lighter; opacity:.55; }

/* Items */
.ultimate-navbar .nav-item { position:relative; padding:2px; white-space:nowrap; flex-shrink: 0; }
.ultimate-navbar .nav-link.ultimate-link { position:relative; font-weight:600; font-size:14px; /* was 15px */ letter-spacing:.15px; color:var(--nav-color); padding:9px 14px!important; /* smaller for tablets */ border-radius:14px; display:flex; align-items:center; gap:6px; line-height:1; isolation:isolate; text-shadow: 0 1px 2px rgba(0,0,0,0.35); cursor: pointer; }

.ultimate-navbar .nav-link .icon { font-size:15px; opacity:.9; transition:transform .55s var(--ease-spring),filter .55s var(--ease-spring); }

/* Underline animation (single gradient consistent with theme) */
.ultimate-navbar .nav-link .underline { position:absolute; right:14px; left:14px; bottom:6px; height:var(--underline-height); border-radius:var(--underline-radius); background:var(--nav-gradient); transform:scaleX(0); transform-origin:right center; transition:transform .5s var(--ease-spring); }
.ultimate-navbar .nav-item:hover .nav-link .underline, .ultimate-navbar .nav-item.is-active .nav-link .underline, .ultimate-navbar .nav-link.active .underline { transform:scaleX(1); }

/* Glow Circle toned down */
.ultimate-navbar .nav-link .link-glow { position:absolute; top:50%; right:50%; width:var(--glow-size); height:var(--glow-size); background:radial-gradient(circle at 50% 50%, rgba(var(--nav-accent-rgb),0.38), rgba(var(--nav-accent-rgb),0.08) 60%, transparent 70%); transform:translate(50%,-50%) scale(0); filter:blur(var(--glow-blur)); opacity:0; transition:transform .55s var(--ease-spring),opacity .55s var(--ease-spring); z-index:-1; }
.ultimate-navbar .nav-item:hover .nav-link .link-glow, .ultimate-navbar .nav-item.is-active .nav-link .link-glow { transform:translate(50%,-50%) scale(1); opacity:.65; }

/* Active Indicator (floating) */
.nav-active-indicator { position:absolute; top:50%; height:var(--indicator-size); background:linear-gradient(150deg,rgba(var(--nav-accent-rgb),0.22),rgba(var(--nav-accent-rgb),0.10)); border:1px solid var(--indicator-border); box-shadow:0 4px 14px -4px rgba(var(--nav-accent-rgb),0.35),0 2px 7px -2px rgba(0,0,0,0.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:14px; z-index:0; transform:translateY(-50%) scale(.6); opacity:0; transition: all .60s var(--ease-spring); pointer-events:none; }
.nav-active-indicator.visible { opacity:1; transform:translateY(-50%) scale(1); }

/* Enhanced Dropdown Styles for Ultimate Navbar */
.nav-item.dropdown,
.nav-item.mega-parent {
    position: relative !important;
}

.nav-item.dropdown .dropdown-toggle,
.nav-item.mega-parent .dropdown-toggle {
    cursor: pointer !important;
    position: relative !important;
}

.nav-item.dropdown .dropdown-toggle::after,
.nav-item.mega-parent .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.3s ease;
}

.nav-item.dropdown .dropdown-toggle[aria-expanded="true"]::after,
.nav-item.mega-parent .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* FIXED: Dropdown Menu - The Critical Fix */
.dropdown-menu.fancy-dropdown,
.fancy-dropdown.dropdown-menu,
.dropdown-menu { 
    position: absolute !important; 
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
    min-width: 230px !important;
    padding: 12px 14px 8px !important;
    border-radius: 18px !important;
    background: rgba(23,37,84,0.92) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.45), 0 4px 12px -4px rgba(0,0,0,0.35) !important;
    margin-top: 10px !important;
    overflow: hidden !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.95) !important;
    transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}

/* CRITICAL FIX: When dropdown is shown */
.dropdown-menu.show,
.fancy-dropdown.dropdown-menu.show,
.dropdown-menu.fancy-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* FORCE VISIBILITY - Emergency override */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.mega-parent:hover .dropdown-menu,
.nav-item.dropdown.show .dropdown-menu,
.nav-item.mega-parent.show .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

@keyframes dropdownEnter { 
    0% { 
        opacity: 0; 
        transform: translateY(14px) scale(.94);
    } 
    70% { 
        opacity: 1; 
        transform: translateY(-2px) scale(1.015);
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    } 
}

.dropdown-item-wrapper { 
    position: relative; 
}

.ultimate-dropdown-item,
.dropdown-item { 
    position: relative; 
    padding: 10px 14px !important; 
    border-radius: 12px !important; 
    font-weight: 500 !important; 
    font-size: 14px !important; 
    color: #dbeafe !important; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    overflow: hidden; 
    line-height: 1.15;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.ultimate-dropdown-item .item-underline { 
    position: absolute; 
    right: 10px; 
    left: 10px; 
    bottom: 6px; 
    height: 2px; 
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2)); 
    transform: scaleX(0); 
    transform-origin: right; 
    transition: transform .45s var(--ease-spring); 
}

.dropdown-item-wrapper:hover .ultimate-dropdown-item .item-underline,
.dropdown-item:hover .item-underline { 
    transform: scaleX(1); 
}

.dropdown-item-wrapper:hover .ultimate-dropdown-item,
.dropdown-item:hover { 
    background: rgba(37,99,235, 0.18) !important; 
    color: #fff !important; 
}

/* Hover states */
.ultimate-navbar .nav-item:hover .nav-link { color:inherit; }
.ultimate-navbar .nav-item:hover .nav-link .icon { transform:translateY(-2px) scale(1.12); filter:drop-shadow(0 3px 6px rgba(var(--nav-accent-rgb),0.40)); }

/* Focus accessibility */
.ultimate-navbar .nav-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Desktop hover support */
@media (hover: hover) and (pointer: fine) {
    .nav-item.dropdown:hover .dropdown-menu,
    .nav-item.mega-parent:hover .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  nav.navbar.navbar-custom { 
    border-radius:0; 
    margin-top:0; 
    padding:8px 16px!important; 
    width: 100vw;
    left: 0;
    right: 0;
    overflow: visible !important;
  }
  
  .ultimate-navbar { 
    flex-direction:column; 
    align-items:stretch; 
    overflow: visible !important;
  }
  
  .nav-active-indicator { display:none; }
  
  .ultimate-navbar .nav-link.ultimate-link { 
    width:100%; 
    justify-content:flex-start; 
    padding:14px 18px!important; 
  }
  
  .dropdown-menu,
  .fancy-dropdown.dropdown-menu { 
    position:static!important; 
    transform:none!important; 
    box-shadow:none !important; 
    margin:6px 0 4px !important; 
    background:rgba(15,23,42,.80) !important; 
    animation:none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
  }
  
  .dropdown-menu.show,
  .fancy-dropdown.dropdown-menu.show {
    display: block !important;
  }
  
  .ultimate-dropdown-item,
  .dropdown-item { 
    padding:12px 18px!important; 
    color: #fff !important;
  }
  
  .logo-container {
    gap: 8px;
    height: 48px;
  }
  
  .logo-container .logo-image {
    min-width: 48px;
    height: 48px;
  }
  
  .logo-container .logo-image img {
    max-height: 48px !important;
  }
  
  .logo-title {
    font-size: 16px;
  }
  
  .logo-subtitle {
    font-size: 11px;
  }
}

/* Better toggler visibility */
.navbar-toggler { 
    border: 2px solid var(--nav-accent) !important; 
    padding: 6px 10px !important; 
    border-radius: 8px !important;
    background: transparent !important;
}

.navbar-toggler:focus { 
    box-shadow: 0 0 0 3px rgba(var(--nav-accent-rgb),0.4) !important; 
    outline: none !important;
}

.navbar-toggler-icon { 
    background-image: none !important; 
    position: relative !important;
    width: 28px !important;
    height: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    display: block;
    height: 3px;
    background: var(--nav-accent);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
    width: 100%;
}

.navbar-toggler-icon::after {
    width: 100%;
}

/* Add middle line */
.navbar-toggler-icon {
    background: var(--nav-accent) !important;
    height: 3px !important;
    border-radius: 2px !important;
}

/* Navbar controls positioning */
.navbar-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.control-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.control-btn {
    padding: 8px 12px;
    border: 1px solid rgba(var(--nav-accent-rgb), 0.3);
    border-radius: 8px;
    background: transparent;
    color: var(--nav-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: rgba(var(--nav-accent-rgb), 0.1);
    border-color: var(--nav-accent);
    color: var(--nav-color);
    text-decoration: none;
}

/* Entrance animation */
@keyframes navReveal { 0% { opacity:0; transform:translateY(-28px) scale(.97);} 55% { opacity:1; transform:translateY(5px) scale(1.005);} 100% { opacity:1; transform:translateY(0) scale(1);} }

/* Grain overlay (subtle) */
nav.navbar.navbar-custom:before { content:""; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); opacity:.22; mix-blend-mode:overlay; border-radius:inherit; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { 
  .nav-active-indicator, .ultimate-navbar .nav-link .underline, .ultimate-navbar .nav-link .link-glow, nav.navbar.navbar-custom, .fancy-dropdown.dropdown-menu { transition:none!important; animation:none!important; }
}

/* Force dropdown visibility for debugging - Remove in production */
.debug-dropdown .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: red !important;
    border: 2px solid yellow !important;
}