/* ============================================================
   ServerCraft WHMCS/Hostiko Header + Banner Fixes
   Place in: /templates/hostiko/css/custom.css
   ============================================================ */

/* 1) Remove the white wedges by matching page background to hero */
body.primary-bg-color {
  background: #081a3a !important;
}

/* Ensure header + nav blend seamlessly */
#header,
#header .topbar,
#header .navbar.navbar-light {
  background: #081a3a !important;
}

/* Optional: if the banner uses a subtle vertical gradient,
   mirror it using the same base color */
.banner,
.page-banner,
.wp-banner,
.header-banner {
  background: linear-gradient(
    180deg,
    #1e4087 0%,
    #16346f 60%,
    #102a5a 100%
  ) !important;
}

/* 2) Ensure header/nav areas blend with the banner */
#header.header {
  background: transparent; /* let body color show through */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#header .navbar.navbar-light {
  background: transparent; /* keep consistent with hero */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 3) Align navbar container nicely */
#header .navbar.navbar-light .container {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* 4) Brand/logo sizing + alignment */
#header .navbar.navbar-light .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
  flex: 0 0 auto;
}

#header .navbar.navbar-light .navbar-brand img {
  height: 72px;          /* BIGGER LOGO (try 64px or 72px) */
  width: auto;
  display: block;
}

/* 5) Keep the menu from dropping down / wrapping oddly */
#header .main-navbar-wrapper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

#header #mainNavbar {
  width: 100%;
}

/* Make sure the ul behaves */
#header .navbar-nav {
  align-items: center;
}

/* 6) Improve spacing/appearance of nav links (optional polish) */
#header .navbar-nav .nav-link {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* 7) Mobile toolbar alignment */
#header .navbar-nav.toolbar {
  margin-left: auto;
}

/* 8) Prevent random extra gaps above the banner section */
#header + * {
  margin-top: 0 !important;
}

/* 9) If your banner/hero uses pseudo-elements that show white,
      force them to match background too (safe generic targets) */
.banner,
.hero,
.page-banner,
.header-banner {
  background-color: transparent;
}

/* 10) Optional: If the logo looks soft/blurry, help it render */
#header .navbar-brand img {
  image-rendering: -webkit-optimize-contrast;
}

/* ============================================================
   NOTES:
   - If you DON'T want the whole site background blue, remove
     section (1) and we'll target only the banner wrapper.
   - If the blue shade is slightly off, use DevTools eyedropper
     on the banner and replace #0b2f57.
   ============================================================ */