/**
 * Theme accessibility overrides (Level Access Oct 2026 scan + manual audit).
 * Plain CSS, enqueued after app.css by app/a11y-theme.php, so no Mix build is
 * needed. Each section names the findings it addresses.
 */

/* 1. Focus indicator: Tailwind ring-blue-500 (#4299E1) is under 3:1 on the
 *    site's light greys and on black (law-E2/E78/E97/E141/E43/E149). Use a
 *    dark blue ring with a white halo so it shows on any background. */
:root {
  --a11y-focus: #0067b5;
}

.focus\:ring-blue-500:focus,
.focus\:ring:focus {
  --tw-ring-color: var(--a11y-focus) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.hs-form input[type="checkbox"]:focus,
.hs-form input[type="radio"]:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff;
}

/* 2. Grey text: gray-500 (#787878) is 4.41:1 on white and 4.05:1 on gray-100
 *    (rule 107: captions, ABA table headers, "View profile" hover, filter
 *    placeholders - law-E41/E54/E59/E166/E271). #6b6b6b is 5.3:1 / 4.9:1. */
.text-gray-500,
.hover\:text-gray-500:hover,
.group:hover .group-hover\:text-gray-500,
.prose figcaption,
.wp-caption-text,
figcaption.wp-element-caption {
  color: #6b6b6b !important;
}

input::placeholder,
textarea::placeholder {
  color: #6b6b6b;
  opacity: 1;
}

/* Faculty/pathways filter field borders were #E3E3E3 (1.3:1, law-E44). */
.choices__inner,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
input[type="search"],
input[type="text"].border-gray-200,
input[type="text"].border-gray-300 {
  border-color: #767676 !important;
}

/* Selected filter options (#EC3B4D on #F5F5F5, 3.6:1 - law-E55). */
.choices__list--multiple .choices__item,
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.select2-results__option--highlighted {
  color: #a3121f !important;
}

/* 3. Red text on the dark (gray-900 #1f1f1f / #292929) panels: #D41B2C is
 *    2.8:1 (rule 107, law-E65 "Download Program Overview"). */
#download-overview .text-red-600,
.bg-gray-900 .text-red-600,
.bg-gray-800 .text-red-600,
.bg-black .text-red-600 {
  color: #ff7a85 !important;
}

/* 4. Inline content links must not rely on colour alone (law-E74). */
.prose a:not(.btn):not([class*="bg-"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 5. Breadcrumbs (app/a11y-breadcrumbs.php renders <nav><ol>). Keep the old
 *    inline look, and give the crumbs a dark backing when they sit on a photo
 *    banner (law-E1/E11/E17/E91/E93/E270 - 2.0 to 4.0:1 over images). */
.breadcrumb-nav ol {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-nav li {
  margin: 0;
  padding: 0;
}

.breadcrumb-nav li::before,
.breadcrumb-nav li::marker {
  content: none;
}

.text-white .breadcrumb-nav ol,
.bg-cover .breadcrumb-nav ol {
  padding: 0.125rem 0.5rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
}

.text-white .breadcrumb-nav a,
.bg-cover .breadcrumb-nav a,
.text-white .breadcrumb-nav .breadcrumb_last,
.bg-cover .breadcrumb-nav .breadcrumb_last {
  color: #fff !important;
}

/* 6. HubSpot form on the dark FlexJD panel (law-E30/E31/E32/E33/E34/E35/E36/
 *    E66/E67): field text and caret were #33475B on #292929, error text and
 *    privacy link under 4.5:1. */
.bg-gray-900 .hs-form input,
.bg-gray-900 .hs-form select,
.bg-gray-900 .hs-form textarea {
  color: #1f1f1f !important;
  background-color: #fff !important;
  caret-color: #1f1f1f;
}

.hs-form select option {
  color: #1f1f1f;
  background: #fff;
}

.hs-form select option:checked,
.hs-form select option:focus {
  color: #fff;
  background: #545454;
}

.bg-gray-900 .hs-form .hs-error-msg,
.bg-gray-900 .hs-form .hs-error-msgs label,
.bg-gray-900 .hs-form .hs-main-font-element[role="alert"] {
  color: #ff9a9a !important;
}

.bg-gray-900 .hs-form a,
.bg-gray-900 .hs-richtext a {
  color: #ff9a9a !important;
  text-decoration: underline;
}

.bg-gray-900 .hs-form a:hover,
.bg-gray-900 .hs-richtext a:hover {
  color: #fff !important;
}

/* 7. Reflow at 320px: don't clip card copy (law-E164). */
@media (max-width: 400px) {
  .program-card p,
  .line-clamp-3,
  .line-clamp-4 {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .program-card {
    height: auto !important;
  }
}

/* 8. Filter combobox: the highlighted option was only a faint grey fill
 *    (law-E60). */
.filter-select [role="option"].bg-gray-200 {
  outline: 2px solid var(--a11y-focus);
  outline-offset: -2px;
}

/* 9. Stretched-link cards (components/card, profile-card): the link wraps only
 *    the title, its ::after covers the card so the whole card stays clickable
 *    (law-E130/E133/E162/E163/E190/E314). Focus ring drawn on the card. */
.a11y-card {
  position: relative;
}

.a11y-stretched-link {
  color: inherit;
  text-decoration: none;
}

.a11y-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.a11y-stretched-link:focus,
.a11y-stretched-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.a11y-card:focus-within {
  outline: 3px solid var(--a11y-focus);
  outline-offset: 2px;
}

/* 10. Headings promoted one level by the content-fix plugin (h3->h2 etc. to
 *     remove level skips, rule 402 / heading-order) keep their old look. */
.prose .a11y-look-h3,
.a11y-look-h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 400;
}

.prose .a11y-look-h4,
.a11y-look-h4 {
  font-size: 1em;
  line-height: 1.5;
  font-weight: 600;
  color: #1f1f1f;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose .a11y-look-h5,
.prose .a11y-look-h6,
.a11y-look-h5,
.a11y-look-h6 {
  font-size: 1em;
  line-height: 1.5;
  font-weight: 600;
}

/* 11. Filter "Clear filters" button is disabled for 2s while results load and
 *     the faded state was 4.0:1 (/faculty/, /pathways/). */
button.btn-sm:disabled,
button.btn-sm[disabled] {
  opacity: 1 !important;
  color: #545454 !important;
}

/* 12. Bold run-in titles turned into real headings by the content-fix plugin
 *     (Student Honors, law-E23/E24) keep the look of bold body text. */
.prose .a11y-look-p,
.a11y-look-p {
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: inherit;
  margin: 1.25em 0 0.25em;
}

/* 13. The home page hides its .no-banner block (custom.scss), which also hid
 *     the page's only <h1> from screen readers (law-E99, page-has-heading-one).
 *     Keep it out of sight but in the accessibility tree. */
body.page-id-49087 .no-banner {
  display: block !important;
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 14. Media cards use an empty stretched link labelled by the card heading
 *     (batch 17, rule 239). The theme hides empty links (a:empty), which would
 *     remove the click area, so keep this one rendered. */
.a11y-card > .a11y-stretched-link:empty {
  display: inline !important;
}

/* 15. Any other link inside a stretched-link card (e.g. an email typed into a
 *     profile excerpt) sits above the card overlay so it stays clickable. */
.a11y-card a:not(.a11y-stretched-link) {
  position: relative;
  z-index: 2;
}