/* Header styling with brand tokens */
.md-header,
.md-tabs {
  background-color: var(--tm-bg-highlight) !important;
}

.md-header .md-header__title,
.md-header .md-header__button,
.md-tabs__link {
  color: var(--tm-text-strong) !important;
}

/* Hover and active tab states */
.md-tabs__link--active,
.md-tabs__link:focus,
.md-tabs__link:hover {
  color: var(--tm-accent) !important;
}

/* Dark mode: slightly darken the pale blue */
@media (prefers-color-scheme: dark) {
  [data-md-color-scheme="slate"] .md-header,
  [data-md-color-scheme="slate"] .md-tabs {
    background-color: color-mix(in oklab, var(--tm-bg-highlight), black 50%) !important;
  }
}

/* Accent for LEFT SIDEBAR (site nav) — hover/focus only */
.md-nav--primary .md-nav__link:hover,
.md-nav--primary .md-nav__link:focus,
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav__link:focus {
  color: var(--tm-accent) !important;
}

/* Accent for ON-PAGE TOC (right sidebar) — hover/focus only */
.md-nav--secondary .md-nav__link:hover,
.md-nav--secondary .md-nav__link:focus,
.md-sidebar--secondary .md-nav__link:hover,
.md-sidebar--secondary .md-nav__link:focus {
  color: var(--tm-accent) !important;
}

/* Page content links — hover/focus only (keep default color at rest) */
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--tm-accent) !important;
}

/* Keyboard focus visibility */
.md-nav__link:focus-visible,
.md-typeset a:focus-visible {
  color: var(--tm-accent) !important;
}

/* Desktop LEFT sidebar (normal mode) — hover/focus only */
.md-sidebar--primary .md-nav--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav--primary .md-nav__link:focus,
.md-sidebar--primary .md-nav--primary .md-nav__item .md-nav__link:hover,
.md-sidebar--primary .md-nav--primary .md-nav__item .md-nav__link:focus {
  color: var(--tm-accent) !important;
}
/* Desktop LEFT sidebar (hover/focus) — target link + inner text span */
.md-sidebar--primary .md-nav__item:hover > .md-nav__link,
.md-sidebar--primary .md-nav__item:hover > .md-nav__link .md-ellipsis,
.md-sidebar--primary .md-nav__link:focus,
.md-sidebar--primary .md-nav__link:focus .md-ellipsis {
  color: var(--tm-accent) !important;
}

/* Optional: visited links hover the same way */
.md-sidebar--primary .md-nav__link:visited:hover,
.md-sidebar--primary .md-nav__link:visited:hover .md-ellipsis {
  color: var(--tm-accent) !important;
}
/* Keep header buttons (incl. globe) black on pale-blue header */
.md-header .md-header__button { color: var(--tm-text-strong) !important; }

/* Hover the globe button with the brand accent */
.md-header .md-header__button:hover,
.md-header .md-header__button:focus {
  color: var(--tm-accent) !important;
}
/* Language switcher dropdown links */
.md-select__link:hover,
.md-select__link:focus {
  color: var(--tm-accent) !important;
}
.md-select__link[aria-current="true"] {
  color: var(--tm-accent) !important;
}

/* ========== Header height & logo sizing (TM) ========== */

/* Tunables (mobile first) */
:root {
  --tm-header-height-sm: 56px;   /* mobile & small */
  --tm-header-height-lg: 64px;   /* ≥768px */
  --tm-logo-height-sm: 28px;
  --tm-logo-height-lg: 32px;

  /* Optional: vertical padding inside header row */
  --tm-header-pad-block-sm: 8px;
  --tm-header-pad-block-lg: 10px;
}

/* Respect iPhone notch/safe-area without breaking desktops */
.md-header {
  min-height: var(--tm-header-height-sm);
  padding-top: calc(env(safe-area-inset-top, 0px));
}

/* Keep the inner flex row at least the target height */
.md-header__inner {
  min-height: var(--tm-header-height-sm);
  align-items: center; /* vertical centering of logo/tabs/buttons */
  padding-block: var(--tm-header-pad-block-sm);
}

/* Scale SVG/IMG logos predictably and avoid overflow */
.md-logo svg,
.md-logo img {
  display: block;
  height: var(--tm-logo-height-sm);
  width: auto;
  max-height: calc(var(--tm-header-height-sm) - 2 * var(--tm-header-pad-block-sm));
}

/* Guarantee ≥44px touch targets across clickable header bits */
.md-header__button,
.md-header__button > * { /* search/theme/lang buttons */
  min-height: 44px;
}

.md-tabs__link {          /* top tabs (if enabled) */
  min-height: 44px;
  line-height: 1.2;      /* prevent tall lines from inflating height */
  padding-block: 10px;   /* contributes to min-height; tweak as needed */
}

/* Larger breakpoints */
@media (min-width: 768px) {
  .md-header {
    min-height: var(--tm-header-height-lg);
  }
  .md-header__inner {
    min-height: var(--tm-header-height-lg);
    padding-block: var(--tm-header-pad-block-lg);
  }
  .md-logo svg,
  .md-logo img {
    height: var(--tm-logo-height-lg);
    max-height: calc(var(--tm-header-height-lg) - 2 * var(--tm-header-pad-block-lg));
  }
}

/* Optional: subtle elevation only after scroll (keeps things calm at top) */
.md-header[data-md-state="shadow"] {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Motion-sensitive users: reduce animated shifts */
@media (prefers-reduced-motion: reduce) {
  .md-header,
  .md-header__inner {
    transition: none !important;
  }
}

/* Slate (dark) mode inherits colors elsewhere; sizing is neutral here. */
/* Keep header height rules color-agnostic to avoid fighting palette tokens. */

/* ========== Tabs alignment & baseline (TM) ========== */

/* Tunables */
:root {
  /* Tabs row height and vertical rhythm */
  --tm-tabs-height-sm: 44px;   /* matches touch target min */
  --tm-tabs-height-lg: 48px;   /* roomier on desktop */
  --tm-tabs-pad-inline: 12px;  /* left/right padding per tab */
  --tm-tabs-font-size: 0.95rem;
  --tm-tabs-line-height: 1.2;

  /* Optional: thin divider under tabs for structure */
  --tm-tabs-underline: 1px solid color-mix(in oklab, var(--md-default-fg-color), transparent 85%);
}

/* Remove default spacing so tabs “kiss” the header bottom edge */
.md-tabs {
  margin-top: 0;                 /* collapse gap below header */
  border-top: none;              /* Material sometimes draws a line—hide it */
}

/* Tabs bar height (mobile first) */
.md-tabs__list {
  min-height: var(--tm-tabs-height-sm);
  align-items: center;           /* vertical centering of links */
  gap: 0;                        /* avoid extra inter-tab gaps */
  padding: 0;                    /* we manage spacing per-link */
  box-sizing: border-box;
  border-bottom: var(--tm-tabs-underline);
  overflow: auto hidden;         /* horizontal scroll if many tabs */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Individual tab links: baseline + hit area */
.md-tabs__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tabs-height-sm);
  padding-inline: var(--tm-tabs-pad-inline);
  font-size: var(--tm-tabs-font-size);
  line-height: var(--tm-tabs-line-height);
  white-space: nowrap;           /* keep labels on one line */
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Active tab emphasis stays Material-native; just keep height stable */
.md-tabs__link[aria-current],
.md-tabs__link--active {
  font-weight: 600;
}

/* Desktop refinement */
@media (min-width: 768px) {
  .md-tabs__list {
    min-height: var(--tm-tabs-height-lg);
  }
  .md-tabs__link {
    min-height: var(--tm-tabs-height-lg);
  }
}

/* Dark mode parity: keep underline subtle but visible */
html[data-md-color-scheme="slate"] .md-tabs__list {
  border-bottom: 1px solid color-mix(in oklab, var(--md-default-fg-color), transparent 80%);
}

/* Focus visibility without height jumps */
.md-tabs__link:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* Optional: slightly tighter text metrics for long menus */
@supports (font-feature-settings: "tnum") {
  .md-tabs__link {
    font-feature-settings: "kern", "liga";
  }
}
/* ========== Fine-tune tab baseline alignment ========== */

/* Nudge tabs up a couple of pixels without shrinking hit area */
.md-tabs__link {
  display: inline-flex;
  align-items: center;
  padding-block: 8px 10px;   /* top, bottom — adjust these */
}

/* Optional: desktop only */
@media (min-width: 768px) {
  .md-tabs__link {
    padding-block: 10px 12px; /* slightly less bottom padding */
  }
}