/* ==========================================================================
   AIND VR Foraging Packaging — brand theme
   Palette derived from the AIND logo: navy #192b49 and blue #4a8bd1.
   Mirrors the aind-behavior-blog palette exactly.
   ========================================================================== */

/* --- Custom primary color (header, nav, footer) --------------------------- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #192b49;
  --md-primary-fg-color--light: #2d4470;
  --md-primary-fg-color--dark: #0f1a2e;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* --- Custom accent color (links, hovers, focus) --------------------------- */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #4a8bd1;
  --md-accent-fg-color--transparent: rgba(74, 139, 209, 0.1);
}

/* Use the brand blue for body links in both schemes */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #2f6cb0;
}
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #6aa9e0;
  --md-accent-fg-color: #6aa9e0;
}

/* --- Branded header + tabs ------------------------------------------------ */
.md-header,
.md-tabs {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.9rem;
  width: auto;
}

/* --- Tables: clear borders, header band, zebra striping, overflow scroll --- */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-weight: 600;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .md-typeset__table {
  width: 100%;
}

/* --- Card grid polish ----------------------------------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.5rem;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 16px rgba(25, 43, 73, 0.12);
  transform: translateY(-2px);
}

.md-typeset .grid.cards .lg.middle {
  color: var(--md-accent-fg-color);
}

/* --- Navigation tabs: highlight the active tab on the navy bar ------------ */
.md-tabs__item--active {
  border-bottom: 2px solid var(--md-primary-bg-color);
}