/*
 * The few rules the borrowed design does not already carry.
 *
 * findinguni's sidebar is a JavaScript checkbox tree; this site's is a plain list
 * of links to other canonical collection URLs, so it needs list styling the theme
 * has no rule for. Everything else here is pagination and small spacing. Nothing
 * in this file changes a theme component — new selectors only.
 */
.filter-section { margin-bottom: 22px; }
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.filter-list::-webkit-scrollbar { width: 6px; }
.filter-list::-webkit-scrollbar-thumb { background: var(--fj-border); border-radius: 3px; }

.filter-link {
  display: block; padding: 7px 10px; border-radius: 4px; font-size: 14px;
  color: var(--fj-text); text-decoration: none; line-height: 1.35;
}
.filter-link:hover { background: var(--fj-tint); color: var(--fj-brand); }
.filter-link.is-active {
  background: var(--fj-tint); color: var(--fj-deep); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--fj-orange);
}

.collection-intro { margin: 4px 0 8px; }

.collection-pager { margin: 28px 0 8px; }
.collection-pager nav { display: flex; justify-content: center; }
.collection-pager a, .collection-pager span {
  display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 4px;
  border: 1px solid var(--fj-border); background: #fff; color: var(--fj-brand);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.collection-pager a:hover { border-color: var(--fj-brand); background: var(--fj-tint); }
.collection-pager .cursor-default span,
.collection-pager span[aria-current="page"] { background: var(--fj-deep); border-color: var(--fj-deep); color: #fff; }

.collection-related h2 { font-size: 20px; font-weight: 600; margin: 28px 0 4px; }

/* ==========================================================================
   Professional polish
   A directory page is read as a table, not looked at as a poster. These rules
   do the three things that separate a considered listing from a generic one:
   a logo slot that is the same size and shape on every row whatever the logo,
   meta labels that align into readable columns, and hover that changes a border
   rather than lifting the card off the page.
   ========================================================================== */

/* ---- Logo slot -----------------------------------------------------------
   Fixed square, white, thin border. Logos arrive as wide wordmarks, tall crests
   and square favicons; without a fixed box the rows jump about. The monogram
   sits underneath and is simply covered when a real logo loads, so the slot is
   never empty and never reflows. */
.uni-h-logo-wrapper, .program-logo-wrapper {
  position: relative;
  width: 46px; height: 46px;
  padding: 5px;
  border: 1px solid var(--fj-border);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.uni-h-monogram {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--fj-tint);
  color: var(--fj-deep);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.uni-h-logo-img {
  position: absolute; inset: 5px;
  width: calc(100% - 10px); height: calc(100% - 10px);
  object-fit: contain;
  background: #fff;
  opacity: 0;                       /* raised by the img's own onload */
  transition: opacity .2s ease;
}

/* ---- Cards ---------------------------------------------------------------
   Flat, bordered, and they respond by darkening their edge. No lift, no shadow
   bloom: thirty cards that all rise on hover is restless. */
.card, .university-card-horizontal, .program-card, .scholarship-card {
  border: 1px solid var(--fj-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.card:hover, .university-card-horizontal:hover, .program-card:hover, .scholarship-card:hover {
  border-color: var(--fj-brand) !important;
  transform: none !important;
}

/* ---- Meta rows -----------------------------------------------------------
   Label above value, label small and quiet, value the thing the eye lands on.
   Consistent column widths are what make a list scannable down the page rather
   than readable only across it. */
.uni-h-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 14px 20px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fj-border);
}
.uni-h-detail { display: grid; gap: 2px; min-width: 0; }
.detail-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fj-muted);
}
.detail-value {
  font-size: 14px; font-weight: 600; color: var(--fj-text);
  overflow: hidden; text-overflow: ellipsis;
}

.uni-h-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.program-title { letter-spacing: -.012em; }

/* ---- Page furniture ------------------------------------------------------ */
.results-title { font-size: 28px; line-height: 1.25; margin: 0; }
@media (max-width: 767px) { .results-title { font-size: 23px; } }

.breadcrumbs { font-size: 12.5px; color: var(--fj-muted); gap: 6px; margin: 14px 0 10px; }
.breadcrumbs a { color: var(--fj-muted); }
.breadcrumbs a:hover { color: var(--fj-brand); }
.breadcrumb-current { color: var(--fj-text); font-weight: 600; }

.search-filters {
  border: 1px solid var(--fj-border);
  border-radius: 4px;
  background: #fff;
  padding: 18px 16px;
}
.filter-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fj-muted); margin: 0 0 8px;
}
.search-page { background: var(--fj-section); padding-bottom: 48px; }

/* The subject panel is the site's map of its own catalogue, so it gets room to
   be one: deep enough to show a whole branch without scrolling to find it. */
.filter-list { max-height: 560px; }
.filter-link--child { padding-left: 22px; font-size: 13.5px; color: var(--fj-muted); }
.filter-link--child:hover, .filter-link--child.is-active { color: var(--fj-deep); }
.filter-link--more { font-weight: 600; color: var(--fj-brand); }