/* Strapdown theme for the Energy Meter App docs. Builds on the tokens in css/style.css.
   Strapdown always loads strapdown.css and bootstrap-responsive.min.css after this file,
   so overrides here use "html body" / "#content" for higher specificity. */

html body {
  padding: 0;
  font-size: inherit;
  line-height: 1.6;
}
html body img { margin: 0; }

html body #content.container {
  width: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 56px 88px;
  overflow-wrap: anywhere; /* long URLs like http://SMA(…).local would widen the page on phones */
}

#content > p,
#content > ul,
#content > ol,
#content > blockquote { max-width: 70ch; }
#content > h3,
#content > h4 { max-width: 40em; }
#content > br,
#content p:has(> br:only-child):not(:has(img)) { display: none; }

#content h2,
#content h3,
#content h4 {
  font-family: var(--display);
  color: var(--fg);
  text-wrap: balance;
}
#content h2 {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.05;
  font-weight: 800;
  font-stretch: 80%;
  margin: 0 0 24px;
}
#content h2:not(:first-child) {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}
#content h3 {
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 750;
  font-stretch: 86%;
  margin: 48px 0 12px;
}
#content h4 {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 650;
  font-stretch: 92%;
  margin: 32px 0 8px;
}

#content p,
#content li { color: var(--fg); }
#content p { margin: 0 0 14px; }
#content ul,
#content ol { margin: 0 0 18px; padding-left: 1.3em; display: grid; gap: 6px; }
#content li > ul,
#content li > ol { margin: 6px 0 0; }
#content li::marker { color: var(--muted); }
#content a { color: var(--link); text-underline-offset: 2px; }
#content strong, #content b { font-weight: 600; }
#content small, #content sup { color: var(--muted); }
#content hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
#content blockquote {
  margin: 20px 0; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}

#content code {
  font: .9em var(--mono);
  background: var(--surface-2);
  padding: 2px 5px;
  border-radius: 5px;
}
#content pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
}
#content pre code { background: none; padding: 0; }
#content .prettyprint,
#content .prettyprint span { color: inherit; }

#content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: .95rem;
}
#content th,
#content td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
#content th { font: 500 .78rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

#content img { max-width: 100%; height: auto; margin: 0; }
#content img.bigimage,
#content img.screen-partial {
  display: block;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#content img.bigimage { max-width: min(550px, 100%); }
#content img.screen-partial { max-width: min(300px, 100%); }
#content .device { --device-w: 260px; margin: 24px 0 32px; }
#content .device-screen > img { margin: 0; border-radius: inherit; }

#content .address {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* FAQ: js/docs.js builds the same <details> markup as the landing page; styles come from .faq in css/style.css */
.doc-faq #content h2 + hr { display: none; }
#content .faq .ans p,
#content .faq .ans li { color: var(--muted); }
#content .faq .ans p { margin: 0; }

@media (max-width: 720px) {
  html body #content.container { padding-block: 40px 64px; }
}