/* vAfrica Airlines — brand overrides.
 *
 * Palette and type come from the brand system (see Github/brand/).
 * Canonical display face is Archivo; body is Hanken Grotesk (set in
 * mkdocs.yml theme.font.text); mono is IBM Plex Mono (theme.font.code).
 * Reference: https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors
 */

/* Display face for headings (Hanken Grotesk is loaded by Material via font.text). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&display=swap');

:root {
  /* --- Brand palette (single source of truth) --- */
  --vafrica-teal:        #009B8D;  /* primary surface/fill        */
  --vafrica-teal-ink:    #00726A;  /* links/text on light         */
  --vafrica-cyan:        #02B4DC;  /* secondary / stripe / dark links */
  --vafrica-cyan-light:  #8DDFF1;  /* tint / top stripe           */
  --vafrica-orange:      #BA4D00;  /* accent / CTA                */
  --vafrica-rust:        #7D3814;  /* deep accent / hover         */
  --vafrica-navy:        #0B2628;  /* ink / dark surface          */
  --vafrica-cream:       #EFEDEC;  /* surface / keyline           */
  --vafrica-flightpath:  #D93A2B;  /* motif line only             */
}

/* Light scheme: teal primary, orange accent, teal-ink links. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--vafrica-teal);
  --md-primary-fg-color--light: var(--vafrica-cyan);
  --md-primary-fg-color--dark:  var(--vafrica-navy);
  --md-accent-fg-color:         var(--vafrica-orange);
  --md-typeset-a-color:         var(--vafrica-teal-ink);
}

/* Dark scheme: keep the navy chrome, brighten links/accents for contrast. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--vafrica-teal);
  --md-primary-fg-color--light: var(--vafrica-cyan);
  --md-primary-fg-color--dark:  var(--vafrica-navy);
  --md-accent-fg-color:         var(--vafrica-cyan);
  --md-typeset-a-color:         var(--vafrica-cyan);
  --md-default-bg-color:        var(--vafrica-navy);
}

/* Headings in the display face. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Archivo", var(--md-text-font-family, system-ui), sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Full-width home hero banner (used at the top of docs/index.md). */
.vafrica-hero img,
img.vafrica-hero {
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  margin: 0.4rem 0 1.4rem;
  display: block;
}

/* Primary CTA in burnt orange for maximum "join" pull. */
.md-typeset .md-button--primary {
  background-color: var(--vafrica-orange);
  border-color: var(--vafrica-orange);
  color: #fff;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--vafrica-rust);
  border-color: var(--vafrica-rust);
  color: #fff;
}

/* Space out stacked CTA buttons a touch. */
.md-typeset .md-button + .md-button {
  margin-left: 0.4rem;
}

/* --- Header logo -------------------------------------------------------------
 * The roundel's disc is brand teal — the same color as the header — so on its
 * own it blends in. Sit it on a light chip and enlarge it a touch so the mark
 * reads clearly. Applies to the header and the mobile-drawer logo. */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.9rem;
  width: 1.9rem;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-sizing: content-box;
}

/* --- Expanded footer band ---------------------------------------------------- */
.vafrica-footer {
  background: var(--vafrica-navy);
  color: var(--vafrica-cream);
}
.vafrica-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 1.6rem;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
  align-items: start;
}
.vafrica-footer h4 {
  font-family: "Archivo", sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 0.7rem;
  color: #fff;
}
.vafrica-footer__brand strong {
  font-family: "Archivo", sans-serif;
  font-size: 0.98rem;
  color: #fff;
}
.vafrica-footer__brand p {
  margin: 0.35rem 0 0.8rem;
  font-size: 0.72rem;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 22rem;
}
.vafrica-footer__col a {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  color: var(--vafrica-cyan-light);
  text-decoration: none;
}
.vafrica-footer__col a:hover {
  color: #fff;
}
.vafrica-footer__cta {
  display: inline-block;
  background: var(--vafrica-orange);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 0.2rem;
  font-weight: 700;
  font-size: 0.72rem;
  text-decoration: none;
}
.vafrica-footer__cta:hover {
  background: var(--vafrica-rust);
  color: #fff;
}
@media screen and (max-width: 44em) {
  .vafrica-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}