/* =============================================================================
   EXAMINATION RESULTS (page_template-exam-results.php)
   Loaded after main.css for this template only, via artsed_template_styles().
   Day School & Sixth Form palette: navy ink, aqua + khaki accents.
   ========================================================================== */

/* Intro ------------------------------------------------------------------- */
.exam-results .er-intro blockquote {
  margin: 1.5em 0 !important;
  font-family: var(--font-serif);
  font-size: 1.2em;
  line-height: 1.45;
  color: var(--navy);
}
.exam-results .er-intro blockquote p { margin: 0; }

/* The image slider sits on the same white ground as the intro, so the intro's
   bottom padding plus the slider's top padding doubled the gap. Same fix as
   the site-wide "stacked panels on the same ground" rule: drop the second. */
.exam-results .panel.white-bg + .panel.course-slider-wrap { padding-top: 0 !important; }

/* Results sections ---------------------------------------------------------- */
.exam-results .panel.er-soft { background-color: var(--khaki-soft); }
.exam-results .er-section .standard-copy { color: var(--navy); }

.exam-results .er-highlights {
  margin: 2em 0 0;
}
.exam-results .standard-copy .er-highlights h3,
.exam-results .results-table caption {
  font-family: var(--font-display);
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--navy);
  margin: 0 0 .75em;
}
/* The site's arrow list centres each item; highlights are a list to read
   down, so they sit left, one per row, at full measure. */
.exam-results .er-highlights ul { margin: 0; text-align: left; }
.exam-results .er-highlights ul li {
  display: block;
  margin: 0 0 .6em;
}

/* Tables -------------------------------------------------------------------- */
.exam-results .er-tables { margin-top: 2.5em; }
.exam-results .results-table-wrap { margin: 0 0 2.5em; }
.exam-results .results-table-wrap:last-child { margin-bottom: 0; }

/* main.css turns every table, row and cell into display:block below the
   tablet breakpoint (for the term dates layout). These are real grids at
   every width, so the table display values are put back. */
.exam-results table.results-table { display: table; }
.exam-results .results-table caption { display: table-caption; }
.exam-results .results-table thead { display: table-header-group; }
.exam-results .results-table tbody { display: table-row-group; }
.exam-results .results-table tr { display: table-row; }
.exam-results .results-table th,
.exam-results .results-table td { display: table-cell; width: auto; }

.exam-results .standard-copy table.results-table {
  width: 100%;
  /* Fixed layout: the label column always takes the same share and the year
     columns split the rest evenly, so every table on the page lines up
     whatever the length of its labels. */
  table-layout: fixed;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.exam-results .results-table th,
.exam-results .results-table td {
  padding: 12px 8px;
  border-top: 2px solid var(--navy);
  border-bottom: 0;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
.exam-results .results-table tbody tr:last-child th,
.exam-results .results-table tbody tr:last-child td { border-bottom: 2px solid var(--navy); }
.exam-results .results-table th:first-child { text-align: left; padding-left: 0; }
.exam-results .results-table thead th:first-child { width: 45%; }
.exam-results .results-table thead th { font-weight: 700; }
.exam-results .results-table tbody th { font-weight: 700; white-space: nowrap; }
/* The current year: bold, on a soft khaki column. */
.exam-results .results-table .is-current {
  font-weight: 700;
  background-color: var(--khaki-soft);
}
/* On the soft khaki ground the column would not show, so white carries it. */
.exam-results .er-soft .results-table .is-current { background-color: #ffffff; }

/* Previous years: navy ground, white figures, so the current year stands out
   on its light column and the comparison years read as one block. The rules
   between rows go light so they still show on navy (navy rule on navy would
   vanish); the outer top and bottom rules stay navy. White on navy 14.6:1. */
.exam-results .results-table thead th:nth-child(n+3),
.exam-results .results-table tbody td:not(.is-current) {
  background-color: var(--navy);
  color: #ffffff;
}
/* With collapsed borders the header/first-row seam belongs to both the header
   cell's bottom and the body cell's top, so both are set, as a solid colour
   (navy with 25% white) rather than a translucent one. */
.exam-results .results-table tbody td:not(.is-current) {
  border-top: 2px solid #405f6b;
}
.exam-results .results-table thead th:nth-child(n+3) {
  border-bottom: 2px solid #405f6b;
}

.exam-results .er-note { margin-top: 2em; }

/* Destinations: A to Z index -------------------------------------------------- */
/* Its own ground, soft khaki, so it never merges with the white section above
   it or the khaki cross-links panel in the footer below it. */
.exam-results .panel.er-destinations { background-color: var(--khaki-soft); }
.exam-results .er-destinations .standard-copy { color: var(--navy); }
.exam-results .er-index { margin-top: 2.5em; color: var(--navy); }

.exam-results .er-index ul,
.exam-results .er-index li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
}

/* Letter jump nav: white boxes on the soft khaki ground, 44px tap targets. */
.exam-results .er-index__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.exam-results .er-index__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  /* Optical centring: flex centres the line box, and in this face the caps sit
     high in it. Measured on the rendered tiles (Oct 2026) the letters were
     still ~1px above centre with a 2px top offset, so the offset is 4px
     (asymmetric padding moves the glyphs down by half of it). */
  padding: 4px 10px 0;
  box-sizing: border-box;
  background-color: #ffffff;
  color: var(--navy) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color .18s ease-in-out, color .18s ease-in-out;
}
.exam-results .er-index__nav a:hover,
.exam-results .er-index__nav a:focus-visible {
  background-color: var(--navy);
  color: #ffffff !important;
}

.exam-results .er-index__group {
  margin-top: 48px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.exam-results .standard-copy .er-index__letter,
.exam-results .er-index__letter {
  font-family: var(--font-display) !important;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  color: var(--navy);
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 4px solid var(--navy);
}

.exam-results .er-index__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}
.exam-results .er-index__list li {
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(0, 42, 58, .2);
  font-size: 1em;
  line-height: 1.3;
}

.exam-results .er-closing { margin-top: 3em; }

/* Tablet / phone -------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
  .exam-results .er-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .exam-results .er-index__letter { font-size: 44px; }
}

@media only screen and (max-width: 600px) {
  .exam-results .er-index__list { grid-template-columns: 1fr; }
  .exam-results .er-index__group { margin-top: 36px; }
  .exam-results .er-index__letter { font-size: 36px; border-bottom-width: 3px; }
  .exam-results .er-index__list li { padding: 14px 0 12px; font-size: 1em; }

  .exam-results .results-table { font-size: 16px; }
  .exam-results .results-table th,
  .exam-results .results-table td { padding: 10px 4px; }
  /* Long BTEC labels may wrap rather than push the table wider than the phone. */
  .exam-results .results-table tbody th { white-space: normal; }
  .exam-results .results-table-wrap { overflow-x: auto; }
}