:root {
  --theme-heading-font: Georgia, "Times New Roman", serif;
  --theme-body-font: "Segoe UI", Arial, sans-serif;
  --theme-heading-color: #193026;
  --theme-paragraph-color: #526158;
  --theme-accent-color: #b85c3c;
  --theme-on-accent-color: #ffffff;
  --theme-header-background: #fffdf6;
  --theme-header-text-color: #193026;
}

body,
button,
input,
select,
textarea {
  font-family: var(--theme-body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand strong {
  color: var(--surface-heading-color, var(--theme-heading-color));
  font-family: var(--theme-heading-font);
}

body p:not(.eyebrow):not(.status):not(.hero-note),
body li,
body dd {
  color: var(--surface-text-color, var(--theme-paragraph-color));
}

.site-header {
  color: var(--theme-header-text-color);
  background: color-mix(in srgb, var(--theme-header-background) 92%, transparent);
}

.site-header .brand,
.site-header .site-nav > a {
  color: var(--theme-header-text-color);
}

.site-header .site-nav > a[aria-current="page"] {
  color: var(--theme-accent-color);
}

.button,
button:not(.secondary):not(.nav-link):not(.text-button):not(.module-card):not(.lesson-row):not(.learning-primary):not(.learning-secondary):not(.menu-toggle):not(.nav-dropdown-toggle):not(.account-menu-toggle):not(.account-logout),
.primary-link {
  border-color: var(--theme-accent-color);
  color: var(--theme-on-accent-color);
  background: var(--theme-accent-color);
}

.site-header .site-nav > a.button {
  color: var(--theme-on-accent-color);
}

.button:hover,
button:not(.secondary):not(.nav-link):not(.text-button):not(.module-card):not(.lesson-row):not(.learning-primary):not(.learning-secondary):not(.menu-toggle):not(.nav-dropdown-toggle):not(.account-menu-toggle):not(.account-logout):hover,
.primary-link:hover {
  color: var(--theme-on-accent-color);
  background: color-mix(in srgb, var(--theme-accent-color) 86%, #000000);
}

.eyebrow,
.text-link,
.account-home-link,
.enquiry-card a {
  color: var(--surface-accent-color, var(--theme-accent-color));
}

/*
 * Contrast contract
 *
 * Add `surface-dark` to any component with a dark background. The variables
 * cascade through the entire component, keeping academy theme colours for
 * light surfaces while guaranteeing accessible text on dark surfaces.
 */
.surface-dark,
.module-grid article:hover {
  --surface-heading-color: #ffffff;
  --surface-text-color: #e7eee9;
  --surface-accent-color: #f4dc79;
  color: var(--surface-text-color);
}

.surface-accent {
  --surface-heading-color: var(--theme-on-accent-color);
  --surface-text-color: var(--theme-on-accent-color);
  --surface-accent-color: var(--theme-on-accent-color);
  color: var(--surface-text-color);
}

:where(.surface-dark, .surface-accent, .module-grid article:hover)
  :where(h1, h2, h3, h4, h5, h6, blockquote, .fee-price) {
  color: var(--surface-heading-color) !important;
}

:where(.surface-dark, .surface-accent, .module-grid article:hover)
  :where(p:not(.eyebrow):not(.status), li, dd, dt, label, small, figcaption) {
  color: var(--surface-text-color) !important;
}

:where(.surface-dark, .surface-accent, .module-grid article:hover)
  :where(.eyebrow, .card-kicker, .fee-label, .nav-label) {
  color: var(--surface-accent-color) !important;
}

:where(.surface-dark, .surface-accent, .module-grid article:hover)
  :where(a:not(.button), .text-link) {
  color: var(--surface-heading-color);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent-color) 72%, #ffffff);
  outline-offset: 3px;
}

[data-site-header] {
  display: block;
  min-height: 82px;
}

[data-site-footer] {
  display: block;
  min-height: 240px;
  background: #13261e;
}

@media (max-width: 760px) {
  [data-site-header] {
    min-height: 70px;
  }

  .site-nav {
    color: var(--theme-header-text-color);
    background: var(--theme-header-background);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-sidebar {
    transition: none;
  }
}