/* constrain toolbar logo */
#projectlogo img {
  max-height: 50px;
  width: auto;
}

/* breathing room between the title area and the menu bar */
#titlearea {
  padding-bottom: 4px;
  padding-left: 4px;
}

/* hide the panel-sync button (the ↔ icon next to the nav tree) */
#nav-sync {
  display: none;
}

/* constrain standalone @image html outside of tables */
div.contents > div.image img,
div.textblock > div.image img {
  max-width: 100%;
  height: auto;
}

/* constrain @dot / @dotfile figures */
div.dotgraph {
  max-width: 100%;
  overflow-x: auto;
}
div.dotgraph img,
div.dotgraph svg {
  max-width: 100%;
  height: auto;
}

table.sponsor-table {
  border: 0;
  border-spacing: 20px;
}

table.sponsor-table td {
  border: 0;
  vertical-align: middle;
  text-align: center;
}

table.sponsor-table .image img {
  max-width: 160px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

body, div, p, td, th, li {
  font-size: 15px;  /* default is ~12px, adjust to taste */
}

code, pre, .fragment {
  font-size: 14px;  /* code blocks separately */
}

/* Auto-adapt images to dark mode: invert flips white backgrounds to dark;
   hue-rotate(180deg) cancels the colour distortion inversion introduces,
   so diagrams and screenshots look approximately natural in dark mode.
   dot/dotfile graphs use DOT_IMAGE_FORMAT=svg and are embedded as <object>
   tags (not <img>), so the filter targets div.dotgraph directly. */
html.dark-mode img {
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode div.dotgraph {
  filter: invert(1) hue-rotate(180deg);
}

/* Dark/light mode toggle hover effect */
dark-mode-toggle {
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

dark-mode-toggle:hover {
  background-color: rgba(128, 128, 128, 0.18);
}

/* Auto-number @par blocks per section.
   dl.section.user is Doxygen's element for @par specifically
   (@note / @warning / @attention use .note / .warning / .attention).
   The counter resets at every h1/h2 boundary, so each @section
   gets its own independent 1, 2, 3, ... sequence. */
h1, h2 {
  counter-reset: par-counter;
}

/* @par title size */
dl.section.user > dt {
  font-size: 17px;
}

dl.section.user > dt::before {
  counter-increment: par-counter;
  content: counter(par-counter) ". ";
}