/* ==========================================================================
   NDG Theme — project-specific styles with no components.css equivalent
   ========================================================================== */

/* -- Self-hosted Inter variable font (wght 300–800) -- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Self-hosted JetBrains Mono -- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* -- Alpine.js x-cloak -- */
[x-cloak] { display: none !important; }

/* Mobile-only utility — matches components.css 720px nav breakpoint */
@media (min-width: 961px) { .mobile-only { display: none !important; } }

/* -- Dark mode color-scheme -- */
[data-theme="dark"] { color-scheme: dark; }

/* Badge on dark surfaces (CTA band eyebrow) */
.badge-on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-brand-shimmer);
}


/* =====================================================================
   Site header — page-width constraint on inner content
   ===================================================================== */
.site-header-inner {
  max-width: var(--max-w-7xl);
  margin: 0 auto;
}


/* =====================================================================
   Site footer — project-specific additions
   ===================================================================== */
.footer-social-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.footer-social {
  color: var(--text-muted);
  font-size: var(--fs-lg);
  transition: color var(--dur-fast) var(--ease-std);
}
.footer-social:hover { color: var(--text-link-on-light); }



/* =====================================================================
   Code block — project-specific terminal_block pattern
   ===================================================================== */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border-code);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  font-family: var(--font-mono);
}
.code-block-header {
  background: var(--bg-code-header);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-code);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.code-block-body {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-code);
}
.code-block-body .prompt { color: var(--color-brand-shimmer); }
.code-block-body .comment { color: var(--text-subtle); }
.code-block-body .output { color: var(--text-muted); }


/* =====================================================================
   Pricing accordion — project-specific accordion for /pricing
   ===================================================================== */
.pricing-accordion {
  padding: var(--space-5) var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sharp);
  margin-bottom: var(--space-2);
}
.pricing-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.pricing-accordion summary::-webkit-details-marker { display: none; }
.pricing-accordion summary::marker { display: none; }
.pricing-accordion summary .pricing-accordion-title {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-std);
}
.pricing-accordion summary:hover .pricing-accordion-title {
  color: var(--text-link-on-light);
}
.pricing-accordion summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-link-on-light);
  line-height: 1;
  flex-shrink: 0;
}
.pricing-accordion[open] summary::after { content: "\2212"; }


/* =====================================================================
   Generic accordion card — native <details> plumbing
   ===================================================================== */
.accordion-card > summary {
  list-style: none;
  cursor: pointer;
}
.accordion-card > summary::-webkit-details-marker { display: none; }
.accordion-card > summary::marker { display: none; }
.accordion-chevron {
  transition: transform var(--dur-normal) var(--ease-std);
}
.accordion-card[open] > summary .accordion-chevron {
  transform: rotate(180deg);
}


/* =====================================================================
   Prose content — styles bare HTML in API-sourced content blocks
   ===================================================================== */
/* Cap the reading measure. The column it sits in is sized for outlines and
   card grids, which are wider than running text wants to be.
   On the text itself, not the container: this holds API-sourced HTML, and
   capping the container squeezed its tables, images and embeds too. Any
   descendant, not just direct children — sanitized course HTML wraps prose in
   its own <div>s, which a child combinator skipped. */
.prose-content :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
  max-width: 68ch;
}
/* ...but released inside anything that needs the full column. */
.prose-content :where(table, figure, pre) :where(p, ul, ol, dl, blockquote) {
  max-width: none;
}
.prose-content h2,
.prose-content h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin: var(--space-8) 0 var(--space-3);
  color: var(--text-primary);
}
.prose-content h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-6) 0 var(--space-3);
  color: var(--text-primary);
}
.prose-content hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}
.prose-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-raised);
  padding: 1px 5px;
  border-radius: 4px;
}
.prose-content pre {
  overflow-x: auto;
  background: var(--surface-raised);
  padding: var(--space-3);
  border-radius: var(--radius-sharp);
  margin: var(--space-3) 0;
}
.prose-content p { margin: var(--space-3) 0; }
.prose-content ul,
.prose-content ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-6);
  list-style-type: disc;
}
.prose-content ol { list-style-type: decimal; }
.prose-content li { margin: var(--space-1) 0; }
.prose-content a {
  color: var(--text-link-on-light);
  text-decoration: underline;
}
.prose-content a:hover { opacity: 0.8; }
.prose-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sharp);
  margin: var(--space-4) 0;
}
.prose-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: var(--space-4) 0;
}
.prose-content th,
.prose-content td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  text-align: left;
}
.prose-content th {
  background: var(--surface-raised);
  font-weight: var(--fw-semibold);
}
.prose-content iframe {
  max-width: 100%;
  border-radius: var(--radius-sharp);
  margin: var(--space-4) 0;
}

/* -- Announcement bar (all pages; markup in layout/base.html) -- */
.announce-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 40px 8px 16px;
  background: var(--action-primary); color: #fff;
  font-size: var(--fs-sm, 14px);
  position: relative;
}
.announce-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announce-bar .announce-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 8px;
}

/* -- Go top (all pages; markup in layout/base.html) -- */
.go-top-btn {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 890;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--action-primary); color: #fff;
  border: 0; border-radius: var(--radius-full, 999px);
  cursor: pointer; box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
}
.go-top-btn:hover { background: var(--action-primary-hover, #004a80); }
.go-top-btn[hidden] { display: none; }