/* ============================================================
   Fonts
   ============================================================ */

@font-face {
  font-family: "Circular Std";
  src: url("circularStdBook.otf") format("opentype");
}

@font-face {
  font-family: "FoundryGridnik-Medium";
  src: url("foundryGridnikMedium.ttf") format("truetype");
}

/* ============================================================
   Brand tokens
   ============================================================ */

:root {
  --rs-bg:                  #17171c;
  --rs-bg-raised:           #202025;
  --rs-bg-overlay:          #26262e;
  --rs-border:              #32323d;
  --rs-border-hover:        #474754;
  --rs-accent:              #7ca0fb;
  --rs-accent-hover:        #517dea;
  --rs-accent-text-hover:   #fbbc28;
  --rs-highlight:           #fbbc28;
  --rs-highlight-bg-active: rgba(251, 188, 40, 0.12);
  --rs-text:                #ffffff;
  --rs-text-secondary:      #c7c7d1;
  --rs-text-muted:          #8d8d96;
  --rs-text-faint:          #3a3a44;
  --rs-nav-label:           #474754;
  --rs-code-blue:           #9db8fc;
  --rs-code-yellow:         #fbbc28;
}

/* ============================================================
   Material theme overrides — dark scheme
   ============================================================ */

[data-md-color-scheme="signalflag-dark"] {
  /* Fonts */
  --md-text-font:  "Circular Std", system-ui, sans-serif;
  --md-code-font:  ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono", monospace;

  /* Page background and text */
  --md-default-bg-color:           var(--rs-bg);
  --md-default-fg-color:           var(--rs-text);
  --md-default-fg-color--light:    var(--rs-text-muted);
  --md-default-fg-color--lighter:  var(--rs-text-faint);
  --md-default-fg-color--lightest: var(--rs-text-faint);
  --md-typeset-color:              var(--rs-text);

  /* Header / nav bar */
  --md-primary-fg-color:           var(--rs-bg);
  --md-primary-fg-color--light:    var(--rs-bg-raised);
  --md-primary-fg-color--dark:     var(--rs-bg);
  --md-primary-bg-color:           var(--rs-text);
  --md-primary-bg-color--light:    var(--rs-text-muted);

  /* Accent */
  --md-accent-fg-color:            var(--rs-accent);
  --md-accent-fg-color--transparent: rgba(124, 160, 251, 0.1);
  --md-accent-bg-color:            var(--rs-bg-raised);

  /* Links */
  --md-typeset-a-color:            var(--rs-accent);

  /* Code blocks */
  --md-code-bg-color:              var(--rs-bg-raised);
  --md-code-fg-color:              var(--rs-text);
  --md-code-hl-color:              rgba(124, 160, 251, 0.15);
  --md-code-hl-number-color:       var(--rs-code-blue);
  --md-code-hl-special-color:      var(--rs-code-blue);
  --md-code-hl-function-color:     var(--rs-code-yellow);
  --md-code-hl-constant-color:     var(--rs-code-yellow);
  --md-code-hl-keyword-color:      var(--rs-code-yellow);
  --md-code-hl-string-color:       var(--rs-code-blue);
  --md-code-hl-name-color:         var(--rs-text);
  --md-code-hl-operator-color:     var(--rs-text-muted);
  --md-code-hl-punctuation-color:  var(--rs-text-muted);
  --md-code-hl-comment-color:      var(--rs-text-faint);
  --md-code-hl-variable-color:     var(--rs-text);

  /* Admonitions */
  --md-admonition-fg-color:        var(--rs-text);
  --md-admonition-bg-color:        var(--rs-bg-raised);

  /* Footer */
  --md-footer-bg-color:            var(--rs-bg-raised);
  --md-footer-bg-color--dark:      var(--rs-bg);
  --md-footer-fg-color:            var(--rs-text-muted);
  --md-footer-fg-color--light:     var(--rs-text-faint);
  --md-footer-fg-color--lighter:   var(--rs-text-faint);

  /* Tables */
  --md-typeset-table-color:        rgba(240, 240, 244, 0.05);
  --md-typeset-table-color--light: rgba(240, 240, 244, 0.025);
}

/* ============================================================
   Header
   ============================================================ */

.md-header {
  background-color: var(--rs-bg);
  border-bottom: 1px solid var(--rs-border);
  box-shadow: none;
}

/* The wordmark is a wide lockup, so it is held close to the height of the
   icon buttons beside it. Taller than about 1.4rem and it drives the header
   height, leaving the lockup crowding the top and bottom edges. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.4rem;
  width: auto;
}

/* The theme hides the header logo on narrower viewports, which would leave the
   header reading "Docs" with nothing naming the product. Restore the full name
   at exactly the width the wordmark disappears. */
@media screen and (max-width: 76.234375em) {
  .md-header__topic:not([data-md-component]) .md-ellipsis::before {
    content: "SignalFlag ";
  }
}

/* ============================================================
   Nav tabs
   ============================================================ */

.md-tabs {
  background-color: var(--rs-bg);
  border-bottom: 1px solid var(--rs-border);
  /* Ensure tabs stay above content during scroll so click targets remain active */
  position: relative;
  z-index: 3;
}

.md-tabs__link {
  color: var(--rs-text-muted) !important;
  font-size: 0.8rem;
  opacity: 1 !important;
  /* Reserve border-bottom space so hover/active underline doesn't shift bar height */
  border-bottom: 0.1rem solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.md-tabs__link:hover {
  color: var(--rs-text) !important;
}

.md-tabs__link--active {
  color: var(--rs-highlight) !important;
  border-bottom-color: var(--rs-highlight);
}

/* ============================================================
   Left sidebar
   ============================================================ */

.md-sidebar {
  background-color: var(--rs-bg);
}

/* Section label — FoundryGridnik, smaller, dimmer */
.md-nav__title {
  color: var(--rs-nav-label);
  font-family: "FoundryGridnik-Medium", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.42px;
  line-height: 1;
  text-transform: uppercase;
  padding: 4px 16px 12px;
}

/* Top-level tab label in sidebar (e.g. "How-to Guides") — gray section title style */
.md-nav--lifted > .md-nav__list > .md-nav__item--section > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
  color: var(--rs-nav-label) !important;
  font-family: "FoundryGridnik-Medium", monospace !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.42px !important;
  text-transform: uppercase !important;
  pointer-events: none;
}

/* Default nav link — leaf/deep pages use secondary text */
.md-nav__link {
  color: var(--rs-text-secondary) !important;
  font-size: 0.875rem;
  line-height: 1.2;
  padding-top: 2px;
  padding-bottom: 2px;
}

.md-nav__link:hover {
  color: var(--rs-text) !important;
}

/* Active nav link — green text, background on the row via the li */
.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--rs-highlight) !important;
  background-color: transparent;
}

/* Full-width row highlight on the active item */
.md-nav__item:has(> .md-nav__link--active) {
  background-color: var(--rs-highlight-bg-active);
}

/* L1 section headings (Getting Started, Metrics, etc.) — white */
.md-nav__item--section > .md-nav__link,
.md-nav__item--nested > .md-nav__link {
  color: var(--rs-text) !important;
  font-size: 0.875rem !important;
}

/* Indentation by nesting level — L1: 0px, each sub-level +12px */
.md-nav--primary .md-nav .md-nav__link {
  padding-left: 0 !important;
}

.md-nav--primary .md-nav .md-nav .md-nav__link {
  padding-left: 12px !important;
}

.md-nav--primary .md-nav .md-nav .md-nav .md-nav__link {
  padding-left: 24px !important;
}

.md-nav--primary .md-nav .md-nav .md-nav .md-nav .md-nav__link {
  padding-left: 36px !important;
}

/* ============================================================
   Code blocks (fenced + inline)
   ============================================================ */

/* Fenced code block outer container */
.md-typeset .highlight {
  background-color: var(--rs-bg-overlay);
  border-radius: 0.4rem;
  border: 1px solid var(--rs-border);
  position: relative;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

/* Toolbar row — always present via ::before so the copy button has a zone to sit in.
   Empty by default; language-specific rules below add a label. */
.md-typeset .highlight::before {
  content: "";
  display: block;
  height: 2rem;
  line-height: 2rem;
  padding: 0 2.5rem 0 0.75rem;
  font-size: 0.7rem;
  font-family: "Circular Std", system-ui, sans-serif;
  color: var(--rs-text-muted);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rs-border);
}

/* Filename/title bar — rendered by Material when title="" is set on a code block,
   or auto-generated by pymdownx.highlight auto_title.
   Suppress ::before when .filename is present to avoid a double header. */
.md-typeset .highlight:has(.filename)::before {
  display: none;
}
.md-typeset .highlight .filename {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 2.75rem 0 0.75rem;
  font-size: 0.72rem;
  font-family: "Circular Std", system-ui, sans-serif;
  color: var(--rs-text-muted);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--rs-border);
  border-radius: 0.4rem 0.4rem 0 0;
  background-color: transparent;
  margin: 0;
}

/* pre is transparent — inherits .highlight bg.
   position: static removes the intermediate containing block so the
   copy button (position: absolute) anchors to .highlight instead of pre. */
.md-typeset .highlight pre {
  background-color: transparent !important;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  position: static !important;
}

/* inner code: no extra background */
.md-typeset .highlight code {
  background-color: transparent !important;
  border: none;
  padding: 0;
}

/* Tabbed code blocks */
.md-typeset .tabbed-content .highlight {
  margin-top: 0.5rem;
}

/* Copy button — vertically centered in the 2rem toolbar row.
   Anchored to .highlight (not pre) because we set pre to position:static above. */
.md-typeset .highlight .md-clipboard {
  position: absolute !important;
  top: 0.3rem !important;
  right: 0.5rem !important;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0.2rem;
  background-color: transparent;
  border: 1px solid var(--rs-border);
  border-radius: 0.4rem;
  color: var(--rs-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.md-typeset .highlight .md-clipboard:hover {
  background-color: transparent;
  border-color: var(--rs-text-muted);
  color: var(--rs-text);
}

.md-typeset .highlight .md-clipboard svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* ============================================================
   Content typography
   ============================================================ */

.md-typeset h1 {
  font-family: "FoundryGridnik-Medium", monospace;
  font-weight: 500;
  color: var(--rs-text);
  letter-spacing: -0.01em;
}

.md-typeset h2,
.md-typeset h3 {
  font-family: "FoundryGridnik-Medium", monospace;
  font-weight: 500;
  color: var(--rs-text);
}

.md-typeset a {
  color: var(--rs-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.md-typeset .headerlink,
.md-typeset .rs-btn-primary,
.md-typeset .rs-btn-secondary {
  text-decoration: none;
}

.md-typeset a:hover {
  color: var(--rs-accent-text-hover);
}

.md-typeset code {
  background-color: var(--rs-bg-raised);
  border-radius: 0.2rem;
  padding: 0.05em 0.3em;
}


.md-typeset table:not([class]) {
  border: 1px solid var(--rs-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--rs-bg-raised);
  color: var(--rs-text);
  border-bottom: 1px solid var(--rs-border);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--rs-border);
  color: var(--rs-text-muted);
}

/* ============================================================
   Admonitions
   ============================================================ */

.md-typeset .admonition,
.md-typeset details {
  background-color: var(--rs-bg-raised);
  border-color: var(--rs-border);
  border-radius: 0.5rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: var(--rs-bg-overlay);
}

/* ============================================================
   Cards (Material built-in grid cards)
   ============================================================ */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.rs-cards .card {
  background-color: var(--rs-bg-raised);
  border: 1px solid var(--rs-border);
  border-radius: 0.75rem;
  transition: border-color 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  border-color: var(--rs-border-hover);
}

/* ============================================================
   Home page — hero
   ============================================================ */

.rs-home-hero {
  background-color: var(--rs-bg-raised);
  border: 1px solid var(--rs-border);
  border-radius: 0.75rem;
  padding: 2rem 3rem;
  margin-bottom: 2rem;
  text-align: center;
}

.rs-home-hero h1,
.rs-home-hero h2 {
  font-family: "FoundryGridnik-Medium", monospace;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--rs-text);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.rs-home-hero p {
  font-size: 0.95rem;
  color: var(--rs-text-muted);
  max-width: 560px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.6;
}

/* Primary CTA */
.rs-btn-primary {
  background-color: var(--rs-accent) !important;
  color: var(--rs-bg) !important;
  border: none !important;
  font-weight: 600;
  border-radius: 0.375rem;
  padding: 0.6rem 1.4rem !important;
  transition: background-color 0.15s ease;
}

.rs-btn-primary:hover {
  background-color: var(--rs-accent-hover) !important;
  color: var(--rs-bg) !important;
}

/* Secondary CTA */
.rs-btn-secondary {
  background-color: transparent !important;
  color: var(--rs-text) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: 0.375rem;
  padding: 0.6rem 1.4rem !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.rs-btn-secondary:hover {
  border-color: var(--rs-accent) !important;
  color: var(--rs-accent) !important;
}

/* ============================================================
   Tutorial cards — compact two-column grid
   ============================================================ */

.rs-tutorial-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.rs-tutorial-card {
  background-color: var(--rs-bg-raised);
  border: 1px solid var(--rs-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}

.rs-tutorial-card .rs-tc-time {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.68rem;
  color: var(--rs-text-muted);
  background-color: var(--rs-bg-overlay);
  border: 1px solid var(--rs-border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

.rs-tutorial-card .rs-tc-step {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rs-text-muted);
}

.rs-tutorial-card .rs-tc-title {
  font-family: "FoundryGridnik-Medium", monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--rs-text);
  margin: 0;
}

.rs-tutorial-card .rs-tc-desc {
  font-size: 0.8rem;
  color: var(--rs-text-muted);
  line-height: 1.5;
  margin: 0;
}

.rs-tutorial-card a.rs-tc-link {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--rs-accent);
  text-decoration: none;
  font-weight: 500;
}

.rs-tutorial-card a.rs-tc-link:hover {
  color: var(--rs-accent-text-hover);
}

@media (max-width: 600px) {
  .rs-tutorial-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Footer — status page link (rendered as text via extra.social)
   ============================================================ */

.md-social__link[title="ReSim Services Status"] {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}

.md-social__link[title="ReSim Services Status"] svg {
  display: none;
}

.md-social__link[title="ReSim Services Status"]::after {
  content: "ReSim Services Status";
  font-size: 0.65rem;
  color: var(--md-footer-fg-color--light);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.md-social__link[title="ReSim Services Status"]:hover::after {
  color: var(--rs-highlight);
}