@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

@font-face {
  font-family: 'MesloLGS Nerd Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@3.4.0/patched-fonts/Meslo/S/Regular/MesloLGSNerdFont-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'MesloLGS Nerd Font';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@3.4.0/patched-fonts/Meslo/S/Bold/MesloLGSNerdFont-Bold.ttf') format('truetype');
}

:root {
  --md-text-font: "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, sans-serif;
  --md-code-font: "MesloLGS Nerd Font", "MesloLGS NF", "JetBrainsMono Nerd Font", ui-monospace, monospace;
}

/* The retired Astro site's header/nav bar was never colored; its accent
   (--sl-color-accent) was for links and active states only. The bar itself
   sat on --sl-color-bg-nav: #f4f4f4. Reproduce that split here:
   --md-primary-fg-color drives the header/tab bar background in Material,
   so it gets the light gray; --md-accent-fg-color carries the accent.
   #326ce5 is Kubernetes' own brand blue - sampled directly from the wheel
   in docs/images/hermes-agent-helm.png (also the shields.io Kubernetes
   badge color already used in the README), not picked freehand. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #f4f4f4;
  --md-primary-fg-color--light: #f4f4f4;
  --md-primary-fg-color--dark: #e2e2e2;
  --md-primary-bg-color: #24292f;
  --md-primary-bg-color--light: rgba(36, 41, 47, 0.7);
  --md-accent-fg-color: #326ce5;
  /* Body-content link color defaults to --md-primary-fg-color in Material,
     which is now a near-white gray, so decouple it back to the accent
     color so links stay legible instead of nearly invisible on a white page. */
  --md-typeset-a-color: #326ce5;
  /* The retired Astro site's page background was also #f4f4f4
     (html, body { background-color: #f4f4f4 }), not Material's default
     white. Match it so the header and page body read as one surface. */
  --md-default-bg-color: #f4f4f4;
  /* Code blocks default to a pale gray derived from the page background,
     which barely stands out against the #f4f4f4 page. Pure white gives
     them clear contrast as distinct panels. */
  --md-code-bg-color: #fff;
}

/* The primary navigation uses the same light surface as the header, so
   Material's default active state is too subtle. Keep the tab bar quiet,
   but give the current top-level section a readable accent-colored label
   and an underline. `.md-tabs__link` has no wrapping span around its text
   (see material/templates/partials/tabs-item.html) and is `display: flex`,
   so a background/pseudo-element bar sized off the link box tracks the
   tab's clickable padding, not the glyphs - it always overshoots
   left/right and sits flush under the text. Native text-decoration is
   drawn against the actual text run instead, so it hugs the rendered
   width automatically (no per-label width math, no markup change) and
   gets a real gap via text-underline-offset instead of manual inset math. */
.md-tabs__item--active .md-tabs__link {
  color: #326ce5;
  font-weight: 700;
  opacity: 1;
  text-decoration-line: underline;
  text-decoration-color: #326ce5;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.3rem;
}

.md-tabs__link:hover {
  color: #326ce5;
  opacity: 1;
}

/* Give content images (the header artwork, demo screenshots, the flow
   diagram, ...) rounded corners by default, matching the rest of the
   theme's soft edges (nav-item radius, code-block radius). Exclude
   shields.io badges: they're tiny (~20px tall) inline images, and the
   same radius that reads as a subtle rounded card on a full-width
   screenshot would clip a badge into an odd pill/blob shape. */
.md-typeset img:not([src*="shields.io"]) {
  border-radius: 0.75rem;
}

/* Crop the logo artwork's vertical whitespace instead of showing it letterboxed.
   The PNG is fully opaque (no alpha channel) with its own light canvas baked
   around the icons; now that the header itself is also #f4f4f4, the crop sits
   on a continuous background with no seam either way. */
.md-header__button.md-logo,
.md-nav__title .md-nav__button.md-logo {
  background-color: #f4f4f4;
  border-radius: 4px;
}

.md-header__button.md-logo img {
  width: 4.5rem;
  height: 2rem;
  object-fit: cover;
  object-position: center;
}

.md-nav__title .md-nav__button.md-logo img {
  width: 5.5rem;
  height: 2.4rem;
  object-fit: cover;
  object-position: center;
}

/* The custom copyright line (hooks.py's on_config) renders as a <div>,
   which forces it onto its own line above "Made with Material for
   MkDocs" below it. Flow it inline instead so the whole footer reads as
   a single line: attribution, then the generator credit, side by side. */
.md-copyright__highlight {
  display: inline;
}

.md-copyright__highlight::after {
  content: " \00b7 ";
}