/*
 * WorkDone brand theme for MkDocs Material.
 *
 * Palette sourced from workdone.ai:
 *   Teal (primary accent)  #44BEAE
 *   Navy (headings/header) #112337 / deep navy #041B2E
 *   Gray (body secondary)  #8B8B8B
 *   Light surface          #F5F5F5
 */

:root {
  --wd-teal: #44beae;
  --wd-teal-dark: #339c8e;
  --wd-navy: #112337;
  --wd-navy-deep: #041b2e;
  --wd-gray: #8b8b8b;
  --wd-surface: #f5f5f5;
}

/* Material "custom" palette hooks: light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--wd-navy);
  --md-primary-fg-color--light: #1c3a5a;
  --md-primary-fg-color--dark: var(--wd-navy-deep);
  --md-accent-fg-color: var(--wd-teal);
  --md-accent-fg-color--transparent: rgba(68, 190, 174, 0.1);
  --md-typeset-a-color: #2b8a7d;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--wd-navy-deep);
  --md-primary-fg-color--light: var(--wd-navy);
  --md-primary-fg-color--dark: #010305;
  --md-accent-fg-color: var(--wd-teal);
  --md-accent-fg-color--transparent: rgba(68, 190, 174, 0.1);
  --md-typeset-a-color: var(--wd-teal);
  --md-default-bg-color: #0b1622;
}

/* Headings in Merriweather Sans with navy tone (falls back cleanly) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Merriweather Sans", "Inter", -apple-system, sans-serif;
  font-weight: 700;
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: var(--wd-navy);
}

/* Teal underline flourish on H1, echoing workdone.ai section headers */
.md-typeset h1::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 0.2rem;
  margin-top: 0.4rem;
  border-radius: 0.1rem;
  background: var(--wd-teal);
}

/* Header bar: deep navy like the workdone.ai footer/nav */
.md-header,
.md-tabs {
  background-color: var(--wd-navy);
}

/* Buttons and active elements pick up the teal */
.md-typeset .md-button {
  color: var(--wd-teal);
  border-color: var(--wd-teal);
}

.md-typeset .md-button:hover {
  background-color: var(--wd-teal);
  border-color: var(--wd-teal);
  color: #fff;
}

.md-typeset .md-button--primary {
  background-color: var(--wd-teal);
  border-color: var(--wd-teal);
  color: #fff;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--wd-teal-dark);
  border-color: var(--wd-teal-dark);
}

/* Card grid used on the home page */
.wd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.wd-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--wd-teal);
  border-radius: 0.4rem;
  padding: 1rem 1.2rem;
  background: var(--md-default-bg-color);
  transition: box-shadow 0.2s ease;
}

.wd-card:hover {
  box-shadow: 0 4px 16px rgba(4, 27, 46, 0.12);
}

.wd-card h3 {
  margin-top: 0.2rem;
}

/* Footer */
.md-footer {
  background-color: var(--wd-navy-deep);
}