/* Binabik brand — "Luminous Precision".
   Mirrors the tokens used by binabik-webpage + binabik-academy-webpage
   (styles/globals.css): light-first, royal navy #101820, RED accent #DB2424,
   slate grays, 8px radius, Plus Jakarta Sans / Space Grotesk / JetBrains Mono.
   Body/code fonts come from mkdocs.yml (theme.font); Space Grotesk (headings)
   is loaded here. */

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

/* ============================ Light (default) ============================ */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           #FAFAFA;                 /* canvas */
  --md-default-fg-color:           hsla(210, 33%, 9%, 0.92);/* #101820 text */
  --md-default-fg-color--light:    hsla(210, 33%, 9%, 0.60);
  --md-default-fg-color--lighter:  hsla(215, 20%, 47%, 0.85); /* slate #64748B */
  --md-default-fg-color--lightest: hsla(215, 20%, 47%, 0.32);

  /* Light "glass" header with dark text/icons (like the sites' navbar). */
  --md-primary-fg-color:           #FFFFFF;
  --md-primary-fg-color--light:    #FFFFFF;
  --md-primary-fg-color--dark:     #E2E8F0;
  --md-primary-bg-color:           #101820;
  --md-primary-bg-color--light:    #475569;

  /* Red accent (#DB2424), used sparingly per the style guide. */
  --md-accent-fg-color:            #b01d1d;   /* hover: slightly darker red */
  --md-typeset-a-color:            #DB2424;   /* links */

  --md-code-bg-color:              #f1f3f5;
  --md-typeset-mark-color:         rgba(219, 36, 36, 0.18);

  /* Dark footer, like the sites. */
  --md-footer-bg-color:            #101820;
  --md-footer-bg-color--dark:      #0b1116;

  /* Local brand tokens */
  --bnbk-red:                      #DB2424;
  --bnbk-navy:                     #101820;
}

/* ============================== Dark (slate) ============================= */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #101820;
  --md-default-fg-color:           hsla(0, 0%, 98%, 0.92);
  --md-default-fg-color--light:    hsla(0, 0%, 98%, 0.68);
  --md-default-fg-color--lighter:  hsla(215, 20%, 65%, 0.85); /* slate #94A3B8 */
  --md-default-fg-color--lightest: hsla(215, 20%, 65%, 0.38);

  --md-primary-fg-color:           #101820;
  --md-primary-fg-color--light:    #1a2634;
  --md-primary-fg-color--dark:     #0b1116;
  --md-primary-bg-color:           #FAFAFA;

  --md-accent-fg-color:            #f26d6d;
  --md-typeset-a-color:            #f26d6d;

  --md-code-bg-color:              #1a2634;   /* card color */
  --md-code-fg-color:              #e6edf3;
  --md-footer-bg-color:            #0b1116;

  --bnbk-red:                      #f26d6d;
  --bnbk-navy:                     #101820;
}

/* =============================== Typography ============================== */
/* Headings + brand title use Space Grotesk (display), body is Plus Jakarta. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.md-header__title { font-weight: 700; }

/* Page title (h1) gets a short red underline accent. */
.md-typeset h1 {
  position: relative;
  font-weight: 700;
}
.md-typeset h1::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: var(--bnbk-red);
}

/* ================================ Header ================================= */
/* Figure.ai-style glass navbar: translucent + blur over the scrolling page. */
.md-header {
  background-color: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--md-primary-bg-color);
  border-bottom: 1px solid rgba(16, 24, 32, 0.08);
  box-shadow: 0 1px 0 rgba(16, 24, 32, 0.03);
}
.md-tabs {
  background-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--md-primary-bg-color);
  border-bottom: 1px solid rgba(16, 24, 32, 0.06);
}
[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(16, 24, 32, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-md-color-scheme="slate"] .md-tabs {
  background-color: rgba(16, 24, 32, 0.62);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* White logo variant on the dark header. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url('../assets/logos/binabik_white_final.png');
}
/* Active / hovered top-tab: red highlight (style guide's "1px red line"). */
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--bnbk-red);
  opacity: 1;
}

/* ============================ Hero (landing) ============================ */
.md-typeset .hero {
  text-align: center;
  padding: 2.2rem 0 1.4rem;
  margin: -0.6rem 0 1.6rem;
  position: relative;
  isolation: isolate;
}
/* Grid + soft red glow backdrop behind the hero. */
.md-typeset .hero::before {
  content: "";
  position: absolute;
  top: -1rem;
  bottom: 0;
  left: 50%;
  width: 100vw;                 /* full-bleed: span the whole page width */
  transform: translateX(-50%);
  z-index: -1;
  background-image:
    radial-gradient(45% 75% at 50% 0%, rgba(219, 36, 36, 0.08), transparent 70%),
    linear-gradient(to right, #E2E8F0 1px, transparent 1px),
    linear-gradient(to bottom, #E2E8F0 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  /* full width horizontally; fade downward into the page */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 55%, transparent 100%);
}
/* Contain the full-bleed grid so it never triggers a horizontal scrollbar
   (only the landing page has a hero, and it has no sidebar to worry about). */
.md-main:has(.hero) {
  overflow-x: clip;
}
[data-md-color-scheme="slate"] .md-typeset .hero::before {
  background-image:
    radial-gradient(60% 90% at 50% 0%, rgba(242, 109, 109, 0.12), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}
.md-typeset .hero-logo {
  width: 90px;
  height: auto;
  margin: 0 auto 0.6rem;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(219, 36, 36, 0.28));
}
.md-typeset .hero h1 {
  font-size: 2.7rem;
  line-height: 1.08;
  margin: 0.2rem 0 0.7rem;
  background: linear-gradient(115deg, #101820 0%, #101820 42%, #DB2424 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.md-typeset .hero h1::after { display: none; }   /* no underline bar on hero */
[data-md-color-scheme="slate"] .md-typeset .hero h1 {
  background: linear-gradient(115deg, #FFFFFF 0%, #FFFFFF 45%, #f26d6d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.md-typeset .hero > p {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--md-default-fg-color--light);
}

/* ============================ Cards (premium) =========================== */
/* Mirrors .card-premium: white, rounded, soft border + shadow; lift on hover. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li {
  background: #FFFFFF;
  box-shadow: 0 4px 20px -4px rgba(16, 24, 32, 0.05);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  background: #1a2634;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--bnbk-red);
  box-shadow: 0 10px 26px -6px rgba(16, 24, 32, 0.14);
  transform: translateY(-2px);
}
.md-typeset .grid.cards a { font-weight: 600; }
/* Red card icons — the "feature" mark on each card. */
.md-typeset .grid.cards .twemoji.lg,
.md-typeset .grid.cards .twemoji.lg svg {
  color: var(--bnbk-red);
  fill: currentColor;
}

/* ============================== Soft edges ============================== */
.md-typeset pre > code,
.md-typeset .highlight > pre,
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
}

/* ========================== Primary CTA button ========================== */
.md-typeset .md-button--primary {
  background-color: var(--bnbk-red);
  border-color: var(--bnbk-red);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* ===================== Per-page byline (front matter) =================== */
/* author / date / revision, rendered above the title by
   overrides/partials/content.html. */
.md-typeset .page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}
.md-typeset .page-meta__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.md-typeset .page-meta__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--bnbk-red);
}

/* ============================== Polish pass ============================= */

/* Comfortable reading rhythm. */
.md-typeset { line-height: 1.65; }

/* Section hierarchy: h1 keeps its red tick; h2 gets a full hairline rule for
   clear section breaks on long spec pages; h3 gets breathing room. */
.md-typeset h2 {
  margin-top: 2.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset h3 { margin-top: 1.9rem; }

/* Links: smooth, underline on hover. */
.md-typeset a {
  transition: color 100ms ease, opacity 100ms ease;
}
.md-typeset a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Inline code: subtle outline so identifiers read as distinct tokens. */
.md-typeset :not(pre) > code {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

/* Tables: tinted header, row hover, framed. */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
}
.md-typeset table:not([class]) th {
  background-color: var(--md-code-bg-color);
  font-weight: 700;
  color: var(--md-default-fg-color);
}
.md-typeset table:not([class]) tbody tr {
  transition: background-color 100ms ease;
}
[data-md-color-scheme="default"] .md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(16, 24, 32, 0.035);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.035);
}

/* Blockquotes: quiet, consistent rule. */
.md-typeset blockquote {
  border-left: 3px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
}

/* Left nav: emphasize the current page. */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  font-weight: 700;
}

/* Smooth anchor scrolling (matches the marketing site). */
html {
  scroll-behavior: smooth;
}

/* Branded text selection. */
::selection {
  background: rgba(219, 36, 36, 0.20);
}

/* Footer prev/next: title turns brand red on hover. */
.md-footer__link:hover .md-footer__title {
  color: var(--bnbk-red);
}