/* ============================================================================
   tutorials.css - Styling for the NEPI tutorial pages.

   THIS IS THE ONE PLACE TO MANAGE HOW TUTORIALS LOOK.

   - It lives at the top of tutorials-src/ next to structures.yaml, so you edit the
     tutorials' styling right alongside their content, through the same launcher
     / GitHub-web flow you use for the markdown.
   - On every build, tools/build-tutorials.py copies this file to
     docs/tutorials/tutorials.css and links it into every generated tutorial
     page, LAST - after base.css, components.css and pages.css. Because it loads
     last, any rule you write here wins over the site-wide defaults.
   - The link is cache-busted automatically from this file's contents, so a
     saved change shows up on the next build with no version numbers to bump.

   To restyle tutorials, add or edit rules below and rebuild. To restyle the
   whole site (nav, footer, buttons, colors), edit docs/styles/*.css instead -
   those are shared by every page, not just tutorials.
   ============================================================================ */

/* Page shell: article on the left, sticky table-of-contents sidebar on the
   right. (The two-column widths/sidebar live in the shared components.css;
   these set the backdrop and base spacing.) */
.tut-shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 80px);
  background: #0d1b2e;
}

.tut-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 60px;
  color: rgba(255, 255, 255, 0.87);
}

/* Plain markdown blockquotes (a bare "> ...") render as a soft amber note.
   For the labelled Note / Warning / Danger callouts, see the .callout rules in
   the shared pages.css. */
.tut-content blockquote {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  padding: 12px 16px;
  margin: 20px 32px;
  border-radius: 0 6px 6px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.tut-content blockquote p { margin: 0 0 6px; }
.tut-content blockquote p:last-child { margin: 0; }

/* ----------------------------------------------------------------------------
   Section headings - visual hierarchy (design review, 2026-07)

   The three levels were too alike to tell apart, so they now read as distinct
   separators:
     - Title (H1)      - unchanged, owned by the page heading.
     - Section (## )   - a brand-blue accent bar down the left, no underline.
                         Signals "a new section starts here" at a glance.
     - Sub-header (###) - a small uppercase blue label, clearly one rung below
                         the section rather than a slightly smaller copy of it.
   Scoped under .tut-content so only tutorial pages are affected, and specific
   enough (.tut-content .doc-article) to win over the shared pages.css rules. */

/* Title (H1) - brand-blue rules top and bottom make it read as a page banner. */
.tut-content .doc-article h1 {
  border-top: 2px solid #00AEEF;
  border-bottom: 2px solid #00AEEF;
  padding: 16px 0;
  margin: 4px 0 32px;
}

.tut-content .doc-article h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: #fff;
  margin: 56px 0 16px;
  border-left: 3px solid #00AEEF;
  border-bottom: none;         /* remove the old faint underline */
  padding: 2px 0 2px 16px;
}

.tut-content .doc-article h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #00AEEF;
  line-height: 1.4;
  margin: 34px 0 8px;
}

/* On narrow screens the TOC sidebar is hidden and the article goes full width. */
@media (max-width: 900px) {
  .tut-sidebar { display: none; }
  .tut-content { padding: 0 0 40px; }
}