/* =========================================================================
   header.css
   The newsroom masthead: a heavy top rule, serif wordmark, category nav with
   a cities dropdown, inline search and a contact CTA. Sticky on scroll.
   ========================================================================= */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.hdr::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--signal), var(--signal-dk));
}

.hdr__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* Logo */
.hdr__logo { display: flex; align-items: center; gap: var(--sp-2); }
.hdr__logomark {
  color: var(--signal);
  font-size: 1.3rem;
  letter-spacing: -2px;
  transform: translateY(1px);
}
.hdr__logotext {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.9rem;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* Primary nav */
.hdr__nav { display: flex; align-items: center; gap: var(--sp-2); }
.hdr__navlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 700; font-size: .98rem; color: var(--ink-2);
  border-radius: var(--r-sm);
  border: none; background: transparent;
  transition: color .18s, background .18s;
  position: relative;
}
.hdr__navlink:hover { color: var(--signal); }
.hdr__navlink.is-active { color: var(--signal); }
.hdr__navlink.is-active::after {
  content: ""; position: absolute; inset-inline: var(--sp-3); bottom: -2px;
  height: 2px; background: var(--signal);
}
.hdr__navicon { font-size: .95rem; }

/* Dropdown */
.hdr__dropdown { position: relative; }
.hdr__caret { font-size: .7rem; transition: transform .2s; }
.hdr__dropdown.is-open .hdr__caret { transform: rotate(180deg); }
.hdr__dropmenu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  min-width: 180px; padding: var(--sp-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .18s ease; z-index: 60;
}
.hdr__dropdown.is-open .hdr__dropmenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.hdr__dropitem {
  display: block; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); font-weight: 600; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.hdr__dropitem:hover { background: var(--paper-2); color: var(--signal); }

/* Right cluster */
.hdr__right { display: flex; align-items: center; gap: var(--sp-3); }
.hdr__contact {
  font-weight: 700; padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  transition: all .2s;
}
.hdr__contact:hover { background: var(--ink); color: var(--paper); }

.hdr__burger {
  display: none; background: transparent; border: none;
  font-size: 1.6rem; color: var(--ink); line-height: 1;
}

/* Mobile bar */
.hdr__mobilebar {
  display: none;
  flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.hdr__mobilebar a {
  font-weight: 700; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--line);
}

/* Responsive */
@media (max-width: 860px) {
  .hdr__nav { display: none; }
  .hdr__contact { display: none; }
  .hdr__burger { display: block; }
  .hdr__mobilebar:not([hidden]) { display: flex; }
  .hdr__logotext { font-size: 1.6rem; }
}
@media (max-width: 520px) {
  .hdr__search { display: none; }
}