/* ==========================================================================
   Kai family navigation bar — goes with partials/kai-nav.php
   Everything is prefixed .kai-nav so it never collides with the existing
   .navbar / .cont-fluid rules in style-new.css and new-responsive.css.
   ========================================================================== */

.kai-nav {
  --kai-nav-ink:    #1B1B1B;
  --kai-nav-active: #2563EB;
  /* Matched to the Kai Core header: 60px logo inside Bootstrap's navbar and
     navbar-brand padding comes out at 86px, with 150px side gutters. */
  --kai-nav-height: 86px;

  position: sticky; top: 0; z-index: 1030;
  /* warm wash, white on the left easing into peach and a touch of green */
  background:
    linear-gradient(90deg,
      #FFFFFF 0%,
      #FEFAF6 32%,
      #FDEFE2 62%,
      #FBE6D6 84%,
      #EDF4E8 100%);
  border-bottom: 1px solid rgba(27, 27, 27, .07);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.kai-nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--kai-nav-height);
  padding: 0 150px;          /* the same gutter as .cont-fluid on Kai Core */
}

/* --- brand --- */
.kai-nav-brand { flex: 0 0 auto; display: flex; align-items: center; }
.kai-nav-brand img { width: 60px; height: 60px; object-fit: contain; display: block; }

/* --- links --- */
/* Kai Core's links are `gap-1` (4px) plus .nav-link's 1rem side padding, so the
   space between two labels lands at 36px. */
.kai-nav-links {
  display: flex; align-items: center; gap: 36px;
  margin: 0 auto; padding: 0; list-style: none;
}
.kai-nav-link {
  font-size: 16px; font-weight: 500; letter-spacing: -.01em;
  color: var(--kai-nav-ink); text-decoration: none;
  white-space: nowrap; transition: color .25s ease;
}
.kai-nav-link:hover { color: var(--kai-nav-active); }
.kai-nav-link.is-active { color: var(--kai-nav-active); font-weight: 600; }

/* Each product carries its own colour on hover and when it is the current page,
   so the nav reads as three brands rather than one. */
.kai-nav-link[data-nav="core"]:hover,
.kai-nav-link[data-nav="core"].is-active   { color: #1668D4; }   /* Kai Core blue */
.kai-nav-link[data-nav="her"]:hover,
.kai-nav-link[data-nav="her"].is-active    { color: #FB6061; }   /* Kai Her coral */
.kai-nav-link[data-nav="thrive"]:hover,
.kai-nav-link[data-nav="thrive"].is-active { color: #418E41; }   /* Kai Thrive green */

/* --- store badges --- */
.kai-nav-stores { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
/* badge art is 152px tall, so 46px is a clean downscale */
.kai-nav-stores img { width: 152px; height: 46px; object-fit: contain; display: block; }

/* --- hamburger (hidden until the links no longer fit) --- */
.kai-nav-toggle {
  display: none; flex: 0 0 auto; margin-left: auto;
  width: 42px; height: 42px; padding: 10px 9px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.kai-nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--kai-nav-ink);
}

/* --- mobile menu --- */
.kai-nav-offcanvas { background: #FFFBF7; }
.kai-nav-offcanvas .offcanvas-title { font-weight: 600; color: var(--kai-nav-ink); }
.kai-nav-links-mobile { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 4px; }
.kai-nav-links-mobile a {
  display: block; padding: 13px 4px; font-size: 17px;
  border-bottom: 1px solid rgba(27,27,27,.07);
}
.kai-nav-stores-mobile img { width: 140px; height: 42px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Kai Core drops its gutter to 70px here, so this does the same. */
@media (max-width: 1450px) {
  .kai-nav-inner { padding: 0 70px; gap: 22px; }
  /* link gap stays 36px at every width, to match the Bootstrap navs on Kai Core and Kai Her */
  .kai-nav-stores img { width: 132px; height: 40px; }
}

/* The links plus two badges stop fitting around here — collapse to a menu. */
@media (max-width: 1199.98px) {
  .kai-nav { --kai-nav-height: 76px; }
  .kai-nav-links, .kai-nav-inner > .kai-nav-stores { display: none; }
  .kai-nav-toggle { display: flex; }
}

@media (max-width: 991.98px) {
  .kai-nav-inner { padding: 0 40px; }
}

@media (max-width: 767.98px) {
  .kai-nav { --kai-nav-height: 70px; }
  .kai-nav-inner { padding: 0 20px; }
  .kai-nav-brand img { width: 48px; height: 48px; }
}