/* ==========================================================================
   Palette: navy-gold  —  navy blue, gold, white
   --------------------------------------------------------------------------
   Navy is the structure: the chrome, the headings, the text that has to be
   read. Gold is the accent: rules, active states, the call to action. White
   is the page.

   THE ONE THING THAT DECIDES THIS PALETTE. Gold cannot carry text on white.
   Measured against #ffffff:

       #D4AF37  2.10:1      #C9A227  2.42:1      #B8942E  2.87:1
       #A8851F  3.48:1      #96751B  4.32:1      #8A6F22  4.80:1

   Body text needs 4.5:1 and only the last of those reaches it - by which
   point it is an olive, not a gold. On navy it is the opposite story:
   #D4AF37 is 7.51:1 on #0C2340, so the true gold is bright and legible the
   moment it has a dark ground under it.

   So the gold goes where there is navy behind it or no text on it at all,
   and anywhere gold would have to be read against white it steps down to
   #8A6F22. Two golds, the same reason there were two reds.

     --accent      #D4AF37  true gold. Rules, borders, tints, fills, and
                            anything sitting on the navy.
     --accent-deep #8A6F22  4.80:1 on white and 4.80:1 under white, so it
                            works as text either way round.

   WHITE ON GOLD IS 2.10:1, so the call to action is navy on gold rather than
   the white the button carries in every other palette - overridden at the
   foot of this file. That is the classic pairing anyway.

   Navy #0C2340 is 15.79:1 against white, in both directions.
   ========================================================================== */
:root {
  /* The --gold-* tokens name the chrome, not the colour: main.css uses them
     for the navigation bar, the utility bar and the announcement strip. Here
     that chrome is navy. */
  --gold:            #0C2340;   /* the navigation bar            */
  --gold-bright:     #13315C;
  --gold-mid:        #102A4C;   /* the announcement strip        */
  --gold-dark:       #0A1F3C;   /* the utility bar               */
  --gold-deep:       #102A4C;   /* testimonial band              */

  --accent:          #D4AF37;   /* true gold: rules, tints, fills  */
  --accent-deep:     #8A6F22;   /* gold dark enough to read on white */
  --accent-soft:     #8A6F22;   /* two-tone headings are TEXT        */
  --accent-rgb:      212 175 55;

  --blue:            #0C2340;
  --blue-dark:       #0A1F3C;
  --brand:           #0C2340;

  --cta:             #D4AF37;
  --cta-hover:       #C9A227;
}

/* --------------------------------------------------------------------------
   The bands are navy now, so what sits on them has to be white. main.css
   sets these in ink, which was right on a yellow bar and is unreadable on
   this one.
   -------------------------------------------------------------------------- */
.nav, .nav a, .nav__link, .topbar, .topbar a, .marquee, .marquee a {
  color: #ffffff;
}
.nav__link:hover, .topbar a:hover, .marquee a:hover { color: var(--accent); }

/* The dropdown panels hang off the navy bar but are white inside, so their
   links stay dark - without this they inherit the white above and vanish. */
.nav__submenu a, .nav__mega a, .nav__submenu, .nav__mega { color: var(--ink); }
.nav__submenu a:hover, .nav__mega a:hover { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   Header variant 2: a navy utility strip over a white block
   --------------------------------------------------------------------------
   The v2 header is white, so the navy would otherwise appear nowhere above
   the fold. The small top row takes it - which is where a university header
   usually carries its darkest band - and the main navigation stays white
   with navy labels and a gold marker.
   -------------------------------------------------------------------------- */
/* LAYOUT IN A PALETTE FILE, AND ON PURPOSE. header-v2.css puts the utility
   row in the middle column with the crest beside it spanning both rows - so
   there is no full-width row for a band to live in, and bleeding the strip
   sideways simply painted it over the crest.

   The strip only exists in this palette, so the three lines that give it a
   row of its own live here rather than changing the header for every other
   palette. Dropping this palette puts the header back exactly as it was.

   Row 1 is the strip, edge to edge. Crest, navigation and the call to action
   move down into row 2 together.

   ABOVE 1200px ONLY, WHICH IS WHERE THE STRIP EXISTS AT ALL. Below that
   header-v2.css collapses the header to a single row - crest, call to action,
   hamburger - and hides the utility row. Left unscoped, the grid-row: 2 below
   still applied down there and pushed the crest and Apply Now onto a second
   row while the hamburger stayed on the first, which is exactly how it looked
   on a phone: a lone menu button above everything else. */
@media (min-width: 1200px) {
  .hdr2__inner { grid-template-rows: auto auto; }
  .hdr2__util {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: -8px calc(var(--gutter) * -1) 8px;   /* out to the header's edges */
    padding: 7px var(--gutter);
    background: var(--gold-dark);
  }
  .hdr2__brand { grid-column: 1; grid-row: 2; }
  .hdr2__nav   { grid-column: 2; grid-row: 2; }
  .hdr2__cta   { grid-column: 3; grid-row: 2; }

  /* Folded away on scroll, the strip must give its row back too or the header
     keeps a 30px gap where it used to be. */
  .hdr2.is-compact .hdr2__util { margin-bottom: 0; padding-block: 0; }
}
.hdr2__util a { color: rgba(255, 255, 255, .88); }
.hdr2__util a:hover { color: var(--accent); }

.hdr2 .nav__link { color: var(--brand); }
.hdr2 .nav__link:hover { color: var(--accent-deep); }
.hdr2 .nav__link.is-current {
  color: var(--brand);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.hdr2__name { color: var(--brand); }
.hdr2__help-num { color: var(--brand); }
.hdr2__help-num:hover { color: var(--accent-deep); }

/* NAVY ON GOLD, NOT WHITE ON GOLD. header-v2.css sets the label to #fff,
   which is 2.10:1 here. Navy on the same gold is 7.51:1. */
.hdr2__apply { color: var(--brand); }
.hdr2__apply:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------
   .btn--gold is filled with var(--gold) and labelled var(--ink) - correct on
   a yellow bar, invisible now that --gold is navy. Dark text on a navy fill
   measured 1.3:1; the View All under the appreciations was a navy pill with
   navy writing on it.

   White on this navy is 15.79:1, so the label simply flips.
   -------------------------------------------------------------------------- */
.btn--gold, .btn--gold:hover, .btn--gold:focus { color: #ffffff; }
.btn--outline-gold { border-color: var(--brand); color: var(--brand); }
.btn--outline-gold:hover { background: var(--brand); color: #ffffff; }

/* The enquiry form's Submit. home-v2.css fills it with --accent-deep and
   labels it white, which is the right rule for a palette whose accent cannot
   take white - but here it came out olive rather than gold. Filled with the
   true gold and labelled navy instead, which is 7.51:1 and matches Apply Now
   at the top of the page. */
.home-enquiry .lead-form__button {
  background: var(--cta);
  color: var(--brand);
}
.home-enquiry .lead-form__button:hover {
  background: var(--cta-hover);
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   Testimonials
   --------------------------------------------------------------------------
   The band sets its own --tst-* colours in home-v2.css, to the five the brief
   names. It used to be re-pointed from here, which worked only because the
   palette loads after home-v2.css - a load-order win, not a decision. Left to
   the section itself now, so it looks the same whichever palette is on.
   -------------------------------------------------------------------------- */