/* ==========================================================
   BuddySocial v10.53 - ALL MENUS MAIN COLOR SYNC
   Alle menu's dezelfde kleur als het hoofdmenu.
   Hoofdmenu palette: #4c8ac2 -> #2f6fa8
   ========================================================== */

:root{
  --bs-menu-top:#4c8ac2;
  --bs-menu-mid:#3b7fb8;
  --bs-menu-bottom:#2f6fa8;
  --bs-menu-border:#245b8d;
  --bs-menu-text:#ffffff;
  --bs-menu-active:#f39a13;
  --bs-menu-active-dark:#dd8408;
}

/* Desktop hoofdmenu blijft leidend */
.retro-nav{
  background:linear-gradient(
    180deg,
    var(--bs-menu-top) 0%,
    var(--bs-menu-mid) 48%,
    var(--bs-menu-bottom) 100%
  ) !important;
}

.retro-nav .main-nav-links > a,
.retro-nav .main-nav-links > a:visited,
.retro-nav .nav-login-link,
.retro-nav .nav-register-link{
  color:var(--bs-menu-text) !important;
  -webkit-text-fill-color:var(--bs-menu-text) !important;
}

/* ==========================================================
   MOBILE + TABLET
   ========================================================== */
@media (max-width:1100px){

  .nav-toggle{
    background:linear-gradient(
      180deg,
      var(--bs-menu-top) 0%,
      var(--bs-menu-mid) 48%,
      var(--bs-menu-bottom) 100%
    ) !important;
    border-color:var(--bs-menu-border) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  .main-nav-links{
    background:linear-gradient(
      180deg,
      var(--bs-menu-top) 0%,
      var(--bs-menu-mid) 48%,
      var(--bs-menu-bottom) 100%
    ) !important;
    border-color:var(--bs-menu-border) !important;
  }

  .mobile-nav-section-title,
  .nav-primary > a,
  .nav-utilities > a.utility-link,
  .notification-nav-wrap > a.utility-link,
  .nav-more > summary,
  .nav-more-menu > a,
  .mobile-menu-account-actions > a,
  .nav-status-control,
  .nav-sound-toggle{
    background:linear-gradient(
      180deg,
      var(--bs-menu-top) 0%,
      var(--bs-menu-mid) 48%,
      var(--bs-menu-bottom) 100%
    ) !important;
    border-color:var(--bs-menu-border) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 1px 1px rgba(0,0,0,.20) !important;
  }

  .mobile-nav-section-title *,
  .nav-primary > a *,
  .nav-utilities > a.utility-link *,
  .notification-nav-wrap > a.utility-link *,
  .nav-more > summary *,
  .nav-more-menu > a *,
  .mobile-menu-account-actions > a *,
  .nav-status-control *,
  .nav-sound-toggle *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  /* containers use same main-menu family, just slightly darker */
  .nav-more-menu,
  .mobile-menu-account-actions,
  .retro-search{
    background:linear-gradient(
      180deg,
      #3b7fb8 0%,
      #2f6fa8 100%
    ) !important;
    border-color:var(--bs-menu-border) !important;
  }

  .nav-more-menu::before,
  .mobile-menu-account-actions::before{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  /* active / hover */
  .nav-primary > a.active,
  .nav-primary > a:hover,
  .nav-utilities > a.utility-link.active,
  .nav-utilities > a.utility-link:hover,
  .notification-nav-wrap > a.utility-link.active,
  .notification-nav-wrap > a.utility-link:hover,
  .nav-more > summary:hover,
  .nav-more.active > summary,
  .nav-more-menu > a.active,
  .nav-more-menu > a:hover,
  .mobile-menu-account-actions > a:hover{
    background:linear-gradient(
      180deg,
      var(--bs-menu-active) 0%,
      var(--bs-menu-active-dark) 100%
    ) !important;
    border-color:#ca7500 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  .nav-primary > a.active *,
  .nav-primary > a:hover *,
  .nav-utilities > a.utility-link.active *,
  .nav-utilities > a.utility-link:hover *,
  .notification-nav-wrap > a.utility-link.active *,
  .notification-nav-wrap > a.utility-link:hover *,
  .nav-more > summary:hover *,
  .nav-more.active > summary *,
  .nav-more-menu > a.active *,
  .nav-more-menu > a:hover *,
  .mobile-menu-account-actions > a:hover *{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  .menu-status-select{
    background:var(--bs-menu-bottom) !important;
    border-color:var(--bs-menu-border) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  .menu-status-select option{
    background:var(--bs-menu-bottom) !important;
    color:#fff !important;
  }

  .nav-status-control > span{
    color:#83ff9e !important;
    -webkit-text-fill-color:#83ff9e !important;
  }

  /* Search input remains white for readability, button syncs with menu */
  .retro-search input{
    background:#fff !important;
    color:#183f5d !important;
    -webkit-text-fill-color:#183f5d !important;
  }

  .retro-search button{
    background:linear-gradient(
      180deg,
      var(--bs-menu-top) 0%,
      var(--bs-menu-bottom) 100%
    ) !important;
    border-color:var(--bs-menu-border) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  /* logout keeps red accent but white text */
  .mobile-menu-account-actions > a:last-child{
    background:linear-gradient(180deg,#dd7542,#b94f2d) !important;
    border-color:#a84425 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  /* badges */
  .nav-badge,
  .nav-badge *,
  .message-count-badge,
  .notification-count-badge{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  /* notification dropdown is content, not nav: keep readable white panel */
  .notification-dropdown{
    background:#fff !important;
    color:#183f5d !important;
    -webkit-text-fill-color:#183f5d !important;
  }

  .notification-dropdown *,
  .notification-dropdown a,
  .notification-dropdown b,
  .notification-dropdown small,
  .notification-dropdown span{
    color:#183f5d !important;
    -webkit-text-fill-color:#183f5d !important;
    text-shadow:none !important;
  }
}