@font-face {
  font-family: "Metropolis";
  src: 'https://cdn.jsdelivr.net/npm/@typehaus/metropolis@12.0.0-next.7/400.css';
}

:root > * {
  --md-text-font: "Metropolis";

  /* ================================
    Adastra Brand Colors
  ================================ */
  --adastra-red:          #f9423a;
  --adastra-red-tint-1:   #fa6861;
  --adastra-red-tint-2:   #fb8e89;
  --adastra-red-tint-3:   #fdb3b0;
  --adastra-red-tint-4:   #fed9d7;

  --adastra-deep-blue:        #163b6e;
  --adastra-deep-blue-tint-1: #1f549a;
  --adastra-deep-blue-tint-2: #7998c2;
  --adastra-deep-blue-tint-3: #a5bbd7;
  --adastra-deep-blue-tint-4: #d1dae8;

  --adastra-charcoal:        #424242;
  --adastra-charcoal-tint-1: #575757;
  --adastra-charcoal-tint-2: #9d9d9d;
  --adastra-charcoal-tint-3: #dadada;

  --adastra-light-gray: #f4f4f4;
  --adastra-white:      #ffffff;

  /* ================================
     Primary — header, sidebar, links
  ================================ */
  --md-primary-fg-color:        var(--adastra-white);              /* main primary color (header background) */
/*  --md-primary-fg-color--light: var(--md-primary-fg-color--light); /* lighter shade of primary */
/*  --md-primary-fg-color--dark:  var(--md-primary-fg-color--dark);  /* darker shade of primary */
  --md-primary-bg-color:        var(--adastra-deep-blue);          /* text/icons ON TOP of primary color */
/*  --md-primary-bg-color--light: var(--md-primary-bg-color--light); /* lighter version of the above */

/* ================================
     Footer — background, text, icons
  ================================ */
  --md-footer-bg-color:           var(--adastra-white);           /* main footer background */
  --md-footer-bg-color--dark:     var(--adastra-white);           /* darker strip behind the meta row */
  --md-footer-fg-color:           var(--adastra-charcoal);        /* main footer text & icons */
  --md-footer-fg-color--light:    var(--adastra-charcoal-tint-1); /* secondary text (copyright) */
  --md-footer-fg-color--lighter:  var(--adastra-charcoal-tint-2); /* muted text ("Made with...") */
  
  /* ================================
     Accent — buttons, hover, links
  ================================ */
   --md-accent-fg-color:              var(--adastra-red-tint-2);                      /* main accent/interactive color */
/*  --md-accent-fg-color--transparent: var(--md-accent-fg-color--transparent); /* accent with transparency */
/*  --md-accent-bg-color:              var(--md-accent-bg-color);              /* text on top of accent color */
/*  --md-accent-bg-color--light:       var(--md-accent-bg-color--light);       /* lighter version of the above */

  /* ================================
     Default — page background, text
  ================================ */
/*  --md-default-fg-color:           var(--md-default-fg-color);           /* main body text color */
/*  --md-default-fg-color--light:    var(--md-default-fg-color--light);    /* secondary/muted text */
/*  --md-default-fg-color--lighter:  var(--md-default-fg-color--lighter);  /* even more muted text */
/*  --md-default-fg-color--lightest: var(--md-default-fg-color--lightest); /* subtle text, dividers */
/*  --md-default-bg-color:           var(--md-default-bg-color);           /* page background */
/*  --md-default-bg-color--light:    var(--md-default-bg-color--light);    /* slightly lighter background */
/*  --md-default-bg-color--dark:     var(--md-default-bg-color--dark);     /* slightly darker background */

  /* ================================
     Typeset — content area
  ================================ */
/*  --md-typeset-color:   var(--md-typeset-color);   /* content text color */
 --md-typeset-a-color: var(--adastra-red); /* link color in content */

  /* ================================
     Code blocks
  ================================ */
/*  --md-code-fg-color: var(--md-code-fg-color); /* code text color */
/*  --md-code-bg-color: var(--md-code-bg-color); /* code block background */
/*  --md-code-hl-color: var(--md-code-hl-color); /* code highlight color */
  --md-code-hl-keyword-color:  var(--adastra-deep-blue-tint-1);    /* keywords: for, if, import, in, ... */
  --md-code-hl-string-color:   var(--adastra-red-tint-1);          /* strings: 'x-llmgw', "gpt-4.1", ... */
  --md-code-hl-number-color:   var(--adastra-red-tint-1);          /* numbers: 2, 4.1, ... */

  /* ================================
     Dark mode (slate)
  ================================ */
/*  --md-hue: var(--md-hue); /* single value [0–360] that derives ALL slate colors */
}

/* Built-in functions: print(), ... */
.highlight .nb {
  color: var(--adastra-deep-blue-tint-1);
}

/* Imported module names: import json, import os, ... */
.highlight .nn {
  color: var(--adastra-charcoal);
}

/* ===== GENERAL BEGIN ===== */
/* Remove left/right gaps by making grid full width */
.md-grid {
    max-width: 90%;
}
/* ===== GENERAL END ===== */

/* ===== HEADER BEGIN ===== */
/* Header */
.md-header {
  height: 80px;
}

.md-header__inner {
  height: 80px;
  display: flex;
  align-items: center;
}
/* ===== HEADER END ===== */

/* ===== SEARCH BEGIN ===== */
/* Search - shape */
.md-search__form {
  border-radius: 8px;
  overflow: hidden;
}

/* Search - border */
.md-search__input {
  border-radius: 8px;
  background-color: var(--md-primary-fg-color);
  border: 2px solid var(--md-primary-bg-color);
  transition: border-color 0.2s ease, border-radius 0.2s ease;;
}

/* Search - placeholder text */
.md-search__input::placeholder {
  color: var(--adastra-charcoal);
}

/* Search - hover & focus */
.md-search__input:hover,
.md-search__input:focus {
  border-color: var(--md-accent-fg-color);
}

/* Search - opened - shape */
[data-md-toggle=search]:checked ~ .md-header .md-search__form {
  border-radius: 8px 8px 0 0;
}

/* Search - opened - border */
[data-md-toggle=search]:checked ~ .md-header .md-search__input {
  border-radius: 8px 8px 0 0;
}

/* Search opened - dropdown - shape */
.md-search__output {
  border-radius: 0 0 8px 8px;
}

/* Search opened - dropdown - scroll */
.md-search__scrollwrap {
  border-radius: 0 0 8px 8px;
}
/* ===== SEARCH END ===== */

/* ===== FONTS/TEXTS BEGIN ===== */
/* Content links - hover */
.md-typeset a:hover {
  color: var(--md-accent-fg-color) !important;
}

/* Navigation links - hover */
.md-nav__link:hover {
  color: var(--md-accent-fg-color) !important;
}

/* H1 - style */
.md-typeset h1 {
  color: var(--adastra-red);
  /* font-size: 2.2em; */
  font-weight: 700;
}
/* H1 - style */
.md-typeset h2 {
  color: var(--md-primary-bg-color);
  /* font-size: 2.2em; */
  font-weight: 700;
}
/* H1 - style */
.md-typeset h3 {
  color: var(--md-primary-bg-color);
  /* font-size: 2.2em; */
  font-weight: 700;
}
/* ===== FONTS/TEXTS END ===== */

/* ===== NAVIGATAION BEGIN ===== */
/* Sidebar menu - hide title */
.md-nav--primary > .md-nav__title {
    display: none;
}

/* Sidebar menu - red line */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav {
    border-left: 0.5px solid var(--md-typeset-a-color);
    margin-left: 0.69rem;
    padding-left: 0.69rem;
  }

  .md-nav--primary .md-nav .md-nav {
    border-left: none;
    margin-left: 0;
  }
}

/* Sidebar menu - icon and text - pc */
@media screen and (min-width: 76.25em) {
  .md-nav__link {
    display: flex;
    align-items: flex-end;
    color: var(--md-primary-bg-color);
  }
  
  .md-nav__link > svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
    position: relative;
    top: 2px;
  }
}
/* Sidebar menu - icon and text - mobile */
@media screen and (max-width: 76.24em) {
  .md-nav__link {
    color: var(--md-primary-bg-color);
  }

  .md-nav__link > svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    position: relative;
    top: -6px;
  }
}
/* ===== NAVIGATAION END ===== */

/* ===== VERSIONING BEGIN ===== */
/* Version - text - base */
.md-version__current {
  font-weight: bold;
}

/* Version - dropdown - shape */
.md-version__list {
  border-radius: 8px 8px 8px 8px;
  background-color: var(--md-primary-fg-color);
}

/* Version - dropdown - text - base */
.md-version__list .md-version__item .md-version__link {
  color: var(--md-primary-bg-color);
}

/* Version - dropdown - text - hover */
.md-version__list .md-version__item .md-version__link:hover {
  color: var(--md-typeset-a-color);
}
/* ===== VERSIONING END ===== */

/* ===== THEME CHANGE BEGIN ===== */
/* Temporarily disabled */
.md-header__option {
    display: none;
}
/* ===== THEME CHANGE END ===== */

/* ===== FOOTER BEGIN ===== */
/* Footer - separation line */
.md-footer-meta__inner {
  border-top: 1px solid var(--adastra-charcoal);
}
/* ===== FOOTER END ===== */

/* ==================== TEST FEATURES ==================== */