/* ─── Grid width ─────────────────────────────────────────────────────────── */
.md-grid {
  max-width: 1920px;
}

/* ─── Navigation spacing ─────────────────────────────────────────────────── */
.md-nav__link {
  margin-top: 1em;
}

[data-md-level="2"] {
  font-size: .6rem;
}

/* ─── Brand colors ───────────────────────────────────────────────────────── */
/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #005BBB;
  --md-primary-fg-color--light: #3d8dde;
  --md-primary-fg-color--dark:  #003f84;
  --md-primary-bg-color:        #ffffff;
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #3d8dde;
  --md-primary-fg-color--light: #6aaee8;
  --md-primary-fg-color--dark:  #005BBB;
  --md-primary-bg-color:        #ffffff;
  --md-hue:                     210;
}

/* ─── Two-tone header: white top bar + blue tab bar ─────────────────────── */

/* White top bar in light mode */
[data-md-color-scheme="default"] .md-header {
  background-color: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

[data-md-color-scheme="default"] .md-header__title {
  color: #1a1a1a;
}

[data-md-color-scheme="default"] .md-header__button {
  color: #444444;
}

[data-md-color-scheme="default"] .md-header__button:hover {
  color: #005BBB;
  opacity: 1;
}

/* Blue navigation tab bar — light mode */
[data-md-color-scheme="default"] .md-tabs {
  background-color: #005BBB;
}

/* Dark blue tab bar — dark mode */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #003f84;
}

/* Tab link colours (both modes) */
.md-tabs__link {
  color: rgba(255, 255, 255, 0.75);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: #ffffff;
}

/* ─── Hero banner ────────────────────────────────────────────────────────── */
.hero-banner {
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #003f84 0%, #005BBB 60%, #3d8dde 100%);
  color: #ffffff;
  border-radius: 6px;
  margin-bottom: 2rem;
}

.hero-banner h1 {
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-banner p {
  font-size: 1.15rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-banner .md-button {
  color: #005BBB;
  background: #ffffff;
  border-color: #ffffff;
  margin: 0.3rem;
}

.hero-banner .md-button:hover {
  background: #e8f0fb;
  border-color: #e8f0fb;
}

.hero-banner .md-button--primary {
  background: #ffffff;
  color: #005BBB;
  font-weight: 600;
}

.hero-banner .md-button--secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.hero-banner .md-button--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}