/* ============================================================
   MohaveCourts — Uniform top band + hero "Most Popular" pills (clean)
   - KEEP Court Administration pills/dropdowns AS-IS
   - Top band: single uniform lighter slate
   - Most Popular pills: filled dark slate, light text, same size, one line
   - Reduce !important use; keep robust focus styling
   ============================================================ */

/* --- ACCESSIBLE FOCUS --- */
:focus-visible {
  outline: 3px solid #005a9c;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   1) TOP BAND — make EVERYTHING at the very top the same color
   ------------------------------------------------------------ */

/* Apply one lighter slate to the whole strip */
.site-header,
header,
#header,
.header,
.page-header,
.region-header,
.region-branding,
.branding,
.header-top,
.header-bottom,
.region-navigation,
.sub-header-area,
.secondary-nav-area,
.navbar,
.navbar-default,
.region-navigation .navbar,
.region-navigation .container,
.region-navigation .navbar-header,
.region-navigation .navbar-collapse,
.region-navigation .block-search,
.region-search,
.block-search,
.search-block-form {
  background-color: #5f7383;    /* lighter slate band */
  background-image: none;
  border: 0;
  box-shadow: none;
}

/* Ensure inner wrappers don’t inject darker patches */
.region-navigation .navbar-nav > li,
.region-navigation .menu > li {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------
   2) NAV PILLS — leave as-is (they're already correct)
   ------------------------------------------------------------ */
.region-navigation .navbar-nav > li > a,
.region-navigation .menu > li > a {
  color: #f0f4f8;
  background-color: #445e70;     /* dark slate fill */
  border: 2px solid #ffffff;     /* single white outline */
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.25;
  display: inline-block;
  text-decoration: none;
  background-clip: padding-box;
  margin: 4px 6px;
}
.region-navigation .navbar-nav > li > a:hover,
.region-navigation .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: #3b5466;
  text-decoration: underline;
}
/* ============================================================
   SUB-PAGE TITLES — dark band + light text for <h2 class="page-header">
   (keeps previous fixes; minimal, validator-friendly)
   ============================================================ */

/* The title band */
h2.page-header {
  /* band background and basic styling */
  background-color: #5f7383;      /* lighter slate band, matches site header strip */
  color: #f0f4f8;                 /* light title text on dark band */
  display: block;                 /* ensure full-width band */
  padding: 10px 16px;             /* pill-like comfortable spacing */
  margin: 0 0 16px;               /* separate from content below */
  border-radius: 6px;             /* subtle rounding, consistent with pills */
  border: 2px solid #dfe5ea;      /* light border to meet non-text contrast (optional) */
  line-height: 1.25;              /* consistent with nav/hero text rhythm */
  font-weight: 600;               /* readable weight on dark band */
  text-shadow: none;              /* keep crisp text */
  box-shadow: none;               /* avoid extra outlines/glows */
}

/* Title text inside the band (if wrapped in a <span>) */
h2.page-header > span {
  color: inherit;                 /* use the light color from the parent */
  display: block;                 /* ensure text respects the band padding */
}

/* If titles sometimes render as links, keep them light and accessible */
h2.page-header a {
  color: #f0f4f8;                 /* light link text on dark band */
  background: transparent;
  border: 0;
  text-decoration: none;
}
h2.page-header a:hover,
h2.page-header a:focus {
  color: #ffffff;                 /* slightly brighter on hover/focus */
  text-decoration: underline;
}