/* =========================================================
   Studio Teknabu — MkDocs Material theme
   Single-source CSS (tokens → components)
   ========================================================= */

/* 1) Design tokens --------------------------------------------------------- */
:root {
  /* Fonts */
  --font-header: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Space Grotesk', sans-serif;
  --font-alt-body: 'IBM Plex Sans', sans-serif;

  /* Palette */
  --color-bg: #E9F5FF;
  --color-bg-alt-1: #F5F7FA;
  --color-bg-alt-2: #F2F4F2;
  --color-bg-alt-3: #F8FAFC;

  --color-bg-dark: #092F64;
  --color-surface-dark: #1F1F1F;

  --color-text: #1A1A1A;
  --color-text-light: #f4f4f6;

  --color-accent: #5A4DFF; /* primary purple */
  --color-accent-secondary: #468BE5; /* blue */
  --color-accent-secondary-desaturated: #6DA9E3;
  --color-accent-soft: #93BFEF;
  --color-accent-soft-muted: #B2D4F0;
  --color-accent-deep: #1A5799; /* cobalt */
  --color-accent-deep-alt: #274472;

  --color-accent-glow: rgba(90, 77, 255, 0.40);
  --color-accent-glow-soft: rgba(109, 74, 255, 0.30);

  /* Type scale */
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;

  --line-height-base: 1.6;
  --line-height-heading: 1.25;
  --line-height-tight: 1.15;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* Layout */
  --max-content-width: 1440px;

  /* CTA defaults */
  --cta-radius: 16px;
  --cta-g-start: var(--color-accent);
  --cta-g-mid:   var(--color-accent-secondary);
  --cta-g-end:   var(--color-accent-deep);
}

/* 2) Map tokens → Material variables -------------------------------------- */
/* Light scheme */
:root,
[data-md-color-scheme="default"] {
  --md-text-font: var(--font-body);
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --md-default-bg-color: var(--color-bg);
  --md-default-fg-color: var(--color-text);
  --md-primary-fg-color: var(--color-accent);
  --md-accent-fg-color: var(--color-accent-secondary);

  --md-surface: #ffffff;
  --md-code-bg-color: #f6f8fa;
  --md-footer-bg-color: var(--color-bg-alt-1);
  --md-footer-fg-color: var(--color-text);
  --md-typeset-a-color: var(--color-accent-deep);

  /* Header colors (local tokens for our header rules) */
  --header-bg: var(--color-accent-deep);
  --header-fg: #ffffff;
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--color-surface-dark);
  --md-default-fg-color: var(--color-text-light);
  --md-primary-fg-color: var(--color-accent);
  --md-accent-fg-color: var(--color-accent-secondary);

  --md-surface: #121212;
  --md-code-bg-color: #0f172a;
  --md-footer-bg-color: #0b1220;
  --md-footer-fg-color: var(--color-text-light);
  --md-typeset-a-color: var(--color-accent-soft);

  --header-bg: #0e1e3a;
  --header-fg: var(--color-text-light);
}

/* 3) Base typography & layout --------------------------------------------- */
html, body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-normal);
}

.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  font-family: var(--font-header);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
}
.md-typeset h1 { font-size: var(--font-size-3xl); }
.md-typeset h2 { font-size: var(--font-size-2xl); }
.md-typeset h3 { font-size: var(--font-size-xl); }
.md-typeset h4 { font-size: var(--font-size-lg); }
.md-typeset p, .md-typeset li { font-size: var(--font-size-md); }

.md-grid { max-width: var(--max-content-width); }

/* 4) Header (contrast & sizing) ------------------------------------------- */
.md-header {
  background: var(--header-bg) !important;
  border-bottom: none;
  min-height: 64px;
}
.md-header, .md-header a, .md-header .md-icon,
.md-header .md-search__input, .md-header .md-search__icon {
  color: var(--header-fg) !important;
  fill: var(--header-fg) !important;
}
.md-logo img {
  height: 36px; width: auto; display: block;
}

/* 5) Search input ---------------------------------------------------------- */
[data-md-color-scheme="default"] .md-search__form {
  background: #ffffff !important;
  border: 1px solid var(--color-accent-soft-muted);
}
[data-md-color-scheme="default"] .md-search__input {
  color: #1A1A1A !important;
  caret-color: var(--color-accent);
}
[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: rgba(26,26,26,0.55) !important;
}
[data-md-color-scheme="default"] .md-search__icon {
  color: #1A1A1A !important; fill: #1A1A1A !important;
}
[data-md-color-scheme="slate"] .md-search__form {
  background: #1f2937 !important;
  border: 1px solid var(--color-accent-deep-alt);
}
[data-md-color-scheme="slate"] .md-search__input {
  color: #f4f4f6 !important;
}
[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: rgba(244,244,246,0.6) !important;
}
[data-md-color-scheme="slate"] .md-search__icon {
  color: #f4f4f6 !important; fill: #f4f4f6 !important;
}

/* 6) Hero ------------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(80rem 24rem at 50% -10%, var(--color-accent-glow-soft), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent-soft), white 55%), transparent 30%),
    var(--color-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-secondary) 18%, transparent);
}
[data-md-color-scheme="slate"] .hero {
  background:
    radial-gradient(80rem 24rem at 50% -10%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 60%),
    linear-gradient(180deg, #0b1220, transparent 35%),
    var(--color-surface-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero__inner { max-width: var(--max-content-width); margin: 0 auto; padding: 4.5rem 1.25rem 3rem; text-align: center; }
.hero__badge {
  display: inline-block;
  font-family: var(--font-header);
  font-size: var(--font-size-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-accent-soft), white 25%);
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
  padding: .25rem .6rem; border-radius: 999px; margin-bottom: .75rem;
  color: var(--color-accent-deep);
}
[data-md-color-scheme="slate"] .hero__badge {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
  color: var(--color-text-light);
}
.hero__title {
  font-family: var(--font-header);
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: .25rem 0 .5rem;
}
.hero__subtitle { max-width: 54rem; margin: 0 auto 1.25rem; font-size: clamp(1rem, .6vw + .95rem, 1.125rem); opacity: .95; }
@media (max-width: 640px) { .hero__inner { padding: 3.5rem 1rem 2.25rem; } }

/* 7) CTA buttons (solid + ghost) ------------------------------------------ */
/* Base button (outside .md-typeset, e.g. in custom HTML blocks) */
.cta-button {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.85rem; border-radius: var(--cta-radius);
  font: 600 var(--font-size-md) var(--font-header);
  text-decoration: none; border: 1px solid transparent; color: #fff;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 42%) padding-box,
    linear-gradient(135deg, var(--cta-g-start) 0%, var(--cta-g-mid) 48%, var(--cta-g-end) 100%) padding-box,
    linear-gradient(135deg, var(--cta-g-start) 0%, var(--cta-g-end) 100%) border-box;
  background-clip: padding-box, padding-box, border-box;

  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 8px 22px var(--color-accent-glow);
  backdrop-filter: saturate(180%) blur(4px);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cta-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.cta-button:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 42%) padding-box,
    linear-gradient(135deg, var(--cta-g-start) 0%, var(--color-accent-secondary-desaturated) 52%, var(--cta-g-end) 100%) padding-box,
    linear-gradient(135deg, var(--cta-g-start) 0%, var(--cta-g-end) 100%) border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 12px 28px var(--color-accent-glow);
  border-color: rgba(255,255,255,.12);
}
.cta-button:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 16px var(--color-accent-glow); }
.cta-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-glow-soft), 0 8px 22px var(--color-accent-glow); border-color: rgba(255,255,255,.18); }
.cta-button .icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.cta-button--sm { padding: .65rem 1rem; border-radius: 12px; font: 600 var(--font-size-sm) var(--font-header); }

/* Ghost variant (base) */
.cta-button--ghost {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.85rem; border-radius: var(--cta-radius);
  font: 600 var(--font-size-md) var(--font-header);
  text-decoration: none; border: 1px solid; background: transparent;
}

/* Ghost colors — light vs dark */
[data-md-color-scheme="default"] .cta-button--ghost {
  color: var(--color-text);
  border-color: var(--color-accent-deep);
}
[data-md-color-scheme="default"] .cta-button--ghost:hover {
  color: var(--color-accent-deep);
  background: color-mix(in srgb, var(--color-accent-soft) 20%, white 85%);
  border-color: var(--color-accent);
}
[data-md-color-scheme="slate"] .cta-button--ghost {
  color: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}
[data-md-color-scheme="slate"] .cta-button--ghost:hover {
  color: #fff;
  background: color-mix(in srgb, var(--color-accent-deep-alt) 40%, transparent);
  border-color: var(--color-accent);
}

/* Ensure CTAs win against .md-typeset link rules */
.md-typeset .cta-button,
.md-typeset .cta-button:visited { color: #fff !important; }
.md-typeset .cta-button--ghost,
.md-typeset .cta-button--ghost:visited { color: inherit !important; }

/* 8) Footer --------------------------------------------------------------- */
.brand-footer {
  background: #0e1e3a; color: #f4f4f6;
  padding: 2rem 1rem; font-size: var(--font-size-sm);
}
.brand-footer__inner {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 2rem;
  max-width: var(--max-content-width); margin: 0 auto;
}
.brand-footer__tagline p { margin: 0; font-size: var(--font-size-md); line-height: var(--line-height-base); }
.brand-footer__logo img { height: 120px; width: auto; display: block; }
.brand-footer__links h4 {
  margin: 0 0 .5rem; font-family: var(--font-header);
  font-size: var(--font-size-md); text-align: right;
}
.brand-footer__links ul { list-style: none; padding: 0; margin: 0; text-align: right; }
.brand-footer__links li { margin-bottom: .25rem; }
.brand-footer__links a { color: var(--color-accent-soft); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.brand-footer__links a:hover { color: var(--color-accent); text-decoration: underline; }
.brand-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 1.5rem; padding-top: .75rem; text-align: center;
  font-size: var(--font-size-sm); opacity: .85;
}
/* Make the brand name in tagline feel clickable */
.brand-footer__tagline a {
  color: var(--color-accent); text-decoration: underline;
  text-underline-offset: 2px; font-weight: 600;
}
.brand-footer__tagline a:hover { text-decoration-thickness: 2px; }

/* 9) Utilities ------------------------------------------------------------- */
/* Prevent images/tables from having harsh corners */
.md-typeset table, .md-typeset img { border-radius: 12px; }

/* Responsive footer */
@media (max-width: 880px) {
  .brand-footer__inner { grid-template-columns: 1fr; text-align: center; }
  .brand-footer__links h4, .brand-footer__links ul { text-align: center; }
  .brand-footer__logo img { margin: 0 auto; height: 90px; }
}

.hero__logo img {
  height: 200px; /* tweak size */
  width: auto;
  margin: 0;
  padding: 0;
}

/* === Guide pages (type: "Guide") === */
.page[data-page-type="Guide"] .md-typeset {
  /* slightly tighter rhythm for task docs */
  --guide-gap: 0.75rem;
}

/* Title row + meta chips */
.page[data-page-type="Guide"] .md-typeset h1 {
  margin-bottom: .35rem;
}
.page[data-page-type="Guide"] .guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}
.page[data-page-type="Guide"] .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  border: 1px solid color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent-soft) 20%, white 82%);
  color: var(--color-accent-deep);
}
[data-md-color-scheme="slate"] .page[data-page-type="Guide"] .chip {
  border-color: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent-deep-alt) 40%, transparent);
  color: #fff;
}

/* Section labels */
.page[data-page-type="Guide"] .section-label {
  display: inline-block;
  font-size: var(--font-size-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: .25rem;
}

/* Steps: numbered with better spacing */
.page[data-page-type="Guide"] ol {
  counter-reset: step;
}
.page[data-page-type="Guide"] ol > li {
  counter-increment: step;
  padding-left: .25rem;
  margin: 0 0 1rem;
}
.page[data-page-type="Guide"] ol > li::marker {
  font-weight: 700;
  color: var(--color-accent-deep);
}

/* Code blocks inside guides: a touch more padding */
.page[data-page-type="Guide"] pre > code {
  padding: 1rem 1.25rem;
  border-radius: 10px;
}

/* Admonitions: emphasize key sections */
.page[data-page-type="Guide"] .admonition.info > .admonition-title::before { content: "ℹ️ "; }
.page[data-page-type="Guide"] .admonition.success > .admonition-title::before { content: "✅ "; }
.page[data-page-type="Guide"] .admonition.warning > .admonition-title::before { content: "⚠️ "; }
.page[data-page-type="Guide"] .admonition.failure > .admonition-title::before { content: "🛑 "; }

/* === Guide sections by heading id (no extra markup in MD) === */

/* Headings: icon + spacing */
.md-typeset h2#overview::before,
.md-typeset h2#prerequisites::before,
.md-typeset h2#steps::before,
.md-typeset h2#verification::before,
.md-typeset h2#troubleshooting::before,
.md-typeset h2#references::before {
  display: inline-block;
  margin-right: .5rem;
  font-size: 1.05em;
}

/* Per-section icons */
.md-typeset h2#overview::before        { content: "🧭"; }
.md-typeset h2#prerequisites::before   { content: "🧰"; }
.md-typeset h2#steps::before           { content: "🪜"; }
.md-typeset h2#verification::before    { content: "✅"; }
.md-typeset h2#troubleshooting::before { content: "🛠️"; }
.md-typeset h2#references::before      { content: "🔗"; }

/* Section blocks: add subtle separators/spacing without extra markup */
.md-typeset h2#overview,
.md-typeset h2#prerequisites,
.md-typeset h2#steps,
.md-typeset h2#verification,
.md-typeset h2#troubleshooting,
.md-typeset h2#references {
  margin-top: 2rem;
  padding-top: .25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-accent-soft) 35%, transparent);
}

/* Style the immediate content after certain headings */
.md-typeset h2#prerequisites + ul {
  background: color-mix(in srgb, var(--color-accent-soft) 14%, white 86%);
  border: 1px solid color-mix(in srgb, var(--color-accent-soft) 35%, transparent);
  padding: .75rem 1rem;
  border-radius: 10px;
}
[data-md-color-scheme="slate"] .md-typeset h2#prerequisites + ul {
  background: color-mix(in srgb, var(--color-accent-deep-alt) 40%, transparent);
  border-color: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
}

/* Steps: nicer numbers, breathing room */
.md-typeset h2#steps + ol {
  counter-reset: step;
  padding-left: 1rem;
}
.md-typeset h2#steps + ol > li {
  counter-increment: step;
  margin: 0 0 1rem;
}
.md-typeset h2#steps + ol > li::marker {
  font-weight: 700;
  color: var(--color-accent-deep);
}

/* Verification: highlight the first paragraph/list as a success panel */
.md-typeset h2#verification + * {
  background: linear-gradient(180deg, rgba(46, 204, 113, .08), transparent 90%);
  border-left: 4px solid #2ecc71;
  padding: .5rem .75rem .5rem 1rem;
  border-radius: 6px;
}

/* Troubleshooting: caution styling on first block after heading */
.md-typeset h2#troubleshooting + * {
  background: linear-gradient(180deg, rgba(241, 196, 15, .12), transparent 90%);
  border-left: 4px solid #f1c40f;
  padding: .5rem .75rem .5rem 1rem;
  border-radius: 6px;
}

/* References: tighten list spacing */
.md-typeset h2#references + ul li { margin: .25rem 0; }

/* Optional: make the top H1 tighter on guides */
.page[data-page-type="Guide"] .md-typeset h1 { margin-bottom: .35rem; }