/* Harvey Community Radio — dark-box buttons v2 (Franz's tweaks, 27 Sep 2026)
   - Listen live + Radio guide header pills: charcoal #2B2F36, white text (no navy edge;
     the navy edge stays only on the big home What's On block).
   - You are here (any header pill): white fill, charcoal text, 2px charcoal outline,
     3px orange #E87722 bar under the label.
   - Menu dropdown: light pills (white, 1px #C9D0DA, charcoal text); only the current page is charcoal.
   - Menu button: always outlined (white, 2px charcoal), also while open.
   Contrast: #FFF on #2B2F36 13.4:1 (both ways); hover #3A3F47 10.6:1;
   #2B2F36 on #EEF1F5 11.9:1; orange bar on white 3.0:1. The orange bar is decoration on top of the outline + white fill.
   Additive only: remove the <link> to roll back. */

/* —— Header pills (not current) —— */
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/listen"],
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/guide"] {
  background: #2B2F36 !important;
  border: 2px solid #2B2F36 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/listen"]:hover,
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/guide"]:hover {
  background: #3A3F47 !important; border-color: #3A3F47 !important; color: #FFFFFF !important;
}
#hcr-nav .hcr-nav-row .hcr-nav-btn:focus-visible { outline: 3px solid #1F2469; outline-offset: 3px; }

/* —— You are here: white pill, charcoal outline, orange bar —— */
#hcr-nav .hcr-nav-row .hcr-nav-btn { position: relative; }
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href].is-active,
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href][aria-current="page"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 2px solid #2B2F36 !important;
  color: #2B2F36 !important;
}
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href].is-active::after,
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href][aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 44%;
  max-width: 64px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #E87722;
  pointer-events: none;
}

/* —— Menu button: always outlined —— */
#hcr-nav .hcr-nav-menu,
#hcr-nav .hcr-nav-menu.is-open,
#hcr-nav .hcr-nav-menu.has-active {
  background: #FFFFFF !important;
  border: 2px solid #2B2F36 !important;
  color: #2B2F36 !important;
}
#hcr-nav .hcr-nav-menu:hover { background: #EEF1F5 !important; }

/* —— Menu dropdown: light pills, current page charcoal —— */
#hcr-nav-panel .hcr-nav-btn {
  background: #FFFFFF !important;
  border: 1px solid #C9D0DA !important;
  color: #2B2F36 !important;
  font-weight: 600;
}
#hcr-nav-panel .hcr-nav-btn * { color: inherit !important; }
#hcr-nav-panel .hcr-nav-btn:hover { background: #EEF1F5 !important; border-color: #9AA6B4 !important; }
#hcr-nav-panel .hcr-nav-btn.is-active,
#hcr-nav-panel .hcr-nav-btn[aria-current="page"] {
  background: #2B2F36 !important;
  background-color: #2B2F36 !important;
  border-color: #2B2F36 !important;
  color: #FFFFFF !important;
}
#hcr-nav-panel .hcr-nav-btn:focus-visible { outline: 3px solid #1F2469; outline-offset: 3px; }

/* —— Phones: row gutter 14px (was 18px) so the pill labels get breathing room; labels unchanged —— */
@media (max-width: 400px) {
  #hcr-nav .hcr-nav-row { margin-left: -4px !important; margin-right: -4px !important; width: calc(100% + 8px) !important; max-width: none !important; gap: 4px !important; }
  /* extra room goes to the three labelled pills, not the icon buttons */
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon,
  #hcr-nav .hcr-nav-row > li:has(> .hcr-nav-menu) { flex-grow: 0 !important; }
  #hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/listen"],
  #hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/whats-on"],
  #hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/guide"] { font-size: 15px !important; padding: 0 6px !important; letter-spacing: 0 !important; }
  #hcr-nav .hcr-nav-menu { padding: 0 8px !important; }
}
@media (max-width: 374px) {
  #hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/listen"],
  #hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/whats-on"],
  #hcr-nav .hcr-nav-row .hcr-nav-btn[data-href="/guide"] { font-size: 14px !important; padding: 0 5px !important; }
  #hcr-nav .hcr-nav-menu { padding: 0 6px !important; }
}

/* No-orange cleanup: preserve the active pill's fill, outline, text, and sizing. */
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href].is-active::after,
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href][aria-current="page"]::after,
#hcr-nav-panel .hcr-nav-btn.is-active::after,
#hcr-nav-panel .hcr-nav-btn[aria-current="page"]::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

/* Current-page fill: match the removed slate title band (#2F4A63), with no underline. */
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href].is-active,
#hcr-nav .hcr-nav-row .hcr-nav-btn[data-href][aria-current="page"],
#hcr-nav-panel .hcr-nav-btn.is-active,
#hcr-nav-panel .hcr-nav-btn[aria-current="page"] {
  background: #2F4A63 !important;
  background-color: #2F4A63 !important;
  border-color: #2F4A63 !important;
  color: #FFFFFF !important;
}