/*
 * Custom CSS for the NXP Robotics SDK documentation (Furo theme).
 *
 * NXP branding: Poppins typography, NXP cyan (#0EAFE0) brand accent,
 * light/dark variants. Theme colours/fonts are set via html_theme_options in
 * conf.py; this file covers the remaining tweaks and loads the Poppins webfont
 * so the font renders even when it is not installed locally.
 */

/* ---- Poppins webfont ---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

body {
  font-size: 0.75rem;
  line-height: 1.45;
}

body .sd-row {
  --sd-gutter-y: 1.5rem;
}

/* ---- Sidebar navigation ------------------------------------------------- */
body .toctree-l1 a {
  font-weight: 500 !important;
  font-size: 0.7rem;
  padding: 4px;
}
body .toctree-l1 a.current {
  color: #0eafe0 !important;
  background-color: #dff4fa !important;
  border-right: 2px #0eafe0 solid;
}
body .toctree-l2 a {
  font-weight: normal !important;
}

/* ---- Sidebar brand / logo ---------------------------------------------- */
body div.sidebar-container span.sidebar-brand-text {
  margin-top: -10px;
  font-weight: 500;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
}
body div.sidebar-container div.sidebar-logo-container {
  margin-top: 5px;
}
body div.sidebar-container div.sidebar-logo-container img.sidebar-logo {
  width: 125px;
}

/* ---- Dark-mode sidebar current item ------------------------------------- */
body[data-theme="dark"] .toctree-l1 a.current {
  color: #e2e2e2 !important;
  background-color: #292929 !important;
  font-weight: 500 !important;
}

/* ---- Align Markdown tables to the left ---------------------------------- */
table.docutils {
  margin-left: 0;
  margin-right: auto;
}

/* ---- Constrain oversized inline <img> figures --------------------------- */
article img,
.content img {
  max-width: 100%;
  height: auto;
}

/* ---- Interactive pinout / board-overview SVG cards ---------------------- */
/* Figures authored as <figure class="pinout-figure" data-pinout>; the inlined
 * SVG (see _static/pinout-hover.js) exposes per-pin <g data-pin> and per-callout
 * <g data-callout> groups that highlight on hover and copy the net/pad name on
 * click. Highlight styling is driven by the `.hl` class the script toggles. */
figure.pinout-figure {
  margin: 1rem 0;
  text-align: center;
}
figure.pinout-figure svg.pinout-svg {
  display: inline-block;
  height: auto;
}
.pinout-svg g[data-pin],
.pinout-svg g[data-callout] {
  cursor: pointer;
}
.pinout-svg g[data-pin] rect,
.pinout-svg g[data-callout] rect {
  transition: stroke-width 0.1s;
}
.pinout-svg g[data-pin].hl rect,
.pinout-svg g[data-callout].hl rect {
  stroke: #ffd33d;
  stroke-width: 3px;
}
.pinout-svg g[data-callout].hl line:first-of-type {
  stroke-width: 5px;
}
/* Keyboard focus outline for clickable board callouts (those with a
 * data-href, which navigate to the matching connector card). */
.pinout-svg g.callout-link:focus {
  outline: none;
}
.pinout-svg g.callout-link:focus rect {
  stroke: #0eafe0;
  stroke-width: 3px;
}

/* ---- "Download full documentation (PDF)" sidebar button --------------- */
/* Rendered by _templates/sidebar/download-pdf.html, which is wired into
 * html_sidebars so this appears at the BOTTOM of the left sidebar (right
 * below the navigation tree) on every page. The target file is generated at
 * /nxp-robotics-sdk.pdf by scripts/build_site_pdf.py at the end of `make html`. */
.sidebar-download {
  padding: 0 1rem;
  margin: 0.75rem 0 0.5rem;
}
.sidebar-download-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #0EAFE0;
  border-radius: 6px;
  background: #ffffff;
  color: #003564;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.sidebar-download-link:hover,
.sidebar-download-link:focus {
  background: #0EAFE0;
  color: #ffffff;
}
.sidebar-download-link i {
  font-size: 0.9rem;
  flex-shrink: 0;
}
body[data-theme="dark"] .sidebar-download-link {
  background: #121212;
  color: #e2e2e2;
}
body[data-theme="dark"] .sidebar-download-link:hover,
body[data-theme="dark"] .sidebar-download-link:focus {
  background: #0EAFE0;
  color: #ffffff;
}