/*===================================================================
  Distro Domain — terminal-aesthetic site styles
  Dracula-inspired palette, applied as Material color overrides plus
  a tmux-statusline-ish header that carries across all pages.
====================================================================*/

/* Palette tokens — used by home page and the slate scheme overrides */
:root {
  --dd-bg:            #0c0d10;
  --dd-bg-soft:       #15171c;
  --dd-surface:       #1a1c22;
  --dd-border:        #2a2d36;
  --dd-border-bright: #3d4150;
  --dd-text:          #e6e8ec;
  --dd-muted:         #8b8f9b;
  --dd-dim:           #5a5e6b;
  --dd-green:         #50fa7b;
  --dd-cyan:          #8be9fd;
  --dd-pink:          #ff79c6;
  --dd-purple:        #bd93f9;
  --dd-orange:        #ffb86c;
  --dd-yellow:        #f1fa8c;
  --dd-red:           #ff5555;
}

/*-------------------------------------------------------------------
  Slate (dark) scheme — primary aesthetic
-------------------------------------------------------------------*/
[data-md-color-scheme="slate"] {
  --md-hue: 230;

  --md-default-bg-color:          var(--dd-bg);
  --md-default-bg-color--light:   var(--dd-bg-soft);
  --md-default-bg-color--lighter: var(--dd-surface);
  --md-default-bg-color--lightest: rgba(255,255,255,.04);

  --md-default-fg-color:           var(--dd-text);
  --md-default-fg-color--light:    var(--dd-muted);
  --md-default-fg-color--lighter:  var(--dd-dim);
  --md-default-fg-color--lightest: rgba(255,255,255,.07);

  --md-primary-fg-color:           #060708;
  --md-primary-fg-color--light:    var(--dd-bg-soft);
  --md-primary-fg-color--dark:     #040506;
  --md-primary-bg-color:           var(--dd-text);
  --md-primary-bg-color--light:    var(--dd-muted);

  --md-accent-fg-color:            var(--dd-green);
  --md-accent-fg-color--transparent: rgba(80,250,123,.1);
  --md-accent-bg-color:            var(--dd-bg);
  --md-accent-bg-color--light:     var(--dd-bg-soft);

  --md-code-bg-color:              var(--dd-bg-soft);
  --md-code-fg-color:              #f8f8f2;
  --md-code-hl-color:              rgba(80,250,123,.18);
  --md-code-hl-string-color:       var(--dd-yellow);
  --md-code-hl-keyword-color:      var(--dd-pink);
  --md-code-hl-operator-color:     var(--dd-pink);
  --md-code-hl-punctuation-color:  var(--dd-muted);
  --md-code-hl-number-color:       var(--dd-purple);
  --md-code-hl-function-color:     var(--dd-green);
  --md-code-hl-constant-color:     var(--dd-purple);
  --md-code-hl-variable-color:     var(--dd-orange);
  --md-code-hl-special-color:      var(--dd-cyan);
  --md-code-hl-comment-color:      var(--dd-dim);
  --md-code-hl-name-color:         var(--dd-text);

  --md-typeset-color:              var(--dd-text);
  --md-typeset-a-color:            var(--dd-cyan);
  --md-typeset-mark-color:         rgba(241,250,140,.25);
  --md-typeset-kbd-color:          var(--dd-surface);
  --md-typeset-kbd-accent-color:   var(--dd-border-bright);
  --md-typeset-kbd-border-color:   var(--dd-border);
  --md-typeset-table-color:        rgba(255,255,255,.08);
  --md-typeset-table-color--light: rgba(255,255,255,.035);

  --md-admonition-bg-color:        var(--dd-bg-soft);
  --md-admonition-fg-color:        var(--dd-text);

  --md-footer-bg-color:            #060708;
  --md-footer-bg-color--dark:      #060708;
  --md-footer-fg-color:            var(--dd-muted);
  --md-footer-fg-color--light:     var(--dd-dim);
  --md-footer-fg-color--lighter:   var(--dd-dim);
}

[data-md-color-scheme="slate"] body { background-color: var(--dd-bg); }

/*-------------------------------------------------------------------
  Wider content area — Material's default .md-grid max-width is 61rem;
  bumping to 76rem gives code blocks and screenshots more breathing room
  on desktop. No mobile impact: max-width only constrains above the
  threshold, viewport governs below it.
-------------------------------------------------------------------*/
.md-grid { max-width: 76rem; }

/*-------------------------------------------------------------------
  Header / tabs — tmux-statusline feel, site-wide
-------------------------------------------------------------------*/
.md-header {
  background-color: #060708;
  border-bottom: 1px solid var(--dd-border);
  box-shadow: none;
}
.md-header[data-md-state="shadow"] {
  box-shadow: 0 0 .2rem rgba(0,0,0,.4), 0 .2rem .4rem rgba(0,0,0,.2);
}
.md-header__title,
.md-header__topic .md-ellipsis {
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: -.005em;
}
/* Tab row */
.md-tabs {
  background-color: var(--dd-bg);
  border-bottom: 1px solid var(--dd-border);
  box-shadow: none;
}
.md-tabs__list { font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace; }
.md-tabs__link {
  font-size: .72rem;
  opacity: .75;
  margin-top: .55rem;
  transition: opacity .12s, color .12s;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
  color: var(--dd-green);
}

/* Search input — terminal prompt aesthetic */
.md-search__input {
  background-color: var(--dd-surface);
  color: var(--dd-text);
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
}
.md-search__input::placeholder { color: var(--dd-dim); }
.md-search__input + .md-search__icon { color: var(--dd-muted); }
.md-search__form { background-color: var(--dd-surface); }
.md-search__form:hover { background-color: var(--dd-bg-soft); }

/*-------------------------------------------------------------------
  Sidebar / nav
-------------------------------------------------------------------*/
.md-nav__title { color: var(--dd-muted); font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.md-nav__link { transition: color .12s; }
.md-nav__link:hover,
.md-nav__link--active { color: var(--dd-green); }
.md-nav__item--active > .md-nav__link {
  color: var(--dd-green);
}

/*-------------------------------------------------------------------
  Typography in articles
-------------------------------------------------------------------*/
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 { color: var(--dd-text); letter-spacing: -.015em; }
.md-typeset h1 { font-weight: 600; }
.md-typeset h2 { border-bottom: 1px solid var(--dd-border); padding-bottom: .25rem; margin-top: 2.4rem; }

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: rgba(139,233,253,.35);
  text-underline-offset: 2px;
}
.md-typeset a:hover { color: var(--dd-green); text-decoration-color: var(--dd-green); }

/* Inline code chip — only when NOT inside a code block.
   `:not(pre) > code` matches inline code (whose parent is a paragraph,
   list item, table cell, etc.) but NOT the <code> inside a fenced block
   (whose parent is <pre>). Without this scope, the inline-code style was
   leaking into code blocks and double-bordering them. */
.md-typeset :not(pre) > code {
  background-color: var(--dd-bg-soft);
  border: 1px solid var(--dd-border);
  color: var(--dd-cyan);
  padding: 0 .35em;
  border-radius: 3px;
}

/* Code blocks — single outer border on the .highlight wrapper only.
   Applying it to both .highlight and pre > code caused a visible
   nested-box artifact at the top of every code block. */
.md-typeset .highlight {
  border: 1px solid var(--dd-border);
  border-radius: 6px;
  background: var(--dd-bg-soft);
}
.md-typeset .highlight .filename {
  background: var(--dd-surface);
  color: var(--dd-pink);
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
}

/* Admonitions get a green accent rail by default */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--dd-border);
  border-left: 3px solid var(--dd-green);
  background: var(--dd-bg-soft);
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: rgba(80,250,123,.05);
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
}
.md-typeset .admonition.warning,
.md-typeset details.warning  { border-left-color: var(--dd-orange); }
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary { background: rgba(255,184,108,.06); }
.md-typeset .admonition.danger,
.md-typeset details.danger   { border-left-color: var(--dd-red); }
.md-typeset .admonition.danger > .admonition-title,
.md-typeset details.danger > summary { background: rgba(255,85,85,.06); }
.md-typeset .admonition.note,
.md-typeset details.note     { border-left-color: var(--dd-cyan); }
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary { background: rgba(139,233,253,.06); }
.md-typeset .admonition.tip,
.md-typeset details.tip      { border-left-color: var(--dd-pink); }
.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary { background: rgba(255,121,198,.06); }

/*-------------------------------------------------------------------
  Material grid cards — used on category landing pages.
  Themed to match the terminal-window cards on the home page.
-------------------------------------------------------------------*/
.md-typeset .grid.cards > ul {
  margin: 1em 0;
}
.md-typeset .grid.cards > ul > li {
  background: var(--dd-bg-soft);
  border: 1px solid var(--dd-border);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .15s, transform .15s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  border-color: var(--dd-green);
  transform: translateY(-1px);
  box-shadow: none;
}
.md-typeset .grid.cards > ul > li > hr {
  border: none;
  border-top: 1px dashed var(--dd-border);
  margin: .8em 0;
}
.md-typeset .grid.cards > ul > li > p:first-child {
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
}
.md-typeset .grid.cards > ul > li > p:first-child strong {
  color: var(--dd-text);
  font-weight: 600;
}
.md-typeset .grid.cards .twemoji svg {
  fill: var(--dd-green);
}
.md-typeset .grid.cards a {
  color: var(--dd-cyan);
  text-decoration: none;
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
  font-size: .8rem;
}
.md-typeset .grid.cards a:hover {
  color: var(--dd-green);
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--dd-border);
  background: var(--dd-bg-soft);
}
.md-typeset table:not([class]) th {
  background: var(--dd-surface);
  color: var(--dd-pink);
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
}

/* Selection */
::selection { background: rgba(80,250,123,.28); color: #fff; }

/* Scrollbar */
* {
  scrollbar-color: var(--dd-border-bright) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--dd-border-bright); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--dd-green); }

/*-------------------------------------------------------------------
  Footer
-------------------------------------------------------------------*/
.md-footer { border-top: 1px solid var(--dd-border); }
.md-footer-meta {
  background: #060708;
  font-family: 'Hack', 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
}
.md-footer-meta a { color: var(--dd-cyan); }
.md-footer-meta a:hover { color: var(--dd-green); }
.md-copyright__highlight { color: var(--dd-muted); }

/*-------------------------------------------------------------------
  Light scheme — keep usable as accessibility fallback
-------------------------------------------------------------------*/
[data-md-color-scheme="default"] {
  --md-accent-fg-color: #00897b;
  --md-typeset-a-color: #006e63;
}

/*-------------------------------------------------------------------
  YouTube embed wrapper (kept from previous CSS)
-------------------------------------------------------------------*/
[data-responsive-youtube-container] {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin: 1em 0;
}
[data-responsive-youtube-container] > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}