/* =====================================================================
   JawaHR Website Header  ·  one navbar for every website page
   ---------------------------------------------------------------------
   Styles Frappe's standard website navbar (templates/includes/navbar),
   so the items, logo, search and login still come from Website Settings.
   Loaded on website pages via hooks.web_include_css (never on the desk).
   Only the look changes: no item, link or behaviour is added or removed.
   ===================================================================== */

nav.navbar.navbar-light {
  --jwn-navy: #0d1b36;
  --jwn-navy-2: #183058;
  --jwn-orange: #c87818;
  --jwn-orange-hi: #f0a83c;
  --jwn-text: rgba(255, 255, 255, .78);

  position: relative;
  z-index: 1030;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(100deg, var(--jwn-navy) 0%, var(--jwn-navy-2) 55%, #1d3a6b 100%);
  border-bottom: 0;
  box-shadow: 0 10px 30px -18px rgba(8, 18, 37, .9);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* amber hairline under the bar */
nav.navbar.navbar-light::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jwn-orange-hi) 25%, #ffd18a 50%, var(--jwn-orange-hi) 75%, transparent);
  opacity: .85;
  pointer-events: none;
}

/* ---------- logo ---------- */
nav.navbar.navbar-light .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 28px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}
nav.navbar.navbar-light .navbar-brand:hover { color: #fff; }
/* the logo image is dark; show it white on the navy bar */
nav.navbar.navbar-light .navbar-brand img {
  height: 34px;
  width: auto;
  max-height: 34px;
  max-width: 180px;
  filter: brightness(0) invert(1);
  transition: transform .2s ease, filter .2s ease;
}
nav.navbar.navbar-light .navbar-brand:hover img {
  transform: translateY(-1px);
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(240, 168, 60, .55));
}

/* ---------- links ---------- */
nav.navbar.navbar-light .navbar-nav .nav-link {
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--jwn-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
nav.navbar.navbar-light .navbar-nav .nav-link:hover,
nav.navbar.navbar-light .navbar-nav .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}
nav.navbar.navbar-light .navbar-nav .nav-link.active,
nav.navbar.navbar-light .navbar-nav .show > .nav-link {
  color: #fff;
  font-weight: 600;
}
/* amber underline on the current page (Frappe adds .active) */
nav.navbar.navbar-light .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--jwn-orange-hi);
  transform: scaleX(0);
  transition: transform .25s ease;
}
nav.navbar.navbar-light .navbar-nav .nav-link.active::after { transform: scaleX(1); }
nav.navbar.navbar-light .navbar-nav .nav-link:focus-visible { outline: 2px solid var(--jwn-orange-hi); outline-offset: 2px; }
nav.navbar.navbar-light .dropdown-toggle::after { border-top-color: currentColor; }

/* Login: amber button */
nav.navbar.navbar-light .navbar-nav .nav-link.btn-login-area {
  margin-left: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--jwn-orange-hi), var(--jwn-orange));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(200, 120, 24, .95);
}
nav.navbar.navbar-light .navbar-nav .nav-link.btn-login-area:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(200, 120, 24, 1); }
nav.navbar.navbar-light .navbar-nav .nav-link.btn-login-area::after { display: none; }

/* logged-in avatar */
nav.navbar.navbar-light .nav-avatar .avatar { box-shadow: 0 0 0 2px rgba(240, 168, 60, .75); border-radius: 50%; }

/* ---------- search ---------- */
nav.navbar.navbar-light .navbar-search {
  width: 220px;
  height: 38px;
  margin-right: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 13.5px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
nav.navbar.navbar-light .navbar-search::placeholder { color: rgba(255, 255, 255, .5); }
nav.navbar.navbar-light .navbar-search:focus {
  outline: none;
  background: rgba(255, 255, 255, .12);
  border-color: var(--jwn-orange-hi);
  box-shadow: 0 0 0 3px rgba(240, 168, 60, .22);
  color: #fff;
}

/* ---------- dropdown menus (stay light and readable) ---------- */
nav.navbar.navbar-light .dropdown-menu {
  margin-top: 10px;
  padding: 6px;
  border: 1px solid #e6e9ee;
  border-radius: 12px;
  box-shadow: 0 20px 44px -18px rgba(13, 27, 54, .45);
}
nav.navbar.navbar-light .dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 13.5px; color: #1f272e; }
nav.navbar.navbar-light .dropdown-item:hover,
nav.navbar.navbar-light .dropdown-item:focus { background: #fbf3e6; color: var(--jwn-orange); }

/* ---------- read-only pill keeps its colours ---------- */
nav.navbar.navbar-light .indicator-pill { margin-right: 8px; }

/* ---------- phone / tablet menu ---------- */
nav.navbar.navbar-light .navbar-toggler {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  --icon-stroke: #fff;
}
nav.navbar.navbar-light .navbar-toggler .icon,
nav.navbar.navbar-light .navbar-toggler .icon use { stroke: #fff; --icon-stroke: #fff; }
nav.navbar.navbar-light .navbar-toggler:focus { outline: 2px solid var(--jwn-orange-hi); outline-offset: 2px; }

@media (max-width: 991.98px) {
  nav.navbar.navbar-light .navbar-collapse {
    margin-top: 12px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(8, 18, 37, .55);
    border: 1px solid rgba(255, 255, 255, .1);
  }
  nav.navbar.navbar-light .navbar-nav .nav-link { padding: 10px 12px; }
  nav.navbar.navbar-light .navbar-nav .nav-link::after { left: 12px; right: auto; width: 24px; bottom: 4px; }
  nav.navbar.navbar-light .navbar-nav .nav-link.btn-login-area { margin: 8px 0 4px; text-align: center; }
  nav.navbar.navbar-light .navbar-search { width: 100%; margin: 6px 0; }
  nav.navbar.navbar-light .navbar-nav hr { border-color: rgba(255, 255, 255, .12); }
  nav.navbar.navbar-light .navbar-nav .text-dark { color: #fff !important; }
  nav.navbar.navbar-light .navbar-nav .text-muted { color: var(--jwn-text) !important; }
}

/* ---------- right-to-left ---------- */
[dir="rtl"] nav.navbar.navbar-light .navbar-brand { margin-right: 0; margin-left: 28px; }
[dir="rtl"] nav.navbar.navbar-light .navbar-search { margin-right: 0; margin-left: 8px; }
[dir="rtl"] nav.navbar.navbar-light .navbar-nav .nav-link.btn-login-area { margin-left: 0; margin-right: 6px; }

@media (prefers-reduced-motion: reduce) {
  nav.navbar.navbar-light *, nav.navbar.navbar-light *::after { transition: none !important; }
}