/* Harvey Community Radio — decluttered header nav (Duncan 27 Sep 2026) */
html.hcr-nav-slim header nav[aria-label="Main"] { display: none !important; }

#hcr-nav { width: 100%; }
#hcr-nav .hcr-nav-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
#hcr-nav .hcr-nav-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.5px solid #C9D0DA;
  background: #FFFFFF;
  color: #16181D;
  font: 600 15px/1 "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
#hcr-nav .hcr-nav-row > li { display: flex; min-width: 0; }
#hcr-nav .hcr-nav-row > li.hcr-nav-li-text { flex: 1 1 auto; }
#hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex: 0 0 44px; }
#hcr-nav .hcr-nav-row > li.hcr-nav-li-menu { flex: 0 0 auto; }
#hcr-nav .hcr-nav-row > li > .hcr-nav-btn { width: 100%; }
#hcr-nav .hcr-nav-icon { width: 44px; padding: 0; }
#hcr-nav .hcr-nav-menu { padding: 0 12px; }
#hcr-nav .hcr-nav-btn:hover { background: #EEF1F5; }
#hcr-nav .hcr-nav-btn:focus-visible { outline: 2px solid #2F4A63; outline-offset: 2px; }
#hcr-nav .hcr-nav-btn.is-active,
#hcr-nav .hcr-nav-menu.is-open {
  background: #2F4A63;
  border-color: #2F4A63;
  color: #F7F9FC;
}
#hcr-nav .hcr-nav-menu.has-active:not(.is-open) { border-color: #2F4A63; }

#hcr-nav-panel[hidden] { display: none !important; }
#hcr-nav-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #D8DCE3;
  border-radius: 18px;
  background: #F5F6F8;
}
#hcr-nav-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#hcr-nav-panel li { min-width: 0; }
#hcr-nav-panel li.hcr-nav-wide { grid-column: 1 / -1; }
#hcr-nav-panel .hcr-nav-btn { width: 100%; }

/* Small phones: tighten so the row stays on one line */
@media (max-width: 400px) {
  #hcr-nav .hcr-nav-row { gap: 5px; }
  #hcr-nav .hcr-nav-btn { font-size: 14px; padding: 0 7px; }
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex-basis: 42px; }
  #hcr-nav .hcr-nav-icon { width: 42px; padding: 0; }
  #hcr-nav .hcr-nav-menu { padding: 0 10px; gap: 5px; }
}
@media (max-width: 350px) {
  #hcr-nav .hcr-nav-btn { font-size: 13px; padding: 0 5px; }
  #hcr-nav .hcr-nav-menu svg { display: none; }
}
/* Wider screens: same slim row, natural widths */
@media (min-width: 640px) {
  #hcr-nav .hcr-nav-row { gap: 10px; }
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-text { flex: 0 0 auto; }
  #hcr-nav .hcr-nav-row > li > a.hcr-nav-btn { padding: 0 18px; font-size: 16px; }
  #hcr-nav .hcr-nav-menu { padding: 0 18px; font-size: 16px; }
  #hcr-nav-panel ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #hcr-nav-panel li.hcr-nav-wide { grid-column: auto; }
}

/* ===== MOCKUP (27 Sep 2026): "What's on" as the standout primary nav item =====
   CSS-only: targets the existing links by data-href, no JS change needed.
   Colour = logo navy #1F2469 (from the 96.5 logo plate), white text. */
#hcr-nav .hcr-nav-row { align-items: center; }
#hcr-nav .hcr-nav-row > li:has(> a[data-href="/whats-on"]) { flex: 1.5 1 auto; }
#hcr-nav .hcr-nav-btn[data-href="/whats-on"] {
  height: 50px;
  min-height: 50px;
  padding: 0 14px;
  background: #1F2469;
  border: 2px solid #1F2469;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 0 rgba(31, 36, 105, 0.25);
}
#hcr-nav .hcr-nav-btn[data-href="/whats-on"]:hover,
#hcr-nav .hcr-nav-btn[data-href="/whats-on"].is-active {
  background: #151A52;
  border-color: #151A52;
  color: #FFFFFF;
}
#hcr-nav .hcr-nav-btn[data-href="/whats-on"]:focus-visible { outline: 3px solid #1F2469; outline-offset: 3px; }
/* Radio guide: quiet secondary text link right beside What's on */
#hcr-nav .hcr-nav-btn[data-href="/guide"] {
  border-color: transparent;
  background: transparent;
  color: #2F4A63;
  font-weight: 600;
  padding: 0 4px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: #9AA6B4;
}
#hcr-nav .hcr-nav-btn[data-href="/guide"]:hover { background: transparent; color: #1F2469; text-decoration-color: currentColor; }
#hcr-nav .hcr-nav-btn[data-href="/guide"].is-active { background: transparent; border-color: transparent; color: #1F2469; text-decoration-color: currentColor; }
#hcr-nav .hcr-nav-row > li:has(> a[data-href="/guide"]) { flex: 0 1 auto; margin-left: -2px; }
@media (max-width: 400px) {
  /* Phones: What's on keeps its full size; the others give up a little room */
  #hcr-nav .hcr-nav-row { gap: 4px; }
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/whats-on"]) { flex: 0 0 auto; }
  #hcr-nav .hcr-nav-btn[data-href="/whats-on"] { font-size: 16px; padding: 0 11px; height: 48px; min-height: 48px; }
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/guide"]) { flex: 0 0 auto; margin-left: 0; }
  #hcr-nav .hcr-nav-btn[data-href="/guide"] { padding: 0 2px; font-size: 14px; }
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/listen"]) { flex: 1 1 auto; }
  #hcr-nav .hcr-nav-btn[data-href="/listen"] { padding: 0 6px; }
  #hcr-nav .hcr-nav-menu { padding: 0 11px; }
  #hcr-nav .hcr-nav-menu svg { display: none; }
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex-basis: 40px; }
  #hcr-nav .hcr-nav-icon { width: 40px; }
}
@media (max-width: 350px) {
  #hcr-nav .hcr-nav-btn[data-href="/whats-on"] { font-size: 15px; padding: 0 7px; }
}
@media (min-width: 640px) {
  #hcr-nav .hcr-nav-row > li > a.hcr-nav-btn[data-href="/whats-on"] { padding: 0 28px; font-size: 19px; height: 54px; min-height: 54px; }
  #hcr-nav .hcr-nav-row > li > a.hcr-nav-btn[data-href="/guide"] { padding: 0 6px; font-size: 16px; }
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/whats-on"]) { flex: 0 0 auto; }
}
/* ===== end mockup ===== */

/* ===== Duncan 27 Sep 2026 (live): all three primary items bigger and bolder =====
   Overrides the mockup's quiet Radio guide text link: Listen live and Radio guide are
   bold outlined pills; What's on stays the solid navy pill. */
#hcr-nav .hcr-nav-btn[data-href="/listen"],
#hcr-nav .hcr-nav-btn[data-href="/guide"] {
  height: 50px;
  min-height: 50px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 2px solid #1F2469;
  color: #1F2469;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: 0.01em;
}
#hcr-nav .hcr-nav-btn[data-href="/listen"]:hover,
#hcr-nav .hcr-nav-btn[data-href="/guide"]:hover { background: #EEF0F8; color: #1F2469; }
#hcr-nav .hcr-nav-btn[data-href="/listen"].is-active,
#hcr-nav .hcr-nav-btn[data-href="/guide"].is-active { background: #1F2469; border-color: #1F2469; color: #FFFFFF; }
#hcr-nav .hcr-nav-btn[data-href="/whats-on"] { font-weight: 700; }
#hcr-nav .hcr-nav-row > li:has(> a[data-href="/guide"]) { margin-left: 0; }
#hcr-nav .hcr-nav-icon, #hcr-nav .hcr-nav-menu { height: 50px; min-height: 50px; }
@media (max-width: 400px) {
  #hcr-nav .hcr-nav-row { gap: 4px; }
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/listen"]),
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/whats-on"]),
  #hcr-nav .hcr-nav-row > li:has(> a[data-href="/guide"]) { flex: 1 1 auto; }
  #hcr-nav .hcr-nav-btn[data-href="/listen"],
  #hcr-nav .hcr-nav-btn[data-href="/whats-on"],
  #hcr-nav .hcr-nav-btn[data-href="/guide"] { height: 48px; min-height: 48px; font-size: 15px; padding: 0 7px; }
  #hcr-nav .hcr-nav-icon, #hcr-nav .hcr-nav-menu { height: 48px; min-height: 48px; }
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex-basis: 38px; }
  #hcr-nav .hcr-nav-icon { width: 38px; }
  #hcr-nav .hcr-nav-menu { padding: 0 9px; }
}
@media (max-width: 374px) {
  #hcr-nav .hcr-nav-row { gap: 3px; }
  #hcr-nav .hcr-nav-btn[data-href="/listen"],
  #hcr-nav .hcr-nav-btn[data-href="/whats-on"],
  #hcr-nav .hcr-nav-btn[data-href="/guide"] { font-size: 14px; padding: 0 5px; letter-spacing: 0; }
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex-basis: 36px; }
  #hcr-nav .hcr-nav-icon { width: 36px; }
  #hcr-nav .hcr-nav-menu { padding: 0 7px; }
}
@media (min-width: 640px) {
  #hcr-nav .hcr-nav-row > li > a.hcr-nav-btn[data-href="/listen"],
  #hcr-nav .hcr-nav-row > li > a.hcr-nav-btn[data-href="/guide"] { padding: 0 22px; font-size: 18px; height: 54px; min-height: 54px; }
  #hcr-nav .hcr-nav-row > li > a.hcr-nav-btn[data-href="/whats-on"] { font-size: 18px; }
  #hcr-nav .hcr-nav-icon, #hcr-nav .hcr-nav-menu { height: 54px; min-height: 54px; }
  #hcr-nav .hcr-nav-icon { width: 54px; }
  #hcr-nav .hcr-nav-row > li.hcr-nav-li-icon { flex-basis: 54px; }
}
/* Current-page state: keep brand navy (cool-studio-override paints aria-current slate with !important) */
#hcr-nav .hcr-nav-btn[data-href="/whats-on"][aria-current="page"],
#hcr-nav .hcr-nav-btn[data-href="/listen"][aria-current="page"],
#hcr-nav .hcr-nav-btn[data-href="/guide"][aria-current="page"] {
  background-color: #1F2469 !important;
  border-color: #1F2469 !important;
  color: #FFFFFF !important;
}
/* ===== end bold primary nav ===== */

/* ===== Radio guide colours restored (Duncan 27 Sep 2026) =====
   Reverts only the colours of the Radio guide nav button to the pre-bold-nav scheme
   (white pill, #C9D0DA border, #16181D text; hover #EEF1F5; current page slate #2F4A63 / #F7F9FC).
   Sizes and weights from the bold nav are unchanged. */
#hcr-nav .hcr-nav-btn[data-href="/guide"] { background: #FFFFFF; border-color: #C9D0DA; color: #16181D; }
#hcr-nav .hcr-nav-btn[data-href="/guide"]:hover { background: #EEF1F5; color: #16181D; }
#hcr-nav .hcr-nav-btn[data-href="/guide"].is-active { background: #2F4A63; border-color: #2F4A63; color: #F7F9FC; }
#hcr-nav .hcr-nav-btn[data-href="/guide"][aria-current="page"] {
  background-color: #2F4A63 !important;
  border-color: #2F4A63 !important;
  color: #F7F9FC !important;
}
/* ===== end Radio guide colours restored ===== */

/* ===== Button colour option 3: CHARCOAL (Duncan 27 Sep 2026) =====
   Contrasting button colour so buttons don't blend with the logo navy #1F2469.
   Changes: What's on (filled), Listen live (outline), Search + Menu icons, open Menu,
   current-page pills in the Menu panel, and the home "Listen live" card.
   Radio guide is NOT changed (keeps the restored grey look above).
   Text contrast: fill #2B2F36 / #FFFFFF; outline text #2B2F36 on white. */
#hcr-nav .hcr-nav-btn[data-href="/whats-on"] { background: #2B2F36; border-color: #2B2F36; color: #FFFFFF; }
#hcr-nav .hcr-nav-btn[data-href="/whats-on"]:hover,
#hcr-nav .hcr-nav-btn[data-href="/whats-on"].is-active { background: #3A3F47; border-color: #3A3F47; color: #FFFFFF; }
#hcr-nav .hcr-nav-btn[data-href="/whats-on"][aria-current="page"] {
  background-color: #2B2F36 !important; border-color: #2B2F36 !important; color: #FFFFFF !important; }
#hcr-nav .hcr-nav-btn[data-href="/whats-on"]:focus-visible { outline-color: #2B2F36; }

#hcr-nav .hcr-nav-btn[data-href="/listen"] { background: #FFFFFF; border-color: #2B2F36; color: #2B2F36; }
#hcr-nav .hcr-nav-btn[data-href="/listen"]:hover { background: #EEF0F2; color: #2B2F36; }
#hcr-nav .hcr-nav-btn[data-href="/listen"].is-active,
#hcr-nav .hcr-nav-btn[data-href="/listen"][aria-current="page"] {
  background-color: #2B2F36 !important; border-color: #2B2F36 !important; color: #FFFFFF !important; }

#hcr-nav .hcr-nav-icon,
#hcr-nav .hcr-nav-menu { color: #2B2F36; }
#hcr-nav .hcr-nav-icon:hover,
#hcr-nav .hcr-nav-menu:hover { background: #EEF0F2; color: #2B2F36; }
#hcr-nav .hcr-nav-menu.is-open { background: #2B2F36; border-color: #2B2F36; color: #FFFFFF; }
#hcr-nav .hcr-nav-menu.has-active:not(.is-open) { border-color: #2B2F36; }
#hcr-nav .hcr-nav-btn:focus-visible { outline-color: #2B2F36; }
#hcr-nav-panel .hcr-nav-btn.is-active,
#hcr-nav-panel .hcr-nav-btn[aria-current="page"] {
  background-color: #2B2F36 !important; border-color: #2B2F36 !important; color: #FFFFFF !important; }

/* Home: Listen live card */
main button[aria-label^="Listen live"] { background-color: #2B2F36 !important; color: #FFFFFF !important; }
main button[aria-label^="Listen live"] * { color: inherit !important; }
main button[aria-label^="Listen live"]:hover { background-color: #3A3F47 !important; }
/* ===== end button colour option 3 ===== */