/* ── Google fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400..700&family=Comfortaa:wght@300..700&display=swap');

/* ── Global brand colors ──────────────────────────────────────────────────── */
:root {
  --primary-blue: #005ce6;
  --accent-red  : #e60000;

  /* Material CSS variables */
  --md-primary-fg-color          : var(--primary-blue);
  --md-accent-fg-color           : var(--accent-red);
  --md-header-fg-color           : var(--primary-blue);   /* icon & text in header */
  --md-header-fg-color--light    : var(--primary-blue);
  --md-header-bg-color           : #ffffff;               /* white header */
  --md-tabs-bg-color             : #ffffff;
}

/* Desktop & tablet */
.md-header__title,
.md-header__title a,        /* link wrapper */
.md-header__topic {         /* fallback element in some layouts */
  font-family: "Comfortaa", cursive;
  font-weight: 700;
  font-size: 2rem;        /* same as main site */
  line-height: 1.3;           /* keeps bar compact */
  color: var(--primary-blue);
}

/* Mobile safeguard (prevents overflow on narrow screens) */
@media (max-width: 600px) {
  .md-header__title,
  .md-header__title a,
  .md-header__topic {
    font-size: 1.6rem;
  }
}

[data-md-color-scheme="default"] {
  /* Keep the navigation bar white */
  --md-header-bg-color: #ffffff;
  --md-tabs-bg-color  : #ffffff;

  /* Make all header text & icons BowlBoard blue */
  --md-header-fg-color        : var(--primary-blue);
  --md-header-fg-color--light : var(--primary-blue);
  --md-header-fg-color--dark  : var(--primary-blue);

  /* Accents (hover states, buttons, etc.) */
  --md-accent-fg-color: var(--accent-red);
}

/* Dark-mode tweaks (keep header dark, colors unchanged) */
[data-md-color-scheme="slate"] {
  /* Let Material handle dark header */
  --md-header-fg-color        : #ffffff;
  --md-header-fg-color--light : #ffffff;
  --md-header-fg-color--dark  : #ffffff;
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__title a,
[data-md-color-scheme="slate"] .md-header__topic,
[data-md-color-scheme="slate"] .md-tabs__link {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: var(--accent-red);         /* or #ffde59 for a gold pop */
}

[dir="ltr"] .md-header__title {
  margin-left: 0;
}

/* highlight the external tab like the others */
.md-tabs__link[href^="https://www.bowlboard.com"] {
  font-family: "Comfortaa", cursive;
  font-weight: 700;
}
[data-md-color-scheme="default"] .md-tabs__link[href^="https://www.bowlboard.com"] { color: var(--primary-blue); }
[data-md-color-scheme="slate"]   .md-tabs__link[href^="https://www.bowlboard.com"] { color: #fff; }

/* ── Typography ───────────────────────────────────────────────────────────── */
body,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Jost', sans-serif;
}

/* Project title (“bowlboard”) */
.md-header__title { display: flex; align-items: center; gap: .5rem; }

.md-header__title,
.md-header__topic {
  font-family: 'Comfortaa', cursive;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .3px;
}

.md-header__button.md-logo img {
  width: 40px;
  height: 40px;
  min-width: 40px;          /* prevents it from shrinking on narrow screens */
  object-fit: contain;      /* keeps proportions if you ever swap images    */
}

/* Top-bar nav links (“Overview”, “API”, …) */
.md-tabs__link {
  font-family: 'Comfortaa', cursive;
  font-weight: 500;
  transition: color .2s ease;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--primary-blue);
}

/* Optional: subtle drop shadow on header to mimic site */
.md-header,
.md-tabs {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Buttons */
.md-button--primary {
  background-color: var(--primary-blue);
  color: #fff;
}
.md-button--primary:hover {
  background-color: #0041a3;
}

/* Links inside content */
a               { transition: color .15s ease; }
a:hover         { color: var(--primary-blue); }