/* ==========================================================================
   ProfessNow — Header & mobile drawer
   ========================================================================== */

.pn-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--pn-white);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--pn-normal) var(--pn-ease-out),
    border-color var(--pn-normal) var(--pn-ease-out),
    background-color var(--pn-normal) var(--pn-ease-out);
}

.pn-navbar.is-scrolled {
  border-bottom-color: var(--pn-border);
  box-shadow: 0 1px 3px rgba(10, 10, 10, .06), 0 8px 24px rgba(10, 10, 10, .04);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/*
   Three tracks so the navigation sits on the true centre line of the header
   rather than wherever the brand happens to end. The 1fr side tracks stay
   equal regardless of how wide the brand or the action cluster get.
*/
.pn-navbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pn-s5);
  height: var(--pn-navbar-h);
  /* The header runs a little wider than the page content so the centred nav
     has room to stay centred on a 1280-1440 laptop. */
  max-width: 1440px;
  transition: height var(--pn-normal) var(--pn-ease-out);
}

.pn-navbar.is-scrolled .pn-navbar__inner { height: var(--pn-navbar-h-scrolled); }

.pn-navbar__left {
  display: flex;
  align-items: center;
  gap: var(--pn-s4);
  min-width: 0;
  justify-self: start;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */
.pn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
  color: var(--pn-text-strong);
}

.pn-brand:hover { text-decoration: none; color: var(--pn-text-strong); }

/*
   The logo file is 158x173 and carries its own small wordmark beneath the
   badge. Sizing the image by width and clipping the box to 154/158 of that
   width shows the badge alone — no cropped copy of the asset needed, and it
   stays crisp on any display.
*/
.pn-brand__mark {
  display: block;
  width: 38px;
  height: calc(38px * 154 / 158);
  overflow: hidden;
  flex: none;
  transition: transform var(--pn-normal) var(--pn-ease-spring);
}

.pn-brand__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.pn-brand:hover .pn-brand__mark { transform: scale(1.06); }

.pn-brand__word {
  font: 800 1.25rem/1 var(--pn-font-display);
  letter-spacing: -.03em;
  color: var(--pn-text-strong);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */
.pn-navbar__nav { justify-self: center; min-width: 0; }

.pn-navbar__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--pn-r-sm);
  font: var(--pn-body-sm);
  font-weight: 500;
  color: var(--pn-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--pn-fast) var(--pn-ease-out),
    background-color var(--pn-fast) var(--pn-ease-out);
}

.pn-navbar__link:hover,
.pn-navbar__link:focus {
  color: var(--pn-text-strong);
  background: var(--pn-gray-100);
  text-decoration: none;
}

/* Understated green underline instead of a filled active pill. */
.pn-navbar__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--pn-green);
  transform: scaleX(0);
  transition: transform var(--pn-normal) var(--pn-ease-out);
}

.pn-navbar__link:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Right-hand actions
   -------------------------------------------------------------------------- */
.pn-navbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pn-s3);
  justify-self: end;
  min-width: 0;
}

.pn-city-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-pill);
  background: var(--pn-white);
  color: var(--pn-text-muted);
  font: var(--pn-body-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--pn-fast) var(--pn-ease-out),
    color var(--pn-fast) var(--pn-ease-out),
    background-color var(--pn-fast) var(--pn-ease-out);
}

.pn-city-switch i { color: var(--pn-green); }

.pn-city-switch span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-city-switch:hover {
  border-color: var(--pn-green);
  background: var(--pn-green-soft);
  color: var(--pn-green-deep);
}

.pn-navbar__auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 38px;
  border-radius: var(--pn-r-sm);
  font: var(--pn-body-sm);
  font-weight: 500;
  color: var(--pn-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--pn-fast) var(--pn-ease-out), background-color var(--pn-fast) var(--pn-ease-out);
}

.pn-navbar__auth:hover,
.pn-navbar__auth:focus {
  color: var(--pn-text-strong);
  background: var(--pn-gray-100);
  text-decoration: none;
}

.pn-navbar__auth--strong {
  font-weight: 600;
  color: var(--pn-text-strong);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-navbar__cta {
  min-height: 42px;
  padding: 0 var(--pn-s5);
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */
.pn-navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-md);
  background: var(--pn-white);
  cursor: pointer;
  flex: none;
}

.pn-navbar__toggle-bars {
  display: grid;
  gap: 4px;
  width: 18px;
}

.pn-navbar__toggle-bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--pn-text-strong);
  transition: transform var(--pn-normal) var(--pn-ease-out), opacity var(--pn-fast) var(--pn-ease-out);
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.pn-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
}

.pn-drawer[hidden] { display: none; }

.pn-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .48);
  opacity: 0;
  transition: opacity var(--pn-normal) var(--pn-ease-out);
}

.pn-drawer.is-open .pn-drawer__scrim { opacity: 1; }

.pn-drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  /* Same host-page bleed guard as .pn-footer — see footer.css. */
  text-align: left;
  background: var(--pn-white);
  box-shadow: var(--pn-shadow-modal);
  transform: translateX(100%);
  transition: transform var(--pn-normal) var(--pn-ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pn-drawer.is-open .pn-drawer__panel { transform: none; }

.pn-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pn-s5) var(--pn-s6);
  border-bottom: 1px solid var(--pn-border);
}

.pn-drawer__close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--pn-border);
  border-radius: var(--pn-r-md);
  background: var(--pn-white);
  color: var(--pn-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--pn-fast) var(--pn-ease-out), color var(--pn-fast) var(--pn-ease-out);
}

.pn-drawer__close:hover { background: var(--pn-gray-100); color: var(--pn-text-strong); }

.pn-drawer__nav { padding: var(--pn-s4) var(--pn-s4) var(--pn-s2); }

.pn-drawer__nav ul { margin: 0; padding: 0; list-style: none; }

.pn-drawer__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--pn-s4);
  border-radius: var(--pn-r-md);
  font: var(--pn-body);
  font-weight: 500;
  color: var(--pn-text);
  text-decoration: none;
  transition: background-color var(--pn-fast) var(--pn-ease-out), color var(--pn-fast) var(--pn-ease-out);
}

.pn-drawer__nav a:hover,
.pn-drawer__nav a:focus {
  background: var(--pn-green-soft);
  color: var(--pn-green-deep);
  text-decoration: none;
}

.pn-drawer__foot {
  margin-top: auto;
  display: grid;
  gap: var(--pn-s3);
  padding: var(--pn-s5) var(--pn-s6) calc(var(--pn-s6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pn-border);
}

/* Locks background scroll while the drawer is open. */
body.pn-drawer-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
/* The seven primary links plus auth plus the CTA is a lot of horizontal
   budget. Rather than let them collide, shed the optional pieces in order of
   importance as the viewport narrows: first the city pill (also in the drawer
   and reachable from the city modal on every page), then the whole bar. */
@media (max-width: 1400px) {
  .pn-navbar__inner { gap: var(--pn-s4); }
  .pn-navbar__link { padding: 0 10px; font-size: .8125rem; }
  .pn-city-switch { max-width: 150px; }
}

/* Measured: brand 156 + links 676 + actions 375 + gaps 32 = 1239px of content.
   Below a 1340px viewport the container can no longer hold all of it, so the
   city pill steps aside first. */
@media (max-width: 1340px) {
  .pn-city-switch { display: none; }
  .pn-navbar__link { padding: 0 8px; }
}

@media (max-width: 1120px) {
  .pn-navbar__auth { padding: 0 7px; font-size: .8125rem; }
  .pn-navbar__cta { padding: 0 var(--pn-s4); }
}

@media (max-width: 1023px) {
  .pn-navbar__nav,
  .pn-navbar__actions { display: none; }

  .pn-navbar__toggle { display: inline-flex; }

  /* Brand left, hamburger right. */
  .pn-navbar__inner { grid-template-columns: 1fr auto; }
  .pn-navbar__toggle { justify-self: end; }
}

@media (min-width: 1024px) {
  .pn-drawer { display: none !important; }
}