@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

/* duckOSM brand: ink + one yellow, as in the logo (images/duckosm-*.svg) */
:root {
  --dk-ink: #17191f;
  --dk-yellow: #ffd43b;
  --dk-paper: #f6f4ee;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--dk-ink);
  --md-primary-fg-color--light: #2a2d36;
  --md-primary-fg-color--dark: #0d0e12;
  --md-primary-bg-color: var(--dk-paper);
  --md-primary-bg-color--light: #f6f4eeb3;
}

/* accent = hover/focus colour; yellow is unreadable as text on white, so use a dark amber there */
[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #9a6b00;
  --md-typeset-a-color: #7a5500;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #111318;
}
/* slate re-sets the primary colours with a more specific selector; restate them for dark mode */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #1b1e25;
  --md-primary-fg-color--light: #2a2d36;
  --md-primary-fg-color--dark: #0d0e12;
  --md-primary-bg-color: var(--dk-paper);
  --md-primary-bg-color--light: #f6f4eeb3;
}
/* outline buttons are drawn in the primary colour, which is dark-on-dark here */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--dk-paper);
  border-color: #f6f4ee80;
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--dk-yellow);
  --md-typeset-a-color: var(--dk-yellow);
}

/* headings in the logo's wordmark face */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-header__title {
  font-family: "Space Grotesk", var(--md-text-font-family), sans-serif;
}
/* Material draws page titles light grey; full colour reads better */
.md-typeset h1 {
  color: var(--md-default-fg-color);
}

/* header logo: a touch larger than Material's 1.2rem default */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  width: 1.7rem;
}

/* Material's table text is small; results tables should read like the body text */
.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

/* ---- home page ---- */
.dk-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 1rem 0 2rem;
}
.dk-hero img {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
  border-radius: 50%;
}
/* the mark's dark disc needs an edge against the dark page */
[data-md-color-scheme="slate"] .dk-hero img {
  box-shadow: 0 0 0 2px #3a3e48;
}
.dk-hero h1 {
  margin: 0 0 0.4rem;
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dk-hero p {
  margin: 0;
  font-size: 1.15em;
}
@media screen and (max-width: 44.9375em) {
  .dk-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .dk-hero img { width: 5rem; height: 5rem; }
}

.md-typeset .md-button--primary {
  background-color: var(--dk-yellow);
  border-color: var(--dk-yellow);
  color: var(--dk-ink);
}
.md-typeset .md-button--primary:hover {
  background-color: #f2c200;
  border-color: #f2c200;
  color: var(--dk-ink);
}

/* embedded maps: a "Full screen" button above each (assets/fullscreen.js) */
.dk-frame-bar { display: flex; justify-content: flex-end; margin: 0.6em 0 0.3em; }
.dk-fullscreen { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.4em 1em; cursor: pointer;
  border: 0; border-radius: 4px; background: var(--dk-yellow); color: var(--dk-ink);
  display: inline-flex; align-items: center; gap: 0.45em; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dk-fullscreen:hover { filter: brightness(0.9); }
.md-content img[src*="images/"] { cursor: zoom-in; }
.md-content img:fullscreen { object-fit: contain; background: #fff; }