/* College Finder — custom touches layered on top of Bootstrap 5.3 */

:root {
  --cf-accent: #19715b;
  --cf-accent-dark: #105641;
  --cf-accent-rgb: 25, 113, 91;

  /* Type scale — 5 steps, everything snaps to one of these */
  --cf-fs-caption: 0.75rem;   /* 12px — table headers, eyebrow, pills */
  --cf-fs-small: 0.875rem;    /* 14px — labels, helper inputs, meta text */
  --cf-fs-body: 1rem;         /* 16px — inputs, buttons, table cells, copy */
  --cf-fs-subhead: 1.375rem;  /* 22px — section headings */
  --cf-fs-display: 2.5rem;    /* 40px — page title */

  /* Re-map Bootstrap's primary to the brand green */
  --bs-primary: var(--cf-accent);
  --bs-primary-rgb: var(--cf-accent-rgb);
  --bs-link-color: var(--cf-accent);
  --bs-link-color-rgb: var(--cf-accent-rgb);
  --bs-link-hover-color: var(--cf-accent-dark);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--cf-fs-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Typography scale (overrides Bootstrap's defaults consistently) ---- */
.form-label {
  font-size: var(--cf-fs-small);
}

/* Keep the comfortable -lg height/padding, but normalise the text size so
   inputs, selects and buttons no longer dwarf their own labels. */
.form-control-lg,
.form-select-lg,
.btn-lg {
  font-size: var(--cf-fs-body);
}

/* Page title — fixed, predictable size instead of a viewport clamp */
.app-hero h1 {
  font-size: var(--cf-fs-display);
  line-height: 1.1;
}

/* Section heading ("Matching colleges") */
section[aria-label="Search results"] h2 {
  font-size: var(--cf-fs-subhead);
  line-height: 1.2;
}

/* ---- Buttons / focus reflect the brand green ---- */
.btn-primary {
  --bs-btn-bg: var(--cf-accent);
  --bs-btn-border-color: var(--cf-accent);
  --bs-btn-hover-bg: var(--cf-accent-dark);
  --bs-btn-hover-border-color: var(--cf-accent-dark);
  --bs-btn-active-bg: var(--cf-accent-dark);
  --bs-btn-active-border-color: var(--cf-accent-dark);
  --bs-btn-disabled-bg: var(--cf-accent);
  --bs-btn-disabled-border-color: var(--cf-accent);
}

.text-bg-primary {
  background-color: var(--cf-accent) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--cf-accent-rgb), 0.18);
}

.form-check-input:checked {
  background-color: var(--cf-accent);
  border-color: var(--cf-accent);
}

.form-check-input:focus {
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--cf-accent-rgb), 0.18);
}

.clear-filter {
  color: var(--cf-accent);
  font-size: var(--cf-fs-small);
  font-weight: 600;
}

.clear-filter:hover {
  color: var(--cf-accent-dark);
  text-decoration: underline !important;
}

/* ---- Hero ---- */
.app-hero {
  background: linear-gradient(135deg, var(--cf-accent-dark) 0%, var(--cf-accent) 100%);
  padding-bottom: 3.5rem;
}

.hero-eyebrow {
  letter-spacing: 0.04em;
  font-size: var(--cf-fs-caption);
  color: var(--cf-accent-dark) !important;
}

.hero-source {
  font-size: var(--cf-fs-small);
  color: rgba(255, 255, 255, 0.95);
}

.hero-source strong {
  color: #fff;
  font-weight: 600;
}

.hero-summary {
  max-width: 30rem;
  font-size: var(--cf-fs-body);
  color: rgba(255, 255, 255, 0.95);
}

/* Pull the search card up over the hero */
.mt-n5 {
  margin-top: -3rem;
}

/* ---- Checkbox lists ---- */
.checkbox-list {
  display: grid;
  gap: 0.125rem;
  max-height: 12rem;
  overflow-y: auto;
  background: #fff;
}

.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: auto;
  padding: 0.4rem 0.55rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: var(--cf-fs-small);
  line-height: 1.35;
  transition: background-color 0.12s ease;
}

.checkbox-option:hover {
  background: rgba(var(--cf-accent-rgb), 0.08);
}

.checkbox-option .form-check-input {
  float: none;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

.checkbox-option .form-check-label {
  cursor: pointer;
}

/* Tidy scrollbars on the filter lists */
.checkbox-list::-webkit-scrollbar {
  width: 0.5rem;
}

.checkbox-list::-webkit-scrollbar-thumb {
  background: #c8d4ce;
  border-radius: 1rem;
}

/* ---- Results table ---- */
.results-table thead th {
  background: #e8f0ec;
  color: #26332e;
  font-size: var(--cf-fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* College code subtext below the name — small-tier, not Bootstrap's .small */
.results-table .college-name .small {
  font-size: var(--cf-fs-small);
}

/* Result-count pill — small tier, one step above the 12px category pills */
.count-badge {
  font-size: var(--cf-fs-small);
  font-weight: 600;
  padding: 0.4rem 0.7rem;
}

.results-table .college-name {
  min-width: 16rem;
}

/* ---- Pagination (brand green) ---- */
.pagination {
  --bs-pagination-color: var(--cf-accent);
  --bs-pagination-hover-color: var(--cf-accent-dark);
  --bs-pagination-active-bg: var(--cf-accent);
  --bs-pagination-active-border-color: var(--cf-accent);
  --bs-pagination-focus-color: var(--cf-accent-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--cf-accent-rgb), 0.18);
  gap: 0.25rem;
}

.pagination .page-link {
  border-radius: 0.5rem;
  font-size: var(--cf-fs-small);
  font-weight: 600;
}

.results-table .number {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Legend / abbreviations ---- */
.legend {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1rem;
}

.legend-toggle {
  color: var(--cf-accent);
  font-size: var(--cf-fs-small);
}

.legend-toggle:hover {
  color: var(--cf-accent-dark);
}

/* Rotate the chevron when the panel is open */
.legend-chevron {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
}

.legend-toggle[aria-expanded="true"] .legend-chevron {
  transform: rotate(180deg);
}

.legend-heading {
  font-size: var(--cf-fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cf-accent-dark);
  margin: 0 0 0.5rem;
}

.legend-list {
  margin: 0;
  font-size: var(--cf-fs-small);
}

.legend-list > div {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.15rem 0;
  align-items: baseline;
}

.legend-list dt {
  font-weight: 700;
  color: var(--bs-body-color);
  font-variant-numeric: tabular-nums;
}

.legend-list dd {
  margin: 0;
  color: var(--bs-secondary-color);
  line-height: 1.35;
}

/* ---- Content sections (About / FAQ) ---- */
.content-section h2 {
  font-size: var(--cf-fs-subhead);
  line-height: 1.2;
}

.content-section p,
.content-list {
  font-size: var(--cf-fs-body);
  line-height: 1.6;
}

.content-list {
  padding-left: 1.1rem;
}

.content-list li {
  margin-bottom: 0.5rem;
}

/* FAQ accordion in the brand green, no heavy Bootstrap chrome */
.faq-accordion .accordion-button {
  font-weight: 600;
  font-size: var(--cf-fs-body);
  color: var(--bs-body-color);
  background: transparent;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--cf-accent-dark);
  background: rgba(var(--cf-accent-rgb), 0.06);
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: 0 0 0 0.2rem rgba(var(--cf-accent-rgb), 0.18);
}

.faq-accordion .accordion-body {
  font-size: var(--cf-fs-body);
  line-height: 1.6;
}

/* ---- Footer credit ---- */
/* AA-compliant grey (Bootstrap's .text-secondary is too light on white) */
.footer-text {
  color: #5c6b64;
}

.footer-credit {
  color: var(--cf-accent);
  font-weight: 600;
  text-decoration: none;
}

.footer-credit:hover {
  color: var(--cf-accent-dark);
  text-decoration: underline;
}

.footer-heart {
  color: #e2435b;
  font-style: normal;
}