/* ==========================================================================
   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: 721px) { .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: "−"; }


/* =====================================================================
   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
   ===================================================================== */
.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 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;
}