/* ============================================
   Humanoid Network -- MkDocs Material Overrides
   Brand: charcoal dark, blue accent #7AB8FF
   Fonts: Inter (body/UI), Styrene A (headings)
   ============================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Styrene A';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/StyreneAWeb-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Styrene A';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/StyreneAWeb-Bold.woff2') format('woff2');
}

/* --- Root Variables --- */
:root {
  --han-black: #000000;
  --han-charcoal: #141414;
  --han-dark-gray: #2A2A2A;
  --han-medium-gray: #666666;
  --han-light-gray: #D0D0D0;
  --han-white: #FFFFFF;
  --han-blue: #7AB8FF;
  --han-blue-dim: rgba(122, 184, 255, 0.08);
  --han-blue-hover: rgba(122, 184, 255, 0.12);
  --han-green: #86E89A;
  --han-purple: #C79BFF;
  --han-yellow: #FFDF61;
}

/* --- Slate Scheme Overrides --- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--han-charcoal);
  --md-default-fg-color: var(--han-light-gray);
  --md-default-fg-color--light: #888888;
  --md-default-fg-color--lighter: #555555;
  --md-default-fg-color--lightest: #3A3A3A;
  --md-primary-fg-color: var(--han-black);
  --md-primary-bg-color: var(--han-white);
  --md-accent-fg-color: var(--han-blue);
  --md-accent-fg-color--transparent: var(--han-blue-dim);
  --md-typeset-color: var(--han-light-gray);
  --md-typeset-a-color: var(--han-blue);
  --md-code-bg-color: #0D0D0D;
  --md-code-fg-color: var(--han-light-gray);
  --md-code-hl-color: var(--han-blue-dim);
  --md-footer-bg-color: #0A0A0A;
  --md-footer-bg-color--dark: #0A0A0A;
  --md-footer-fg-color: var(--han-light-gray);
  --md-footer-fg-color--light: var(--han-medium-gray);
  --md-footer-fg-color--lighter: #555555;

  /* Font overrides */
  --md-text-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-code-font: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* --- Typography --- */
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--han-light-gray);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Styrene A', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--han-white);
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 0.5em;
}

.md-typeset h2 {
  font-size: 1.35rem;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  padding-bottom: 0;
  border-bottom: none;
}

.md-typeset h3 {
  font-size: 1.05rem;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

.md-typeset h4 {
  font-size: 0.9rem;
  margin-top: 1.2em;
}

.md-typeset p {
  margin-bottom: 0.8em;
}

/* --- Header / Navbar --- */
.md-header {
  background-color: var(--han-black);
  box-shadow: none !important;
  border-bottom: none;
}

.md-header--shadow {
  box-shadow: none !important;
}

.md-header__topic {
  font-family: 'Styrene A', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

/* Logo sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.4rem;
  width: auto;
}

/* --- Sidebar / Navigation --- */
.md-sidebar {
  background-color: var(--han-charcoal);
}

.md-sidebar--primary {
  border-right: none;
}

.md-nav__title {
  font-family: 'Styrene A', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555555;
  padding: 0.8em 0.6em 0.4em;
  background-color: transparent !important;
}

.md-nav__item .md-nav__link {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--han-white);
  transition: color 0.2s;
  border-radius: 0;
  padding: 0.35em 0.6em;
}

.md-nav__item .md-nav__link:hover {
  color: var(--han-blue);
  background-color: transparent;
}

.md-nav__item .md-nav__link--active,
.md-nav__link:is([data-md-state="active"]),
label.md-nav__link--active {
  color: var(--han-blue) !important;
  font-weight: 500;
  background-color: transparent !important;
}

/* Section labels in sidebar */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label {
  font-family: 'Styrene A', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555555;
}

/* --- Search --- */
.md-search__input {
  background-color: #1E1E1E;
  border: 1px solid #2A2A2A;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
}

.md-search__input::placeholder {
  color: #555555;
}

.md-search__input:hover {
  border-color: #444444;
}

.md-search-result__meta {
  background-color: #0D0D0D;
}

.md-search-result__item {
  border-bottom: 1px solid #1E1E1E;
}

/* --- Tables --- */
.md-typeset table:not([class]) {
  border: 1px solid #222222;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.76rem;
}

.md-typeset table:not([class]) thead {
  background-color: #1A1A1A;
}

.md-typeset table:not([class]) th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888888;
  border-bottom: 1px solid #222222;
  padding: 0.7em 1em;
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid #1A1A1A;
  padding: 0.6em 1em;
  color: var(--han-light-gray);
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.015);
}

/* --- Code Blocks --- */
.md-typeset pre {
  border: 1px solid #1E1E1E;
  border-radius: 4px;
}

.md-typeset code {
  font-size: 0.8em;
  border-radius: 3px;
}

.md-typeset :not(pre) > code {
  background-color: rgba(122, 184, 255, 0.06);
  color: var(--han-blue);
  padding: 0.1em 0.35em;
  border: none;
}

/* Copy button */
.md-clipboard {
  color: #444444;
}
.md-clipboard:hover {
  color: var(--han-blue);
}

/* --- Admonitions --- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.md-typeset .note {
  border-left: 2px solid var(--han-blue);
}

.md-typeset .info {
  border-left: 2px solid var(--han-blue);
}

.md-typeset .warning {
  border-left: 2px solid var(--han-yellow);
}

.md-typeset .tip,
.md-typeset .success {
  border-left: 2px solid var(--han-green);
}

/* --- Blockquotes --- */
.md-typeset blockquote {
  border-left: 2px solid #444444;
  background-color: transparent;
  padding: 0.4em 1em;
  border-radius: 0;
  color: #999999;
  font-style: italic;
}

/* --- Footer --- */
.md-footer {
  background-color: #0A0A0A;
  border-top: none;
}

.md-footer-meta {
  background-color: #0A0A0A;
}

.md-social__link svg {
  fill: #444444;
  transition: fill 0.2s;
}

.md-social__link:hover svg {
  fill: var(--han-blue);
}

/* --- Content Area --- */
.md-content {
  max-width: 52rem;
}

/* Tighter paragraph spacing after headings */
.md-typeset h2 + p,
.md-typeset h3 + p {
  margin-top: 0.3em;
}

/* --- Lists --- */
.md-typeset ul,
.md-typeset ol {
  margin-bottom: 0.8em;
}

.md-typeset li {
  margin-bottom: 0.15em;
}

/* --- Horizontal rules --- */
.md-typeset hr {
  border-color: #222222;
}

/* --- TOC (right sidebar) --- */
.md-sidebar--secondary {
  border-left: none;
}

.md-nav--secondary .md-nav__title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #555555;
}

.md-nav--secondary .md-nav__link {
  font-size: 0.7rem;
  color: #666666;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--han-white);
}

.md-nav--secondary .md-nav__link--active {
  color: var(--han-blue);
}

/* --- Tabs --- */
.md-typeset .tabbed-labels > label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #2A2A2A;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #444444;
}

/* --- Links --- */
.md-typeset a {
  color: var(--han-blue);
  text-decoration: none;
  transition: color 0.2s;
}

.md-typeset a:hover {
  color: #A0D0FF;
  text-decoration: none;
}

/* --- Navigation footer (prev/next) --- */
.md-footer__inner {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.md-footer__link {
  transition: opacity 0.2s;
}

.md-footer__link:hover {
  opacity: 0.8;
}

.md-footer__direction {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--han-blue);
  opacity: 0.8;
}

.md-footer__title {
  font-family: 'Styrene A', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--han-white);
}

.md-footer__button {
  color: var(--han-blue);
}

/* --- Mobile --- */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary {
    background-color: var(--han-charcoal);
  }

  .md-nav--primary .md-nav__title {
    background-color: var(--han-black);
    color: var(--han-white);
  }

  .md-nav--primary .md-nav__title .md-nav__icon {
    color: var(--han-medium-gray);
  }
}

@media screen and (max-width: 600px) {
  .md-typeset h1 {
    font-size: 1.8rem;
  }

  .md-typeset h2 {
    font-size: 1.15rem;
  }
}