/* ==========================================================================
   CityOfCalgary.com — site header, mega-menu, drawer and footer columns,
   plus the homepage and hub-page sections. Loaded on every page.

   Everything is scoped to .nh-* classes. Only the redesigned templates carry
   body.coc-newhome (their base font colour and figure alignment); every other
   template keeps its own look and just gets the header and footer.

   Loads after style.css, so the theme's element resets apply underneath:
   a {color:inherit; text-decoration:none}, ul/ol {list-style:none},
   img {max-width:100%; display:block}.
   ========================================================================== */

:root {
  /* Semantic data tokens */
  --nh-data-live:       #10b981;
  --nh-data-live-text:  #047857;   /* AA on white, for numbers set in green */
  --nh-data-alert:      #f59e0b;
  --nh-data-info:       #3b82f6;

  --nh-navy:     #0b1220;
  --nh-navy-2:   #111a2e;
  --nh-ink:      #0f172a;
  --nh-body:     #334155;
  --nh-muted:    #64748b;
  --nh-border:   #e5e7eb;
  --nh-light:    #f8fafc;
  --nh-light-2:  #f1f5f9;
  --nh-primary:      #cf2627;
  --nh-primary-deep: #a31919;

  /* Quadrant colours — map dots, quadrant chips */
  --nh-q-nw: #2563eb;
  --nh-q-ne: #b45309;
  --nh-q-sw: #047857;
  --nh-q-se: #be123c;
  --nh-q-c:  #475569;

  --nh-radius:    12px;
  --nh-radius-lg: 18px;
  --nh-container: 1280px;
  --nh-gutter:    24px;
  --nh-header-h:  72px;

  --nh-section-y: 96px;

  --nh-shadow:    0 12px 28px -16px rgba(15, 23, 42, 0.22);
  --nh-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.coc-newhome {
  font-family: var(--nh-font);
  font-variant-numeric: tabular-nums;   /* every figure lines up */
  background: #fff;
  color: var(--nh-ink);
}

/* The header and drawer sit on every template; the theme's own stylesheet has
   no rule for this class. */
.nh-header .screen-reader-text,
.nh-drawer .screen-reader-text,
.coc-newhome .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nh-nowrap { white-space: nowrap; }

.nh-header a:focus-visible,
.nh-header button:focus-visible,
.nh-header summary:focus-visible,
.nh-drawer a:focus-visible,
.nh-drawer button:focus-visible,
.nh-drawer summary:focus-visible,
.nh-main a:focus-visible,
.nh-main button:focus-visible,
.nh-main summary:focus-visible,
.site-footer--nav5 a:focus-visible {
  outline: 2px solid var(--nh-data-info);
  outline-offset: 2px;
}

/* Anchor targets clear the sticky header */
.nh-main [id] { scroll-margin-top: calc(var(--nh-header-h) + 24px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.nh-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--nh-border);
}
.admin-bar .nh-header { top: 32px; }

.nh-header-inner {
  position: relative;            /* mega panels anchor here */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--nh-gutter);
  height: var(--nh-header-h);
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.nh-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--nh-ink);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
/* max-width:none — the theme's img{max-width:100%} lets a flex/grid track
   shrink the logo to zero width when the row is tight. */
.nh-logo-img { height: 46px; width: auto; max-width: none; display: block; }
@media (min-width: 1400px) { .nh-header .nh-logo-img { height: 54px; } }
.nh-logo-text span { color: var(--nh-primary); }

/* --- Primary nav --- */
.nh-primary { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.nh-primary-list { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nh-primary-item { display: flex; align-items: stretch; }
.nh-primary-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 11px;
  color: var(--nh-ink);
  font-size: 0.92rem; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.nh-primary-link svg { flex: 0 0 auto; color: var(--nh-muted); transition: transform .15s ease; }
.nh-primary-link::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: transparent;
}
.nh-primary-item:hover > .nh-primary-link,
.nh-primary-item:focus-within > .nh-primary-link,
.nh-primary-item.is-open > .nh-primary-link { color: var(--nh-primary); }
.nh-primary-item:hover > .nh-primary-link::after,
.nh-primary-item:focus-within > .nh-primary-link::after,
.nh-primary-item.is-open > .nh-primary-link::after { background: var(--nh-primary); }
.nh-primary-item:hover > .nh-primary-link svg,
.nh-primary-item:focus-within > .nh-primary-link svg,
.nh-primary-item.is-open > .nh-primary-link svg { transform: rotate(180deg); color: var(--nh-primary); }

/* --- Mega panel ---
   Server-rendered and always in the DOM (crawlable); shown on hover,
   keyboard focus, or .is-open (touch). One shared position centred under the
   header, so no panel can run past the window edge. The nav items stretch the
   full header height, so the panel's top edge touches the item being hovered. */
.nh-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(1180px, calc(100% - (var(--nh-gutter) * 2)));
  transform: translate(-50%, -6px);
  background: #fff;
  border: 1px solid var(--nh-border);
  border-top: 0;
  border-radius: 0 0 var(--nh-radius-lg) var(--nh-radius-lg);
  box-shadow: 0 28px 48px -20px rgba(15, 23, 42, 0.28);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 5;
}
.nh-primary-item:hover > .nh-mega,
.nh-primary-item:focus-within > .nh-mega,
.nh-primary-item.is-open > .nh-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}
/* Escape pressed while the trigger still has focus/hover — stay closed. */
.nh-primary-item.is-dismissed > .nh-mega { opacity: 0; visibility: hidden; pointer-events: none; }
.nh-mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.nh-mega-cols { display: flex; flex-wrap: wrap; gap: 24px 32px; }
.nh-mega-col { flex: 1 1 150px; min-width: 0; }
.nh-mega-col--wide { flex: 3 1 440px; }
.nh-mega-col--wide .nh-mega-list { columns: 2; column-gap: 28px; }
.nh-mega-heading {
  margin: 0 0 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nh-muted);
}
.nh-mega-list { list-style: none; margin: 0; padding: 0; }
.nh-mega-list li { break-inside: avoid; }
.nh-mega-list a {
  display: block;
  margin: 0 -8px; padding: 6px 8px;
  border-radius: 6px;
  color: var(--nh-ink);
  font-size: 0.92rem; line-height: 1.35;
  text-decoration: none;
}
.nh-mega-list a:hover,
.nh-mega-list a:focus-visible { background: var(--nh-light-2); color: var(--nh-primary); }

.nh-mega-hub {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px;
  border-radius: 14px;
  background: var(--nh-navy);
  color: #fff;
  text-decoration: none;
}
.nh-mega-hub:hover { background: var(--nh-navy-2); color: #fff; }
.nh-mega-hub-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fecaca;
}
.nh-mega-hub strong { font-size: 1.05rem; letter-spacing: -0.01em; }
.nh-mega-hub-blurb { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.nh-mega-hub-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 0.88rem; font-weight: 700; color: #fecaca;
}

/* --- Utility rail --- */
.nh-utility { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }

/* Search: a 40px icon button that opens into a field on focus. The field is
   absolutely positioned, so opening it never moves the rest of the header. */
.nh-search { position: relative; flex: 0 0 40px; width: 40px; height: 40px; }
.nh-search input {
  position: absolute; top: 0; right: 0;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--nh-light-2);
  color: transparent;
  font: inherit; font-size: 0.9rem;
  outline: 0;
  cursor: pointer;
  transition: width .18s ease, background .18s ease, border-color .18s ease;
  z-index: 3;
}
.nh-search input::placeholder { color: transparent; }
.nh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nh-search:focus-within input {
  width: 280px;
  padding: 0 40px 0 16px;
  background: #fff;
  border-color: var(--nh-primary);
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.4);
  color: var(--nh-ink);
  cursor: text;
}
.nh-search:focus-within input::placeholder { color: var(--nh-muted); }
.nh-search-btn {
  position: absolute; top: 0; right: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent;
  color: var(--nh-ink);
  cursor: pointer;
  z-index: 4;
}
.nh-search-btn:hover { color: var(--nh-primary); }

.nh-utility-link {
  color: var(--nh-ink);
  font-size: 0.9rem; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.nh-utility-link:hover { color: var(--nh-primary); }

.nh-account { position: relative; }
.nh-account summary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--nh-border); border-radius: 999px;
  color: var(--nh-ink);
  font-size: 0.9rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.nh-account summary::-webkit-details-marker { display: none; }
.nh-account summary:hover,
.nh-account[open] summary { border-color: #cbd5e1; background: var(--nh-light); }
.nh-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 190px;
  display: grid;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  box-shadow: var(--nh-shadow);
  z-index: 10;
}
.nh-account-menu a {
  padding: 9px 12px; border-radius: 8px;
  color: var(--nh-ink);
  font-size: 0.92rem;
  text-decoration: none;
}
.nh-account-menu a:hover { background: var(--nh-light-2); color: var(--nh-primary); }

.nh-utility-claim {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: var(--nh-primary);
  color: #fff;
  font-size: 0.88rem; font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease;
}
.nh-utility-claim:hover { background: var(--nh-primary-deep); color: #fff; }
.nh-utility-claim svg { flex: 0 0 auto; }

.nh-hamburger {
  display: none;
  align-self: center;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0;
  background: none;
  color: var(--nh-ink);
  cursor: pointer;
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.nh-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1050;
}
.nh-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.nh-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 92%; max-width: 420px;
  display: flex; flex-direction: column;
  background: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1051;
}
.nh-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .22s ease, visibility 0s linear 0s; }
.admin-bar .nh-drawer { top: 32px; }

.nh-drawer-header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 10px 12px 10px 20px;
  background: #fff;
  border-bottom: 1px solid var(--nh-border);
}
.nh-drawer-header .nh-logo-img { height: 40px; }
.nh-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: none; color: var(--nh-ink);
  cursor: pointer;
}
.nh-drawer-search {
  position: sticky; top: 64px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--nh-light);
  border-bottom: 1px solid var(--nh-border);
}
.nh-drawer-search svg { flex: 0 0 auto; color: var(--nh-muted); }
.nh-drawer-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--nh-ink);
}
.nh-drawer-nav { flex: 1 0 auto; }
.nh-drawer-section { border-bottom: 1px solid var(--nh-border); }
.nh-drawer-section summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nh-drawer-section summary::-webkit-details-marker { display: none; }
.nh-drawer-section summary > span { display: inline-flex; align-items: center; gap: 10px; }
.nh-drawer-section summary > svg { color: var(--nh-muted); transition: transform .15s ease; }
.nh-drawer-section[open] summary > svg { transform: rotate(180deg); }
.nh-drawer-body { display: grid; gap: 14px; padding: 6px 20px 18px; background: var(--nh-light); }
.nh-drawer-top-link { display: block; padding: 10px 0 2px; color: var(--nh-primary); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.nh-drawer-group strong {
  display: block; margin-bottom: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nh-muted);
}
.nh-drawer-group ul { list-style: none; margin: 0; padding: 0; }
.nh-drawer-group a { display: block; padding: 8px 0; color: var(--nh-ink); font-size: 0.95rem; text-decoration: none; }
.nh-drawer-footer {
  position: sticky; bottom: 0;
  display: grid; gap: 8px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid var(--nh-border);
}
.nh-drawer-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: 10px;
  background: var(--nh-ink); color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.nh-drawer-btn--outline { background: #fff; color: var(--nh-ink); border: 1.5px solid var(--nh-border); }
.nh-drawer-btn--claim { background: var(--nh-primary); color: #fff; }
/* Signed in, the footer has three or four buttons. Two rows (account links,
   then Claim + Sign out) keep it the height of the signed-out footer, so it
   doesn't sit on top of the last menu items. */
.nh-drawer-footer--member { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nh-drawer-footer--member .nh-drawer-btn { grid-column: span 3; padding: 0 10px; white-space: nowrap; }
.nh-drawer-footer--member .nh-drawer-btn--wide { grid-column: 1 / -1; }
.nh-drawer-footer--member .nh-drawer-btn--claim { grid-column: span 4; }
.nh-drawer-footer--member .nh-drawer-btn--signout { grid-column: span 2; }

/* ==========================================================================
   SECTION PRIMITIVES
   ========================================================================== */
.nh-main { background: #fff; }
.nh-section { padding: var(--nh-section-y) 0; }
.nh-section--light { background: var(--nh-light); }
.nh-container { max-width: var(--nh-container); margin: 0 auto; padding: 0 var(--nh-gutter); }

.nh-section-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.nh-section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);   /* 28 → 36 */
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--nh-ink);
}
.nh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nh-primary);
}
.nh-sub { margin: 0; color: var(--nh-body); font-size: 1.05rem; line-height: 1.6; }
.nh-section-ts { margin: 12px 0 0; color: var(--nh-muted); font-size: 0.8rem; font-weight: 500; }
.nh-section-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 32px 0 0; }
.nh-col-h { margin: 0 0 16px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--nh-ink); }
.nh-muted { color: var(--nh-muted); }

/* Buttons */
.nh-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: 10px;
  background: var(--nh-primary); color: #fff;
  font: inherit; font-size: 0.95rem; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.nh-btn-primary:hover { background: var(--nh-primary-deep); color: #fff; }
.nh-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0;
  color: var(--nh-primary);
  font-size: 0.95rem; font-weight: 700;
  text-decoration: none;
}
.nh-btn-ghost:hover { color: var(--nh-primary-deep); text-decoration: underline; }
.nh-btn-ondark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 10px;
  color: #fff;
  font-size: 0.95rem; font-weight: 700;
  text-decoration: none;
}
.nh-btn-ondark:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Generic card */
.nh-card {
  background: #fff;
  border: 1px solid var(--nh-border);
  border-radius: var(--nh-radius);
  padding: 24px;
  color: var(--nh-ink);
}
.nh-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; }
.nh-card-title svg { color: var(--nh-primary); }
.nh-card p { margin: 0 0 12px; color: var(--nh-body); line-height: 1.6; }
.nh-card p:last-child { margin-bottom: 0; }

/* Live card variant */
.nh-card--live { border-top: 3px solid var(--nh-data-live); display: flex; flex-direction: column; }
.nh-live-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%;
  background: var(--nh-data-live);
  animation: nh-pulse 2s ease-in-out infinite;
}
@keyframes nh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nh-live-dot { animation: none; }
  .nh-mega, .nh-drawer, .nh-drawer-overlay, .nh-search input { transition: none; }
}

/* ==========================================================================
   HERO (§1 + hub pages)
   ========================================================================== */
.nh-hero {
  position: relative;
  padding: 88px 0 96px;
  background: var(--nh-navy);
  color: #fff;
  overflow: hidden;
}
.nh-hero--compact { padding: 64px 0 72px; }
.nh-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(207, 38, 39, 0.16), transparent 60%),
    linear-gradient(180deg, var(--nh-navy) 0%, var(--nh-navy-2) 100%);
}
.nh-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: url('../img/hero-calgary-skyline.jpg') center / cover no-repeat;
  opacity: 0.15;
}
.nh-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--nh-container); margin: 0 auto; padding: 0 var(--nh-gutter);
  text-align: center;
}
.nh-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px; padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.nh-hero-title {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(2.25rem, 5.2vw, 3rem);    /* 36 → 48 */
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
}
.nh-hero--compact .nh-hero-title { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
.nh-hero-accent { color: #fecaca; }
.nh-hero-sub {
  max-width: 760px; margin: 0 auto 36px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
}
.nh-hero--compact .nh-hero-sub { margin-bottom: 28px; }
.nh-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 20px; }
.nh-hero-note { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; }
.nh-hero--compact > .nh-hero-inner > :last-child { margin-bottom: 0; }

/* Hero search */
.nh-hero-search { max-width: 720px; margin: 0 auto 44px; }
.nh-hero-tabs {
  display: inline-flex; gap: 2px;
  margin-bottom: 12px; padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.nh-hero-tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nh-hero-tab:hover { color: #fff; }
.nh-hero-tab.is-active { background: #fff; color: var(--nh-ink); }
.nh-hero-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.45);
}
.nh-hero-input-row > svg { flex: 0 0 auto; color: var(--nh-muted); }
.nh-hero-input-row input {
  flex: 1; min-width: 0;
  padding: 10px 0;
  border: 0; outline: 0; background: transparent;
  color: var(--nh-ink);
  font: inherit; font-size: 1.05rem;
}
.nh-hero-submit {
  flex: 0 0 auto;
  min-height: 44px; padding: 0 24px;
  border: 0; border-radius: 10px;
  background: var(--nh-primary); color: #fff;
  font: inherit; font-size: 0.95rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.nh-hero-submit:hover { background: var(--nh-primary-deep); }
.nh-hero-hint { margin: 12px 0 0; color: rgba(255, 255, 255, 0.74); font-size: 0.85rem; }

/* Address autocomplete panel (hero Residential Address tab + §3 search).
   Follows the /address/ page's suggest panel, but floats over what comes
   next instead of pushing it down. */
.nh-hero--home { overflow: visible; overflow-x: clip; }   /* the panel can run past the hero's bottom edge */
.nh-ac-anchor { position: relative; }
.nh-ac {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  max-height: min(60vh, 440px); overflow-y: auto;
  border: 1px solid var(--nh-border); border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.5);
  color: var(--nh-ink);
  text-align: left;
}
.nh-ac[hidden] { display: none; }
.nh-ac .nh-ac-note { margin: 0; padding: 14px 18px; color: var(--nh-body); font-size: 0.95rem; }
.nh-ac-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding: 14px 18px;
  color: var(--nh-ink);
  text-decoration: none;
}
.nh-ac-item + .nh-ac-item { border-top: 1px solid var(--nh-border); }
.nh-ac-item strong { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.nh-ac-action { color: var(--nh-primary); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.nh-ac-item:hover, .nh-ac-item:focus-visible { background: var(--nh-light); color: var(--nh-ink); }
.nh-ac .nh-ac-item:focus-visible { outline-offset: -2px; border-radius: 0; }   /* ring inside the row; the panel clips anything outside it */
.nh-ac-item--commercial .nh-ac-action { color: var(--nh-body); }
.nh-ac-item--unavailable { opacity: 0.7; cursor: default; }
.nh-ac-item--unavailable:hover { background: transparent; }
.nh-ac-item--unavailable .nh-ac-action { color: var(--nh-muted); }
.nh-ac-didyoumean { padding: 12px 18px 14px; border-top: 1px solid var(--nh-border); background: var(--nh-light); font-size: 0.92rem; }
.nh-ac-didyoumean p { margin: 0; color: var(--nh-body); line-height: 1.7; }
.nh-ac-didyoumean .nh-ac-didyoumean-label { color: var(--nh-ink); font-weight: 600; }
.nh-ac-didyoumean-street span { color: var(--nh-muted); }
.nh-ac-didyoumean-link {
  display: inline-block; padding: 1px 8px;
  border: 1px solid var(--nh-border); border-radius: 6px;
  background: #fff; color: var(--nh-primary);
  font-weight: 600; text-decoration: none;
}
.nh-ac-didyoumean-link:hover { background: var(--nh-primary); color: #fff; }
.nh-ac[data-kind="commercial"] { border-color: #fecaca; background: #fff6f6; }
.nh-ac-commercial { padding: 16px 18px; }
.nh-ac-commercial p { margin: 0 0 12px; color: var(--nh-ink); line-height: 1.5; }
.nh-ac-commercial p span { display: block; margin-top: 4px; color: var(--nh-muted); font-size: 0.9rem; }
.nh-ac-commercial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nh-ac-commercial-cta {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border-radius: 10px;
  background: var(--nh-primary); color: #fff;
  font-size: 0.95rem; font-weight: 700; text-decoration: none;
}
.nh-ac-commercial-cta:hover { background: var(--nh-primary-deep); color: #fff; }
.nh-ac-commercial-dismiss {
  padding: 6px 0; border: 0; background: none;
  color: var(--nh-muted);
  font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.nh-ac-commercial-dismiss:hover { color: var(--nh-ink); }

/* Counters */
.nh-counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 880px; margin: 0 auto; padding: 0;
  list-style: none;
}
.nh-counter {
  display: block; height: 100%;
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-align: center;
  text-decoration: none;
}
a.nh-counter:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.nh-counter-value {
  display: block;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
}
.nh-counter-label {
  display: block; margin-top: 6px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.nh-counters--compact { margin-bottom: 24px; }

/* ==========================================================================
   §2 LIVE ROW
   ========================================================================== */
.nh-live-section { padding-top: 72px; padding-bottom: 72px; }
.nh-live-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nh-card-head { display: flex; align-items: center; margin-bottom: 14px; }
.nh-card-head h3 { flex: 1; margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.nh-card-ts { color: var(--nh-muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.nh-card-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px; }
.nh-card-metric strong { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--nh-ink); }
.nh-card-metric span { color: var(--nh-body); font-size: 0.9rem; }
.nh-card .nh-card-sub { margin: 0 0 14px; color: var(--nh-muted); font-size: 0.82rem; }
.nh-card-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; color: var(--nh-body); font-size: 0.9rem; line-height: 1.45; }
.nh-card-list li { position: relative; padding-left: 14px; }
.nh-card-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; }
.nh-card-list a { color: var(--nh-ink); text-decoration: none; }
.nh-card-list a:hover { color: var(--nh-primary); text-decoration: underline; }
.nh-card-list strong { color: var(--nh-ink); font-weight: 600; }
.nh-card-list-src { display: block; color: var(--nh-muted); font-size: 0.78rem; }
[data-nh-list="transit"] li { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.nh-card .nh-card-headline { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.nh-card-headline a { color: var(--nh-ink); text-decoration: none; }
.nh-card-headline a:hover { color: var(--nh-primary); }
.nh-card .nh-card-source { margin: 0 0 16px; color: var(--nh-muted); font-size: 0.82rem; }
.nh-card .nh-card-empty { margin: 0 0 16px; color: var(--nh-muted); font-size: 0.9rem; }
.nh-card-foot {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--nh-border);
}
.nh-card-foot a { color: var(--nh-primary); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.nh-card-foot a:hover { text-decoration: underline; }
.nh-card-src { color: var(--nh-muted); font-size: 0.75rem; }

/* ==========================================================================
   §3 ADDRESS SEARCH
   ========================================================================== */
.nh-addr-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 720px; margin: 0 auto 28px; padding: 8px 8px 8px 20px;
  border: 1px solid var(--nh-border); border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}
.nh-addr-search:focus-within { border-color: var(--nh-primary); }
/* The wrapper anchors the suggestion panel and takes over the form's width + spacing. */
.nh-addr-search-wrap { max-width: 720px; margin: 0 auto 28px; }
.nh-addr-search-wrap .nh-addr-search { max-width: none; margin: 0; }
.nh-addr-search > svg { flex: 0 0 auto; color: var(--nh-muted); }
.nh-addr-search input {
  flex: 1; min-width: 0; padding: 10px 0;
  border: 0; outline: 0; background: transparent;
  color: var(--nh-ink);
  font: inherit; font-size: 1.05rem;
}
.nh-addr-chips { max-width: 920px; margin: 0 auto; text-align: center; }
.nh-addr-chips-label { margin: 0 0 12px; color: var(--nh-muted); font-size: 0.85rem; font-weight: 600; }
.nh-addr-chips ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nh-chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--nh-border); border-radius: 999px;
  background: #fff;
  color: var(--nh-ink);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nh-chip:hover { background: var(--nh-primary); border-color: var(--nh-primary); color: #fff; }

/* ==========================================================================
   §4 NEIGHBOURHOOD MAP
   ========================================================================== */
.nh-hood-grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 48px; align-items: start; }
.nh-hoodmap-card { padding: 20px; border: 1px solid var(--nh-border); border-radius: var(--nh-radius-lg); background: #fff; }
.nh-hoodmap { display: block; width: 100%; height: auto; max-width: 350px; margin: 0 auto; }
.nh-hoodmap-q { fill: #94a3b8; font-family: var(--nh-font); font-size: 15px; font-weight: 800; letter-spacing: 0.06em; }
.nh-dot { stroke: #fff; stroke-width: 1; cursor: pointer; }
.nh-dot--nw { fill: var(--nh-q-nw); }
.nh-dot--ne { fill: var(--nh-q-ne); }
.nh-dot--sw { fill: var(--nh-q-sw); }
.nh-dot--se { fill: var(--nh-q-se); }
.nh-dot--c  { fill: var(--nh-q-c); }
.nh-hoodmap a:hover .nh-dot { stroke: var(--nh-navy); stroke-width: 2; }
.nh-hoodmap-caption { margin: 12px 0 0; color: var(--nh-muted); font-size: 0.8rem; line-height: 1.5; text-align: center; }
.nh-col-h--spaced { margin-top: 32px; }
.nh-quad-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.nh-quad-link {
  display: flex; align-items: center; gap: 10px;
  height: 100%; padding: 12px 16px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
}
.nh-quad-link:hover { border-color: #cbd5e1; background: var(--nh-light); }
.nh-quad-link strong {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 28px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.8rem; letter-spacing: 0.04em;
}
.nh-quad-link--nw strong { background: var(--nh-q-nw); }
.nh-quad-link--ne strong { background: var(--nh-q-ne); }
.nh-quad-link--sw strong { background: var(--nh-q-sw); }
.nh-quad-link--se strong { background: var(--nh-q-se); }
.nh-quad-link span { color: var(--nh-body); font-size: 0.88rem; line-height: 1.3; }

.nh-hood-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nh-hood-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.nh-hood-card:hover { box-shadow: var(--nh-shadow); transform: translateY(-2px); border-color: #cbd5e1; }
.nh-hood-quad { align-self: flex-start; padding: 2px 8px; border-radius: 6px; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; background: var(--nh-q-c); }
.nh-hood-quad--nw { background: var(--nh-q-nw); }
.nh-hood-quad--ne { background: var(--nh-q-ne); }
.nh-hood-quad--sw { background: var(--nh-q-sw); }
.nh-hood-quad--se { background: var(--nh-q-se); }
.nh-hood-name { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.nh-hood-metrics { display: flex; gap: 24px; margin-top: 6px; }
.nh-hood-metric { display: flex; flex-direction: column; }
.nh-hood-metric strong { font-size: 1.125rem; font-weight: 800; }
.nh-hood-metric small { margin-top: 2px; color: var(--nh-muted); font-size: 0.75rem; }
.nh-card-arrow { position: absolute; top: 20px; right: 20px; color: var(--nh-muted); }
.nh-hood-side-cta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; }

/* ==========================================================================
   §5 PERMITS  (+ /permits/ hub lists)
   ========================================================================== */
.nh-permits-wrap { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 40px; align-items: start; }
.nh-permits-mapcard { border: 1px solid var(--nh-border); border-radius: var(--nh-radius-lg); background: #fff; overflow: hidden; }
.nh-permits-map { position: relative; z-index: 0; aspect-ratio: 4 / 3; background: #e8edf3; }
.nh-permits-svg { display: block; width: 100%; height: 100%; }
.nh-permits-map.is-live .nh-permits-svg { display: none; }
.nh-permits-leaflet { position: absolute; inset: 0; }
.nh-permits-mapfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; }
.nh-permits-mapfoot p { flex: 1 1 220px; margin: 0; color: var(--nh-body); font-size: 0.85rem; line-height: 1.45; }

.nh-ticker {
  margin: 0 0 16px; padding: 0;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  list-style: none;
  overflow: hidden;
}
.nh-ticker li + li { border-top: 1px solid var(--nh-border); }
.nh-ticker-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  color: var(--nh-ink);
  text-decoration: none;
  transition: background .15s ease;
}
.nh-ticker-row:hover { background: var(--nh-light); }
.nh-ticker-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nh-ticker-type { font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.nh-ticker-where { color: var(--nh-muted); font-size: 0.82rem; line-height: 1.35; }
.nh-ticker-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.nh-ticker-val { font-size: 0.92rem; font-weight: 700; }
.nh-ticker-status { font-size: 0.78rem; font-weight: 600; color: var(--nh-body); }
.nh-ticker-date { color: var(--nh-muted); font-size: 0.78rem; white-space: nowrap; }

.nh-permits-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: start; }
.nh-permits-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.nh-index-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.nh-index-list a {
  display: flex; flex-direction: column; gap: 2px;
  height: 100%; padding: 14px 16px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nh-index-list a:hover { border-color: #cbd5e1; box-shadow: var(--nh-shadow); }
.nh-index-list strong { font-size: 0.95rem; font-weight: 700; }
.nh-index-list span { color: var(--nh-muted); font-size: 0.82rem; }

.nh-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.nh-related-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.nh-related-card:hover { box-shadow: var(--nh-shadow); border-color: #cbd5e1; }
.nh-related-card svg { color: var(--nh-primary); }
.nh-related-card strong { font-size: 1rem; }
.nh-related-card span { color: var(--nh-body); font-size: 0.88rem; line-height: 1.5; }

/* ==========================================================================
   §6 REZONING FEED  (+ /rezoning/ hub)
   ========================================================================== */
.nh-rezoning-feed {
  margin: 0; padding: 0;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  list-style: none;
  overflow: hidden;
}
.nh-rezoning-row + .nh-rezoning-row { border-top: 1px solid var(--nh-border); }
.nh-rezoning-link {
  display: grid;
  grid-template-columns: 124px minmax(0, 1.2fr) minmax(0, 1fr) 150px 116px;
  align-items: center; gap: 16px;
  padding: 14px 20px;
  color: var(--nh-ink);
  text-decoration: none;
}
a.nh-rezoning-link { transition: background .15s ease; }
a.nh-rezoning-link:hover { background: var(--nh-light); }
.nh-rezoning-num { font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
.nh-rezoning-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.nh-rezoning-change code {
  padding: 2px 8px; border-radius: 6px;
  background: var(--nh-light-2); color: var(--nh-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}
.nh-rezoning-arrow { color: var(--nh-muted); }
.nh-rezoning-community { color: var(--nh-body); font-size: 0.9rem; }
.nh-rezoning-date { color: var(--nh-muted); font-size: 0.82rem; }
.nh-rezoning-status {
  justify-self: start;
  padding: 3px 10px; border-radius: 999px;
  background: var(--nh-light-2); color: var(--nh-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.nh-rezoning-status.is-submitted { background: #dbeafe; color: #1d4ed8; }
.nh-rezoning-status.is-pending   { background: #fef3c7; color: #92400e; }
.nh-rezoning-status.is-approved  { background: #dcfce7; color: #166534; }
.nh-rezoning-status.is-refused   { background: #fee2e2; color: #991b1b; }
.nh-feed-note { max-width: 820px; margin: 16px auto 0; color: var(--nh-muted); font-size: 0.85rem; line-height: 1.55; text-align: center; }

/* ==========================================================================
   §7 DATA TILES  (+ /data/ dataset cards)
   ========================================================================== */
.nh-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nh-data-tile {
  display: flex; flex-direction: column;
  padding: 24px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.nh-data-tile:hover { box-shadow: var(--nh-shadow); transform: translateY(-2px); border-color: #cbd5e1; }
.nh-data-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 12px;
  border-radius: 10px;
  background: var(--nh-light-2); color: var(--nh-primary);
}
.nh-data-tile-title { font-size: 0.95rem; font-weight: 700; }
.nh-data-tile-metric { margin: 6px 0 2px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.nh-data-tile-label { color: var(--nh-body); font-size: 0.88rem; line-height: 1.45; }
.nh-data-tile-note { margin-top: 6px; color: var(--nh-data-live-text); font-size: 0.8rem; font-weight: 600; }
.nh-data-tile-src { margin-top: auto; padding-top: 14px; color: var(--nh-muted); font-size: 0.75rem; }

.nh-dataset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nh-dataset {
  display: flex; flex-direction: column;
  padding: 24px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
}
.nh-dataset:target { border-color: var(--nh-primary); box-shadow: 0 0 0 3px rgba(207, 38, 39, 0.12); }
.nh-dataset-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 12px;
  border-radius: 10px;
  background: var(--nh-light-2); color: var(--nh-primary);
}
.nh-dataset-title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.nh-dataset-desc { margin: 0 0 16px; color: var(--nh-body); font-size: 0.92rem; line-height: 1.55; }
.nh-dataset-facts { display: grid; gap: 8px; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--nh-border); border-bottom: 1px solid var(--nh-border); }
.nh-dataset-facts > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; }
.nh-dataset-facts dt { margin: 0; color: var(--nh-muted); font-size: 0.82rem; }
.nh-dataset-facts dd { margin: 0; color: var(--nh-ink); font-size: 0.88rem; font-weight: 600; line-height: 1.4; }
.nh-dataset-foot { display: flex; flex-direction: column; gap: 4px; margin: auto 0 0; }
.nh-dataset-foot .nh-btn-ghost { padding: 0; }
.nh-dataset-src { color: var(--nh-muted); font-size: 0.78rem; line-height: 1.5; }
.nh-dataset-src a { color: var(--nh-body); text-decoration: underline; }
.nh-dataset-src a:hover { color: var(--nh-primary); }

/* ==========================================================================
   §8 NEIGHBOURHOODS ON THE RISE
   ========================================================================== */
.nh-rise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nh-rise-card {
  display: flex; flex-direction: column;
  padding: 24px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.nh-rise-card:hover { box-shadow: var(--nh-shadow); transform: translateY(-2px); border-color: #cbd5e1; }
.nh-rise-yoy { color: var(--nh-data-live-text); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.nh-rise-yoy-label { margin: 6px 0 14px; color: var(--nh-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nh-rise-name { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.nh-rise-meta { margin: 4px 0 14px; color: var(--nh-muted); font-size: 0.82rem; }
.nh-rise-bar { display: block; width: 100%; height: 6px; margin: auto 0 12px; border-radius: 999px; background: var(--nh-light-2); overflow: hidden; }
.nh-rise-bar span { display: block; height: 100%; border-radius: 999px; background: var(--nh-data-live); }
.nh-rise-val { font-size: 1rem; font-weight: 700; }
.nh-rise-val small { margin-left: 4px; color: var(--nh-muted); font-size: 0.78rem; font-weight: 500; }

/* ==========================================================================
   §9 WEEKLY DIGEST
   ========================================================================== */
.nh-digest-card {
  max-width: 860px; margin: 0 auto; padding: 44px 48px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius-lg);
  background: #fff;
}
.nh-digest-head { margin-bottom: 8px; }
.nh-digest-title { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.nh-digest-body h4 { display: flex; align-items: center; gap: 8px; margin: 28px 0 8px; font-size: 1rem; font-weight: 700; }
.nh-digest-body h4 svg { color: var(--nh-primary); }
.nh-digest-body p { margin: 0 0 10px; color: var(--nh-body); font-size: 1rem; line-height: 1.7; }
.nh-digest-body strong { color: var(--nh-ink); }
.nh-digest-body a { color: var(--nh-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.nh-digest-body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   §10 ASK CALGARY
   ========================================================================== */
.nh-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 8px; }
.nh-faq-item { border: 1px solid var(--nh-border); border-radius: var(--nh-radius); background: #fff; overflow: hidden; }
.nh-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px;
  color: var(--nh-ink);
  font-weight: 600; line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.nh-faq-item summary::-webkit-details-marker { display: none; }
.nh-faq-item summary:hover { background: var(--nh-light); }
.nh-faq-item summary svg { flex: 0 0 auto; color: var(--nh-muted); transition: transform .15s ease; }
.nh-faq-item[open] summary svg { transform: rotate(180deg); }
.nh-faq-a { padding: 0 24px 20px; }
.nh-faq-a p { margin: 0 0 10px; color: var(--nh-body); line-height: 1.7; }
.nh-faq-a .nh-faq-number { margin: 0 0 6px; color: var(--nh-primary); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.nh-faq-a .nh-faq-src { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--nh-border); color: var(--nh-muted); font-size: 0.82rem; }
.nh-faq-src a { color: var(--nh-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   §11 REVIEWS RAIL
   ========================================================================== */
/* position:relative on the scroller and the cards — without a positioned
   ancestor, the visually-hidden rating labels escape the scroll container and
   stretch the whole document sideways. */
.nh-review-rail {
  position: relative;
  display: flex; gap: 16px;
  margin: 0; padding: 4px 4px 16px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.nh-review-rail::-webkit-scrollbar { height: 8px; }
.nh-review-rail::-webkit-scrollbar-thumb { border-radius: 4px; background: #cbd5e1; }
.nh-review-card {
  position: relative;
  flex: 0 0 320px;
  display: flex; flex-direction: column;
  padding: 22px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  scroll-snap-align: start;
}
.nh-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nh-review-avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--nh-navy); color: #fff;
  font-weight: 700;
}
.nh-review-who { display: flex; flex-direction: column; min-width: 0; }
.nh-review-author { font-weight: 600; line-height: 1.3; }
.nh-review-date { color: var(--nh-muted); font-size: 0.78rem; }
.nh-review-rating { display: flex; gap: 2px; margin: 0 0 10px; }
.nh-star { color: #d1d5db; line-height: 0; }
.nh-star.is-filled { color: var(--nh-data-alert); }
.nh-review-title { margin: 0 0 6px; font-weight: 700; line-height: 1.35; }
.nh-review-quote { margin: 0 0 14px; padding: 0; border: 0; color: var(--nh-body); font-size: 0.95rem; line-height: 1.55; }
.nh-review-biz { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--nh-border); font-size: 0.88rem; font-weight: 600; }
.nh-review-biz a { color: var(--nh-primary); text-decoration: none; }
.nh-review-biz a:hover { text-decoration: underline; }

/* ==========================================================================
   §13 NEWS + BLOG + CTA BAND
   ========================================================================== */
.nh-newsblog { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.nh-newsblog--news-only { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
.nh-news-list { display: grid; gap: 0; margin: 0 0 16px; padding: 0; list-style: none; }
.nh-newsblog--news-only .nh-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.nh-news-list li { padding: 14px 0; border-bottom: 1px solid var(--nh-border); }
.nh-news-list a { display: block; color: var(--nh-ink); font-size: 1rem; font-weight: 600; line-height: 1.4; text-decoration: none; }
.nh-news-list a:hover { color: var(--nh-primary); }
.nh-news-src { display: block; margin-top: 4px; color: var(--nh-muted); font-size: 0.8rem; }
.nh-blog-cards { display: grid; gap: 12px; margin-bottom: 16px; }
.nh-blog-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.nh-blog-card:hover { box-shadow: var(--nh-shadow); }
.nh-blog-card-thumb { display: block; margin: -16px -16px 8px; }
.nh-blog-card-thumb img { width: 100%; height: auto; }
.nh-blog-card-title { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.nh-blog-card-meta { color: var(--nh-muted); font-size: 0.8rem; }


/* ==========================================================================
   /ADDRESS-PREVIEW/ — the three added sections
   (the rest of that page uses the live landing's own stylesheet)
   ========================================================================== */
.nh-addr-browse-intro { max-width: 760px; margin: -8px 0 28px; color: var(--color-body, var(--nh-body)); font-size: 1rem; line-height: 1.6; }
.nh-addr-browse-h { margin: 28px 0 14px; font-size: 1.05rem; font-weight: 700; }
.nh-az { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.nh-az-letter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 8px 4px;
  border: 1px solid var(--nh-border); border-radius: 10px;
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nh-az-letter strong { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.nh-az-letter small { color: var(--nh-muted); font-size: 0.72rem; }
a.nh-az-letter:hover,
.nh-az-letter.is-current { background: var(--nh-primary); border-color: var(--nh-primary); color: #fff; }
a.nh-az-letter:hover small,
.nh-az-letter.is-current small { color: rgba(255, 255, 255, 0.85); }
.nh-az-letter.is-empty { background: transparent; border-style: dashed; color: #94a3b8; }
.nh-az-letter.is-empty small { color: #94a3b8; }

.nh-quad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nh-quad-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--nh-border); border-left-width: 4px; border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.nh-quad-card:hover, .nh-quad-card.is-current { box-shadow: var(--nh-shadow); }
.nh-quad-card--nw { border-left-color: var(--nh-q-nw); }
.nh-quad-card--ne { border-left-color: var(--nh-q-ne); }
.nh-quad-card--sw { border-left-color: var(--nh-q-sw); }
.nh-quad-card--se { border-left-color: var(--nh-q-se); }
.nh-quad-card strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.nh-quad-card span { color: var(--nh-body); font-size: 0.9rem; }
.nh-quad-card small { color: var(--nh-muted); font-size: 0.8rem; }

.nh-addr-results-meta { max-width: 820px; margin: -8px 0 24px; color: var(--nh-body); font-size: 0.95rem; line-height: 1.6; }
.nh-addr-results-meta a { color: var(--nh-primary); font-weight: 600; text-decoration: underline; }
.nh-addr-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.nh-addr-results li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--nh-border); border-radius: 10px;
  background: #fff;
}
.nh-addr-results a { color: var(--nh-ink); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.nh-addr-results a:hover { color: var(--nh-primary); text-decoration: underline; }
.nh-addr-results span { color: var(--nh-muted); font-size: 0.78rem; }

.nh-sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.nh-sample-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px;
  border: 1px solid var(--nh-border); border-radius: var(--nh-radius);
  background: #fff;
  color: var(--nh-ink);
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.nh-sample-card:hover { border-color: var(--nh-primary); box-shadow: var(--nh-shadow); }
.nh-sample-icon { margin-bottom: 4px; color: var(--nh-primary); }
.nh-sample-card strong { font-size: 0.95rem; }
.nh-sample-hood { color: var(--nh-muted); font-size: 0.8rem; }
.nh-sample-hint { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--nh-primary); font-size: 0.8rem; font-weight: 700; }

/* ==========================================================================
   PROSE
   ========================================================================== */
.nh-prose { max-width: 760px; margin: 0 auto; color: var(--nh-body); font-size: 1.02rem; line-height: 1.7; }
.nh-prose p { margin: 0 0 16px; }
.nh-prose p:last-child { margin-bottom: 0; }
.nh-prose a { color: var(--nh-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   FOOTER
   The site's existing footer (.site-footer, styled in style.css) with five
   link columns instead of three. Only the wider grid is laid out here.
   ========================================================================== */
.site-footer--nav5 .container { max-width: var(--nh-container); padding: 0 var(--nh-gutter); }
.site-footer--nav5 .footer-grid {
  grid-template-columns: minmax(230px, 1.45fr) repeat(5, minmax(0, 1fr));
  gap: 40px 28px;
}
.site-footer--nav5 .footer-col a { align-items: baseline; }   /* a label that wraps keeps its chevron on the first line */
.site-footer--nav5 .footer-brand .site-logo { align-self: flex-start; }   /* the link is as wide as the logo, not the row */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Nav collapses to the drawer. One breakpoint switches both the nav and
       the hamburger, so there is never a width with neither. --- */
@media (max-width: 1279px) {
  .nh-primary { display: none; }
  .nh-hamburger { display: inline-flex; }
  .nh-utility { margin-left: auto; }
}

@media (max-width: 1100px) {
  .site-footer--nav5 .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
  .site-footer--nav5 .footer-brand { grid-column: 1 / -1; }
  .site-footer--nav5 .footer-legal { max-width: 560px; }
  .nh-dataset-grid { grid-template-columns: repeat(2, 1fr); }
  .nh-rezoning-link { grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1fr) 116px; }
  .nh-rezoning-date { grid-column: 2 / 4; grid-row: 2; }
  .nh-rezoning-status { grid-column: 4; grid-row: 1 / 3; align-self: center; }
}

@media (max-width: 900px) {
  :root { --nh-section-y: 64px; --nh-header-h: 64px; }
  .nh-logo-img { height: 40px; }
  .nh-live-row { grid-template-columns: 1fr; }
  .nh-hood-grid { grid-template-columns: 1fr; gap: 32px; }
  .nh-hoodmap-card { max-width: 460px; margin: 0 auto; width: 100%; }
  .nh-permits-wrap { grid-template-columns: 1fr; gap: 28px; }
  .nh-permits-cols { grid-template-columns: 1fr; }
  .nh-permits-types { grid-template-columns: 1fr; }
  .nh-data-grid { grid-template-columns: repeat(2, 1fr); }
  .nh-rise-grid { grid-template-columns: repeat(2, 1fr); }
  .nh-newsblog { grid-template-columns: 1fr; gap: 36px; }
  .site-footer--nav5 .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nh-quad-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
  .admin-bar .nh-header { top: 46px; }
  .admin-bar .nh-drawer { top: 46px; }
}

@media (max-width: 640px) {
  :root { --nh-section-y: 48px; --nh-gutter: 16px; }
  .nh-section-head { margin-bottom: 32px; }
  .nh-live-section { padding-top: 48px; padding-bottom: 48px; }

  /* Header: logo, Claim pill, hamburger. Search + account live in the drawer. */
  .nh-header-inner { gap: 10px; }
  .nh-search, .nh-account, .nh-utility-link { display: none; }
  .nh-utility-claim { height: 36px; padding: 0 12px; font-size: 0.8rem; }

  .nh-hero { padding: 48px 0 56px; }
  .nh-hero--compact { padding: 40px 0 48px; }
  .nh-hero-tabs { display: flex; }
  /* Widths follow the labels. On the narrowest phones "Residential Address"
     wraps inside its tab; the one-word tabs keep their full width. */
  .nh-hero-tab { flex: 1 1 auto; justify-content: center; padding: 4px 8px; font-size: 0.82rem; line-height: 1.15; }
  .nh-hero-input-row { padding: 6px 6px 6px 14px; }
  .nh-hero-input-row input { font-size: 1rem; }
  .nh-hero-submit { padding: 0 16px; }
  .nh-counters { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nh-ac-item { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .nh-ac .nh-ac-note { padding: 12px 14px; }

  .nh-addr-search { padding: 6px 6px 6px 14px; }
  .nh-hood-cards { grid-template-columns: 1fr; }
  .nh-data-grid, .nh-dataset-grid, .nh-rise-grid { grid-template-columns: 1fr; }
  .nh-quad-links { gap: 8px; }
  .nh-newsblog--news-only .nh-news-list { grid-template-columns: 1fr; }
  .nh-digest-card { padding: 28px 22px; }
  .nh-faq-item summary { padding: 16px 18px; }
  .nh-faq-a { padding: 0 18px 18px; }
  .nh-review-card { flex-basis: 84%; }
  .site-footer--nav5 .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .nh-dataset-facts > div { grid-template-columns: 1fr; gap: 0; }

  .nh-rezoning-link { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; }
  .nh-rezoning-num { grid-column: 1; grid-row: 1; }
  .nh-rezoning-status { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .nh-rezoning-change { grid-column: 1 / 3; grid-row: 2; }
  .nh-rezoning-community { grid-column: 1; grid-row: 3; }
  .nh-rezoning-date { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
}

@media (max-width: 600px) {
  /* The WP admin bar stops being fixed below 600px, so nothing to clear.
     It sits at the top of the page above everything (z-index 99999) and its
     account item wraps onto a second row at phone widths, landing on the
     hamburger and on the open drawer's close button. Lift all three over it. */
  .admin-bar .nh-header { top: 0; z-index: 100000; }
  .admin-bar .nh-drawer-overlay { z-index: 100001; }
  .admin-bar .nh-drawer { top: 0; z-index: 100002; }
}

@media (max-height: 640px) {
  /* Short screens: the drawer's buttons scroll with the menu instead of
     staying pinned over its last items. */
  .nh-drawer-footer { position: static; }
}

@media (max-width: 480px) {
  /* Three search tabs on one row: drop the icons to make room for the labels. */
  .nh-hero-tab { padding: 4px 6px; font-size: 0.8rem; }
  .nh-hero-tab svg { display: none; }
}

@media (max-width: 380px) {
  /* Two-per-row drawer buttons: labels only, so they fit the narrowest phones. */
  .nh-drawer-footer--member .nh-drawer-btn { padding: 0 6px; }
  .nh-drawer-footer--member .nh-drawer-btn svg { display: none; }
  .nh-logo-img { height: 34px; }
  .nh-utility-claim svg { display: none; }
  .nh-utility-claim { padding: 0 10px; font-size: 0.76rem; }
  .nh-quad-grid { grid-template-columns: 1fr; }
}