/* ==========================================================================
   ui-polish.css — modern refinement layer over the legacy AchieveDegree
   stylesheet (style.css). Keeps the brand (MuseoSans, #0075b2 / #00365e),
   adds consistent elevation, radius, spacing rhythm, interaction states and
   accessibility affordances. Loaded after style.css so it wins specificity ties.
   ========================================================================== */

:root {
  --ad-blue: #0075b2;
  --ad-navy: #00365e;
  --ad-sky: #97cff5;
  --ad-radius: 10px;
  --ad-radius-sm: 8px;
  --ad-shadow: 0 1px 3px rgba(0, 30, 60, .08), 0 4px 14px rgba(0, 30, 60, .06);
  --ad-shadow-lg: 0 8px 28px rgba(0, 30, 60, .16);
  --ad-muted: #5b6b7a;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Accessibility: visible focus for keyboard users
   -------------------------------------------------------------------------- */
a:focus-visible,
.button:focus-visible,
.input:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 117, 178, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Cards: consistent radius, soft elevation, hover lift on clickable cards
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--ad-radius);
  border: 1px solid rgba(0, 54, 94, .07);
  box-shadow: var(--ad-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}

a.card,
a.card:hover {
  text-decoration: none;
}

a.card:hover,
.article:hover {
  box-shadow: var(--ad-shadow-lg);
  transform: translateY(-2px);
}

.card__img--fixed {
  background: #fff;
  border-radius: var(--ad-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}

.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--ad-blue); }

/* Clamp long descriptions inside grid cards so rows stay even */
a.card .text-block {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons: unified radius, smooth states
   -------------------------------------------------------------------------- */
.button {
  border-radius: var(--ad-radius-sm);
  letter-spacing: .04em;
  transition: background-color .18s ease, box-shadow .18s ease, transform .06s ease, opacity .18s ease;
}

.button:hover {
  box-shadow: 0 4px 12px rgba(0, 54, 94, .28);
  text-decoration: none;
}

.button:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Inputs & selects
   -------------------------------------------------------------------------- */
.input,
select.input {
  border-radius: var(--ad-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input:focus {
  border-color: var(--ad-blue);
  box-shadow: 0 0 0 3px rgba(0, 117, 178, .15);
}

/* Checkboxes: comfortable touch targets, aligned labels */
.checkbox { margin-bottom: .4rem; }
.checkbox__label { padding: .1rem 0; line-height: 1.5; }

/* Search filter checkboxes: funnel-style round indicators on the LEFT of the
   label, no border boxes; navy-filled when selected. */
#filter .checkbox { margin-bottom: .35rem; }
#filter .checkbox__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .15rem 0;
  cursor: pointer;
}
#filter .checkbox__label:hover { color: var(--ad-blue); }
#filter .checkbox__label .fa-check {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 54, 94, .35) !important;
  border-radius: 50%;
  font-size: .55rem;
  color: transparent !important;
  background: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
#filter .checkbox:has(.checkbox__input:checked) .checkbox__label .fa-check {
  background: var(--ad-navy);
  border-color: var(--ad-navy) !important;
  color: #fff !important;
}
#filter .checkbox:has(.checkbox__input:checked) .checkbox__label .fa-check:before { opacity: 1; }

/* --------------------------------------------------------------------------
   Typography: one proportional scale across all pages
   -------------------------------------------------------------------------- */
.section__title { font-size: 1.75rem; }
.banner__title { font-size: 2.25rem; }
.banner__subtitle { font-size: 1.15rem; font-weight: 400; }

.text-block h2 { font-size: 1.35rem; }
.text-block h3 { font-size: 1.15rem; }
.text-block h4 { font-size: 1.05rem; }

.card__title,
.card .card__title.h4 { font-size: 1.05rem; }
.card h2.text-uppercase { font-size: 1.5rem; }
.article__title { font-size: 1.15rem; }
.form__title { font-size: 1.35rem; }

/* Sidebar/filter group labels read as small caps labels, not headings */
#filter h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #41525f;
}
aside .card h3 { font-size: 1rem; }

.school-property__title { font-size: .78rem; }

.section__title { letter-spacing: .02em; margin-bottom: 1.5rem; }

.text-block { line-height: 1.75; }
.text-block p { margin-bottom: 1rem; }
.text-block h2,
.text-block h3 { margin-top: 1.75rem; margin-bottom: .75rem; line-height: 1.3; }
.text-block ul,
.text-block ol { margin-bottom: 1rem; }
.text-block li { margin-bottom: .35rem; }

/* Keep legal/editorial text at a readable measure */
.text-block { max-width: 72ch; }
.card .text-block,
.article .text-block { max-width: none; }

.location { color: var(--ad-muted); font-size: .9rem; }

/* --------------------------------------------------------------------------
   Hero banner
   -------------------------------------------------------------------------- */
.banner .card {
  border-radius: 12px;
  box-shadow: var(--ad-shadow-lg);
}

.banner__title {
  letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0, 30, 60, .35);
}

.banner__subtitle { text-shadow: 0 1px 6px rgba(0, 30, 60, .3); }

/* Alternating section background for visual separation between bands */
.section--white { background: #fff; }

/* Tabs above cards: segmented control whose active tab fuses with the card below */
.nav-pills { display: flex; gap: 4px; }
.nav-pills .nav-item { display: flex; }
.nav-pills .button {
  border-radius: var(--ad-radius-sm) var(--ad-radius-sm) 0 0;
  background: rgba(0, 54, 94, .55);
  color: #fff;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  font-size: .78rem;
  padding: .6rem 1rem;
}
.nav-pills .button:hover {
  background: rgba(0, 54, 94, .75);
  box-shadow: none;
  transform: none;
}
.nav-pills .button.active {
  background: #fff;
  color: var(--ad-navy);
}
.nav-pills .button.active:hover { background: #fff; }
.nav-pills + .tab-content .card {
  border-top-left-radius: 0;
  position: relative;
  z-index: 1;
}

/* Sidebar variant: tighter, allows the long labels to wrap cleanly */
aside .nav-pills .button {
  font-size: .72rem;
  padding: .55rem .5rem;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */
.article {
  border-radius: var(--ad-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ad-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* The legacy stylesheet renders article images with an aspect-ratio padding
   hack (absolute img over a sky-blue placeholder). Keep the mechanism; just
   neutralise the placeholder colour and add a gentle hover zoom. */
.article__img { background-color: #e8f1f8; overflow: hidden; }
.article__img img { transition: transform .25s ease; }
.article:hover .article__img img { transform: scale(1.03); }

.article__title a { text-decoration: none; }
.article__title a:hover { color: var(--ad-blue); }
.article__btn-more { font-weight: 600; }

/* --------------------------------------------------------------------------
   Misc components
   -------------------------------------------------------------------------- */
.pagination__link {
  border-radius: var(--ad-radius-sm);
  transition: background-color .15s ease, color .15s ease;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid rgba(0, 54, 94, .12);
  background: none;
  opacity: 1;
}

#map { border-radius: var(--ad-radius-sm); }

.banners img { border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); }

/* "Back to search" bar on the school page: readable link */
.bg-blue-dark { border-radius: var(--ad-radius-sm); }
.bg-blue-dark a { color: #fff; }
.bg-blue-dark a:hover { color: var(--ad-sky); text-decoration: none; }

/* Footer link states */
.footer a { transition: color .15s ease; }

/* Sidebar widgets breathe */
aside .card + .card,
aside .tab-content + .card { margin-top: 1rem; }

/* Forms */
.form { border-radius: var(--ad-radius); }
.form__title { margin-bottom: 1rem; }

/* Smooth in-page anchor jumps */
html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Layout rhythm: one page width, one card padding, consistent section spacing
   -------------------------------------------------------------------------- */
/* The legacy "--lg" container and the header sprawled to 1560px while the rest
   of the site is 1200px — unify so every band shares the same gutters. */
.container--lg { max-width: 1200px; }
.header__container.container { max-width: 1200px; }

/* Small uppercase "more" links (All Schools, Advanced Search) */
.link-more {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}

/* One card padding everywhere (legacy mixed 1.25rem/1rem) */
.card { padding: 1.5rem; }

.section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.section__title { margin-bottom: 2rem; }
.banner { padding-top: 3rem; padding-bottom: 3.5rem; }

/* Cards inside grids keep a consistent gutter */
.row > [class*="col-"] > .card { margin-bottom: 0; }

/* Footer: compact grouping with a subtle divider before the legal row */
.footer { padding-top: 1.75rem; padding-bottom: 1.25rem; font-size: .88rem; }
.footer__top { margin-bottom: 1rem; }
.footer__top img { max-height: 30px; }
.footer__middle {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.7fr;
  gap: 1rem 3rem;
  margin-bottom: 1.25rem;
}

/* The long Subjects list flows into two columns so the footer stays level */
.footer__middle .footer-navigation:first-child .footer-navigation__list {
  columns: 2;
  column-gap: 2rem;
}

@media (max-width: 767px) {
  .footer__middle { grid-template-columns: 1fr; }
}
.footer-navigation__title { margin-bottom: .4rem; font-size: .95rem; }
.footer-navigation__list li { margin-bottom: .15rem; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: .9rem;
}
.footer__bottom .footer-navigation__list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 2rem;
}
.footer__bottom .footer-navigation__list li { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Equal-height cards in grid rows (featured schools, search results)
   -------------------------------------------------------------------------- */
.card.h-100 { height: 100%; display: flex; flex-direction: column; }
.card__img--fixed { min-height: 6.5rem; }

/* School result cards: tidy internal rhythm and a framed logo area */
.school-card { padding: 1.25rem; }
.school-card .card__img--fixed {
  height: 6.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 54, 94, .08);
}
.school-card .card__title { margin-bottom: .25rem; font-size: 1.1rem; line-height: 1.35; }
.school-card .location {
  margin-bottom: .6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-card .school-property { margin-bottom: 0; }
.school-card .text-block { font-size: .92rem; color: #41525f; }

/* --------------------------------------------------------------------------
   Funnel wizard (.ted-fields comes from the ADX renderer)
   -------------------------------------------------------------------------- */
/* Any option label that carries a .checkmark indicator: text left, indicator
   flush right — regardless of which wrapper the ADX renderer used. */
main .ted-fields label:has(.checkmark) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
}
main .ted-fields label .checkmark {
  margin-left: auto;
  flex-shrink: 0;
  position: static;
}
main .ted-fields input.form-control:not([type="radio"]):not([type="checkbox"]),
main .ted-fields select.form-control {
  border-radius: var(--ad-radius-sm);
}
#progress-bar { border-radius: 999px; }

/* --------------------------------------------------------------------------
   School detail page
   -------------------------------------------------------------------------- */
.school-logo-box {
  width: 120px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0, 54, 94, .1);
  border-radius: var(--ad-radius-sm);
  padding: .5rem;
}
.school-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Scraped program blocks: label-style subject headings, two-column lists */
.programs-block h3 {
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0, 54, 94, .12);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
.programs-block h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #41525f;
}
.programs-block ul {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.1rem;
}
.programs-block li { margin-bottom: .2rem; break-inside: avoid; }
.programs-block li p { margin: 0; font-size: .92rem; }
@media (max-width: 767px) {
  .programs-block ul { columns: 1; }
}

/* Sidebar stays in view on long pages */
@media (min-width: 992px) {
  main aside { position: sticky; top: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .article, .button, .input, .article__img img { transition: none; }
}