/* =============================================
   GLOBAL IMMUNE PROTECTION FOR HEADER/SEARCH/FOOTER
   — This prevents ANY page CSS from overriding components
   ============================================== */

@layer components;

/* Reset all page-side CSS inside header, nav, dropdowns, search, footer */
.main-header * {
  all: unset;
  display: revert;
}


.nav :where(*) {
  all: revert-layer;
}

.nav-list :where(*) {
  all: revert-layer;
}

.dropdown-menu :where(*) {
  all: revert-layer;
}

.search-trigger :where(*) {
  all: revert-layer;
}

.search-expanded :where(*) {
  all: revert-layer;
}

.search-results :where(*) {
  all: revert-layer;
}

.main-footer :where(*) {
  all: revert-layer;
}

/* Everything below is your original framework-level header system */


/* ============================================
   COMPONENTS CSS (HEADER + DROPDOWNS + SEARCH)
   Clean, Optimized, Fully Responsive
============================================ */

/* -------------------------------------------
   HEADER BAR
-------------------------------------------- */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 22px;

  background: #0a0c10;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px) saturate(180%);

  z-index: 6000;
}

/* -------------------------------------------
   LOGO
-------------------------------------------- */
.logo {
  font-size: 1.45rem;
  font-weight: bold;
  text-decoration: none;
  color: #0ea5e9;
  white-space: nowrap;
}

/* Mobile: center the logo */
@media (max-width: 1100px) {
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;       /* ← FIX: Make logo clickable */
    pointer-events: auto; /* ← Safety: allow clicks */
  }
}


/* -------------------------------------------
   NAVIGATION
-------------------------------------------- */
.nav {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-item {
  position: relative;
}

.drop-btn {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px 6px;
  transition: 0.25s;
}

.drop-btn:hover {
  color: #0ea5e9;
}

/* -------------------------------------------
   DROPDOWN MENUS
-------------------------------------------- */
.dropdown-menu {
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 260px;

  background: rgba(15,17,21,0.98);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 10px 0;

  display: none;
  flex-direction: column;

  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 9999;

  /* Scroll */
  max-height: 360px;
  overflow-y: auto;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 0.9rem;
  color: #dce3ea;
  transition: 0.2s;
}

.dropdown-menu li a:hover {
  color: #0ea5e9;
  background: rgba(14,165,233,0.12);
}

/* Hover open for desktop */
.nav-item:hover > .dropdown-menu {
  display: flex;
}

/* -------------------------------------------
   SCROLLBAR STYLE
-------------------------------------------- */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
}

/* -------------------------------------------
   HAMBURGER (MOBILE ONLY)
-------------------------------------------- */

/* Hide on desktop */
.hamburger,
.mobile-nav-toggle {
  display: none;
}

/* Actual hamburger button */
.mobile-nav-toggle {
  background: none;
  border: none;
  cursor: pointer;

  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);

  z-index: 9999;
  padding: 5px;
}

.mobile-nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: #e5e7eb;
  border-radius: 4px;
}

/* MOBILE RULES */
@media (max-width: 1100px) {
  /* Show hamburger */
  .mobile-nav-toggle {
    display: block !important;
  }
/* ============================
   FIX — MOBILE NAV OPEN LOGIC
==============================*/

/* When hamburger is clicked */
.nav.mobile-active .nav-list {
  display: flex !important;
}

/* Make nav a vertical drawer */
@media (max-width: 1100px) {
  .nav {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background: rgba(10,12,16,0.97);
    padding: 20px 0;
    display: block;
    z-index: 9000;
  }
}

  /* Hide nav list */
  .nav-list {
    display: none;
    position: fixed;

    top: 64px;
    left: 0;
    width: 100%;
    flex-direction: column;

    background: rgba(10,12,16,0.97);
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.08);

    z-index: 9000;
  }

  .nav-list.show {
    display: flex;
  }

  /* Dropdowns adapt to mobile */
  .dropdown-menu {
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .nav-item:hover > .dropdown-menu {
    display: none;
  }

  .nav-item.open > .dropdown-menu {
    display: flex;
  }
}

/* -------------------------------------------
   SEARCH BUTTON (Right fixed)
-------------------------------------------- */
.search-trigger {
  position: fixed;
  top: 14px;
  right: 22px;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(14,165,233,0.35);
  backdrop-filter: blur(10px) saturate(180%);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 7000;
}

.search-trigger:hover {
  box-shadow: 0 0 14px rgba(14,165,233,0.5);
}

/* Expanded Search Box */
.search-expanded {
  position: fixed;
  top: 14px;
  right: 80px;

  height: 44px;
  width: 0;

  opacity: 0;
  overflow: hidden;

  display: flex;
  align-items: center;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(14,165,233,0.35);
  border-radius: 12px;

  backdrop-filter: blur(10px);
  transition: 0.35s ease;

  z-index: 7000;
}
/* FIX: prevent search box from blocking header when closed */
#search-box:not(.active) {
    pointer-events: none !important;
}

/* Allow interaction when open */
#search-box.active {
    pointer-events: auto !important;
}

.search-expanded.active {
  width: 360px;
  opacity: 1;
}

.search-expanded input {
  width: 100%;
  padding: 10px 14px;
  color: white;
  font-size: 0.95rem;
  background: transparent;
  border: none;
  outline: none;
}

/* Search Results */
.search-results {
  position: fixed;
  top: 64px;
  right: 22px;
  width: 360px;
  max-height: 260px;

  background: rgba(15,17,21,0.95);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.5);

  display: none;
  overflow-y: auto;

  z-index: 9000;
}

.search-results.active {
  display: block;
}

.search-results::-webkit-scrollbar {
  width: 6px;
}
.search-results::-webkit-scrollbar-thumb {
  background: rgba(14,165,233,0.3);
  border-radius: 10px;
}

.result-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.result-item:hover {
  background: rgba(14,165,233,0.12);
}
/* -------------------------------------------
   MOBILE FIX FOR SEARCH BUTTON + BAR
-------------------------------------------- */
@media (max-width: 768px) {

  /* Smaller icon so it stays inside safely */
  .search-trigger {
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Search bar must shrink for mobile */
  .search-expanded {
    right: 56px !important;
    width: calc(100% - 80px) !important; 
    max-width: 240px !important;
    height: 36px !important;
  }

  .search-expanded.active {
    opacity: 1 !important;
  }

  /* Mobile search results width */
  .search-results {
    right: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 320px !important;
  }
}

/* ===============================
   FOOTER — FINAL FIXED LAYOUT
================================== */

.main-footer {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  padding: 40px 20px;
  border-top: 1px solid rgba(14,165,233,0.25);
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-col {
  flex: 1;
  min-width: 220px;
}

.footer-logo a {
  color: #00eaff;
  font-size: 1.8rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  transition: 0.25s;
}

.footer-logo a:hover {
  color: #6af7ff;
  text-shadow: 0 0 10px rgba(0,234,255,0.6);
}

.footer-desc {
  margin-top: 10px;
  line-height: 1.6rem;
  opacity: 0.9;
}

.footer-col h3 {
  font-size: 1.3rem;
  color: #0ea5e9;
  margin-bottom: 15px;
}

.footer-col ul li {
  margin: 8px 0;
}

.footer-col ul li a {
  color: #0ea5e9;
  text-decoration: none;
  opacity: 0.9;
  transition: 0.25s;
}

.footer-col ul li a:hover {
  text-shadow: 0 0 6px rgba(14,165,233,0.6);
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.1);
  opacity: 0.7;
  font-size: 0.9rem;
}
/* === UNIVERSAL HAMBURGER FIX === */
@media (max-width: 1100px) {

  /* Normally nav-list is hidden on mobile */
  .nav-list {
      display: none !important;
  }

  /* When JS adds .mobile-active, menu opens */
  .nav.mobile-active .nav-list {
      display: flex !important;
      flex-direction: column;
      position: fixed;
      top: 64px;
      left: 0;
      width: 100%;
      background: rgba(10,12,16,0.97);
      padding: 20px 0;
      border-top: 1px solid rgba(255,255,255,0.1);
      z-index: 9000;
  }
}
/* FINAL FIX — Move hamburger away from logo */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    left: 12px !important;     /* keep it left */
    right: auto !important;    /* ensure it never shifts right */
    width: 28px !important;    /* smaller hitbox */
    height: 28px !important;
    z-index: 8000 !important;  /* Still above UI, but below logo */
  }

  .logo, .site-logo {
    position: relative !important;
    z-index: 99999 !important; /* Always on top */
    pointer-events: auto !important;
  }
}
/* ===========================================
   FINAL: FIX MOBILE LOGO CLICK BLOCKING
   =========================================== */

@media (max-width: 1100px) {

  /* 1) Keep logo ALWAYS above everything */
  .logo, .site-logo {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  /* 2) Hamburger LOWER than logo */
  #hamburgerBtn, .mobile-nav-toggle {
    z-index: 5000 !important;
  }

  /* 3) NAV MENU must sit BELOW logo */
  nav.nav, #navMenu, .nav-list {
    z-index: 4000 !important;
  }
}
/* ===========================================
   FIX: Hamburger should NOT overlap logo
   =========================================== */
@media (max-width: 1100px) {

  /* Reduce clickable box of hamburger */
  #hamburgerBtn.mobile-nav-toggle {
    width: 40px !important;   /* was too large */
    height: 40px !important;
    left: 14px !important;    /* stays left, but not covering center */
    position: fixed !important;
    z-index: 5000 !important; /* below logo */
  }

  /* Logo MUST sit on top and remain clickable */
  .logo, .site-logo, header .logo-text, header a.logo {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }
}