@layer components {

/* =========================================
   HEADER BASE (DARK THEME)
========================================= */
.site-header {
  background: #000; /* 🔥 match logo background */
  border-bottom: 1px solid rgba(255,255,255,0.08);

  position: relative;
  z-index: 1000;
}

/* =========================================
   HEADER INNER LAYOUT
========================================= */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 80px;
  gap: 16px;
}

/* =========================================
   LOGO
========================================= */
.header-logo img {
  max-height: 50px;
}

/* =========================================
   NAVIGATION
========================================= */
.main-navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* =========================================
   MENU LINKS (WHITE)
========================================= */
.menu > li > a {
  color: #fff;
  font-weight: 500;
  transition: 0.3s ease;
}

/* =========================================
   HOVER STATE
========================================= */
.menu > li > a:hover {
  color: var(--color-primary);
}

/* =========================================
   ACTIVE STATE
========================================= */
.menu .current-menu-item > a,
.menu .current-menu-parent > a {
  color: var(--color-primary);
}

/* =========================================
   CTA BUTTON (VISIBLE ON DARK)
========================================= */
.header-cta .btn {
  color: #fff;
  border: 1px solid var(--color-primary);
  background: transparent;
  transition: 0.3s ease;
}

.header-cta .btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* =========================================
   DROPDOWN (KEEP LIGHT FOR READABILITY)
========================================= */
.submenu {
  background: #fff;
  border: 1px solid #eee;
}

.submenu a {
  color: #222;
}

.submenu a:hover {
  color: var(--color-primary);
  background: #f8f8f8;
}

/* =========================================
   MOBILE OVERRIDE
========================================= */
@media (max-width: 768px) {

  .main-navigation {
    justify-content: flex-start;
  }

}

/* =========================================
   OPTIONAL: GLASS EFFECT (UNCOMMENT IF NEEDED)
========================================= */
/*
.site-header {
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(6px);
}
*/

}
/* FORCE WHITE MENU TEXT */
.site-header .menu > li > a {
  color: #fff;
}
.site-header .menu > li > a:hover,
.site-header .menu .current-menu-item > a,
.site-header .menu .current-menu-parent > a {
  color: var(--color-primary);
}
/* FORCE CTA TO BE VISIBLE ON DARK HEADER */
.site-header .header-cta .btn {
  color: #fff;
  background: transparent;
  border: 1px solid var(--color-primary);
  padding: 5px;
  border-radius: 5px;
}
/* CTA - YELLOW BACKGROUND */
.site-header .header-cta .btn {
  background: #f39c12;   /* 🔥 your theme yellow */
  color: #fff;
  border: none;
}