/* =============================================================
   akoyaGO theme for Material for MkDocs

   Design system:
   - Top banner:  #527575 (lighter muted teal) — persistent nav strip
                  matching community.akoyago.com "GOsupport | Announcements
                  | Knowledge Base" pattern
   - Header:      #ffffff in light mode | #3e6a6a in dark mode
   - Logo:        dark-ink variant on white | light-ink variant on teal
   - Tabs bar:    #3e6a6a teal in both modes (brand continuity;
                  two-tone effect in light mode)
   - Content:     #ffffff light | #2c2f33 dark
   - Accent:      #3e6a6a teal (light) | #7cbcbc brighter teal (dark)
   - Yellow (#f5c518) reserved for brand accent in logo only
   ============================================================= */

/* -------------------------------------------------------------
   LIGHT SCHEME — white header, dark-ink logo, dark body text
   ------------------------------------------------------------- */
:root {
  /* Header bg is white; text/icons on header are teal */
  --md-primary-fg-color:              #ffffff;
  --md-primary-fg-color--light:       #f5f5f5;
  --md-primary-fg-color--dark:        #e8e8e8;
  --md-primary-bg-color:              #3e6a6a;
  --md-primary-bg-color--light:       rgba(62, 106, 106, 0.75);

  /* Accent (teal — links, hover, active states) */
  --md-accent-fg-color:               #3e6a6a;
  --md-accent-fg-color--transparent:  rgba(62, 106, 106, 0.1);
  --md-accent-bg-color:               #ffffff;
  --md-accent-bg-color--light:        rgba(255, 255, 255, 0.7);

  --md-typeset-a-color:               #3e6a6a;

  --md-code-bg-color:                 #f6f8fa;
  --md-code-fg-color:                 #24292f;
}

/* -------------------------------------------------------------
   DARK SCHEME — teal header, light-ink logo, dark content
   ------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:              #2c2f33;
  --md-default-fg-color:              rgba(255, 255, 255, 0.9);
  --md-default-fg-color--light:       rgba(255, 255, 255, 0.7);
  --md-default-fg-color--lighter:     rgba(255, 255, 255, 0.32);
  --md-default-fg-color--lightest:    rgba(255, 255, 255, 0.12);

  --md-primary-fg-color:              #3e6a6a;
  --md-primary-fg-color--light:       #4e7e7e;
  --md-primary-fg-color--dark:        #2e5555;
  --md-primary-bg-color:              #ffffff;
  --md-primary-bg-color--light:       rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:               #7cbcbc;
  --md-accent-fg-color--transparent:  rgba(124, 188, 188, 0.12);

  --md-typeset-a-color:               #7cbcbc;

  --md-code-bg-color:                 #1e2125;
  --md-code-fg-color:                 #e6e6e6;
}

/* -------------------------------------------------------------
   Light-mode header border — separates white header from white
   content area below. No border in dark mode.
   ------------------------------------------------------------- */
.md-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom: none;
  box-shadow: none;
}

/* -------------------------------------------------------------
   Tabs bar — always teal for brand continuity. In light mode
   this creates a two-tone header: white top + teal tabs below.
   ------------------------------------------------------------- */
.md-tabs {
  background-color: #3e6a6a;
  color: #ffffff;
}
.md-tabs .md-tabs__link {
  color: rgba(255, 255, 255, 0.85);
}
.md-tabs .md-tabs__link:hover,
.md-tabs .md-tabs__link--active {
  color: #ffffff;
}

/* -------------------------------------------------------------
   Top banner strip — persistent nav strip above the header.
   Content comes from overrides/main.html (announce block).
   ------------------------------------------------------------- */
.md-banner {
  background-color: #527575;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
}
.md-banner__inner {
  padding: 0.45rem 1rem;
  margin: 0 auto;
  max-width: 88rem;
}
.md-banner a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  padding: 0 1rem;
  font-weight: 500;
}
.md-banner a:hover {
  color: #ffffff;
}
.md-banner a:first-child {
  padding-left: 0;
}

/* -------------------------------------------------------------
   Header logo — official akoyaGO wordmark.
   Default (light scheme) uses the dark-ink logo; slate (dark
   scheme) swaps to the light-ink logo via CSS content.
   ------------------------------------------------------------- */
.md-header__button.md-logo img {
  height: 1.6rem;
  width: auto;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("akoyaGO-logo-light.png");
}

/* -------------------------------------------------------------
   Info admonition — teal-tinted. Yellow is reserved for brand
   accent (logo), not content hierarchy.
   ------------------------------------------------------------- */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: #3e6a6a;
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(62, 106, 106, 0.1);
  border-color: #3e6a6a;
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: #3e6a6a;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  border-color: #7cbcbc;
}
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary {
  background-color: rgba(124, 188, 188, 0.12);
  border-color: #7cbcbc;
}
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .info > summary::before {
  background-color: #7cbcbc;
}

/* -------------------------------------------------------------
   Page grid — Material defaults to 61rem, which is generous
   for prose but squeezes wide reference tables. Bump to 76rem
   to give entity-page tables breathing room.
   ------------------------------------------------------------- */
.md-grid {
  max-width: 76rem;
}

/* -------------------------------------------------------------
   Reference tables — dense metadata with long Dataverse logical
   names. Key readability fixes:
   - Inline code never breaks mid-identifier (akoya_primarydonorcontact
     stays whole; column widens; horizontal scroll appears if needed)
   - Tight cell padding so more width goes to content
   - Top-aligned cells so rows don't balloon when one cell wraps
   ------------------------------------------------------------- */
.md-typeset table:not([class]) {
  font-size: 0.78rem;
}
.md-typeset table:not([class]) th {
  font-weight: 600;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.55em 0.8em;
  vertical-align: top;
}
.md-typeset table:not([class]) code {
  white-space: nowrap;
}

/* -------------------------------------------------------------
   Inline code — neutral panel.
   ------------------------------------------------------------- */
.md-typeset code {
  border-radius: 3px;
  padding: 0.08em 0.35em;
}
.md-typeset pre code,
.md-typeset .highlight code {
  background-color: transparent;
  padding: 0;
}

/* -------------------------------------------------------------
   Landing page card grid — soften borders.
   ------------------------------------------------------------- */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border-radius: 6px;
  border-color: var(--md-default-fg-color--lightest);
}