/* MatricLink stylesheet.
   Hand-written, no build step, no framework. Replaces the Tailwind CDN, which was
   render-blocking, added a third-party request to every pageview, and logged a
   production warning in the console.

   Contents
     1. Tokens
     2. Reset and base elements
     3. Skip link and header
     4. Breadcrumb
     5. Page container
     6. Typography helpers
     7. Cards, notes and callouts
     8. Form controls
     9. Calculator result and directory
    10. Tables
    11. Footer
    12. Responsive
*/

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  --indigo-950: #1e1b4b;
  --indigo-900: #312e81;
  --indigo-700: #4338ca;
  --indigo-600: #4f46e5;   /* 6.3:1 on white, passes AA */
  --indigo-200: #c7d2fe;   /* 9.2:1 on --indigo-950 */
  --indigo-100: #e0e7ff;
  --indigo-50:  #eef2ff;

  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;    /* body text, 7.5:1 on white */
  --slate-500: #59677d;    /* 5.9:1 on white. Darkened from #64748b (4.8:1) to give
                              12px meta text real headroom on a phone in daylight */
  --slate-400: #94a3b8;    /* dark backgrounds only, fails on white */
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;

  --emerald-800: #065f46;
  --emerald-700: #047857;  /* 5.6:1 on white. Use this, not emerald-600, for text */
  --emerald-300: #6ee7b7;
  --emerald-100: #d1fae5;
  --emerald-50:  #ecfdf5;

  --amber-900: #78350f;
  --amber-200: #fde68a;
  --amber-50:  #fffbeb;

  --rose-900: #881337;
  --rose-700: #be123c;
  --rose-200: #fecdd3;
  --rose-50:  #fff1f2;

  --white: #fff;

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --shadow: 0 1px 3px rgb(15 23 42 / 8%), 0 1px 2px rgb(15 23 42 / 4%);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 8%);
  --focus: 0 0 0 3px rgb(79 70 229 / 45%);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 42rem;
}

/* ------------------------------------------- 2. Reset and base elements */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--slate-50);
  color: var(--slate-900);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  color: var(--slate-900);
  line-height: 1.25;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; }
h3 { font-size: 1rem;    font-weight: 700; margin-top: 1.5rem; }
h4 { font-size: 0.95rem; font-weight: 700; margin-top: 0; }

p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }
li:last-child { margin-bottom: 0; }

a { color: var(--indigo-600); text-underline-offset: 0.15em; }
a:hover { color: var(--indigo-700); }

strong { color: var(--slate-800); font-weight: 600; }

code {
  background: var(--slate-100);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}

mark { background: #fef08a; padding: 0 0.25em; font-weight: 700; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 0.25rem;
}

[hidden] { display: none !important; }

/* Toggled by the calculator script. */
.hidden { display: none; }

.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;
}

/* ------------------------------------------- 3. Skip link and header */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 50;
  background: var(--white);
  color: var(--indigo-900);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus { top: 0.5rem; }

.site-header {
  background: var(--indigo-950);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.brand { color: var(--white); text-decoration: none; display: block; }
.brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; display: block; }
.brand-tagline { font-size: 0.75rem; color: var(--indigo-200); font-weight: 300; display: block; margin-top: 0.15rem; }

.nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.nav li { margin: 0; }

/* Vertical padding brings the tap target to ~44px without changing the visual
   rhythm much. At 21px these were half the recommended minimum on a phone. */
.nav a {
  display: inline-block;
  color: var(--indigo-200);
  text-decoration: none;
  padding: 0.6rem 0.5rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* ------------------------------------------- 4. Breadcrumb */

.breadcrumb {
  max-width: 52rem;
  width: 92%;
  margin: 1.25rem auto 0;
  font-size: 0.75rem;
  color: var(--slate-500);
}
.breadcrumb ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.breadcrumb li { margin: 0; }
.breadcrumb [aria-current="page"] { color: var(--slate-700); font-weight: 500; }

/* ------------------------------------------- 5. Page container */

.page {
  max-width: 52rem;
  width: 92%;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--slate-600);
  flex: 1 0 auto;
}
.page--narrow { max-width: 40rem; }
.page--wide   { max-width: 60rem; }
.page > :first-child { margin-top: 0; }

/* ------------------------------------------- 6. Typography helpers */

.page-title { text-align: center; }
.page-title--left { text-align: left; }

.page-meta {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-bottom: 1.5rem;
}
.page-title + .page-meta { text-align: center; }
.page-title--left + .page-meta { text-align: left; }

.lede { font-size: 1.05rem; }
.muted { color: var(--slate-500); }
.small { font-size: 0.8rem; }
.center { text-align: center; }

/* A question-and-answer block, used on the FAQ and inside guides. */
.qa { margin-bottom: 1.5rem; }
.qa h2, .qa h3 { margin-top: 0; margin-bottom: 0.25rem; }

/* ------------------------------------------- 7. Cards, notes and callouts */

.card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.card > :last-child { margin-bottom: 0; }
.card h3, .card h4 { margin-top: 0; }

.card-stack > .card:last-child { margin-bottom: 0; }

/* Tinted variants. Background tints are pale enough that body text keeps AA. */
.card--amber   { background: var(--amber-50);   border-color: var(--amber-200); }
.card--emerald { background: var(--emerald-50); border-color: var(--emerald-100); }
.card--indigo  { background: var(--indigo-50);  border-color: var(--indigo-100); }
.card--rose    { background: var(--rose-50);    border-color: var(--rose-200); }
.card--slate   { background: var(--slate-50);   border-color: var(--slate-200); }

.card--amber h2,   .card--amber h3,   .card--amber h4   { color: var(--amber-900); }
.card--emerald h2, .card--emerald h3, .card--emerald h4 { color: var(--emerald-800); }
.card--indigo h2,  .card--indigo h3,  .card--indigo h4  { color: var(--indigo-900); }
.card--rose h2,    .card--rose h3,    .card--rose h4    { color: var(--rose-900); }

.card--amber   { color: var(--amber-900); }
.card--rose    { color: var(--rose-900); }

/* A short aside, smaller than a card. */
.note {
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  margin-bottom: 1rem;
}
.note--amber  { background: var(--amber-50);  border-color: var(--amber-200);  color: var(--amber-900); }
.note--indigo { background: var(--indigo-50); border-color: var(--indigo-100); color: var(--indigo-900); }

/* A rule-off block used for the POPIA rights list and similar. */
.rule-list > div {
  border-left: 4px solid var(--indigo-200);
  padding-left: 1rem;
  margin-bottom: 1rem;
}
.rule-list h3 { margin-top: 0; font-size: 0.9rem; }
.rule-list p { margin-bottom: 0; }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--emerald-800);
  background: var(--emerald-100);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--white);
  background: var(--slate-700);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge--met   { background: var(--emerald-700); }
.badge--short { background: var(--slate-500); }

/* Set by script on the faculty cards, so it carries its own styling. */
.faculty-badge.badge--met   { background: var(--emerald-700); }
.faculty-badge.badge--short { background: var(--slate-500); }

.faculty-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--white);
  background: var(--slate-700);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.error-code {
  font-size: 3rem;
  font-weight: 900;
  color: var(--indigo-200);
  line-height: 1;
  margin: 0 0 0.5rem;
}

.contact-email {
  font-size: 1.1rem;
  font-weight: 700;
  word-break: break-word;
  margin-bottom: 0.75rem;
}

.section-divider {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-200);
}

/* ------------------------------------------- 8. Form controls */

/* The calculator form: each direct child of the grid is one labelled control,
   so no per-field class is needed in the markup. */
.field, .field-grid > div { margin-bottom: 0; }
.field > label, .field-grid > div > label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-700);
  margin-bottom: 0.3rem;
}
.field select, .field-grid select {
  width: 100%;
  padding: 0.6rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--slate-900);
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
}

/* Life Orientation and province are tinted because they behave differently
   from the six ordinary subjects. */
#loSelect { background: var(--indigo-50); border-color: var(--indigo-100); font-weight: 500; }
#loSelect ~ label, label[for="loSelect"] { color: var(--indigo-700); }
#provinceSelect {
  background: var(--emerald-50);
  border-color: var(--emerald-100);
  color: var(--emerald-800);
  font-weight: 600;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--white);
  background: var(--indigo-600);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.btn:hover { background: var(--indigo-700); }

.form-error {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rose-700);
  background: var(--rose-50);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

/* ------------------------------------------- 9. Result and directory */

.result {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  border-radius: var(--radius);
}
.result h2 { margin-top: 0; text-align: center; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.stat {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  box-shadow: var(--shadow);
}
.stat-label { font-size: 0.65rem; text-transform: uppercase; font-weight: 700; color: var(--slate-500); margin: 0; }
.stat-value { font-size: 1.5rem; font-weight: 900; color: var(--slate-800); margin: 0.15rem 0; }
.stat-value--accent { color: var(--indigo-700); }
.stat-note { font-size: 0.65rem; color: var(--slate-500); margin: 0; }

/* "Show your working" disclosure under the result. */
.working {
  margin-top: 1rem;
  background: var(--white);
  border: 1px solid var(--indigo-100);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.working > summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--indigo-700);
}
.working > summary:hover { background: var(--indigo-50); }
.working > div { padding: 0 1rem 1rem; }
.working h3 { font-size: 0.85rem; margin-top: 1rem; }
.working p { margin-bottom: 0.5rem; }

.province-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
  margin: 1.5rem 0 0.75rem;
}

.uni-list { list-style: none; margin: 0; padding: 0; }
.uni-list li { margin-bottom: 0.75rem; }

.uni-card, .faculty-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1rem;
}
.uni-card h4 { margin: 0 0 0.25rem; color: var(--slate-800); }
.uni-card p { margin: 0 0 0.25rem; font-size: 0.8rem; }
.uni-card .uni-meta { color: var(--slate-500); }
.uni-card .uni-note { color: var(--slate-600); }
.uni-card > a { font-size: 0.8rem; }

.uni-status { font-size: 0.8rem; font-weight: 500; margin: 0.5rem 0; }
.uni-card.is-met    { border-color: var(--emerald-300); }
.uni-card.is-met    .uni-status { color: var(--emerald-700); }
.uni-card.is-short  { border-color: var(--slate-300); }
.uni-card.is-short  .uni-status { color: var(--slate-500); }

.faculty-card { padding: 1.25rem; margin-bottom: 1rem; }
.faculty-card:last-child { margin-bottom: 0; }
.faculty-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0.5rem 0 0; color: var(--slate-800); }
.faculty-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.faculty-card__body {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-100);
  font-size: 0.8rem;
}
.faculty-card.is-met   { border-color: var(--emerald-300); background: var(--emerald-50); }
.faculty-card.is-short { border-color: var(--slate-300); }

/* ------------------------------------------- 10. Tables */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; text-align: left; }
thead { background: var(--slate-100); }
th {
  padding: 0.6rem 0.75rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--slate-700);
  font-weight: 700;
}
td { padding: 0.6rem 0.75rem; color: var(--slate-600); border-top: 1px solid var(--slate-100); }
.strong-cell { font-weight: 600; color: var(--slate-800); }

/* ------------------------------------------- 11. Footer */

.site-footer {
  background: var(--slate-900);
  color: var(--slate-400);
  font-size: 0.8rem;
  margin-top: 2.5rem;
}
.site-footer__grid {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.site-footer p { margin: 0 0 0.5rem; }
.site-footer strong, .site-footer .footer-heading {
  display: block;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a { color: var(--slate-400); }
.site-footer a:hover { color: var(--white); }
.site-footer__bottom {
  border-top: 1px solid var(--slate-800);
  padding: 1rem;
  text-align: center;
}

/* ------------------------------------------- 12. Responsive */

@media (min-width: 40rem) {
  .field-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 48rem) {
  h1 { font-size: 2rem; }
  .page { padding: 2rem; }
  .site-header__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .breadcrumb, .skip-link, .btn { display: none; }
  .page { box-shadow: none; border: 0; max-width: none; width: 100%; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}