/* ===== ICOA Starter Guide — Terminal Green Theme ============================
   Palette (2 colors only):
     - Dark background (inherits from ICOA bg gradient)
     - White/near-white prose
     - Neon green #00FF88 for ALL accents (headings, links, borders, code, tags)
   Aesthetic: hacker terminal. Matches ICOA's CLI-native positioning.
   =========================================================================== */

:root {
  --starter-green: #00FF88;
  --starter-green-dim: #00CC6A;
  --starter-green-glow: rgba(0, 255, 136, 0.45);
  --starter-green-faint: rgba(0, 255, 136, 0.08);
  --starter-green-line: rgba(0, 255, 136, 0.25);
  --starter-text: #F0F5FF;
  --starter-text-bright: #FFFFFF;
  --starter-bg-code: #020608;
  --starter-bg-panel: rgba(0, 10, 6, 0.72);
}

/* Keep body's ICOA dark gradient — only override asciidoctor inner wrappers */
html { background: var(--ico-bg-darkest); }

body.article {
  background: var(--ico-gradient-bg) !important;
  color: var(--starter-text) !important;
  font-family: var(--font-body) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* Force every asciidoctor inner wrapper transparent */
body.article #header,
body.article #content,
body.article .sect1,
body.article .sect2,
body.article .sect3,
body.article .sect4,
body.article .sectionbody,
body.article .paragraph,
body.article .ulist,
body.article .olist,
body.article .dlist,
body.article .listingblock,
body.article .imageblock,
body.article .exampleblock,
body.article .sidebarblock,
body.article .quoteblock,
body.article .admonitionblock,
body.article .openblock,
body.article .literalblock,
body.article main.starter-shell,
body.article .starter-shell > div,
body.article #content > div,
body.article #content div,
body.article #content li,
body.article #content ul,
body.article #content ol {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

/* ---- Layout ---- */
.starter-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 2rem 4rem;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* ---- LEFT STICKY TOC ---- */
body.article #toc.toc2 {
  position: sticky;
  top: 100px;
  flex: 0 0 280px;
  max-width: 280px;
  background: var(--starter-bg-panel) !important;
  border: 1px solid var(--starter-green-line);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.08);
  backdrop-filter: blur(10px);
  color: var(--starter-text);
  font-family: var(--font-mono);
}

#toctitle {
  color: var(--starter-green) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid var(--starter-green-line);
  padding-bottom: 0.75rem;
  text-shadow: 0 0 10px var(--starter-green-glow);
}
#toctitle::before { content: "> "; color: var(--starter-green); opacity: 0.7; }

#toc ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
#toc ul ul {
  padding-left: 0.9rem !important;
  border-left: 1px solid var(--starter-green-line);
  margin: 0.25rem 0 0.5rem 0.5rem !important;
}
#toc li { margin: 0.15rem 0 !important; line-height: 1.45 !important; }

#toc a {
  color: var(--starter-text) !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  padding: 0.22rem 0.45rem;
  border-radius: 3px;
  display: block;
  transition: all 0.15s ease;
  font-family: var(--font-mono);
}
#toc a:hover {
  color: var(--starter-green) !important;
  background: var(--starter-green-faint);
  text-shadow: 0 0 8px var(--starter-green-glow);
}
#toc > ul > li > a {
  color: var(--starter-green) !important;
  font-weight: 700;
  font-size: 0.88rem !important;
  text-shadow: 0 0 8px var(--starter-green-glow);
}

/* ---- MAIN CONTENT ---- */
#content {
  flex: 1;
  min-width: 0;
  padding: 0 0.5rem;
}
#header > h1 { display: none; }

/* ---- TYPOGRAPHY ---- */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  margin: 2.5rem 0 1rem !important;
  scroll-margin-top: 100px;
  letter-spacing: 0.01em;
  color: var(--starter-green) !important;
}

/* Chapter title: big, neon green, glowing */
#content h2 {
  font-size: 2.1rem !important;
  border-bottom: 2px solid var(--starter-green-line) !important;
  padding-bottom: 0.75rem !important;
  margin-top: 3.5rem !important;
  text-shadow: 0 0 25px var(--starter-green-glow);
}

/* Sub-section */
#content h3 {
  font-size: 1.5rem !important;
  text-shadow: 0 0 15px var(--starter-green-glow);
}
#content h3::before { content: "# "; opacity: 0.5; font-family: var(--font-mono); }

/* Sub-sub: dimmer green */
#content h4 {
  font-size: 1.15rem !important;
  color: var(--starter-green-dim) !important;
}
#content h4::before { content: "## "; opacity: 0.5; font-family: var(--font-mono); }

/* Author / discrete tags: muted white */
#content h5 {
  font-size: 0.95rem !important;
  color: rgba(240, 245, 255, 0.5) !important;
  font-style: italic;
  font-weight: 400 !important;
  margin-top: -0.5rem !important;
  font-family: var(--font-mono) !important;
}

/* ---- BODY PROSE: clean near-white, high contrast ---- */
#content p,
#content li,
#content dd,
#content td {
  color: var(--starter-text) !important;
  line-height: 1.8 !important;
  font-size: 1.02rem;
}

#content strong, #content b {
  color: var(--starter-text-bright) !important;
  font-weight: 700;
}

#content em, #content i {
  color: var(--starter-green) !important;
  font-style: italic;
}

/* ---- LINKS (all green) ---- */
#content a,
#content a:visited {
  color: var(--starter-green) !important;
  text-decoration: none;
  border-bottom: 1px dashed var(--starter-green-line);
  transition: all 0.15s ease;
}
#content a:hover {
  color: var(--starter-text-bright) !important;
  border-bottom-color: var(--starter-green);
  text-shadow: 0 0 10px var(--starter-green-glow);
  background: var(--starter-green-faint);
}

#content h2 > a, #content h3 > a, #content h4 > a, #content h5 > a {
  color: inherit !important;
  border-bottom: none !important;
  text-shadow: inherit !important;
}
#content .anchor { display: none !important; }

/* ---- CODE BLOCKS: terminal black + green left stripe (single border) ---- */
#content .listingblock > .content,
#content .literalblock > .content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#content pre,
#content .listingblock pre,
#content .literalblock pre {
  background: var(--starter-bg-code) !important;
  border: 1px solid var(--starter-green-line) !important;
  border-left: 3px solid var(--starter-green) !important;
  border-radius: 6px;
  padding: 1rem 1.25rem !important;
  margin: 0 !important;
  overflow-x: auto;
  font-family: var(--font-mono) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--starter-text) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 255, 136, 0.06);
}

#content p code,
#content li code,
#content td code,
#content h2 code, #content h3 code, #content h4 code, #content h5 code {
  background: var(--starter-green-faint) !important;
  color: var(--starter-green) !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: 3px;
  font-family: var(--font-mono) !important;
  font-size: 0.9em !important;
  border: 1px solid var(--starter-green-line);
}

#content pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
}

.listingblock .content .highlight { background: transparent !important; }

/* ---- ADMONITION / BLOCKQUOTE ---- */
#content .admonitionblock {
  background: linear-gradient(90deg, var(--starter-green-faint), transparent 70%) !important;
  border-left: 3px solid var(--starter-green) !important;
  border-radius: 4px;
  padding: 1rem 1.25rem !important;
  margin: 1.75rem 0;
}
#content .admonitionblock > table { border: none !important; background: transparent !important; }
#content .admonitionblock .icon { color: var(--starter-green) !important; border: none !important; }
#content .admonitionblock .icon i { color: var(--starter-green) !important; text-shadow: 0 0 10px var(--starter-green-glow); }
#content .admonitionblock td.content { border-left: none !important; padding-left: 1rem !important; }
#content .admonitionblock td.content p { color: var(--starter-text) !important; }
#content .admonitionblock .title { color: var(--starter-green) !important; font-weight: 700; }

#content blockquote, #content .quoteblock {
  border-left: 3px solid var(--starter-green);
  background: var(--starter-green-faint) !important;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--starter-text) !important;
  font-style: italic;
  border-radius: 0 4px 4px 0;
}
#content blockquote p, #content .quoteblock p { color: var(--starter-text) !important; }

/* ---- TABLES ---- */
#content table,
#content table.tableblock,
#content table.frame-all {
  background: var(--starter-bg-panel) !important;
  border-collapse: collapse;
  margin: 1.5rem 0;
  width: 100% !important;
  border: 1px solid var(--starter-green-line) !important;
  border-radius: 4px;
  overflow: hidden;
  color: var(--starter-text) !important;
}
#content table th,
#content table thead th {
  background: var(--starter-green-faint) !important;
  color: var(--starter-green) !important;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--starter-green-line) !important;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}
#content table td,
#content table.tableblock td {
  padding: 0.6rem 1rem !important;
  border: 1px solid var(--starter-green-line) !important;
  color: var(--starter-text) !important;
  background: transparent !important;
}
#content table tr:nth-child(even) td { background: rgba(0, 255, 136, 0.03) !important; }

/* ---- LISTS ---- */
#content ul, #content ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0 1rem;
}
#content ul li, #content ol li { margin: 0.35rem 0; }
#content ul li::marker { color: var(--starter-green); }
#content ol li::marker { color: var(--starter-green); font-weight: 700; font-family: var(--font-mono); }

/* ---- IMAGES ---- */
#content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--starter-green-line);
  display: block;
  margin: 1.75rem auto;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 255, 136, 0.08);
}

/* ---- HR + MISC ---- */
#content hr {
  border: none;
  border-top: 1px dashed var(--starter-green-line);
  margin: 2.5rem 0;
}

#content .title {
  color: var(--starter-green) !important;
  font-family: var(--font-mono);
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

#content kbd {
  background: var(--starter-bg-code) !important;
  border: 1px solid var(--starter-green-line);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  color: var(--starter-green) !important;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

#footer { display: none !important; }

/* ---- CUSTOM STARTER FOOTER ---- */
.starter-footer {
  background: var(--ico-bg-darkest);
  border-top: 1px solid var(--starter-green-line);
  padding: 3rem 2rem;
  margin-top: 4rem;
  position: relative;
  z-index: 2;
}
.starter-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  color: var(--starter-text);
  font-size: 0.92rem;
  line-height: 1.75;
}
.starter-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--starter-green);
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px var(--starter-green-glow);
}
.starter-footer h4::before { content: "> "; opacity: 0.7; }
.starter-footer p { margin: 0.5rem 0; color: var(--starter-text); }
.starter-footer strong { color: var(--starter-text-bright); }
.starter-footer em { color: var(--starter-green); }
.starter-footer a {
  color: var(--starter-green);
  text-decoration: none;
  border-bottom: 1px dashed var(--starter-green-line);
}
.starter-footer a:hover {
  color: var(--starter-text-bright);
  border-bottom-color: var(--starter-green);
  text-shadow: 0 0 8px var(--starter-green-glow);
}
.starter-footer .license-badge {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--starter-green-line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--starter-green);
  background: var(--starter-green-faint);
  margin: 0.25rem 0.5rem 0.25rem 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 900px) {
  .starter-shell {
    flex-direction: column;
    padding: 40px 1rem 2rem;
    gap: 1.5rem;
  }
  body.article #toc.toc2 {
    position: relative; top: 0; flex: none; width: 100%; max-width: none; max-height: 320px;
  }
  #content { padding: 0; }
  #content h2 { font-size: 1.6rem !important; }
  #content h3 { font-size: 1.25rem !important; }
  #content p, #content li { font-size: 0.98rem; }
}

body.toc2.toc-left #header,
body.toc2.toc-left #content,
body.toc2.toc-left #footer { margin-left: 0 !important; }

/* ---- Hero section on this page: green accent ---- */
body.article .hero-sub .section-tag {
  color: var(--starter-green) !important;
  text-shadow: 0 0 12px var(--starter-green-glow);
}
body.article .hero-sub .section-title {
  color: var(--starter-text-bright) !important;
  text-shadow: 0 0 20px var(--starter-green-glow);
}

/* ---- Rouge syntax (monokai → green-accent palette) ---- */
pre.rouge, pre.highlight, .listingblock pre { color: var(--starter-text); }
pre.rouge .k, pre.rouge .kd, pre.rouge .kn, pre.rouge .kp, pre.rouge .kr,
pre.rouge .nf, pre.rouge .nb { color: var(--starter-green) !important; font-weight: 600; }
pre.rouge .s, pre.rouge .s1, pre.rouge .s2, pre.rouge .sd { color: #B8FFD8 !important; }
pre.rouge .c, pre.rouge .c1, pre.rouge .cm, pre.rouge .ch { color: rgba(240, 245, 255, 0.35) !important; font-style: italic; }
pre.rouge .n, pre.rouge .na { color: var(--starter-text) !important; }
pre.rouge .mi, pre.rouge .mf, pre.rouge .m { color: var(--starter-green-dim) !important; }
pre.rouge .o, pre.rouge .p { color: var(--starter-green-dim) !important; }
pre.rouge .nt { color: var(--starter-green) !important; }