/* ==========================================================================
   The institution catalogs: the Oklahoma Core Facility Network and the K-12
   STEM program catalog.

   Several institution catalogs share one page. Only one is visible at a time.
   The institution bar sticks under the header once the introduction scrolls
   away, and each catalog's discipline (or program-type) bar sticks under
   that, so the reader can always switch institution or jump within one.

   The introduction itself is an ordinary page head, set like every other
   page's.
   ========================================================================== */

/* The catalog takes the colour of the Core its page belongs to: violet for
   the facility network, and the Workforce Development blue when <main>
   carries .catalog-wdc, as on the K-12 page. */
:root {
  --cat: var(--violet);
  --cat-ink: var(--violet-ink);
  --cat-50: var(--violet-50);
  --cat-200: var(--violet-200);
}
.catalog-wdc {
  --cat: var(--blue);
  --cat-ink: var(--blue-ink);
  --cat-50: var(--blue-50);
  --cat-200: var(--blue-200);
}

.fac-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; }
.fac-head .page-text,
.fac-head .lead { max-width: none; }
@media (max-width: 720px) { .fac-container { padding: 0 16px; } }

/* A zero-height marker: once it leaves the viewport the bar has stuck. */
.inst-sentinel { height: 1px; margin-top: -1px; }

.inst-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s;
}
.inst-bar.is-stuck { box-shadow: var(--shadow-sm); }
.inst-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0;
}
.inst-bar.is-stuck .inst-row { padding: 10px 0; gap: 10px; }
/* Four institutions sit four across. */
.inst-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* One card per institution: an icon tile in the institution's colour, its
   name, its city and how many facilities it lists. Five side by side leave
   too little room beside the icon, so the icon sits above the name. */
.inst {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.inst:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.inst[aria-selected="true"] {
  border-color: var(--cat);
  background: var(--cat-50);
  box-shadow: 0 0 0 1px var(--cat) inset, var(--shadow-xs);
  transform: none;
}

.inst-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 14px -8px rgba(16, 24, 40, 0.45);
}
.inst-icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* The institutions' own colours: OU crimson, Tulsa's blue, Central's bronze,
   and Northeastern's green. */
.inst-icon.ou-norman { background: linear-gradient(145deg, #a51e22, #6e1013); }
.inst-icon.ou-health { background: linear-gradient(145deg, #b8323a, #841617); }
.inst-icon.utulsa { background: linear-gradient(145deg, #1d5fa3, #00335e); }
.inst-icon.uco { background: linear-gradient(145deg, #b5862c, #7a5413); }
.inst-icon.nsu { background: linear-gradient(145deg, #1f7a4a, #0b4a2b); }

.inst-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; min-width: 0; flex: 1; }
.inst-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.inst-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9375rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.inst-sub svg { flex-shrink: 0; width: 15px; height: 15px; fill: none; stroke: var(--text-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The third line of the card. */
.inst-count {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cat-ink);
  background: var(--cat-50);
  border: 1px solid var(--cat-200);
  border-radius: 999px;
  padding: 3px 10px;
}
.inst[aria-selected="true"] .inst-count { background: #fff; }
.inst-name .short { display: none; }

/* Once stuck, the cards shrink to a slim row of icon and short name so the
   catalog keeps the room. */
.inst-bar.is-stuck .inst { flex-direction: row; align-items: center; padding: 8px 14px; gap: 12px; }
.inst-bar.is-stuck .inst-icon { width: 36px; height: 36px; border-radius: 10px; }
.inst-bar.is-stuck .inst-icon svg { width: 20px; height: 20px; }
.inst-bar.is-stuck .inst-sub,
.inst-bar.is-stuck .inst-count { display: none; }
.inst-bar.is-stuck .inst-name .long { display: none; }
.inst-bar.is-stuck .inst-name .short { display: inline; }

/* The K-12 page has a second sticky program-type bar whose offset is based on
   the institution bar height. Keep that first bar's height stable while it is
   stuck so scroll position and sticky offsets do not chase each other. */
.catalog-wdc .inst-bar.is-stuck .inst-row { gap: 14px; padding: 18px 0; }
.catalog-wdc .inst-bar.is-stuck .inst { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
.catalog-wdc .inst-bar.is-stuck .inst-icon { display: flex; width: 44px; height: 44px; border-radius: 12px; }
.catalog-wdc .inst-bar.is-stuck .inst-icon svg { width: 24px; height: 24px; }
.catalog-wdc .inst-bar.is-stuck .inst-sub { display: inline-flex; }
.catalog-wdc .inst-bar.is-stuck .inst-count { display: inline-flex; }
.catalog-wdc .inst-bar.is-stuck .inst-name .long { display: inline; }
.catalog-wdc .inst-bar.is-stuck .inst-name .short { display: none; }

/* Short of a full desktop, five across is too tight, so the cards fall into
   a row of three over a row of two, each with its icon beside its name.
   Once stuck they rejoin one row, names only. */
@media (max-width: 1100px) {
  .inst-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .inst { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; }
  .inst:nth-child(n+4) { grid-column: span 3; }
  /* Four fall into two rows of two. */
  .inst-row.n4 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .inst-row.n4 .inst { grid-column: span 3; }
  .inst-bar.is-stuck .inst-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inst-bar.is-stuck .inst-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .inst-bar.is-stuck .inst { grid-column: auto; justify-content: center; padding: 8px 6px; }
  .inst-bar.is-stuck .inst-icon { display: none; }
  .inst-bar.is-stuck .inst-text { flex: 0 1 auto; }
  .inst-bar.is-stuck .inst-name { text-align: center; }
  .catalog-wdc .inst-bar.is-stuck .inst-row.n4 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .catalog-wdc .inst-bar.is-stuck .inst-row.n4 .inst { grid-column: span 3; }
  .catalog-wdc .inst-bar.is-stuck .inst { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
  .catalog-wdc .inst-bar.is-stuck .inst-text { flex: 1; }
  .catalog-wdc .inst-bar.is-stuck .inst-name { text-align: left; }
}
/* A third of a small tablet has no room for the facility count beside the
   icon; the tab itself still says where it leads. */
@media (max-width: 800px) {
  .inst-count { display: none; }
  .catalog-wdc .inst-bar.is-stuck .inst-count { display: none; }
}

/* On a phone the cards sit two by two, the last one across both columns. */
@media (max-width: 720px) {
  .inst-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0; }
  .inst, .inst:nth-child(n+4) { grid-column: auto; gap: 10px; padding: 10px 12px; }
  .inst:last-child { grid-column: 1 / -1; }
  .inst-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst-row.n4 .inst, .inst-row.n4 .inst:last-child { grid-column: auto; }
  .inst-icon { width: 36px; height: 36px; border-radius: 10px; }
  .inst-icon svg { width: 20px; height: 20px; }
  .inst-name { font-size: 0.9375rem; }
  .inst-name .long { display: none; }
  .inst-name .short { display: inline; }
  .inst-sub { font-size: 0.8125rem; white-space: normal; }
  .inst-count { display: none; }
  .inst-bar.is-stuck .inst-row { gap: 4px; padding: 8px 0; }
  .inst-bar.is-stuck .inst { padding: 8px 2px; }
  .inst-bar.is-stuck .inst-name { font-size: 0.8125rem; }
  .catalog-wdc .inst-bar.is-stuck .inst-row { gap: 8px; padding: 12px 0; }
  .catalog-wdc .inst-bar.is-stuck .inst-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-wdc .inst-bar.is-stuck .inst-row.n4 .inst { grid-column: auto; }
  .catalog-wdc .inst-bar.is-stuck .inst { gap: 10px; padding: 10px 12px; }
  .catalog-wdc .inst-bar.is-stuck .inst-icon { width: 36px; height: 36px; }
  .catalog-wdc .inst-bar.is-stuck .inst-icon svg { width: 20px; height: 20px; }
  .catalog-wdc .inst-bar.is-stuck .inst-name { font-size: 0.9375rem; }
  .catalog-wdc .inst-bar.is-stuck .inst-name .long { display: none; }
  .catalog-wdc .inst-bar.is-stuck .inst-name .short { display: inline; }
  .catalog-wdc .inst-bar.is-stuck .inst-sub { display: inline-flex; }
  .catalog-wdc .inst-bar.is-stuck .inst-count { display: none; }
}

/* Before an institution is picked. */
.fc-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 72px 24px 96px;
  color: var(--text-muted);
  font-size: 1.125rem;
}
.fc-pick[hidden] { display: none; }
.fc-pick svg {
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--cat-50);
  fill: none; stroke: var(--cat-ink);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- The catalogs ---------- */

.catalogs { padding: 0; }
/* Switching institution scrolls the catalog to its top, which has to clear
   the header and the institution bar. */
.fc-scope { padding: 56px 0 88px; scroll-margin-top: calc(var(--header-h) + var(--inst-h, 66px)); }
.fc-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .fc-wrap { padding: 0 16px; } .fc-scope { padding: 36px 0 60px; } }

/* The listings are for members, and the API sends them only to a signed-in
   visitor. Signed out, a picked institution shows a sign-in prompt where its
   listings would be (see .members-gate in site.css); signed in, a line says
   they are loading until they arrive. */
.fc-gate, .fc-status { padding: 56px 0 88px; scroll-margin-top: calc(var(--header-h) + var(--inst-h, 66px)); }
.fc-gate .auth-panel { margin: 0 auto; }
.fc-status { text-align: center; color: var(--text-muted); font-size: 1.125rem; padding-left: 24px; padding-right: 24px; }
@media (max-width: 720px) { .fc-gate, .fc-status { padding-top: 36px; padding-bottom: 60px; } }

.fc-intro { margin-bottom: 24px; }
.fc-intro h1 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.02em; }
.fc-intro p { margin-top: 10px; max-width: 78ch; font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- The discipline bar ----------
   Full width above the cards, wrapping onto as many rows as it needs. It
   sticks under the institution bar, whose height is measured into --inst-h
   because it shrinks once it sticks. On a phone it is one row that scrolls
   sideways, so it never takes over the screen. */

.fc-disc {
  position: sticky;
  top: calc(var(--header-h) + var(--inst-h, 66px));
  z-index: 50;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s;
}
.fc-disc.is-stuck { border-top-color: transparent; box-shadow: var(--shadow-sm); }
/* While the discipline bar is stuck beneath it, the institution bar's shadow
   would fall across it; the pair read as one toolbar instead. */
.inst-bar.is-stuck.over-disc { box-shadow: none; }
.fc-disc .fc-wrap { padding-top: 12px; padding-bottom: 12px; }
/* The label leads the first row, so the chips that wrap below it get the
   full width. */
.fc-disc-label {
  flex-shrink: 0;
  margin-right: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fc-disc nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fc-disc a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 6px 5px 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.fc-disc a:hover { border-color: var(--cat-200); background: var(--cat-50); color: var(--cat-ink); }
/* The discipline being read. */
.fc-disc a.is-active {
  border-color: var(--cat);
  background: var(--cat-50);
  color: var(--cat-ink);
  box-shadow: 0 0 0 1px var(--cat) inset;
}
.fc-count {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 1px 8px;
}
.fc-disc a:hover .fc-count,
.fc-disc a.is-active .fc-count { background: #fff; color: var(--cat-ink); }

@media (max-width: 720px) {
  .fc-disc .fc-wrap { overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
  .fc-disc .fc-wrap::-webkit-scrollbar { display: none; }
  .fc-disc-label { display: none; }
  .fc-disc nav { flex-wrap: nowrap; }
}

/* ---------- Sections and cards ---------- */

/* How far a jumped-to section or card must stay below the top of the window:
   clear of the header, both sticky bars, and a little air. */
.catalogs { --fc-clear: calc(var(--header-h) + var(--inst-h, 66px) + var(--disc-h, 58px) + 20px); }
.fc-catalog-list { min-width: 0; }
/* These are <section>s, so the site-wide section padding has to be undone or
   every discipline opens with a band of empty space. */
.fc-section { padding: 0; scroll-margin-top: var(--fc-clear); margin-bottom: 52px; }
.fc-section:last-child { margin-bottom: 0; }
.fc-section-head {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.fc-section-head h2 { font-size: 1.5rem; letter-spacing: -0.015em; }

.fc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) { .fc-grid { grid-template-columns: 1fr; } }

.fc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-xs);
  scroll-margin-top: var(--fc-clear);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fc-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.fc-card:target { border-color: var(--cat); box-shadow: 0 0 0 3px var(--cat-200); }

.fc-kind {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cat-ink);
  background: var(--cat-50);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 12px;
}
.fc-card h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.fc-card > p:not(.fc-kind):not(.fc-location):not(.fc-note) {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--text-muted);
}
.fc-location {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--text-faint);
  padding-left: 18px;
  position: relative;
}
.fc-location::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 1.5px solid var(--text-faint);
}

/* ---------- Program facts (the K-12 catalog) ----------
   Who a program is for, when it runs, how long, in what form and at what
   cost: the facts a parent scans for, in two columns under the description. */
.fc-meta {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
}
.fc-meta li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.fc-meta li.wide { grid-column: 1 / -1; }
.fc-meta svg {
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin-top: 2px;
  fill: none; stroke: var(--cat-ink);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.fc-meta li > span { min-width: 0; overflow-wrap: anywhere; }
.fc-meta-label {
  display: block;
  margin-bottom: 1px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* A free program is the fact most readers look for first. */
.fc-meta .is-free { color: var(--success); font-weight: 600; }
@media (max-width: 420px) { .fc-meta { grid-template-columns: 1fr; } }

/* A caveat to know before planning around the program. */
.fc-note {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--amber-ink);
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius-sm);
}

.fc-contact {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
}
.fc-contact + .fc-contact { border-top: none; padding-top: 0; margin-top: 8px; }
.fc-contact strong {
  flex-basis: 100%;
  color: var(--text);
  font-weight: 600;
}
.fc-contact a {
  color: var(--link);
  text-decoration: none;
  word-break: break-word;
}
.fc-contact a:hover { text-decoration: underline; text-underline-offset: 2px; }
.fc-sep { color: var(--border-strong); }

.fc-visit {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 14px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
/* The button sits at the foot of the card so a row of them lines up; this
   keeps it off the last contact line when a card has no room to spare. */
.fc-card > :nth-last-child(2) { margin-bottom: 18px; }
.fc-visit::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.fc-visit:hover { border-color: var(--cat); color: var(--cat-ink); background: var(--cat-50); }