/* ============================================================
   MohaveCourts Accessibility Overrides (Final)
   WCAG 2.1 – SC 1.4.11 (non-text boundaries) + SC 1.4.3 (text)
   Strategy: Keep backgrounds; darken text. Hero pills get light backing.
   ============================================================ */

/* --- 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 --- */
.btn,
.button,
a.btn,
a.button,
a[role="button"] {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #6a6a6a !important;
}

/* ============================================================
   A) TOP NAV (dark text on your medium header)
   ============================================================ */
html body .region-navigation .navbar-nav > li > a,
html body .region-navigation .menu > li > a {
  color: #1a1a1a !important;
  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: #000000 !important;
  text-decoration: underline;
}
html body .region-navigation .navbar-brand,
html body .region-navigation .site-name,
html body .region-navigation .site-name a {
  color: #1a1a1a !important;
}
/* Caret triangles */
html body .region-navigation .caret {
  width: 0; height: 0; display: inline-block; margin-left: 6px;
  border-top: 6px solid #1a1a1a; border-right: 6px solid transparent;
  border-left: 6px solid transparent; border-bottom: 0;
}
/* Header toggler boundary */
html body .region-navigation .navbar-toggle,
html body .region-navigation .navbar-toggler {
  border: 2px solid #6a6a6a !important;
}

/* ============================================================
   B) HERO AREA — DO NOT touch container background (keep the image)
   Style ONLY the pill anchors / small chips over the photo.
   ============================================================ */

/* IMPORTANT: No background override on hero containers.
   (Do NOT set background on .hero or .region-banner wrappers.) */

/* Light chip applied ONLY to pill anchors / small items */
html body .hero .views-row li > a,
html body .hero .views-row .btn,
html body .hero .views-row .link,
html body .hero .views-row .views-field a,
html body .region-banner .views-row li > a,
html body .region-banner .views-row .btn,
html body .region-banner .views-row .link,
html body .region-banner .views-field a {
  color: #1a1a1a !important;                      /* dark text */
  background-color: rgba(255, 255, 255, 0.85) !important; /* small light chip */
  border: 2px solid #6a6a6a !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  display: inline-block !important;
}

/* Ensure nested labels/titles/icons inside pills inherit dark text */
html body .hero .views-row .label,
html body .hero .views-row .title,
html body .region-banner .views-row .label,
html body .region-banner .views-row .title {
  color: #1a1a1a !important;
}

/* “How Do I?” yellow button: dark text and strong boundary */
.btn-howdoi,
.howdoi-button,
#block-howdoi a,
#block-howdoi button {
  color: #1a1a1a !important;
  border: 2px solid #3a3a3a !important;
}

/* ============================================================
   C) FEATURE CARDS (Family Court Services / Probation / Small Claims / Traffic)
   Darken small link/button text; avoid white-on-medium backgrounds
   ============================================================ */
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: #1a1a1a !important;
  background-color: #ffffff !important;         /* predictable contrast for small controls */
  border: 2px solid #6a6a6a !important;
}

/* If card headers use medium blue-gray, ensure header text is dark */
html body .feature-cards .card .card-header,
html body .panel .panel-heading {
  color: #1a1a1a !important;
}

/* ============================================================
   D) MIDDLE ICON GRID STRIP (above the news cards)
   If any tile is medium tone, force dark text
   ============================================================ */
html body .home-icon-grid .grid-item.medium-bg a,
html body .home-icon-grid .grid-item.medium-bg .title,
html body .home-icon-grid .grid-item.medium-bg .label,
html body .tile.medium-bg a,
html body .tile.medium-bg .title,
html body .tile.medium-bg .label {
  color: #1a1a1a !important;
}
/* Non-text boundaries for tiles (already dark) */
html body .home-icon-grid .grid-item,
html body .tile {
  border: 2px solid #cbd3da !important;
  border-radius: 4px;
}

/* ============================================================
   E) BOTTOM SLATE-BLUE SECTION (seal + link groups)
   Darken all link text in footer-like regions
   ============================================================ */
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 [class*="footer-"] a,
html body [class*="footer_"] a,
html body .region-bottom-content a,
html body .bottom-content a {
  color: #1a1a1a !important;
  text-decoration: none;
}
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 [class*="footer-"] a:hover,
html body [class*="footer_"] a:hover,
html body .region-bottom-content a:hover,
html body .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 [class*="footer-"] a:focus,
html body [class*="footer_"] a:focus,
html body .region-bottom-content a:focus,
html body .bottom-content a:focus {
  color: #000000 !important;
  text-decoration: underline;
}

/* Titles/labels within bottom groups */
html body .footer-main .title,
html body .footer-main .label,
html body .footer-main .menu a,
html body .footer-main .links a,
html body .footer-main .item a,
html body .region-bottom-content .title,
html body .region-bottom-content .label,
html body .bottom-content .title,
html body .bottom-content .label {
  color: #1a1a1a !important;
}

/* ============================================================
   F) CLEANUP: Neutralize old “make everything white” rules
   ONLY in problem containers (so our dark text wins)
   ============================================================ */
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;
}

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