/*
 * TopAustraliaUniversities — 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, so the two sites stay in step if either is restyled.
 *
 * This file is the ONLY place the two differ, and it is deliberately restrained.
 * The palette still reads as the Australian flag, but desaturated: the blue is a
 * muted navy rather than Pantone 280C, and the red is a brick tone that appears in
 * small doses only — an active tab, a live indicator — never across a whole button
 * or a whole bar. Loud colour on a directory page competes with the data, which is
 * the thing people came for.
 *
 * It overrides tokens, and two component rules that would otherwise put the accent
 * on large surfaces. It changes no geometry.
 */
:root {
  /* Deep brand blue — the flag's Commonwealth blue, desaturated and lightened
     just enough to stop it vibrating against white text. */
  --fj-deep: #22344f;
  --fj-deep-2: #1a2839;
  --fj-brand: #3d5a80;
  --fj-brand-dark: #2e4763;

  /* Surfaces: cool grey rather than blue-tinted, so cards read as paper. */
  --fj-tint: #f4f6f9;
  --fj-tint-2: #e7ebf1;
  --fj-section: #f7f8fa;

  /* Ink: never pure black. #2c3542 at 16px is comfortable to read for a long time. */
  --fj-text: #2c3542;
  --fj-muted: #6b7684;
  --fj-border: #e3e7ed;

  /* The accent. A brick tone, not a signal red — reserved for the active tab
     underline and small state marks. See the component overrides below. */
  --fj-orange: #9c4a42;
  --fj-orange-hover: #ad5a51;

  --shadow-sm: 0 1px 2px rgba(34, 52, 79, .05);
  --shadow-md: 0 4px 14px rgba(34, 52, 79, .08);

  /* Type. One family, used quietly: Inter at 400/500/600, with headings tightened
     rather than enlarged. The inherited Outfit/Poppins display face is geometric
     and draws attention to itself; on a page whose job is 30 university names in a
     row, that is the wrong kind of attention. */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Gold is a UI accent for funded/scholarship chips only — muted to sand so it
     sits beside the brick without either shouting. It is not a flag colour and
     must never read as a government rating: Australia has no official university
     star rating (see /star-rating). */
  --gold: #8a6f3c;
  --gold-soft: #f6f2e8;
}

/* Headings INHERIT their colour; the colour lives on body.
   theme-modern.css sets an explicit `color` on h1–h4, and an explicit colour on
   the element beats a colour inherited from an ancestor. That made every heading
   inside a dark Tailwind block — the "Why study in Australia?" hero, the footer
   CTAs, the homepage bands — render near-black on navy and effectively invisible.
   Inheriting fixes the whole class of it at once: themed pages still get
   --fj-text from body, and a section that sets text-white keeps white headings. */
h1, h2, h3, h4, h5, h6,
.results-title, .section-header h2, .section-header-center h2,
.cta-content h2, .filter-title, .program-title, .uni-name, .ft-cta-copy h2 {
  color: inherit;
  font-weight: 600;
  letter-spacing: -0.014em;
}

body { color: var(--fj-text); }

/* Same inheritance problem, one level down: the theme sets `a { color: … }`, which
   beat the `text-current` the legacy breadcrumb component inherits, leaving the
   trail slate-on-navy inside dark hero bands. The themed collection breadcrumb
   (.breadcrumbs) keeps its own muted colour — it only ever sits on light. */
nav[aria-label="Breadcrumb"]:not(.breadcrumbs) a { color: inherit; }

/* Links inside a dark brand block inherit too. Same cause once more: the theme's
   `a { color: var(--fj-brand) }` is an explicit colour, so it beat the white the
   block passes down — on /cricos-courses that rendered the
   "cricos.education.gov.au" link in #3d5a80 on a #3d5a80 background, i.e.
   completely invisible. These selectors name the exact utilities the legacy
   pages use to make a dark band. */
/* ---- Cascade layers: why Tailwind colours were losing ----
   Tailwind v4 puts its utilities in `@layer utilities`. Every rule in the
   borrowed theme is UNLAYERED, and in the CSS cascade an unlayered rule beats a
   layered one however specific the layered one is. So the theme's plain
   `a { color: var(--fj-brand) }` silently beat `.text-white` on 48 buttons — the
   scholarship page's "Apply on official site" rendered #3d5a80 text on a #3d5a80
   background, i.e. an invisible button.

   These re-declare the colour utilities that sit on coloured surfaces, unlayered
   and last, so they win again. Values come from Tailwind's own theme variables,
   so the palette stays in one place. */
.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(61, 90, 128, .16); }

/* ---- The places the accent would otherwise cover a large surface ----
   findinguni's primary button, search button and mobile filter bar are all the
   hot accent, set with !important. At this palette's saturation that is right for
   one small tab underline and far too much for a full-width button, so they all
   become the deep brand blue and the accent keeps its job as a marker. The
   !important is not decoration here — 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-deep) !important;
  background-image: none !important;
  border-color: var(--fj-deep) !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) !important;
  border-color: var(--fj-brand) !important;
  transform: none;
}

/* Buttons read as controls, not as shouts: body face, 600 rather than 700, and a
   size that matches the text around them. */
.button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 4px;
  transition: background .15s ease, border-color .15s ease;
}
.button-outline, .button-ghost {
  border: 1px solid var(--fj-border);
  color: var(--fj-deep);
  background: #fff;
  font-weight: 600;
}
.button-outline:hover, .button-ghost:hover { border-color: var(--fj-brand); background: var(--fj-tint); }

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

/* Keep the accent where it reads as information rather than decoration. */
.tab-button.tab-active { border-bottom-color: var(--fj-orange) !important; }

/* Muted ink is comfortable on white (4.9:1) but dips to 4.0:1 on the tinted
   chip background, which is under AA. 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); }