/* ==========================================================================
   Zajil documentation — design system
   Adapted from the Ansar Labs "Golden Path" language (masjidhub/web),
   re-skinned to a red / black / white palette.

   Typography:  Playfair Display (display)  ·  Inter (body)  ·  JetBrains Mono
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   Palette
   -------------------------------------------------------------------------- */

:root {
  --zajil-red: rgb(193 18 31); /* deep crimson — primary */
  --zajil-red-bright: rgb(220 38 38); /* hover / active */
  --zajil-red-deep: rgb(140 12 22); /* pressed / borders */
  --zajil-ink: rgb(17 17 19); /* near-black */
  --zajil-paper: rgb(255 255 255); /* white */

  --md-primary-fg-color: var(--zajil-red);
  --md-primary-fg-color--light: var(--zajil-red-bright);
  --md-primary-fg-color--dark: var(--zajil-red-deep);
  --md-accent-fg-color: var(--zajil-red-bright);

  --zajil-font-display: "Playfair Display", Georgia, serif;
}

/* Light scheme — white paper, black ink, red accents */
[data-md-color-scheme="default"] {
  --md-default-bg-color: rgb(255 255 255);
  --md-default-fg-color: rgb(17 17 19);
  --md-default-fg-color--light: rgb(72 72 78);
  --md-default-fg-color--lighter: rgb(120 120 126);
  --md-typeset-color: rgb(28 28 32);
  --md-typeset-a-color: var(--zajil-red);
  --zajil-surface: rgb(250 250 250);
  --zajil-border: rgb(228 228 231);
  --zajil-eyebrow: rgb(120 120 126);
}

/* Dark scheme — black paper, white ink, red accents */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: rgb(13 13 15);
  --md-default-fg-color: rgb(240 240 242);
  --md-default-fg-color--light: rgb(180 180 186);
  --md-default-fg-color--lighter: rgb(130 130 138);
  --md-typeset-color: rgb(226 226 230);
  --md-typeset-a-color: var(--zajil-red-bright);
  --md-primary-fg-color: rgb(20 20 23);
  --zajil-surface: rgb(23 23 26);
  --zajil-border: rgb(44 44 50);
  --zajil-eyebrow: rgb(150 150 158);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: var(--zajil-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--zajil-border);
}

/* A red tick before every h2 — the courier's mark */
.md-typeset h2::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.05em;
  background: var(--zajil-red);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* --------------------------------------------------------------------------
   Eyebrow — uppercase mono label, "EST. 2024" style
   Usage in Markdown:  <p class="eyebrow">Module 2.1</p>
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--md-code-font-family, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zajil-eyebrow);
  margin-bottom: 0.4rem;
}

.eyebrow--red {
  color: var(--zajil-red);
}

/* --------------------------------------------------------------------------
   Hero — home page banner with geometric overlay
   -------------------------------------------------------------------------- */

.zajil-hero {
  position: relative;
  margin: -1.2rem -0.8rem 2.5rem;
  padding: 3.5rem 2rem 3rem;
  border: 1px solid var(--zajil-border);
  border-radius: 0.75rem;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgb(193 18 31 / 0.07),
      transparent 45%
    ),
    var(--zajil-surface);
}

.zajil-hero::after {
  /* Girih-style diamond lattice, adapted from the reference project */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='none' stroke='%23C1121F' stroke-opacity='0.09' stroke-width='0.6'/%3E%3Cpath d='M30 15L45 30L30 45L15 30z' fill='none' stroke='%23C1121F' stroke-opacity='0.05' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

.zajil-hero > * {
  position: relative;
  z-index: 1;
}

.zajil-hero h1 {
  font-family: var(--zajil-font-display);
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0.2rem 0 0.6rem;
  line-height: 1.05;
}

.zajil-hero .tagline {
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
  max-width: 40rem;
  margin: 0;
}

.zajil-hero .arabic {
  font-size: 1.6rem;
  color: var(--zajil-red);
  margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   Cards — for landing-page grids (uses Material's grid cards + tweaks)
   -------------------------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--zajil-border);
  border-radius: 0.6rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--zajil-red);
  box-shadow: 0 4px 20px rgb(193 18 31 / 0.1);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Admonitions — restrained, red-keyed
   -------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.5rem;
  border-left-width: 3px;
  font-size: 0.78rem;
}

/* "decision" — a settled architecture choice */
.md-typeset .admonition.decision {
  border-color: var(--zajil-red);
}
.md-typeset .decision > .admonition-title {
  background: rgb(193 18 31 / 0.1);
}
.md-typeset .decision > .admonition-title::before {
  background: var(--zajil-red);
  -webkit-mask-image: var(--md-admonition-icon--decision);
  mask-image: var(--md-admonition-icon--decision);
}
:root {
  --md-admonition-icon--decision: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}

/* --------------------------------------------------------------------------
   Tables — tighter, courier-ledger feel
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--zajil-border);
  border-radius: 0.4rem;
  font-size: 0.76rem;
}

.md-typeset table:not([class]) th {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--zajil-surface);
}

/* --------------------------------------------------------------------------
   Inline code + the red brand mark in the header
   -------------------------------------------------------------------------- */

.md-typeset code {
  border-radius: 0.25rem;
  font-size: 0.82em;
}

.md-header__title {
  font-family: var(--zajil-font-display);
  font-weight: 600;
}

/* Status pills:  <span class="pill pill--done">done</span> */
.pill {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pill--done {
  background: rgb(193 18 31 / 0.12);
  color: var(--zajil-red);
  border: 1px solid rgb(193 18 31 / 0.3);
}
.pill--wip {
  background: rgb(120 120 126 / 0.15);
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--zajil-border);
}
.pill--todo {
  background: transparent;
  color: var(--md-default-fg-color--lighter);
  border: 1px dashed var(--zajil-border);
}