/*
 * Top Universities in UK — brand layer.
 *
 * Layout, components and class names come from the design used on findinguni.com
 * (same owner): style.css, utilities.css, footer.css and theme-modern.css are
 * that design, unmodified. This file is the ONLY place the two differ, and it
 * overrides tokens only — it changes no geometry.
 *
 * PALETTE, third iteration (2 Oct 2026).
 *
 * The first was a desaturated navy (#3d5a80) with a brick accent held back to a
 * 2px tab underline. The second was eucalypt green with ochre. Both were called
 * dull, and both failed the same way: the PRIMARY was desaturated. A muted
 * primary on muted neutrals gives a page no focal point, and no amount of
 * accent-shuffling fixes that.
 *
 * So the structure changed rather than the hue:
 *   - ink carries the weight     — near-black #141619 for chrome and headings
 *   - a VIVID blue carries action — #2563eb, saturated on purpose, the one colour
 *                                   that pops, used only on things you can click
 *   - amber marks value           — #f59e0b fills, #b45309 for text on white
 *   - surfaces are WARM neutrals  — #f8f7f5, not a cool blue-grey, so the blue
 *                                   reads crisp instead of corporate-cold
 *
 * On a page that is thirty university names, fees and codes in a row, this gives
 * the data a quiet ground and the controls somewhere obvious to be.
 *
 * Both token families are redeclared: --fj-* for the borrowed theme and --color-*
 * for the Tailwind utilities in the Blade markup. There is no node toolchain on
 * the server, so the compiled CSS cannot be rebuilt; this file loads last, so
 * overriding the custom properties recolours both layers.
 */
:root {
  /* Chrome and headings: near-black with a trace of warmth, never pure #000. */
  --fj-deep: #141619;
  --fj-deep-2: #0d0f12;
  /* Action: a real blue, at full saturation. */
  --fj-brand: #21508f;
  --fj-brand-dark: #1a4076;
  --fj-tint: #f1f4f9;
  --fj-tint-2: #dfe6f1;
  --fj-section: #f8f7f5;
  --fj-text: #141619;
  --fj-muted: #5b6066;
  --fj-border: #e5e3df;

  /* Amber marks value — funding, highlights. Text-safe shade below. */
  --fj-orange: #b86d0a;
  --fj-orange-hover: #94550a;

  --shadow-sm: 0 1px 2px rgba(20, 22, 25, .06);
  --shadow-md: 0 6px 18px rgba(20, 22, 25, .09);

  /* The site ran Inter for headings AND body AND labels AND figures - one voice
     at four sizes, which is the main reason it read flat whatever the palette
     was. Newsreader carries the headings; Inter keeps the UI and the data, where
     its tabular figures matter more than character. */
  --font-display: 'Instrument Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --gold: #b45309;
  --gold-soft: #fdf6e7;

  /* ---- Tailwind families ---- */
  --color-brand-50:  #f1f4f9;
  --color-brand-100: #dfe6f1;
  --color-brand-200: #c3d1e5;
  --color-brand-300: #9bb1d0;
  --color-brand-400: #6a8bb8;
  --color-brand-500: #3d68a1;
  --color-brand-600: #21508f;   /* the action blue */
  --color-brand-700: #1a4076;
  --color-brand-800: #15325d;
  --color-brand-900: #0f2442;

  --color-accent-50:  #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #d99311;
  /* 600+ carry small text, so they are darkened to clear AA on white rather
     than kept at the display amber (#d97706 is only 3.0:1 and fails). */
  --color-accent-600: #b45309;
  --color-accent-700: #92400e;
  --color-accent-800: #78350f;
  --color-accent-900: #5c2a0c;

  --color-paper: #f8f7f5;
  --color-paper-dark: #efedea;
  --color-ink: #141619;
  --color-ink-soft: #5b6066;
  --color-line: #e5e3df;
}

/* ---- Utilities that sit on coloured surfaces ----
   The borrowed theme is UNLAYERED, and an unlayered rule beats a layered one
   however specific. The theme's plain `a { color: var(--fj-brand) }` once beat
   `.text-white` on 48 buttons, so "Apply on official site" rendered
   brand-on-brand — an invisible button. These re-declare the colour utilities,
   unlayered and last, so they win again. */
.text-white { color: #fff; }
.text-brand-600 { color: var(--color-brand-600); }
.text-brand-700 { color: var(--color-brand-700); }
.text-accent-600 { color: var(--color-accent-600); }
.text-accent-700 { color: var(--color-accent-700); }
.text-gold-400 { color: var(--color-gold-400); }
.text-gold-700 { color: var(--color-gold-700); }
.text-ink { color: var(--color-ink); }
.text-ink-soft { color: var(--color-ink-soft); }

[class*="bg-brand-6"] a, [class*="bg-brand-7"] a,
[class*="bg-brand-8"] a, [class*="bg-brand-9"] a,
[class*="bg-accent-6"] a, [class*="bg-accent-7"] a,
[class*="bg-ink"] a {
  color: inherit;
}

::selection { background: rgba(33, 80, 143, .16); }

/* ---- Primary controls ----
   findinguni's primary button, search button and mobile filter bar are all the
   hot accent, set with !important. Here they take the ACTION blue: a button is
   the one place a saturated colour belongs, and it is what was missing when the
   primary was muted. The !important is not decoration — the rules being
   overridden carry it. */
.button-primary, .search-button, .filter-apply-btn, .mobile-filter-btn,
.cta-actions .button-primary, .search-card .button-primary, .newsletter-button,
.fj-search button {
  background: var(--fj-brand) !important;
  background-image: none !important;
  border-color: var(--fj-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.button-primary:hover, .search-button:hover, .filter-apply-btn:hover,
.mobile-filter-btn:hover, .cta-actions .button-primary:hover,
.fj-search button:hover {
  background: var(--fj-brand-dark) !important;
  border-color: var(--fj-brand-dark) !important;
  transform: none;
}

/* Buttons read as controls, not as shouts. */
.button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 6px;
  transition: background .15s ease, border-color .15s ease;
}
.button-outline, .button-ghost {
  border: 1px solid var(--fj-border);
  color: var(--fj-text);
  background: #fff;
  font-weight: 600;
}
.button-outline:hover, .button-ghost:hover { border-color: var(--fj-brand); color: var(--fj-brand); background: var(--fj-tint); }

/* The active filter's left edge marks position. */
.filter-link.is-active { box-shadow: inset 3px 0 0 var(--fj-brand); }

/* The active tab gets the action blue, so the thing you are looking at and the
   thing you can click share one colour. */
.tab-button.tab-active { border-bottom-color: var(--fj-brand) !important; }

/* Muted ink is comfortable on white but dips below AA on a tinted chip. An
   element carrying both classes is a chip, so it gets full ink. */
.bg-paper-dark.text-ink-soft,
.bg-paper.text-ink-soft { color: var(--color-ink); }


/* ---- Typography ----
   The theme uses var(--font-display) in 38 places, so the face swap reaches every
   heading on its own. These are the adjustments a serif needs that a grotesk did
   not: a serif at display size wants negative tracking and tighter leading, and
   it wants to be set at 500/600 rather than 700, which on Newsreader reads heavy. */
h1, h2, h3, .tw-h1, .tw-h2,
[class*="font-display"] {
  font-family: var(--font-display);
  letter-spacing: -.011em;
  font-weight: 600;
}
h1, .tw-h1 { line-height: 1.16; letter-spacing: -.016em; }
h2 { line-height: 1.22; }
h3 { line-height: 1.3; }

/* Uppercase labels need the opposite: positive tracking, and the body face,
   because a serif at 10px in caps turns to mud. */
.urow .k, .uni-h-meta .k, th, [class*="uppercase"], .tw-label {
  font-family: var(--font-body);
  letter-spacing: .06em;
}

/* ---- Figures ----
   This site is fees, UCAS codes, durations and ranking positions in columns.
   Proportional digits make those columns ragged; tabular ones line them up.
   Scoped to data, not to prose, where tabular figures read oddly. */
table th, table td,
.urow .v, .program-meta, .uni-h-meta,
.font-mono, [class*="tabular"], [class*="tw-stat"], [class*="tw-num"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* A serif heading sitting directly on a hairline looked cramped; give the
   borrowed theme's section heads a little more air above the rule. */
.section-head, .card-head { letter-spacing: -.01em; }


/* ---- Article body ----
   .html-content previously carried table styling and nothing else, so a 5,000
   character post rendered as unstyled paragraphs: no rhythm, no heading scale,
   no list indents, no link colour. These give the body the same typographic
   system as the rest of the site. */
.article-figure {
  margin: 0 0 26px;
  border: 1px solid var(--fj-border);
  border-radius: 10px;
  overflow: hidden;
}
.article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }

.html-content, .article-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--fj-text);
}
/* Measure: running text past about 75 characters is tiring to read. */
.html-content > p, .article-body > p,
.html-content > ul, .html-content > ol { max-width: 68ch; }

.html-content p, .article-body p { margin: 0 0 1.15em; }

.html-content h2, .article-body h2 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
  margin: 2em 0 .5em;
}
.html-content h2:first-child, .article-body h2:first-child { margin-top: 0; }
.html-content h3, .article-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.7em 0 .45em;
}
.html-content h4, .article-body h4 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 1.5em 0 .4em;
}

.html-content ul, .html-content ol,
.article-body ul, .article-body ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.html-content li, .article-body li { margin: .35em 0; padding-left: .15em; }
.html-content ul > li, .article-body ul > li { list-style: disc; }
.html-content ol > li, .article-body ol > li { list-style: decimal; }
.html-content li::marker, .article-body li::marker { color: var(--fj-muted); }

.html-content a, .article-body a {
  color: var(--fj-brand);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.html-content a:hover, .article-body a:hover { color: var(--fj-brand-dark); }

.html-content strong, .article-body strong { font-weight: 650; color: var(--fj-text); }

.html-content blockquote, .article-body blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--fj-brand);
  color: var(--fj-muted);
  font-size: 17px;
}
.html-content blockquote p:last-child, .article-body blockquote p:last-child { margin-bottom: 0; }

.html-content hr, .article-body hr { display: none; }

.html-content img, .article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.4em 0; }

.html-content code, .article-body code {
  font-size: .9em;
  background: var(--fj-tint);
  border: 1px solid var(--fj-border);
  border-radius: 4px;
  padding: .1em .35em;
}

@media (max-width: 640px) {
  .html-content, .article-body { font-size: 16px; line-height: 1.68; }
  .html-content h2, .article-body h2 { font-size: 21px; }
  .html-content h3, .article-body h3 { font-size: 17.5px; }
}


/* ---- "Read the guide" and the other inline cues ----
   These are TEXT cues, not buttons. theme-modern.css gives .link-small a solid
   var(--fj-orange) background inside .program-card / .scholarship-card /
   .uni-card, and the theme's unlayered `a { color: var(--fj-brand) }` then paints
   link-blue, underlined text on top of it: a brown bar with unreadable text.

   It is the same cascade trap that produced the 48 invisible buttons noted
   above, so the fix is the same shape: declared unlayered and last, and
   !important because the rules being overridden carry it. */
.link-small,
.program-card .link-small, .scholarship-card .link-small, .uni-card .link-small,
.scholarship-card-body .link-small, .card .link-small, .results-grid .link-small {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--fj-brand) !important;
  text-decoration: none !important;
  font-weight: 600;
}
/* The underline belongs on hover, where it says "this is clickable", rather
   than sitting there permanently on a coloured slab. */
.link-small:hover,
.card:hover .link-small,
a:hover .link-small {
  color: var(--fj-brand-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}