/* =========================
   Bas Fitness – Nav Color Update
   ========================= */

:root{
  --nav-bg: #9BA8A4;        /* اللون الجديد */
  --nav-bg-light: #A6B3AF;  /* درجة أفتح بسيطة للتدرج */
  --nav-text: #0F2E4C;      /* كحلي للنص والأيقونات */
}

/* ===== Base Header ===== */
header,
.site-header,
.top-nav,
#main-nav,
.menu-fixed-bar,
.mobile-nav {
  background-color: var(--nav-bg) !important;
}

/* ===== Sticky / Scroll State ===== */
#main-nav .menu-fixed-bar,
#main-nav .menu-fixed-bar .inner,
#main-nav .menu-fixed-bar .container,
.site-header.is-sticky,
.site-header.sticky,
.site-header.fixed,
header.is-sticky,
header.sticky,
header.fixed {
  background: linear-gradient(
    180deg,
    var(--nav-bg-light) 0%,
    var(--nav-bg) 100%
  ) !important;
  background-color: var(--nav-bg) !important;
  background-image: none !important;
}

/* ===== Kill black overlays ===== */
#main-nav .menu-fixed-bar::before,
#main-nav .menu-fixed-bar::after,
.site-header::before,
.site-header::after,
header::before,
header::after {
  background: transparent !important;
  content: none !important;
}

/* ===== Text & Icons ===== */
header *,
.site-header *,
#main-nav *,
.mobile-nav * {
  color: var(--nav-text) !important;
  fill: var(--nav-text) !important;
}

/* ===== Mobile: keep bar slim ===== */
@media (max-width: 768px) {
  header,
  .site-header,
  #main-nav,
  .mobile-nav {
    min-height: 64px !important;
  }
}
/* =========================
   Bas Fitness – Header FIX (Solid Color + Stable Sticky + Big Mobile Logo)
   ========================= */

:root{
  --nav-bg: #9BA8A4;     /* لون الهيدر */
  --nav-text: #0F2E4C;   /* كحلي للنص والأيقونات */
}

/* 1) SOLID header color everywhere (no gradient) */
header,
.site-header,
.top-nav,
#main-nav,
.mobile-nav,
.menu-fixed-bar,
#main-nav .menu-fixed-bar,
#main-nav .menu-fixed-bar .inner,
#main-nav .menu-fixed-bar .container,
.site-header.is-sticky,
.site-header.sticky,
.site-header.fixed,
.site-header.is-fixed,
header.is-sticky,
header.sticky,
header.fixed,
header.is-fixed,
.sticky-header,
.header--sticky,
.header--fixed {
  background: var(--nav-bg) !important;
  background-color: var(--nav-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* 2) Kill any black overlays / pseudo elements on scroll */
#main-nav .menu-fixed-bar::before,
#main-nav .menu-fixed-bar::after,
header::before,
header::after,
.site-header::before,
.site-header::after,
.sticky-header::before,
.sticky-header::after,
.header--sticky::before,
.header--sticky::after {
  background: transparent !important;
  background-image: none !important;
  content: none !important;
}

/* 3) Force nav text & icons color (desktop + mobile + sticky) */
header a, header i, header svg,
.site-header a, .site-header i, .site-header svg,
#main-nav a, #main-nav i, #main-nav svg,
.mobile-nav a, .mobile-nav i, .mobile-nav svg,
.menu-fixed-bar a, .menu-fixed-bar i, .menu-fixed-bar svg {
  color: var(--nav-text) !important;
  fill: var(--nav-text) !important;
}

/* 4) Keep the bar slim on mobile (don’t increase header height) */
@media (max-width: 768px){
  header,
  .site-header,
  #main-nav,
  .mobile-nav,
  .menu-fixed-bar {
    min-height: 56px !important;   /* بار نحيف */
    padding: 0 !important;
    overflow: visible !important;  /* يسمح للّوقو يكبر بدون ما يرفع البار */
  }

  /* Reduce container padding that makes the bar tall */
  .site-header .container,
  #main-nav .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 56px !important;
  }

  /* 5) Make the MOBILE logo bigger without resizing the bar
        (Salla mobile logo often isn't the <img>, so we scale the logo wrapper) */
  .site-header .logo,
  .site-header [class*="logo"],
  .site-header .logo * {
    transform: scale(1.9) !important;   /* كبّر/صغّر حسب رغبتك */
    transform-origin: center center !important;
  }
}