/* Hercules Trophy: navy text, orange buttons, a navy WhatsApp button in the header. */
:root {
  --brand: #eb5a40;
  --brand-dark: #eb5a40;
  --brand-border: #b84632;
  --accent: #eb5a40;
  --accent-dark: #b84632;
  --dark: #002335;
  --text: #002335;
  --heading: #002335;
  --nav: #002335;
  --body-size: 24px;
  --body-line: 1.375;
  --h2-size: 48px;
  --button-size: 24px;
  --sponsors-title: 28px;
}
.button--brand { text-shadow: none; }
.button--green { color: #fff; background: #3ebb15; border-color: #3ebb15; }
.button--teal { color: #fff; background: #5bc0cd; border-color: #5bc0cd; border-radius: 0; }
.container { max-width: 1100px; }
.site-header__inner { max-width: 1100px; }
.list--numbered li::before { color: var(--brand); }
.card--grey { background: #f0f0f0; }
/* The home page: text in the sky of the photo, the button at the bottom of it */
.hero--top { align-items: stretch; padding: 24px 0; }
.hero--top .container, .hero--top .row, .hero--top .column { display: flex; flex-direction: column; flex: 1; }
.hero--top h2, .hero--top p { color: var(--dark); text-shadow: none; }
.hero--top .row { align-items: stretch; }
.hero--top h1 { color: var(--brand); text-shadow: none; }
.hero--top .column > .text { margin-bottom: 0; }
.hero--top .button-row { margin-top: auto; }
.hero--top .button { color: #fff; }
.text a, .lead a, .list a { font-weight: 400; color: inherit; text-decoration: underline; }
.site-header__logo img { width: 175px; height: auto; }
.site-nav a { font-size: 17.6px; text-transform: none; }
.site-header__login { padding: 12px 24px; color: #fff; background: var(--dark); border-color: var(--dark); font-size: 17.6px; text-transform: none; }
.sponsors { text-align: center; }
.site-footer__columns { max-width: 1100px; grid-template-columns: 1fr 1fr 1fr; color: var(--text); font-size: 15px; }
.site-footer__columns a { text-decoration: underline; }
/* Links, contact and socials side by side, the small print centred under them */
.site-footer__right { display: contents; text-align: left; }
.site-footer__legal { grid-row: 2; grid-column: 1 / -1; text-align: center; }
.socials { justify-self: start; align-self: start; gap: 0; margin: 0; padding: 4px 8px; background: var(--brand); }
.socials a { color: #fff; }
.socials a:hover, .socials a:focus-visible { color: #fff; opacity: .8; }
@media (max-width: 1000px) {
  .site-header__logo img { width: 130px; }
  .site-header__login { padding: 7px 14px; font-size: 14px; }
}
@media (max-width: 680px) {
  :root { --h2-size: 32px; --body-size: 18px; --button-size: 20px; }
  .button { font-size: 20px; }
  .site-footer__columns { grid-template-columns: 1fr; }
  .site-footer__legal { grid-row: auto; order: 9; }
  .site-footer__columns ul { text-align: center; }
  .socials { justify-self: center; }
  /* The text belongs in the sky of the photo, so the photo keeps its height on a phone */
  .hero--top { min-height: 600px; }
  .hero--top .hero__image { object-position: 60% top; }
}