/* ============================================================
   Taalam — University & Program Finder
   Built on the Taalam Design System (../eligibility-checker/
   css/design-system/). This file adds page-specific layout only;
   all colors, type and spacing come from the design tokens.
   ============================================================ */

/* Shared site chrome (header/nav). @import must precede all other rules. */
@import "./_header.css";

* { box-sizing: border-box; }

body {
  background: var(--surface-cream);
  font-family: var(--font-sans);
}

/* Header sits on the cream so the page reads as one warm surface. */
.site-header { background: rgba(246, 244, 238, 0.88); }

/* =========================================================
   Hero
   ========================================================= */

.finder-hero {
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(255, 140, 0, 0.14), transparent 60%),
    var(--surface-cream);
  border-bottom: 1px solid var(--border-subtle);
}

.finder-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--gutter) 44px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 7px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--neutral-800);
  box-shadow: var(--shadow-xs);
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-500);
}

.finder-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(38px, 6vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0 0 14px;
  max-width: 16ch;
}

.finder-hero .lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 56ch;
  margin: 0;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--neutral-800);
}

.hero-points svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--orange-600, var(--orange-500));
}

@media (max-width: 640px) {
  .finder-hero__inner { padding: 36px var(--gutter) 32px; }
  .finder-hero h1 { max-width: none; }
  .hero-points { gap: 8px; flex-direction: column; }
}

/* Honest disclosure about partner ranking — not fine print. */
.partner-disclosure {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--surface-accent-soft);
  border: 1px solid var(--orange-200);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--neutral-800);
}

.partner-disclosure svg { flex: none; margin-top: 3px; color: var(--orange-700); }

/* =========================================================
   Layout: filter rail + results
   ========================================================= */

.finder-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px var(--gutter) 80px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 900px) {
  .finder-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* =========================================================
   Filters
   ========================================================= */

.filters {
  /* Deliberately static, not sticky: this panel has enough controls (country,
     level, field, language, intake, tuition, checkboxes) to run taller than
     the viewport on most screens. A sticky panel pins at a fixed vertical
     position with no way to scroll its own overflow into view, so anything
     below the fold (in practice, "Clear all") becomes permanently
     unreachable. Scrolling with the page like any normal sidebar guarantees
     every control stays reachable. */
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-xs);
}

@media (max-width: 900px) {
  .filters {
    position: static;
    margin-bottom: 20px;
    max-height: 0;
    padding-block: 0;
    border-width: 0;
    overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out);
  }
  .filters.open {
    max-height: 1400px;
    padding-block: 20px;
    border-width: 1px;
  }
}

.filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.filters-head h2 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin: 0;
}

.btn-reset {
  background: none;
  border: none;
  padding: 6px 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--link);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.btn-reset:hover { text-decoration: underline; }
.btn-reset:focus-visible { box-shadow: var(--ring); outline: none; }
.btn-reset[hidden] { display: none; }

.filter-group { border: none; margin: 0 0 20px; padding: 0; }
.filter-group:last-of-type { margin-bottom: 0; }

.filter-group legend,
.filter-label {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

/* Native select — styled but keeps full keyboard/screen-reader behaviour */
.filter-select {
  width: 100%;
  min-height: 44px;              /* 44px touch target */
  padding: 10px 36px 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--text-strong);
  background-color: var(--surface-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366625a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  appearance: none;
  cursor: pointer;
}
.filter-select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--border-accent); }

/* Checkbox rows */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;              /* 44px touch target */
  padding: 2px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}
.check-row:hover { background: var(--surface-sunken); }
.check-row input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-row input:focus-visible { outline: none; box-shadow: var(--ring); }

/* Tuition range */
.range-value {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  margin-bottom: 8px;
}
.range-input {
  width: 100%;
  height: 44px;                  /* 44px touch target */
  accent-color: var(--accent);
  cursor: pointer;
}
.range-input:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.range-hint {
  font-size: var(--fs-caption);
  color: var(--text-subtle);
  margin-top: 2px;
}

/* Mobile filter toggle */
.filters-toggle {
  display: none;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .filters-toggle { display: inline-flex; } }

/* =========================================================
   Results toolbar
   ========================================================= */

.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.result-count {
  font-size: var(--fs-body);
  color: var(--text-body);
  margin: 0;
}
.result-count strong { color: var(--text-strong); font-weight: var(--fw-semibold); }

.sort-wrap { display: flex; align-items: center; gap: 8px; }
.sort-wrap label { font-size: var(--fs-body-sm); color: var(--text-muted); white-space: nowrap; }
.sort-wrap .filter-select { width: auto; min-width: 190px; }

/* Search box */
.search-wrap { position: relative; margin-bottom: 20px; }
.search-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px 14px 46px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}
.search-input::placeholder { color: var(--text-subtle); }
.search-input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--border-accent); }
.search-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

/* =========================================================
   Program cards
   ========================================================= */

.results-list { display: grid; gap: 16px; }

.program-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.program-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }

/* Partner listings are visually distinct AND labelled — never ranked
   silently. The badge is what makes the ordering honest. */
.program-card--partner { border-color: var(--orange-200); background: linear-gradient(180deg, var(--orange-50) 0%, var(--surface-card) 96px); }

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.card-head-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0; /* lets the text block truncate/wrap instead of overflowing */
}

/* Real partner logos (see PARTNER_LOGOS in app.js) — a small square badge,
   never larger or more prominent than the university's own name in text. */
.card-logo {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  background: #fff;
}
.card-logo--dark { background: var(--neutral-900, #1f2423); border-color: var(--neutral-900, #1f2423); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge--partner { background: var(--orange-600); color: var(--neutral-0); }
.badge svg { flex: none; }

.card-university {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-program {
  font-size: var(--fs-h3, 20px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin: 2px 0 10px;
}

.card-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* Fact grid */
.card-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 20px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.fact dt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.fact dd {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  margin: 0;
  line-height: 1.45;
}

/* Tuition gets visual weight — it's the field students scan for */
.fact--tuition dd { font-size: 17px; font-weight: var(--fw-bold); color: var(--navy-700); }
.fact--tuition .tuition-free { color: var(--green-500); }

/* The "we don't know" state. Never a guessed number. */
.unknown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-style: normal;
}
.unknown svg { flex: none; color: var(--text-subtle); }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

@media (max-width: 560px) {
  .card-actions .tl-btn { flex: 1 1 100%; }
}

/* =========================================================
   Load more — paginates instead of rendering every match at once
   ========================================================= */

.load-more-row {
  display: flex;
  justify-content: center;
  margin: 28px 0;
}

/* =========================================================
   Empty state — a route forward, never a dead end
   ========================================================= */

.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-xl);
}
.empty-state svg { color: var(--text-subtle); margin-bottom: 16px; }
.empty-state h3 {
  font-size: var(--fs-h4, 18px);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0 0 8px;
}
.empty-state p {
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 20px;
}
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* =========================================================
   Bottom CTA
   ========================================================= */

.finder-cta {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}
.finder-cta-inner {
  background: var(--surface-deep);
  border-radius: var(--radius-2xl);
  padding: 44px 32px;
  text-align: center;
}
.finder-cta h2 {
  font-size: var(--fs-h2, 26px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--neutral-0);
  margin: 0 0 10px;
}
.finder-cta p {
  font-size: var(--fs-body);
  color: var(--text-on-navy);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 24px;
}
.finder-cta .empty-actions { justify-content: center; }

/* =========================================================
   Footer
   ========================================================= */

.finder-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 32px var(--gutter);
}
.finder-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.finder-footer-brand { display: flex; align-items: center; gap: 10px; }
.finder-footer-brand img { height: 28px; width: auto; }
.finder-footer-links { display: flex; align-items: center; gap: 20px; }
.finder-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 2px;
  border-radius: var(--radius-sm);
}
.finder-footer-links a:hover { color: var(--text-strong); }
.finder-footer-links a:focus-visible { outline: none; box-shadow: var(--ring); }

@media (min-width: 768px) { .finder-footer-inner { flex-direction: row; } }

/* =========================================================
   Utilities
   ========================================================= */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users shouldn't tab through the whole nav */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--surface-deep);
  color: var(--neutral-0);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 16px; }

[hidden] { display: none !important; }

/* Respect users who asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Fee detail lines ---------------------------------------------------
   A per-semester fee is shown as the source states it, with the annual
   equivalent underneath — students budget by year, universities bill by
   semester, and hiding either one invites a nasty surprise. */
.fee-annual {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.fee-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--text-muted);
}

/* Why a figure is missing. Never leave "Not confirmed" unexplained when we
   actually know the reason. */
.unknown-why {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--text-muted);
}

/* Every card's closing line — who arranges admission (or the honest "not a
   partner, but we still help"), always paired with a way to act on it. */
.card-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.5;
}
.card-note a {
  color: var(--link);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.card-note a:hover { text-decoration: underline; }
.card-note a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

.card-note--partner {
  background: var(--surface-accent-soft);
  color: var(--neutral-800);
}
.card-note--general {
  background: var(--surface-sunken);
  color: var(--text-muted);
}