/* extra.css */

/* Or, for a specific pixel width: 
  .md-main {
    max-width: 1500px !important;
  }
*/

/* ----------------------------------------
   INTER VARIABLE
   Expected font file:
   assets/fonts/InterVariable.woff2
---------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}


/* ----------------------------------------
   METAKARTA DESIGN TOKENS
---------------------------------------- */

:root {
  /* Typography */
  --mk-font-family: "Inter", sans-serif;

  --mk-font-regular: 400;
  --mk-font-medium: 520;
  --mk-font-semibold: 600;

  --mk-h1-size: 40px;
  --mk-h2-size: 28px;
  --mk-h3-size: 24px;
  --mk-h4-size: 20px;
  --mk-h5-size: 16px;
  --mk-h6-size: 12px;

  --mk-heading-line-height: 1.2;
  --mk-body-size: 16px;
  --mk-body-line-height: 1.5;

  --mk-sidebar-size: 14px;
  --mk-toc-size: 13px;

  /* Brand */
  --mk-brand: #0086c9;
  --mk-brand-light: #e2f5ff;

  /* Neutrals */
  --mk-neutral-darkest: #0c111d;
  --mk-neutral-darker: #182230;
  --mk-neutral-dark: #344054;
  --mk-neutral: #667085;
  --mk-neutral-light: #d0d5dd;
  --mk-neutral-lighter: #eaecf0;
  --mk-neutral-lightest: #f9fafb;
  --mk-white: #ffffff;

  /* Semantic aliases */
  --mk-text-primary: var(--mk-neutral-darkest);
  --mk-text-body: var(--mk-neutral-dark);
  --mk-text-secondary: var(--mk-neutral);
  --mk-border: var(--mk-neutral-lighter);
  --mk-border-strong: var(--mk-neutral-light);
  --mk-surface: var(--mk-white);
  --mk-surface-subtle: var(--mk-neutral-lightest);
}


/* ----------------------------------------
   MATERIAL THEME VARIABLES — LIGHT
---------------------------------------- */

[data-md-color-scheme="default"] {
  --md-text-font: var(--mk-font-family);

  --md-default-bg-color: var(--mk-surface);
  --md-default-fg-color: var(--mk-text-body);
  --md-default-fg-color--light: var(--mk-text-secondary);
  --md-default-fg-color--lighter: var(--mk-neutral-light);
  --md-default-fg-color--lightest: var(--mk-neutral-lighter);

  --md-primary-fg-color: var(--mk-white);
  --md-primary-bg-color: var(--mk-text-primary);

  --md-accent-fg-color: var(--mk-brand);
  --md-typeset-a-color: var(--mk-brand);
}


/* ----------------------------------------
   GLOBAL TYPOGRAPHY
---------------------------------------- */

html,
body,
input,
button,
textarea,
select {
  font-family: var(--mk-font-family);
}

body {
  color: var(--mk-text-body);
  font-size: var(--mk-body-size);
  font-weight: var(--mk-font-regular);
  line-height: var(--mk-body-line-height);
}

.md-typeset,
.md-typeset p,
.md-typeset li {
  color: var(--mk-text-body);
  font-family: var(--mk-font-family);
  font-size: var(--mk-body-size);
  font-weight: var(--mk-font-regular);
  line-height: var(--mk-body-line-height);
}


/* ----------------------------------------
   HEADINGS
---------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--mk-text-primary);
  font-family: var(--mk-font-family);
  font-weight: var(--mk-font-medium);
  line-height: var(--mk-heading-line-height);
  letter-spacing: 0;
}

.md-typeset h1 {
  font-size: var(--mk-h1-size);
}

.md-typeset h2 {
  font-size: var(--mk-h2-size);
}

.md-typeset h3 {
  font-size: var(--mk-h3-size);
}

.md-typeset h4 {
  font-size: var(--mk-h4-size);
}

.md-typeset h5 {
  font-size: var(--mk-h5-size);
}

.md-typeset h6 {
  font-size: var(--mk-h6-size);
}


/* ----------------------------------------
   LINKS
---------------------------------------- */

.md-typeset a {
  color: var(--mk-brand);
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--mk-brand);
  text-decoration-color: currentColor;
}


/* ----------------------------------------
   GENERAL NAVIGATION
---------------------------------------- */

.md-nav,
.md-tabs,
.md-header {
  font-family: var(--mk-font-family);
}

.md-nav__link {
  color: var(--mk-text-body);
}

.md-nav__link:hover,
.md-nav__link:focus-visible {
  color: var(--mk-brand);
}

.md-nav__title {
  color: var(--mk-text-primary);
  font-weight: var(--mk-font-medium);
}

/* ----------------------------------------
   HEADER / PRIMARY NAVIGATION
---------------------------------------- */

/* The standard Material tab row is replaced by the single-row header nav. */
.md-tabs {
  display: none;
}

.md-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Give the MetaKarta logo breathing room before the top-level navigation. */
.md-header__button.md-logo {
  margin-right: 1.25rem;
}

/* Top-level guide navigation rendered inside header.html. */
.mk-header-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.mk-header-nav .md-tabs__list {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
}

.mk-header-nav .md-tabs__item {
  height: auto;
  padding: 0;
}

.mk-header-nav .md-tabs__link {
  margin: 0;
  color: var(--mk-text-body);
  font-size: 0.7rem;
  font-weight: var(--mk-font-regular);
  line-height: 1;
  white-space: nowrap;
  opacity: 1;
}

.mk-header-nav .md-tabs__link:hover,
.mk-header-nav .md-tabs__link:focus-visible {
  color: var(--mk-brand);
}

.mk-header-nav .md-tabs__item--active .md-tabs__link {
  color: var(--mk-text-primary);
  font-weight: var(--mk-font-semibold);
}

/* Keep search and other header controls aligned to the right. */
.md-header__inner > .md-search {
  margin-left: auto;
}

/* Use Material's drawer navigation below the desktop breakpoint. */
@media screen and (max-width: 76.234375em) {
  .mk-header-nav {
    display: none;
  }

  .md-header__button.md-logo {
    margin-right: 0;
  }
}


/* ----------------------------------------
   LEFT TOC / Guide TOC
---------------------------------------- */

.md-sidebar--primary .md-nav__title {
  color: var(--mk-text-primary) !important;
  font-size: var(--mk-sidebar-size);
  font-weight: var(--mk-font-medium);
  line-height: 1.5;
}
 
.md-sidebar--primary .md-nav__link {
  color: var(--mk-text-primary);
  font-size: var(--mk-sidebar-size);
  font-weight: var(--mk-font-medium);
  line-height: 1.5;
}

/* ----------------------------------------
   RIGHT RAIL / "ON THIS PAGE" TOC
---------------------------------------- */

.md-nav--secondary .md-nav__title {
  color: var(--mk-text-secondary);
  font-size: var(--mk-toc-size);
  font-weight: var(--mk-font-regular);
  line-height: 1.4;
}
 
.md-nav--secondary .md-nav__link {
  color: var(--mk-text-secondary);
  font-size: var(--mk-toc-size);
  font-weight: var(--mk-font-medium);
  line-height: 1.5;
}

.md-nav--secondary .md-nav__link:hover,
.md-nav--secondary .md-nav__link:focus-visible,
.md-nav--secondary .md-nav__link--active {
  color: var(--mk-brand);
}

.md-nav--secondary .md-nav__link--active {
  font-weight: var(--mk-font-medium);
}


/* ----------------------------------------
   SURFACES / BORDERS
---------------------------------------- */

.md-main {
  background: var(--mk-surface);
}

.md-typeset hr {
  border-color: var(--mk-border);
}

.md-header,
.md-tabs,
.md-footer {
  border-color: var(--mk-border);
}


/* ----------------------------------------
   PAGE WIDTH
---------------------------------------- */

/* Stretch the layout to the full available width */
.md-grid {
  max-width: 100% !important;
}


/* ----------------------------------------
   DARK MODE — BASE PHASE 1 OVERRIDES
---------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-text-font: var(--mk-font-family);

  --md-default-bg-color: var(--mk-neutral-darkest);
  --md-default-fg-color: var(--mk-neutral-lightest);
  --md-default-fg-color--light: var(--mk-neutral-light);
  --md-default-fg-color--lighter: var(--mk-neutral);
  --md-default-fg-color--lightest: var(--mk-neutral-dark);

  --md-primary-fg-color: var(--mk-neutral-darkest);
  --md-primary-bg-color: var(--mk-white);

  --md-accent-fg-color: var(--mk-brand);
  --md-typeset-a-color: var(--mk-brand);
}

[data-md-color-scheme="slate"] .md-main {
  background: var(--mk-neutral-darkest);
}

[data-md-color-scheme="slate"] .md-typeset,
[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li {
  color: var(--mk-neutral-light);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6,
[data-md-color-scheme="slate"] .md-nav__title {
  color: var(--mk-white);
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--mk-neutral-light);
}

[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link:focus-visible {
  color: var(--mk-brand);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
  color: var(--mk-neutral);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link {
  color: var(--mk-neutral-light);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link:focus-visible,
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--mk-brand);
}

/* ----------------------------------------
   FAQ / QUESTION ACCORDIONS
   Override Material's default green "question" treatment
---------------------------------------- */

.md-typeset .admonition.question,
.md-typeset details.question {
  --md-admonition-color: var(--mk-brand);
  border-color: var(--mk-border);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

/* FAQ header */
.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: var(--mk-surface-subtle);
  color: var(--mk-text-primary);
  font-weight: var(--mk-font-medium);
}

/* Remove Material's default question icon */
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  display: none;
}

/* Use MetaKarta blue for the expand/collapse chevron */
.md-typeset .question > summary::after {
  background-color: var(--mk-brand);
}

/* Hover/focus */
.md-typeset details.question > summary:hover {
  background-color: var(--mk-neutral-lighter);
}

/* Open FAQ */
.md-typeset details.question[open] {
  border-color: var(--mk-border-strong);
  box-shadow: none;
}

/* Remove mouse-click focus glow */
.md-typeset details.question > summary:focus {
  outline: none;
  box-shadow: none;
}

/* Accessible keyboard focus in MetaKarta blue */
.md-typeset details.question > summary:focus-visible {
  outline: 2px solid var(--mk-brand);
  outline-offset: 2px;
  box-shadow: none;
}

/* Keep answer area clean */
.md-typeset details.question > *:not(summary) {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.question,
[data-md-color-scheme="slate"] .md-typeset details.question {
  --md-admonition-color: var(--mk-brand);
  border-color: var(--mk-neutral-dark);
  background-color: var(--mk-neutral-darkest);
}

[data-md-color-scheme="slate"] .md-typeset .question > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .question > summary {
  background-color: var(--mk-neutral-darker);
  color: var(--mk-white);
}

[data-md-color-scheme="slate"] .md-typeset details.question > summary:hover {
  background-color: var(--mk-neutral-dark);
}

[data-md-color-scheme="slate"] .md-typeset details.question[open] {
  border-color: var(--mk-neutral);
}

/* ----------------------------------------
   FAQ DETAILS FOCUS RESET
   Remove Material's residual green focus ring after toggle
---------------------------------------- */

.md-typeset details.question:focus,
.md-typeset details.question:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--mk-border) !important;
}

.md-typeset details.question[open]:focus,
.md-typeset details.question[open]:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--mk-border-strong) !important;
}

/* Preserve an accessible keyboard-only MetaKarta blue focus state */
.md-typeset details.question > summary:focus-visible {
  outline: 2px solid var(--mk-brand) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Dark mode focus borders */
[data-md-color-scheme="slate"] .md-typeset details.question:focus,
[data-md-color-scheme="slate"] .md-typeset details.question:focus-within {
  border-color: var(--mk-neutral-dark) !important;
}

[data-md-color-scheme="slate"] .md-typeset details.question[open]:focus,
[data-md-color-scheme="slate"] .md-typeset details.question[open]:focus-within {
  border-color: var(--mk-neutral) !important;
}


/* ----------------------------------------
   FULL SEARCH RESULTS PAGE
---------------------------------------- */

.mk-search-page__summary {
  margin: 0 0 1.5rem;
  color: var(--mk-text-secondary);
  font-size: 0.9rem;
}

.mk-search-result {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--mk-border);
}

.mk-search-result:first-child {
  padding-top: 0;
}

.md-typeset .mk-search-result__title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1.35;
}

.md-typeset .mk-search-result__title a {
  color: var(--mk-text-primary);
  text-decoration: none;
}

.md-typeset .mk-search-result__title a:hover,
.md-typeset .mk-search-result__title a:focus-visible {
  color: var(--mk-brand);
}

.md-typeset .mk-search-result__excerpt {
  margin: 0;
  color: var(--mk-text-body);
  font-size: 0.9rem;
  line-height: 1.55;
}

.mk-search-page__empty {
  padding: 1rem 0;
  color: var(--mk-text-secondary);
}

[data-md-color-scheme="slate"] .md-typeset .mk-search-result__title a {
  color: var(--mk-white);
}

[data-md-color-scheme="slate"] .md-typeset .mk-search-result__title a:hover,
[data-md-color-scheme="slate"] .md-typeset .mk-search-result__title a:focus-visible {
  color: var(--mk-brand);
}