/* ==================================================================
   Synovia brand — OFFICIAL guidelines
   Primary  #095573   ·   Accent (lime) #b7cc19   ·   Secondary #f2f2f2
   Body: Inter (brand secondary)   ·   Display: serif (Minion-style)
   ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
  --syn-teal: #095573;
  --syn-teal-dark: #063f56;
  --syn-teal-light: #0a6a8f;
  --syn-lime: #b7cc19;
  --syn-gray: #f2f2f2;

  --md-primary-fg-color: #095573;
  --md-primary-fg-color--light: #0a6a8f;
  --md-primary-fg-color--dark: #063f56;
  --md-accent-fg-color: #095573;
  --md-typeset-a-color: #095573;
}

/* ---- Header / search ---- */
.md-header,
.md-tabs {
  background-color: var(--syn-teal);
  box-shadow: 0 2px 6px rgba(9, 85, 115, 0.18);
}
.md-header__title,
.md-header [class^="md-icon"] svg { color: #ffffff; }
.md-header__button.md-logo img { height: 1.55rem; width: auto; }
.md-search__input { background-color: rgba(255, 255, 255, 0.18); }

/* ---- Links + nav ---- */
.md-typeset a,
.md-nav__link:hover,
.md-nav__link--active { color: var(--syn-teal); }
.md-nav__item--section > .md-nav__link { color: var(--syn-teal); font-weight: 700; }

/* ---- Typography: Inter body, serif display ---- */
.md-typeset { font-size: 0.82rem; }
.md-typeset h1,
.fg-hero h1 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--syn-teal);
  letter-spacing: -0.005em;
}

/* ---- Admonition tip in brand teal ---- */
.md-typeset .admonition.tip,
.md-typeset details.tip { border-color: var(--syn-teal); }
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary { background-color: rgba(9, 85, 115, 0.08); }

/* ---- Home hero band ---- */
.md-typeset .fg-hero {
  background: linear-gradient(120deg, #063f56 0%, #095573 60%, #0a6a8f 100%);
  border-radius: 14px;
  border-bottom: 3px solid var(--syn-lime);
  padding: 2.4rem 2.6rem;
  margin: 0.3rem 0 2rem;
  box-shadow: 0 10px 30px rgba(9, 85, 115, 0.20);
}
.md-typeset .fg-hero h1 { color: #ffffff; margin: 0 0 0.5rem; }
.md-typeset .fg-hero p {
  color: #dbeef4;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 44rem;
  margin: 0;
}

/* ---- Category / child cards ---- */
.md-typeset .fg-cards.grid > ul { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.md-typeset .fg-cards > ul > li {
  border: 1px solid #e5e7eb;
  border-top: 3px solid var(--syn-lime);
  border-radius: 10px;
  padding: 1.15rem 1.3rem 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(9, 85, 115, 0.05);
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.md-typeset .fg-cards > ul > li:hover {
  box-shadow: 0 12px 26px rgba(9, 85, 115, 0.14);
  transform: translateY(-2px);
}
.md-typeset .fg-cards > ul > li > hr { border: 0; height: 1px; background: #eef2f6; margin: 0.7em 0; }
.md-typeset .fg-cards strong { color: var(--syn-teal); font-size: 1.1rem; font-weight: 700; }
.md-typeset .fg-ic { color: var(--syn-teal); height: 1.5rem; width: 1.5rem; vertical-align: -0.35rem; margin-right: 0.35rem; }
.md-typeset .fg-cards > ul > li > p:last-child > a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 600; color: var(--syn-teal);
}
.md-typeset .fg-cards > ul > li > p:last-child > a .twemoji { height: 1rem; width: 1rem; }

/* ---- Screenshot framing ---- */
.md-typeset img {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(9, 85, 115, 0.10);
  margin-top: 0.5rem;
}
.md-typeset img + em {
  display: block; color: #5b6b78; font-size: 0.72rem; font-style: italic; margin: 0.35rem 0 1.1rem;
}
/* never frame icon glyphs */
.md-typeset .twemoji, .md-typeset .fg-ic { border: 0 !important; box-shadow: none !important; }