/* Fix dark navbar background and light text */
header.site-header,
header#masthead,
.navbar,
.navbar-default,
.navigation-top,
.site-navigation,
#main-header,
.ast-primary-header-bar {
    background-color: #f8f9fa !important;  /* Light grey */
    color: #000 !important;
}

/* Menu text color */
.navbar a,
.navbar-nav > li > a,
.navigation-top a,
.main-navigation a,
.ast-header-custom-item a,
.site-header a {
    color: #000 !important;
}

/* Menu hover effect */
.navbar a:hover,
.navigation-top a:hover,
.main-navigation a:hover {
    color: #007bff !important;
}


/* =====================================================
   ✅ GLOBAL GREY BACKGROUND + DEFAULT TEXT COLOR
   ===================================================== */
html, body {
  background: #ececec !important;
  color: #232323 !important;
  width: 100%;
  min-height: 100vh;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden !important;
}

/* Transparent containers for layout */
.site, #page, .content-area, #main, .entry-content, 
.wp-block-group, .container, .wrapper, 
.site-main, .elementor-section, .elementor-container, .wp-block {
  background: transparent !important;
  box-shadow: none !important;
}

/* =====================================================
   ✅ FIXED: LIGHT GREY NAVIGATION BAR / HEADER (ALL ASTRA CASES)
   ===================================================== */
header, .site-header, .main-header, .main-navigation, nav, 
#masthead, .ast-header-bar, .ast-primary-header-bar, 
.ast-theme-transparent-header, 
.elementor-element.elementor-sticky--effects,
.ast-sticky-header-active .main-header-bar,
.ast-theme-transparent-header #masthead,
html:not(.ast-mobile-popup-active) #masthead {
  background-color: #eeeeee !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  color: #111 !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Navigation menu links */
nav a, .main-navigation a, .footer a, .site-footer a, header a,
.ast-header-break-point .main-header-menu a,
.ast-header-custom-item a, .ast-menu-toggle, 
.ast-main-header-bar a {
  color: #111 !important;
  font-weight: 500;
  text-decoration: none;
}
nav a:hover, .main-navigation a:hover, 
.ast-header-custom-item a:hover,
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
  color: #000 !important;
  text-decoration: underline;
}

/* Dropdown menu */
.main-navigation ul ul, .sub-menu, .menu-item-has-children ul {
  background: #f7f7f7 !important;
  color: #111 !important;
}

/* Mobile menu (hamburger + dropdown) */
.menu-toggle, .menu-toggle:hover, 
.ast-menu-toggle, .ast-menu-toggle:hover,
.ast-builder-menu-mobile .menu-toggle {
  background-color: #eeeeee !important;
  color: #111 !important;
  border: none !important;
}

/* =====================================================
   ✅ FOOTER + SIDEBAR
   ===================================================== */
.footer, footer, .site-footer, .widget-area, 
.sidebar, aside, .widget {
  background: #d6d6d6 !important;
  color: #232323 !important;
  border: none !important;
  box-shadow: none !important;
}

/* =====================================================
   ✅ CALCULATOR PORTAL DESIGN
   ===================================================== */
#calculator-portal {
  background: #f4f4f4 !important;
  margin: 2.5vw auto;
  max-width: 1160px;
  box-shadow: 0 6px 30px #bbb7;
  border-radius: 18px;
  padding: 2.2rem 1.4rem;
}
#calculator-portal h1 {
  font-size: 2.1rem !important;
  text-align: center;
  margin-bottom: 0.3rem;
}
#calculator-portal p {
  text-align: center;
  margin-bottom: 2rem;
  color: #454545;
  font-size: 1.08rem;
}

/* =====================================================
   ✅ CATEGORIES CARD GRID
   ===================================================== */
#categories-3d {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.cat-card {
  background: #fff !important;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}
.cat-card h2 {
  font-size: 1.3rem;
  margin: 1rem 0 0.5rem;
  color: #232323;
}
.cat-card p {
  font-size: 0.95rem;
  color: #555;
}

/* =====================================================
   ✅ RESPONSIVE MENU / MOBILE FIXES
   ===================================================== */
@media (max-width: 768px) {
  .main-navigation ul {
    background: #eeeeee !important;
  }
  .main-navigation li {
    border-bottom: 1px solid #ccc;
  }
}