/**
 * School directory — /school-information/.
 *
 * Scoped under .psf-directory. Restyled onto the 2026-08 navy/gold design
 * system (main.css :root — --psf-ink/--psf-fill/--psf-on-fill/--psf-gold/
 * --psf-gold-bright/--psf-paper/--psf-surface-2/--psf-rule-warm/--psf-display).
 * Light theme only: this site has no dark mode.
 *
 * Layout is untouched from the Task 1 lift — the flex filter grid, the
 * data-label stacked-card mode below 768px, and the sticky thead itself
 * (positioning lives in main.css's .psf-school-table th, including its
 * @media(min-width:1240px) `top: 64px` bump) all behave exactly as before.
 * The @media(min-width:1240px) overflow-x:visible switch below IS in THIS
 * file, on .psf-directory-results — it is what lets that sticky thead stick
 * on desktop by dropping the scroll context; it is not in main.css and does
 * not move there. Only colour, type and surface changed here.
 *
 * ROUTING NOTE: this page's _wp_page_template meta is `schoolinformation.php`,
 * a file that does not exist. It renders because of a template_include
 * filter in functions.php. Anything keying on this page must use
 * is_page( 'school-information' ); is_page_template() is FALSE here.
 */
.psf-directory-hero {
  background: var(--psf-fill);
  color: var(--psf-on-fill);
  padding: 56px 0 48px;
}
.psf-directory-hero__title {
  font-family: var(--psf-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  margin-bottom: 12px;
}
.psf-directory-hero__desc { opacity: .88; font-size: 17px; max-width: 60ch; }

.psf-directory .psf-filter-form {
  background: var(--psf-surface-2);
  border: 1px solid var(--psf-rule-warm);
  border-radius: var(--psf-radius-lg);
  padding: 28px;
  margin: 32px 0;
}
/* Aug 2026 — CLS fix. This was `display:flex; flex-wrap:wrap`, which made the
   row count a function of RENDERED TEXT WIDTH. The 11 controls sized to their
   labels (160px for "State", 178px for "Bachelor's Required"), so when Inter
   swapped in for the fallback face the wrap point moved. That alone would be
   minor, except the children have very different heights (38px selects, 86px
   range sliders, 62px GPA pair), so moving one item across a row boundary
   changed the form's total height by 64px — and the 7,463px results table
   directly below it shifted by that much. Lighthouse measured CLS 0.213-0.571
   across runs, all of it from this one shift; it blamed the header logo, but
   the logo sits in a fixed 64px-high header and measures a 0px delta.

   A fixed-column grid makes track widths independent of text, so the row count
   can no longer change during font load. Column counts step down at the
   breakpoints already used in this file. */
.psf-directory .psf-filter-form__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}
.psf-directory .psf-filter-submit { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .psf-directory .psf-filter-form__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .psf-directory .psf-filter-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .psf-directory .psf-filter-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .psf-directory .psf-filter-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* min-width:160px would override the 1fr track on narrow viewports and push the
   grid into horizontal overflow; the track now supplies the width. */
.psf-directory .psf-filter-group { position: relative; min-width: 0; }
.psf-directory .psf-filter-group__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--psf-paper); border: 1px solid var(--psf-rule-warm);
  border-radius: var(--psf-radius); font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--psf-text); gap: 8px;
}
.psf-directory .psf-filter-group__trigger[aria-expanded="true"] {
  border-color: var(--psf-ink);
  background: var(--psf-surface-2);
  color: var(--psf-ink);
}
.psf-directory .psf-filter-group__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  background: var(--psf-surface-2); border: 1px solid var(--psf-rule-warm);
  border-radius: var(--psf-radius); box-shadow: var(--psf-shadow);
  padding: 8px; min-width: 200px; max-height: 280px; overflow-y: auto;
}
.psf-directory .psf-filter-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-radius: 4px; font-size: 13px; }
/* Solid-fill hover, not a light tint -- the same treatment state.css gives
   its .psf-tile-map__state chips (navy fill, white text on hover/focus). */
.psf-directory .psf-filter-option:hover { background: var(--psf-fill); color: var(--psf-on-fill); }
.psf-directory .psf-filter-option input { accent-color: var(--psf-blue); }

/* Aug 2026: was min-width:200px — same reason as .psf-filter-group above, the
   grid track now sets the width. */
.psf-directory .psf-filter-range, .psf-directory .psf-filter-gpa { min-width: 0; }
.psf-directory .psf-filter-range__label { font-size: 13px; font-weight: 600; color: var(--psf-text-muted); margin-bottom: 6px; display: block; }
.psf-directory .psf-filter-range__inputs { display: flex; flex-direction: column; gap: 4px; }
.psf-directory .psf-filter-range__inputs input[type="range"] { width: 100%; accent-color: var(--psf-blue); }
.psf-directory .psf-filter-range__labels { display: flex; gap: 6px; font-size: 12px; color: var(--psf-text-muted); margin-top: 4px; }
.psf-directory .psf-filter-gpa__selects { display: flex; gap: 8px; }
.psf-directory .psf-filter-select { flex: 1; padding: 8px 10px; border: 1px solid var(--psf-rule-warm); border-radius: var(--psf-radius); font-size: 13px; background: var(--psf-surface-2); }

.psf-directory .psf-filter-submit { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
/* Same gold-tinted status-note treatment school.css uses for its inline
   note annotation (school.css:136, the ".note" class) -- an informational
   banner, not a link, so --psf-blue (interactive-only) is the wrong token here. */
.psf-directory .psf-filter-msg {
  background: color-mix(in srgb, var(--psf-gold-bright) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--psf-gold-bright) 45%, transparent);
  color: var(--psf-text);
  border-radius: var(--psf-radius);
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

.psf-directory .psf-directory-results { overflow-x: auto; }
/* the 11-column table fits the 1200px container on desktop — drop the scroll
   context there so the sticky thead can stick below the fixed site header */
@media (min-width: 1240px) { .psf-directory .psf-directory-results { overflow-x: visible; } }

/* .psf-school-table's own rules live in main.css and stay there --
   psf_render_school_table() is a general helper and main.css is shared by
   every consumer of it, so this recolours via scoped overrides instead of
   editing the shared base (Task 3 review ruling). Colour only: nothing here
   changes the grid/flex structure, the data-label stacked-card layout, or
   the sticky positioning main.css already handles. */
.psf-directory .psf-school-table th {
  font-family: var(--psf-display);
  font-stretch: 110%;
  background: var(--psf-fill);
  color: var(--psf-on-fill);
}
/* border-top-color: row border was var(--psf-border) in main.css on BOTH the
   desktop <tr> and the mobile data-label card (same declared value in each
   place) -- one colour-only override covers both, since it only replaces
   the border colour, not the width/style main.css already set. */
.psf-directory .psf-school-table td {
  font-variant-numeric: tabular-nums;
  border-top-color: var(--psf-rule-warm);
}

/* Desktop/tablet row hover only. main.css's own max-width:768px block turns
   hover off on mobile (background: transparent) -- scoping this to the
   complementary min-width so it can't out-specificity that disable, rather
   than relying on selector-order luck to leave it alone. */
@media (min-width: 769px) {
  .psf-directory .psf-school-table__row:hover td {
    background: color-mix(in srgb, var(--psf-fill) 6%, transparent);
  }
}

@media (max-width: 768px) {
  /* Stacked-card surface: same border-radius/padding/grid main.css already
     sets, just var(--psf-white)/var(--psf-border) swapped for the verified
     tokens. */
  .psf-directory .psf-school-table__row {
    background: var(--psf-surface-2);
    border-color: var(--psf-rule-warm);
  }
}

/* NOT overridden: .psf-school-table td:first-child a's `color: var(--psf-blue)`
   (main.css). That is not a legacy-palette value -- --psf-blue is the
   verified system's own interactive-only token, and state.css uses it for
   its own links the same way (.psf-state-toc a, .psf-breadcrumb__nav a). A
   scoped override here would just restate the same value, so none was
   added. */

/* ── Directory hero distribution strip (Task 4) ─────────────────────────
   Same rug vocabulary as the 147 school pages, the homepage hero and the 51
   state pages, but this is the only one of the four sitting on the dark
   --psf-fill hero (the other three all render on a light --psf-surface-2
   card). No token pairs navy with rug/axis/caption colours, so the SVG
   parts recolour onto --psf-on-fill at reduced opacity here instead --
   the same "one light colour, several opacities" approach
   .psf-directory-hero__desc already uses on this same background, rather
   than inventing a second navy-safe rug palette. */
.psf-directory-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 28px;
  max-width: 640px;
}
.psf-directory-strip__label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.psf-directory-strip__n { opacity: .7; letter-spacing: 0; text-transform: none; }

.psf-directory-strip .psf-rug { display: block; width: 100%; height: 26px; overflow: visible; }
.psf-directory-strip .psf-rug .psf-tick { stroke: var(--psf-on-fill); stroke-width: 1.1; opacity: .55; }
.psf-directory-strip .psf-rug .psf-axis { stroke: var(--psf-on-fill); stroke-width: 1; opacity: .3; }
.psf-directory-strip .psf-rug .psf-cap { fill: var(--psf-on-fill); font-size: 9.5px; font-weight: 600; opacity: .78; }
/* No .psf-me/.psf-medot rule: this call always passes an empty marks array
   (array() -- the national distribution, never a filtered/"you are here"
   position, per spec 9.1), so psf_render_rug() never emits those elements
   here. */