/* ==========================================================================
   Site header — the "Site header" block from the Corporate occupancy plan
   mockups (Coworking / Commercial / Managed / Meeting Rooms / Virtual Offices
   / Day Pass listing redesigns, Compare Spaces, Office Interior, List Your
   Space). Every value below is taken from those files: a 68px white bar with a
   hairline under it, 14.5px links that go orange on hover, the current page
   underlined in orange, a tinted circular wishlist chip with an orange count,
   and a navy "Enquire Now" button that inverts to orange on hover.

   Everything is scoped to .site-header so no other screen is affected.
   ========================================================================== */

.site-header {
  --hdr-navy: #03356b;
  --hdr-orange: #ff8a00;
  --hdr-ink: #1a2b3b;
  --hdr-line: #e6ecf2;
  --hdr-tint: #edf1f5;
  background: #fff;
  border-bottom: 1px solid var(--hdr-line);
  /* The mockup separates the bar with the hairline above, not a shadow. */
  box-shadow: none;
}

.site-header .navbar {
  padding: 0;
  background: #fff;
}

.site-header .navbar > .mv-container {
  min-height: 68px;
}

/* ----- Brand ----------------------------------------------------------- */

.site-header .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
}

/* ----- Links ----------------------------------------------------------- */

.site-header .navbar-nav {
  gap: 28px !important;
}

.site-header .navbar-nav .nav-link {
  padding: 0;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--hdr-ink);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible {
  color: var(--hdr-orange);
}

.site-header .hdr-link--active,
.site-header .navbar-nav .hdr-link--active {
  color: var(--hdr-navy);
  border-bottom: 2px solid var(--hdr-orange);
  padding-bottom: 3px;
  margin-bottom: -5px;
}

.site-header .nav-link.dropdown-toggle::after {
  margin-left: 6px;
}

.site-header .navbar-nav .nav-link.dropdown-toggle {
  padding-right: 18px !important;
}

.site-header .navbar-nav .nav-link.dropdown-toggle::before {
  right: 0;
  width: 14px;
  height: 14px;
}

/* ----- Wishlist and account chips -------------------------------------- */

.site-header .hdr-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hdr-tint);
  color: var(--hdr-navy);
  padding: 0;
  transition: background 0.2s ease;
}

.site-header .hdr-chip:hover,
.site-header .hdr-chip:focus-visible {
  background: #e2e9f2;
}

.site-header .hdr-chip svg {
  display: block;
}

.site-header .hdr-chip__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--hdr-orange);
  color: var(--hdr-navy);
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  padding: 0 4px;
}

/* The legacy red dot is replaced by the count above. */
.site-header .notification .badge {
  display: none;
}

/* The two chips and the actions sit on one row with the mockup's spacing. */
.site-header .navbar-nav .nav-item.bundle-icon,
.site-header .navbar-nav .nav-item.hdr-actions {
  display: flex;
  align-items: center;
}

.site-header .navbar-nav .nav-item.hdr-actions {
  margin-left: 0 !important;
}

/* ----- Sign in and Enquire Now ----------------------------------------- */

.site-header .hdr-signin {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hdr-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header .hdr-signin:hover {
  color: var(--hdr-orange);
}

.site-header .enquiry-btn.btn-primary-cust,
.site-header .enquiry-btn.btn-primary-cust.btn-sm {
  min-width: 0;
  border: none;
  background: var(--hdr-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-header .enquiry-btn.btn-primary-cust:hover,
.site-header .enquiry-btn.btn-primary-cust.btn-sm:hover {
  background: var(--hdr-orange);
  color: var(--hdr-navy);
  font-weight: 600;
  border: none;
}

/* ----- Tablet and mobile ------------------------------------------------ */

@media (max-width: 991.98px) {
  .site-header .navbar-nav {
    gap: 4px !important;
    padding: 8px 0 14px;
  }

  .site-header .navbar-nav .nav-link {
    padding: 10px 0;
  }

  .site-header .hdr-link--active,
  .site-header .navbar-nav .hdr-link--active {
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 0;
  }

  .site-header .navbar-nav .nav-item.hdr-actions {
    padding-top: 6px;
  }

  .site-header .enquiry-btn.btn-primary-cust,
  .site-header .enquiry-btn.btn-primary-cust.btn-sm {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .site-header .bundle-icon-mb {
    align-items: center;
    gap: 10px;
  }

  .site-header .navbar-nav .nav-item.bundle-icon {
    display: none;
  }
}

/* ----- Account menu ----------------------------------------------------- */

/* The account item is a centred flex row, and an absolutely positioned child
   with no offsets of its own takes its place from that centring — so the menu
   was hanging around the icon, half above the header and off the top of the
   screen. It is anchored under the icon explicitly instead, its right edge in
   line with the icon's. */
.site-header .navbar-nav .nav-item.bundle-icon {
  position: relative;
}

.site-header .navbar-nav .nav-item.bundle-icon .user-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  left: auto !important;
  margin-top: 0 !important;
  min-width: 210px;
  z-index: 1030;
}

/* The menu opens on hover and sits a little below the icon. This transparent
   strip spans that gap, so the pointer does not leave the item — and close
   the menu — on its way down to it. */
.site-header .navbar-nav .nav-item.bundle-icon .user-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}