/* ============================================
   Color scheme: Teal + Orange (WCAG AA safe)
   See COLOR_SCHEME.md for rationale and rules.
   ============================================ */

/* --- Light mode (default scheme) --- */
[data-md-color-scheme="default"] {

  /* Primary teal – header, sidebar, nav links */
  --md-primary-fg-color:          #00796b;
  --md-primary-fg-color--light:   #009688;
  --md-primary-fg-color--dark:    #004d40;

  /* Text color ON primary background (white on teal) */
  --md-primary-bg-color:          #ffffff;
  --md-primary-bg-color--light:   rgba(255, 255, 255, 0.7);

  /* Accent orange – buttons, hover states, active tabs, scrollbars */
  --md-accent-fg-color:           #ff9100;
  --md-accent-fg-color--transparent: rgba(255, 145, 0, 0.1);

  /* Text color ON accent background (dark on orange) */
  --md-accent-bg-color:           #333333;
  --md-accent-bg-color--light:    rgba(51, 51, 51, 0.7);

  /* Body text link color – must be the darkened teal, not the light one */
  --md-typeset-a-color:           #00796b;
}

/* --- Dark mode (slate scheme) --- */
[data-md-color-scheme="slate"] {

  /* Primary teal – darkened further for slate backgrounds */
  --md-primary-fg-color:          #00796b;
  --md-primary-fg-color--light:   #4db6ac;
  --md-primary-fg-color--dark:    #004d40;

  /* Text color ON primary background */
  --md-primary-bg-color:          #ffffff;
  --md-primary-bg-color--light:   rgba(255, 255, 255, 0.7);

  /* Accent orange – same hue, works on slate at 5.78:1 */
  --md-accent-fg-color:           #ff9100;
  --md-accent-fg-color--transparent: rgba(255, 145, 0, 0.1);

  /* Text color ON accent background */
  --md-accent-bg-color:           #333333;
  --md-accent-bg-color--light:    rgba(51, 51, 51, 0.7);

  /* Body text link color – use the lighter teal for readability on dark bg */
  --md-typeset-a-color:           #4db6ac;

  /* Slate hue – shift toward teal (174°) */
  --md-hue:                       174;
}

/* Hide "Utkast" from top navigation tabs */
.md-tabs__link[href*="drafts/"] {
  display: none;
}

/* Figure image + caption */
figure {
  margin-block: 1rem;
  overflow: hidden;
  border-radius: 8px;
}
figure img {
  display: block;
  width: 100%;
  border-radius: 8px 8px 0 0;
}
figure figcaption {
  margin: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  color: #999;
  font-style: italic;
  background: rgba(0, 0, 0, 0.05);
}
[data-md-color-scheme="slate"] figure figcaption {
  background: rgba(255, 255, 255, 0.05);
}

/* --- Quick-nav cards --- */
/* --- Quick-nav cards --- */
.md-typeset .quicknav,
.md-typeset .quicknav p {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem;
  margin: 0.3rem 0 1.5rem;
  padding: 0;
}
.md-typeset .quicknav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  text-decoration: none;
  color: var(--md-default-fg-color);
  font-size: 0.8rem;
  white-space: nowrap;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.md-typeset .quicknav a:hover {
  border-color: var(--md-accent-fg-color);
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.md-typeset .quicknav a .qn-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* --- Fallback for older Zensical / Material versions --- */
:root > * {
  --md-primary-fg-color:          #00796b;
  --md-primary-fg-color--light:   #009688;
  --md-primary-fg-color--dark:    #004d40;
  --md-accent-fg-color:           #ff9100;
}