/* ------------------------------------------------------------------
   Arena Developer & API Help Center
   Material for MkDocs - Custom styles
   - Brand colors via CSS variables (light + dark)
   - Content-scoped link color (incl. tables)
   - Typography (SF Pro Text)
   - Logo handling for dark mode
   - Header search sizing
   ------------------------------------------------------------------ */

/* Hide helper text while keeping it indexable for search synonyms */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   Brand theming via Material CSS variables
   ========================================================= */

/* Light scheme (default) */
:root {
  /* Header / primary color – keeps top bar #303c43 in light mode */
  --md-primary-fg-color:        #303c43;
  --md-primary-fg-color--light: #48575f;
  --md-primary-fg-color--dark:  #212a2f;
}

/* Dark scheme (slate) */
[data-md-color-scheme="slate"] {
  /* Keep header the same brand color in dark mode */
  --md-primary-fg-color:        #303c43;
  --md-primary-fg-color--light: #48575f;
  --md-primary-fg-color--dark:  #1b2226;
}

/* =========================================================
   Content link color (scoped)
   - Use --md-typeset-a-color inside the content area
   - Force in tables as well
   ========================================================= */

/* Light mode link color in content */
.md-content {
  --md-typeset-a-color: #0052cc; /* brand blue */
}

/* Dark mode link color in content – accessible on dark bg */
[data-md-color-scheme="slate"] .md-content {
  --md-typeset-a-color: #6aa7ff; /* brighter blue for contrast */
}

/* Apply the variable to all content links (visited/hover/active) */
.md-content .md-typeset a,
.md-content .md-typeset a:visited,
.md-content .md-typeset a:hover,
.md-content .md-typeset a:active {
  color: var(--md-typeset-a-color);
}

/* Ensure links inside data tables pick up the same color */
.md-content .md-typeset__table table:not([class]) a {
  color: var(--md-typeset-a-color);
}

/* Optional: slightly emphasize hover with the accent color */
.md-content .md-typeset a:hover,
.md-content .md-typeset__table table:not([class]) a:hover {
  color: var(--md-accent-fg-color, var(--md-typeset-a-color));
}

/* =========================================================
   Typography
   ========================================================= */

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SF-Pro-Text-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: url('../fonts/SF-Pro-Text-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body,
.md-typeset {
  font-family: 'SF Pro Text', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   Header layout touch-ups
   ========================================================= */

/* Let the title shrink instead of forcing wrap */
.md-header__title { 
  min-width: 0;
}

/* Desktop: slim search and nudge spacing so Search → Palette → GitHub fit neatly */
@media (min-width: 60rem) {
  .md-header__inner label.md-header__button[for="__search"] { margin-right: .35rem; }

  .md-header__inner .md-search {
    max-width: 14rem; /* adjust 12–16rem to taste */
    width: 100%;
  }

  .md-header__inner .md-search__form {
    padding-block: .25rem;
    padding-inline: .6rem .6rem;
  }

  .md-header__inner .md-search__input {
    padding-inline-start: 2rem;
  }

  [data-md-component="palette"] { margin-left: .45rem; }
  .md-header__source { margin-left: .45rem; }
}

/* =========================================================
   Logo handling for dark mode
   ========================================================= */

[data-md-color-scheme="slate"] .md-logo img {
  filter: brightness(0) invert(1);
}

/* Exact swap alternative:
[data-md-color-scheme="slate"] .md-logo img {
  filter: none;
  content: url('../images/arena_plm-logo--white.svg');
}
*/

/* =========================================================
   Cleanups / Important reminders
   ========================================================= */

/* Do NOT hard-code the header color — variables above handle it.
   If present in older CSS, remove:
   .md-header { background-color: #303c43 !important; }
*/