/*
 * Visual match for iabdinur.dev, blog.iabdinur.dev and portfolio.iabdinur.dev.
 * Colours are the shared Chakra theme (blog/frontend/src/theme/index.ts):
 * the "brand" sky palette plus Chakra's default greys, light by default.
 */

:root {
  /* brand */
  --brand-50: #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #bae6fd;
  --brand-300: #7dd3fc;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #145f95;
  --brand-800: #075985;
  --brand-900: #0c4a6e;
  /* Chakra greys */
  --gray-50: #f7fafc;
  --gray-100: #edf2f7;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e0;
  --gray-400: #a0aec0;
  --gray-500: #718096;
  --gray-600: #4a5568;
  --gray-700: #2d3748;
  --gray-800: #1a202c;
  --gray-900: #171923;

  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --md-code-font: "Fira Code", "Consolas", "Monaco", monospace;
  --md-mermaid-font-family: var(--md-text-font);
}

/* ── Light ─────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--brand-600);
  --md-primary-fg-color--light: var(--brand-500);
  --md-primary-fg-color--dark: var(--brand-700);
  --md-accent-fg-color: var(--brand-600);
  --md-accent-fg-color--transparent: rgba(2, 132, 199, 0.1);

  --md-default-bg-color: #ffffff;
  --md-default-fg-color: var(--gray-900);
  --md-default-fg-color--light: var(--gray-600);
  --md-default-fg-color--lighter: var(--gray-400);
  --md-default-fg-color--lightest: var(--gray-200);
  --md-typeset-color: var(--gray-900);
  --md-typeset-a-color: var(--brand-600);
  --md-code-bg-color: var(--gray-50);
  --md-code-fg-color: var(--gray-800);

  --md-mermaid-node-bg-color: var(--brand-50);
  --md-mermaid-node-fg-color: var(--brand-600);
  --md-mermaid-edge-color: var(--gray-600);
  --md-mermaid-label-bg-color: #ffffff;
  --md-mermaid-label-fg-color: var(--gray-900);

  --site-header-bg: #0384c7;
  --site-border: var(--gray-200);
  --site-table-border: var(--gray-300);
  --site-muted: var(--gray-600);
  --site-button-bg: var(--brand-500);
  --site-button-bg-hover: var(--brand-600);
  --site-button-fg: #ffffff;
}

/* ── Dark ──────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 225;
  --md-primary-fg-color: var(--brand-300);
  --md-primary-fg-color--light: var(--brand-200);
  --md-primary-fg-color--dark: var(--brand-400);
  --md-accent-fg-color: var(--brand-300);
  --md-accent-fg-color--transparent: rgba(125, 211, 252, 0.1);

  --md-default-bg-color: var(--gray-900);
  --md-default-fg-color: var(--gray-100);
  --md-default-fg-color--light: var(--gray-400);
  --md-default-fg-color--lighter: var(--gray-500);
  --md-default-fg-color--lightest: var(--gray-700);
  --md-typeset-color: var(--gray-100);
  --md-typeset-a-color: var(--brand-300);
  --md-code-bg-color: var(--gray-800);
  --md-code-fg-color: var(--gray-100);

  --md-mermaid-node-bg-color: var(--gray-800);
  --md-mermaid-node-fg-color: var(--brand-300);
  --md-mermaid-edge-color: var(--gray-400);
  --md-mermaid-label-bg-color: var(--gray-900);
  --md-mermaid-label-fg-color: var(--gray-100);

  --site-header-bg: #0384c7;
  --site-border: var(--gray-700);
  --site-table-border: var(--gray-600);
  --site-muted: var(--gray-400);
  --site-button-bg: var(--brand-200);
  --site-button-bg-hover: var(--brand-300);
  --site-button-fg: var(--gray-800);
}

/* ── Header: plain bar with a bold title, like the other sites ── */
.md-header,
.md-header--shadow {
  background-color: var(--site-header-bg);
  color: #ffffff;
  border-bottom: none;
  box-shadow: none;
}
/* App logo beside the bold title. */
.md-header__button.md-logo {
  margin: 0 0 0 0.4rem;
  padding: 0.2rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: auto;
}
.md-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: 0.4rem;
}
.md-header__topic:first-child {
  font-weight: 700;
}
.md-header__button {
  color: #ffffff;
}
.md-header__button:hover {
  opacity: 0.8;
}

/* Search box: translucent white field on the blue bar. */
.md-search__form,
.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 0.375rem;
}
.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: #ffffff;
}
/* Once the search panel opens it sits on the page background, so use page colours there. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--md-default-bg-color);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input,
[data-md-toggle="search"]:checked ~ .md-header .md-search__icon {
  color: var(--md-default-fg-color);
}

/* ── Content ───────────────────────────────────────────── */
.md-typeset {
  line-height: 1.8;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: normal;
}
.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.md-typeset a:hover {
  color: var(--md-primary-fg-color--dark);
}
.md-typeset .headerlink,
.md-typeset .md-button,
.md-typeset .md-tag {
  text-decoration: none;
}

.md-typeset blockquote {
  border-left: 4px solid var(--brand-500);
  background-color: var(--md-code-bg-color);
  color: inherit;
  font-style: italic;
  padding: 0.5rem 1rem;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--site-table-border);
  border-collapse: collapse;
  border-radius: 0;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border: 1px solid var(--site-table-border);
}
.md-typeset table:not([class]) th {
  background-color: var(--md-code-bg-color);
  font-weight: 700;
}

/* Buttons: Chakra solid "brand" button. */
.md-typeset .md-button {
  border-radius: 0.375rem;
  font-weight: 600;
  border: 1px solid var(--site-border);
  color: var(--md-default-fg-color);
}
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:visited {
  background-color: var(--site-button-bg);
  border-color: var(--site-button-bg);
  color: var(--site-button-fg);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--site-button-bg-hover);
  border-color: var(--site-button-bg-hover);
  color: var(--site-button-fg);
}

/* Admonitions: neutral border, brand accent on the left. */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--site-border);
  border-left: 4px solid var(--brand-500);
  border-radius: 0.375rem;
  box-shadow: none;
}
.md-typeset .admonition.info,
.md-typeset .admonition.note,
.md-typeset details.info,
.md-typeset details.question {
  border-color: var(--site-border);
  border-left-color: var(--brand-500);
}
.md-typeset .info > .admonition-title,
.md-typeset .note > .admonition-title,
.md-typeset .info > summary,
.md-typeset .question > summary {
  background-color: var(--md-accent-fg-color--transparent);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .note > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .question > summary::before {
  background-color: var(--brand-500);
}

/* ── Sidebar navigation ────────────────────────────────── */
.md-nav__item--section > .md-nav__link {
  color: var(--site-muted);
  font-weight: 600;
}
.md-nav__link--active,
.md-nav__link:is(:focus, :hover) {
  color: var(--md-primary-fg-color);
}

/* ── Footer: thin top border, muted text, ghost icons ──── */
.md-footer,
.md-footer-meta {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-top: 1px solid var(--site-border);
}
.md-footer__link,
.md-footer__title {
  color: var(--md-default-fg-color);
}
.md-footer__direction {
  color: var(--site-muted);
}
.md-copyright,
.md-copyright__highlight {
  color: var(--site-muted);
}
.md-social__link {
  color: var(--site-muted);
}
.md-social__link:hover {
  color: var(--md-primary-fg-color);
}

/* ── Download buttons on the home and installation pages ──
   md_in_html wraps the four links in one <p>, so the grid goes on that. */
.download-grid > p {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
@media screen and (max-width: 76.25em) {
  .download-grid > p {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 30em) {
  .download-grid > p {
    grid-template-columns: 1fr;
  }
}
.download-grid .md-button {
  margin: 0;
  padding: 0.6em 0.8em;
  text-align: center;
}
.download-grid .md-button small {
  display: block;
  font-weight: normal;
  opacity: 0.85;
}