/* === System Font Stack for Body Text === */
.md-typeset {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

/* === Headings – Slightly Bolder === */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
}

/* === Code: Use Native Monospace === */
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: "SF Mono", "Monaco", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 0.925em;
  font-feature-settings: "liga" on, "calt" on; /* Better ligatures */
}

/* Optional: Improve code block readability */
.md-typeset pre {
  line-height: 1.45;
}

/* === Fake terminal-window chrome for embedded screenshots ===
 * Wrap an image in a `.terminal-window` container to give it a
 * subtle titlebar + traffic-light-style dots, so terminal-UI
 * screenshots read as real terminal windows instead of floating
 * bitmaps. Works in both light and dark themes.
 *
 * Usage in Markdown (md_in_html extension is enabled):
 *
 *   <div class="terminal-window" markdown>
 *     <div class="terminal-window__titlebar">
 *       <span class="terminal-window__dots">
 *         <span class="terminal-window__dot terminal-window__dot--red"></span>
 *         <span class="terminal-window__dot terminal-window__dot--yellow"></span>
 *         <span class="terminal-window__dot terminal-window__dot--green"></span>
 *       </span>
 *       <span class="terminal-window__title">Terminal — enforcegate-installer</span>
 *     </div>
 *     ![Alt text](path/to/image.png)
 *   </div>
 */
.md-typeset .terminal-window {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  margin: 1.5em auto;
  max-width: 100%;
  background: #1e1e1e;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.md-typeset .terminal-window__titlebar {
  background: linear-gradient(180deg, #3a3a3a 0%, #2d2d2d 100%);
  padding: 0.28em 0.55em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.md-typeset .terminal-window__dots {
  display: inline-flex;
  gap: 0.28em;
  flex-shrink: 0;
}

.md-typeset .terminal-window__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.md-typeset .terminal-window__dot--red    { background: #ff5f56; }
.md-typeset .terminal-window__dot--yellow { background: #ffbd2e; }
.md-typeset .terminal-window__dot--green  { background: #27c93f; }

.md-typeset .terminal-window__title {
  color: #bbb;
  font: 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  flex: 1;
  text-align: center;
  padding-right: 40px; /* balance the ~40px dots block on the left */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}

.md-typeset .terminal-window img,
.md-typeset .terminal-window p img,
.md-typeset .terminal-window p {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 0;
}

/* === Top nav icons only ===
 * Material picks up `icon:` front-matter and renders it in three places:
 * the top tabs (`.md-tabs__link`), the left sidebar (`.md-nav__link`),
 * and the page heading. We only want the icon in the top tabs — the
 * sidebar copy reads as visual noise on top-level entries. The chevron
 * SVG is inside a `.md-nav__icon` span (separately classed) so this
 * rule leaves the expand/collapse arrows untouched.
 */
.md-nav__link > svg {
  display: none;
}