:root{
  --tu-white: var(--color-white, #fff);
  --tu-green: rgb(var(--color-fill, 40 92 77));
  --tu-ink:   rgb(var(--color-text-base, 17 24 39));
  --tu-rule:  rgb(var(--color-border, 229 231 235));          /* decorative: card edge */
  --tu-green-dark:   color-mix(in srgb, var(--tu-green) 85%, #000);
  --tu-focus:        color-mix(in srgb, var(--tu-green) 14%, transparent);
  --tu-label:        color-mix(in srgb, var(--tu-ink) 70%, var(--tu-white));  /* 6.6:1 */
  --tu-border:       color-mix(in srgb, var(--tu-ink) 60%, var(--tu-white));  /* 4.7:1 */
  --tu-border-hover: color-mix(in srgb, var(--tu-ink) 75%, var(--tu-white));
  --tu-field:        var(--tu-white);
  --tu-on-dark-label:color-mix(in srgb, var(--tu-white) 85%, transparent);
  --tu-on-dark-hover:color-mix(in srgb, var(--tu-green) 8%, var(--tu-white));
  --tu-shadow:       color-mix(in srgb, var(--tu-ink) 16%, transparent);
  --tu-shadow-soft:  color-mix(in srgb, var(--tu-ink) 4%, transparent);
  --tu-radius: 0.25rem;
}

#views-exposed-form-programs-block-5 {margin: auto;}

.views-exposed-form {max-width: 900px; margin: auto;}
/* ---------------- shared ---------------- */
.views-exposed-form{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem 1rem;
  align-items:flex-end;
  justify-content:flex-start;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding-bottom:0;                    /* theme: .views-exposed-form{padding-bottom:30px} */
}
views-exposed-form .js-form-item,
views-exposed-form .form-item,
views-exposed-form .form-actions{
  display:block;
  float:none;
  clear:none;
  margin:0;
  padding:0;
  min-width:0 !important;              /* beats: .views-exposed-form .form-actions{min-width:33% !important} */
  max-width:none;
}
views-exposed-form label{
  display:block;
  margin:0 0 .4rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tu-label);
}

views-exposed-form select{
  -webkit-appearance:none; appearance:none;
  display:block;
  float:none;                          /* theme .form-select{float:left} is not flagged; we win on specificity */
  width:100%;
  max-width:none !important;           /* beats: #edit-field-tags-target-id--2{max-width:260px}  (ID, not flagged; flag alone suffices) */
  box-sizing:border-box;
  min-height:3.25rem;
  margin:0;
  padding:.7rem 2.6rem .7rem 1rem !important;  /* beats: .views-exposed-form .form-select{padding:4px !important} */
  font:inherit;
  font-size:1rem;                      /* 16px: no iOS zoom on focus */
  line-height:1.4;
  color:var(--tu-ink);
  background-color:var(--tu-field);
  border:2px solid var(--tu-border) !important;  /* beats: .views-exposed-form .form-select{border:1px solid gray !important} */
  border-radius:var(--tu-radius);
  cursor:pointer;
  /* appearance:none removes the arrow; draw one from the label token */
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--tu-label) 50%),
    linear-gradient(135deg, var(--tu-label) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 50%, calc(100% - .95rem) 50%;
  background-size:.4rem .4rem, .4rem .4rem;
  background-repeat:no-repeat;
  transition:border-color .15s, box-shadow .15s;
}
views-exposed-form select:hover{ border-color:var(--tu-border-hover) !important; }   /* beats: the border rule above */
views-exposed-form select:focus{
  outline:none;
  border-color:var(--tu-green) !important;                                             /* beats: the border rule above */
  box-shadow:0 0 0 3px var(--tu-focus);
}
views-exposed-form select:focus-visible{ outline:2px solid var(--tu-green); outline-offset:2px; }

/* square, uppercase, 1px border: the theme's .btn-tulane / .btn-green */
views-exposed-form input[type="submit"],
views-exposed-form button[type="submit"]{
  -webkit-appearance:none; appearance:none;
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0 !important;                 /* beats: .views-exposed-form .js-form-submit{margin:-4px 10px 0 10px !important} */
  height:auto;
  min-height:3.25rem;
  padding:.7rem 1.75rem;
  font:inherit;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tu-white);
  background:var(--tu-green);
  border:1px solid var(--tu-green) !important;   /* beats: .views-exposed-form .js-form-submit{border-color:white !important} */
  border-radius:0;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none;
  transition:background .15s, border-color .15s;
}
views-exposed-form input[type="submit"]:hover,
views-exposed-form button[type="submit"]:hover{
  background:var(--tu-green-dark);
  border-color:var(--tu-green-dark) !important;  /* beats: the border rule above */
}
views-exposed-form input[type="submit"]:focus-visible,
views-exposed-form button[type="submit"]:focus-visible{
  outline:3px solid var(--tu-focus); outline-offset:2px;
}

/* ---------------- the card ---------------- */
.tu-filter-card.tu-filter-card{
  background:var(--tu-white);
  border:1px solid var(--tu-rule);
  border-top:4px solid var(--tu-green);
  border-radius:var(--tu-radius);
  padding:1.25rem;
  box-shadow:0 1px 2px var(--tu-shadow-soft), 0 10px 28px -14px var(--tu-shadow);
}

/* ---------------- STACKED: narrow sidebar column ---------------- */
.tu-filter--stack.tu-filter--stack{
  flex-direction:column;
  align-items:stretch;
  gap:.85rem;
}
.tu-filter--stack.tu-filter--stack > .js-form-item,
.tu-filter--stack.tu-filter--stack > .form-item,
.tu-filter--stack.tu-filter--stack > .form-actions{ width:100%; flex:0 0 auto; }
.tu-filter--stack.tu-filter--stack .form-actions{ margin-top:.35rem; }

/* ---------------- ROW: wide box above results ---------------- */
.tu-filter--row.tu-filter--row{ flex-direction:row; }
.tu-filter--row.tu-filter--row > .js-form-item,
.tu-filter--row.tu-filter--row > .form-item{ flex:1 1 180px; width:auto; }   /* selects share the row equally */
.tu-filter--row.tu-filter--row > .form-actions{ flex:0 0 auto; width:auto; margin-left:auto; }   /* if the row wraps (640–900px) the lone button sits at the right edge, not hanging left */
.tu-filter--row.tu-filter--row input[type="submit"],
.tu-filter--row.tu-filter--row button[type="submit"]{ width:auto; min-width:140px; }

/* ---------------- ON DARK: the green band on the homepage ---------------- */
.tu-filter--on-dark.tu-filter--on-dark label{ color:var(--tu-on-dark-label); }
.tu-filter--on-dark.tu-filter--on-dark select{
  background-color:var(--tu-white);
  border-color:var(--tu-white) !important;       /* beats: .views-exposed-form .form-select{border … !important} */
}
.tu-filter--on-dark.tu-filter--on-dark select:focus{
  border-color:var(--tu-white) !important;       /* beats: same */
  box-shadow:0 0 0 3px var(--tu-on-dark-label);
}
.tu-filter--on-dark.tu-filter--on-dark input[type="submit"],
.tu-filter--on-dark.tu-filter--on-dark button[type="submit"]{
  background:var(--tu-white);
  color:var(--tu-green);
  border-color:var(--tu-white) !important;       /* beats: .views-exposed-form .js-form-submit{border-color:white !important} */
}
.tu-filter--on-dark.tu-filter--on-dark input[type="submit"]:hover,
.tu-filter--on-dark.tu-filter--on-dark button[type="submit"]:hover{ background:var(--tu-on-dark-hover); }

/* ---------------- HOMEPAGE BAND ----------------
   The theme lays this one form out by ID with !important:
     #views-exposed-form-programs-block-2 { display:flex; flex-direction:column; align-items:center;
       justify-content:center; gap:1rem; width:100%; max-width:64rem; margin:auto }
     #views-exposed-form-programs-block-2 .form-item, #edit-actions
       { display:inline-block; float:none; clear:none; margin:0; width:100%|auto; max-width:24rem|none }
   Same importance, so only a selector of at least ID specificity can win.
   These mirror the --row / --stack rules above for that one form.
   Delete this whole section when the theme rules above are removed. */
#views-exposed-form-programs-block-2.tu-filter{
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:.85rem 1rem !important;
  max-width:none !important;
  margin:0 !important;
}
#views-exposed-form-programs-block-2.tu-filter--row{ flex-direction:row !important; }
#views-exposed-form-programs-block-2.tu-filter--stack{ flex-direction:column !important; align-items:stretch !important; gap:.85rem !important; }
#views-exposed-form-programs-block-2.tu-filter .js-form-item,
#views-exposed-form-programs-block-2.tu-filter .form-item,
#views-exposed-form-programs-block-2.tu-filter #edit-actions{ display:block !important; max-width:none !important; }
#views-exposed-form-programs-block-2.tu-filter--row .js-form-item,
#views-exposed-form-programs-block-2.tu-filter--row .form-item{ width:auto !important; flex:1 1 180px; }
#views-exposed-form-programs-block-2.tu-filter--row #edit-actions{ width:auto !important; margin-left:auto !important; }
#views-exposed-form-programs-block-2.tu-filter--stack .js-form-item,
#views-exposed-form-programs-block-2.tu-filter--stack .form-item,
#views-exposed-form-programs-block-2.tu-filter--stack #edit-actions{ width:100% !important; }

/* ---------------- small screens: rows collapse to stacked ---------------- */
@media (max-width:640px){
  .tu-filter--row.tu-filter--row > *{ flex:1 1 100%; width:100%; }
  #views-exposed-form-programs-block-2.tu-filter--row > *{ width:100% !important; }   /* beats: the ID rules above */
  .tu-filter--row.tu-filter--row input[type="submit"],
  .tu-filter--row.tu-filter--row button[type="submit"]{ width:100%; }
  /* the green band has no side padding on phones; keep the fields off the screen edge */
  .tu-filter--on-dark.tu-filter--on-dark{ padding:0 1.25rem; }
}