/* ============================================================
   MohaveCourts Accessibility Overrides (Final sync & fix)
   - Image 1 (nav): keep light text on dark bar
   - Image 2 (hero pills & card buttons): white outline + light text + solid darker fill, photo visible
   - Image 3 (bottom): light text with white-outlined boxes on dark slate bg
   - WCAG: SC 1.4.3 (text ≥ 4.5:1), SC 1.4.11 (non-text boundaries ≥ 3:1)
   ============================================================ */

/* --- GLOBAL FOCUS --- */
:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid #005a9c !important;
  outline-offset: 2px !important;
}

/* --- FORM CONTROLS (non-text boundary + legible text) --- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea,
.form-control {
  border: 2px solid #6a6a6a !important;
  background-clip: padding-box;
  color: #1e1e1e !important;
  background-color: #ffffff !important;
}
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder {
  color: #5a5a5a !important;
  opacity: 1 !important;
}
.form-control:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: #2f2f2f !important;
}
button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
.form-control[disabled] {
  border-color: #7a7a7a !important;
  opacity: 0.7;
}

/* --- BUTTON BOUNDARIES (base) --- */
.btn,
.button,
a.btn,
a.button,
a[role="button"] {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #6a6a6a !important;
}

/* ============================================================
   IMAGE 1 — MAIN NAV BAR (keep working style; FIX escaped selectors)
   ============================================================ */
html body .region-navigation,
html body .sub-header-area,
html body .secondary-nav-area {
  background-color: #3c4f5d !important;    /* darker slate so light text complies */
}
html body .region-navigation .navbar-nav > li > a,
html body .region-navigation .menu > li > a {
  color: #f0f4f8 !important;               /* light grey/white text */
  text-decoration: none;
}
html body .region-navigation .navbar-nav > li > a:hover,
html body .region-navigation .navbar-nav > li > a:focus,
html body .region-navigation .menu > li > a:hover,
html body .region-navigation .menu > li > a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}
html body .region-navigation .caret {
  width: 0; height: 0; display: inline-block; margin-left: 6px;
  border-top: 6px solid #f0f4f8; border-right: 6px solid transparent;
  border-left: 6px solid transparent; border-bottom: 0;
}
html body .region-navigation .navbar-toggle,
html body .region-navigation .navbar-toggler {
  border: 2px solid #6a6a6a !important;
}

/* ============================================================
   IMAGE 2 — HERO PILLS (“Most Popular”) & CARD BUTTONS
   White outline, light text, solid darker fill; keep courthouse photo visible
   ============================================================ */

/* Ensure hero container image is not covered by overlays */
html body .region-banner::before,
html body .region-banner .view::before,
html body .region-banner .block::before,
html body .hero::before,
html body .hero .view::before,
html body .hero .block::before {
  content: none !important;
  background: none !important;
}

/* DO NOT style the hero container background → photo stays visible */
html body .region-banner,
html body .hero {
  background-color: transparent !important;
}

/* Strong catch‑all: anchors/buttons in the hero/banner pills row */
html body .region-banner .views-row a,
html body .region-banner .views-row .btn,
html body .region-banner .views-row .button,
html body .region-banner .views-row .link,
html body .region-banner .views-field a,
html body .region-banner .view-content a,
html body .hero .views-row a,
html body .hero .views-row .btn,
html body .hero .views-row .button,
html body .hero .views-row .link,
html body .hero .views-field a,
html body .hero .view-content a {
  color: #f0f4f8 !important;               /* light grey/white text (Image 1 style) */
  background-color: #445e70 !important;    /* solid darker fill → text passes 4.5:1 */
  border: 2px solid #ffffff !important;    /* white outline */
  border-radius: 8px !important;
  padding: 8px 14px !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Hover/focus for hero pills */
html body .region-banner .views-row a:hover,
html body .region-banner .views-row a:focus,
html body .hero .views-row a:hover,
html body .hero .views-row a:focus,
html body .region-banner .views-row .btn:hover,
html body .region-banner .views-row .btn:focus,
html body .hero .views-row .btn:hover,
html body .hero .views-row .btn:focus {
  color: #ffffff !important;
  background-color: #3b5466 !important;    /* slightly darker interaction state */
  text-decoration: underline !important;
}

/* Titles/icons within pills */
html body .region-banner .views-row .label,
html body .region-banner .views-row .title,
html body .hero .views-row .label,
html body .hero .views-row .title {
  color: #f0f4f8 !important;
}

/* Card “Learn More / Pay Court Fines …” buttons: identical pill style */
html body .feature-cards .card .btn,
html body .feature-cards .card .card-link,
html body .feature-cards .card a.button,
html body .feature-cards .card a,
html body .panel .btn,
html body .panel .card-link,
html body .panel a.button,
html body .panel a {
  color: #f0f4f8 !important;
  background-color: #445e70 !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  display: inline-block !important;
  text-decoration: none !important;
}
html body .feature-cards .card .btn:hover,
html body .feature-cards .card .btn:focus,
html body .feature-cards .card .card-link:hover,
html body .feature-cards .card .card-link:focus,
html body .panel .btn:hover,
html body .panel .btn:focus,
html body .panel a:hover,
html body .panel a:focus {
  color: #ffffff !important;
  background-color: #3b5466 !important;
  text-decoration: underline !important;
}

/* ============================================================
   IMAGE 3 — BOTTOM SLATE SECTION
   Use same light grey/white text + white-outlined boxes on dark slate bg
   ============================================================ */
html body .region-footer,
html body .footer,
html body .footer-main,
html body .footer_first,
html body .footer_second,
html body .footer_third,
html body .footer_fourth,
html body .footer_copyright,
html body .bottom-content,
html body .region-bottom-content {
  background-color: #2f4250 !important;    /* dark slate ensures contrast */
}

/* Bottom links: white outline + light text (same style as Image 1 & 2 pills) */
html body .region-footer a,
html body .footer a,
html body .footer-main a,
html body .footer_first a,
html body .footer_second a,
html body .footer_third a,
html body .footer_fourth a,
html body .footer_copyright a,
html body .bottom-content a,
html body .region-bottom-content a {
  color: #f0f4f8 !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  display: inline-block !important;
  text-decoration: none !important;
}
html body .region-footer a:hover,
html body .footer a:hover,
html body .footer-main a:hover,
html body .footer_first a:hover,
html body .footer_second a:hover,
html body .footer_third a:hover,
html body .footer_fourth a:hover,
html body .footer_copyright a:hover,
html body .bottom-content a:hover,
html body .region-bottom-content a:hover,
html body .region-footer a:focus,
html body .footer a:focus,
html body .footer-main a:focus,
html body .footer_first a:focus,
html body .footer_second a:focus,
html body .footer_third a:focus,
html body .footer_fourth a:focus,
html body .footer_copyright a:focus,
html body .bottom-content a:focus,
html body .region-bottom-content a:focus {
  background-color: rgba(255, 255, 255, 0.12) !important; /* subtle glow on dark bg */
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* ============================================================
   CLEANUP: Don’t let legacy color rules override the new palette
   (WITHOUT touching the hero container background — photo stays)
   ============================================================ */
html body .region-banner,
html body .region-banner *,
html body .hero,
html body .hero *,
html body .feature-cards,
html body .feature-cards *,
html body .footer,
html body .footer *,
html body .footer-main,
html body .footer-main *,
html body .region-bottom-content,
html body .region-bottom-content *,
html body .bottom-content,
html body .bottom-content * {
  color: inherit !important;  /* allow our targeted rules above to set colors */
}

/* --- DARK-BG BORDER VISIBILITY (non-text contrast) --- */
.dark-bg *,
.region-dark *,
.banner-overlay *,
.hero *,
.hero * {
  border-color: #dfe5ea !important;
}