/*
 * theme.css - GET DRIVERS look: an established local firm.
 * Navy name on white, a traditional red accent, a sturdy classic typeface. No symbol.
 * base.css (shared) does the layout; this file only sets colours, fonts and the wordmark.
 */

/* Archivo: a sturdy grotesque (SIL Open Font Licence, self-hosted - no Google requests). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;      /* variable font: any weight in this range */
  font-display: swap;
}

:root {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Two-tier header: white top bar with the navy name, navy menu bar */
  --top-bg: #ffffff;
  --top-text: #14304f;
  --top-muted: #5a6878;
  --line-top: #e3e8ee;
  --nav-bg: #14304f;
  --nav-text: #ffffff;

  --dark: #14304f;           /* navy */
  --dark-2: #0f2540;
  --accent: #c8102e;         /* traditional British red */
  --accent-hover: #a50d26;
  --eyebrow: #c9d6e6;        /* the small line above home headlines */
  --accent-pale: #ffd0d6;    /* link hover on navy */
  --btn-text: #ffffff;
  --tick-mark: #ffffff;
  --link: #1d4f91;           /* blue links on white (passes contrast checks) */
  --tint: #f4f6f9;
  --line: #dfe4ea;
  --text: #1b2430;
  --muted: #5a6878;
  --on-dark: #d9e1ea;
  --dim-on-dark: #a9b8c8;
  --border-on-dark: #2c4a6c;
}

/* The wordmark: the name in navy, a short red rule, and a small descriptor underneath */
.gd-wordmark { display: inline-grid; line-height: 1; color: var(--top-text); }
.gd-name { font-family: var(--font-display); font-weight: 800; font-size: 2.05rem; letter-spacing: -.02em; }
.gd-tag { font-family: var(--font-display); font-weight: 500; font-size: .82rem; color: var(--muted); margin-top: .45rem; padding-top: .4rem; border-top: 3px solid var(--accent); width: max-content; }
/* On the navy footer the wordmark turns white */
.footer-brand .gd-wordmark { color: #fff; margin-bottom: .75rem; }
.footer-brand .gd-tag { color: var(--dim-on-dark); }
@media (max-width: 900px) { .gd-name { font-size: 1.65rem; } .gd-tag { font-size: .75rem; } }