/* ================================================
   PRESCIENT Docs — MkDocs Material
   Brand: The Ohio State University (Buckeye UX palette)
   Typography: Inter (replaces BuckeyeSans per user request)
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Primary (header, nav bar) */
  --md-primary-fg-color:             #ba0c2f;   /* Scarlet */
  --md-primary-fg-color--light:      #d4103a;
  --md-primary-fg-color--dark:       #70071c;   /* Scarlet Dark 40 */
  --md-primary-bg-color:             #ffffff;
  --md-primary-bg-color--light:      rgba(255,255,255,0.7);

  /* Accent (links, hover, active nav, copy buttons) */
  --md-accent-fg-color:              #70071c;
  --md-accent-fg-color--transparent: rgba(186,12,47,0.08);
  --md-accent-bg-color:              #ffffff;

  /* Links */
  --md-typeset-a-color:              #ba0c2f;

  /* Body text — near-black for contrast */
  --md-default-fg-color:             #14171a;
  --md-default-fg-color--light:      #3a3e42;
  --md-default-fg-color--lighter:    rgba(20, 23, 26, 0.5);
  --md-default-fg-color--lightest:   rgba(20, 23, 26, 0.07);

  /* Typography */
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #ba0c2f;
  --md-primary-fg-color--dark:  #70071c;
  --md-accent-fg-color:         #d4103a;
  --md-typeset-a-color:         #d4103a;
}

/* ---------- Apply Inter everywhere ---------- */
body,
.md-typeset,
.md-header,
.md-tabs,
.md-nav,
.md-search__input,
input, button, select, textarea {
  font-family: var(--md-text-font);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter stylistic tweaks */
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-family: var(--md-text-font);
  color: var(--md-default-fg-color);
  letter-spacing: -0.015em;
}

/* Heading scale — Inter looks heavier than serif so we dial down slightly */
.md-typeset h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1.2rem;
  color: var(--md-default-fg-color);
}

/* Landing-page hero title — softer than content H1s */
.md-typeset h1.hero-title {
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}

/* Hide the permalink (¶) on the hero title — keep it on content headings */
.md-typeset h1.hero-title .headerlink {
  display: none;
}

.md-typeset h2 {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(20, 23, 26, 0.08);
  letter-spacing: -0.012em;
}

.md-typeset h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.008em;
}

.md-typeset h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.2rem;
}

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.7;
}

.md-typeset p {
  margin-bottom: 1rem;
}

/* ---------- Header ---------- */
.md-header {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  height: 3.4rem;            /* taller header to fit a larger logo */
}

/* Reorder header children:
   [logo][wordmark] <— flex spacer —> [theme] [github] [search] */
.md-header__inner {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
}

.md-header__button.md-logo {
  order: 1;
  margin: 0;
  padding: 0.3rem 0.2rem 0.3rem 0.5rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.6rem;            /* larger logo within the taller header */
  width: auto;
}

/* PRESCIENT wordmark — sits flush against the logo */
.md-header__title {
  order: 2;
  flex: 1;
  margin: 0;                 /* no gap between logo and wordmark */
  padding-left: 0;
  font-family: var(--md-text-font);
  opacity: 1;
}

.md-header__title .md-header__topic {
  position: static;        /* defeat the fade-in/out scroll behavior */
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Hide the second topic (current page name) that Material swaps in on scroll
   — we want the wordmark static, not transitioning. */
.md-header__title .md-header__topic + .md-header__topic {
  display: none;
}

.md-header__title .md-ellipsis {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* Right-side header controls — order plus minimal width/spacing fixes.
   Material's default .md-header__source is 11.7rem wide (designed for the
   full repo widget); we collapse it to icon width so it sits flush. */
.md-header__option { order: 3; margin: 0; padding: 0; }
.md-header__source { order: 4; width: auto; margin: 0; padding: 0; }
.md-search         { order: 5; margin-left: 0.8rem; }

.md-header__source .md-source,
.md-header__source .md-source__icon {
  margin: 0;
  padding: 0;
}

/* Take the inactive palette label out of layout (Material uses
   transform: scale(0) which leaves a phantom gap). */
.md-header__option .md-header__button[hidden] {
  display: none;
}

/* Hide the GitHub link's repo-name label and star/fork stats so only the
   icon shows. */
.md-header__source .md-source__repository,
.md-header__source .md-source__facts {
  display: none;
}

/* ---------- Content width ---------- */
.md-grid {
  max-width: 75rem;
}

/* ---------- Primary sidebar (left nav) ---------- */
.md-nav__title {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-sidebar--primary .md-nav__link {
  font-size: 0.76rem;
}

.md-sidebar__scrollwrap {
  background-color: transparent;
}

/* ---------- TOC sidebar (right, secondary) ---------- */
/* Top-level (h2) entries — stronger weight, darker, slightly larger */
.md-sidebar--secondary .md-nav__list > .md-nav__item > .md-nav__link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  padding: 0.25rem 0;
  line-height: 1.4;
  margin-top: 0.4rem;
}

/* Sub-level (h3 and deeper) — lighter, smaller, muted */
.md-sidebar--secondary .md-nav .md-nav .md-nav__link {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  padding: 0.15rem 0;
  line-height: 1.35;
  opacity: 0.85;
}

/* Tighten nested indentation */
.md-sidebar--secondary .md-nav .md-nav {
  padding-left: 0.6rem;
  border-left: 1px solid rgba(20, 23, 26, 0.08);
  margin-left: 0.2rem;
}

/* Active and hover states */
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--md-primary-fg-color);
}

.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--passed {
  color: var(--md-primary-fg-color) !important;
}

.md-sidebar--secondary .md-nav__title {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--md-default-fg-color);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(20, 23, 26, 0.1);
  margin-bottom: 0.3rem;
}

/* ---------- Links ---------- */
.md-typeset a {
  font-weight: 500;
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) {
  font-size: 0.78rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(20, 23, 26, 0.1);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(20, 23, 26, 0.025);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ---------- Code ---------- */
.md-typeset code {
  font-size: 0.78em;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background-color: rgba(20, 23, 26, 0.06);
  font-weight: 500;
}

.md-typeset pre > code {
  font-size: 0.76rem;
  line-height: 1.55;
  font-weight: 400;
}

/* ---------- Admonitions ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
  border-width: 0 0 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: 0.78rem;
}

.md-typeset .admonition.warning,
.md-typeset details.warning { border-color: #ba0c2f; }

.md-typeset .admonition.note,
.md-typeset details.note    { border-color: #a7b1b7; }

.md-typeset .admonition.tip,
.md-typeset details.tip     { border-color: #3f4443; }

/* ---------- Landing page: hero ---------- */
.hero-tagline {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
  max-width: none;          /* span the full grid width */
  margin: 0 0 2.4rem;
}

/* ---------- Landing page: grid cards (Kubernetes-style) ---------- */
.md-typeset .grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid.cards > .card {
  background-color: #f5f6f7;          /* subtle shading vs. white page bg */
  border: 1px solid rgba(20, 23, 26, 0.08);
  border-radius: 8px;
  padding: 1.1rem 1.2rem 1rem;
  transition: border-color 180ms ease,
              box-shadow 180ms ease,
              transform 180ms ease,
              background-color 180ms ease;
  display: flex;
  flex-direction: column;
  min-height: 12.5rem;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > :is(ul, ol) > li {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  border-color: rgba(186, 12, 47, 0.5);
  box-shadow: 0 6px 18px rgba(186, 12, 47, 0.1);
  transform: translateY(-2px);
}

/* Card title — softer weight, left-aligned, no icon */
.md-typeset .grid.cards > :is(ul, ol) > li > p:first-child,
.md-typeset .grid.cards > :is(ul, ol) > li > p:first-child strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  margin-bottom: 0.1rem;
  letter-spacing: -0.005em;
}

/* Card horizontal separator under title */
.md-typeset .grid.cards hr {
  border: none;
  border-top: 1px solid rgba(20, 23, 26, 0.08);
  margin: 0 0 0.35rem;
}

/* Card body text */
.md-typeset .grid.cards > :is(ul, ol) > li > p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.4rem;
}

/* Card inner item list — links to anchors within the section */
.md-typeset .grid.cards > :is(ul, ol) > li > ul {
  list-style: none;
  padding: 0;
  margin: 0.05rem 0 0.3rem;
}

.md-typeset .grid.cards > :is(ul, ol) > li > ul > li {
  padding: 0.05rem 0;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.md-typeset .grid.cards > :is(ul, ol) > li > ul > li::before {
  content: none;
}

.md-typeset .grid.cards > :is(ul, ol) > li > ul > li > a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  font-weight: 500;
}

.md-typeset .grid.cards > :is(ul, ol) > li > ul > li > a:hover {
  color: var(--md-primary-fg-color--dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CTA paragraph — push to bottom, center */
.md-typeset .grid.cards > :is(ul, ol) > li > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.6rem;
  text-align: center;
}

/* CTA — pill-shaped, slim, consistent width across all cards */
.md-typeset .grid.cards a.card-cta {
  display: inline-block;
  width: 78%;
  box-sizing: border-box;
  background-color: var(--md-primary-fg-color);
  color: #ffffff !important;
  padding: 0.32rem 1.2rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: background-color 160ms ease, transform 160ms ease;
  text-align: center;
}

.md-typeset .grid.cards a.card-cta:hover {
  background-color: var(--md-primary-fg-color--dark);
  transform: translateY(-1px);
  text-decoration: none !important;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards a.card-cta {
  background-color: var(--md-primary-fg-color);
}

/* ---------- Footer ---------- */
.md-footer-meta {
  background-color: #14171a;
}