/*
 * 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;
}

h1, h2, h3, h4,
.results-title, .section-header h2, .section-header-center h2,
.cta-content h2, .filter-title, .program-title, .uni-name, .ft-cta-copy h2 {
  font-weight: 600;
  letter-spacing: -0.014em;
}

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