/* DBshieldX additions on top of the Maxton landing template (blue theme). */
:root {
  --dbx-accent: #22d3ee;
  --dbx-accent-ink: #04121a;
  --dbx-panel: rgba(13, 20, 38, 0.72);
  --dbx-line: rgba(127, 231, 247, 0.18);
  --dbx-muted: #b9c4dc;
}

.btn-dbx {
  background: linear-gradient(90deg, #22d3ee, #38bdf8);
  color: var(--dbx-accent-ink);
  font-weight: 600;
  border: 0;
}
.btn-dbx:hover, .btn-dbx:focus { color: var(--dbx-accent-ink); filter: brightness(1.08); }
.btn-dbx-outline { border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; }
.btn-dbx-outline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.text-dbx { color: var(--dbx-accent) !important; }
.text-muted-dbx { color: var(--dbx-muted) !important; }
.eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dbx-accent); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

.wordmark { font-weight: 700; letter-spacing: -0.01em; }
.wordmark .db { color: var(--dbx-accent); }

/* hero stats */
.hero-stats { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.hero-stats dt { font-weight: 400; font-size: 0.85rem; color: var(--dbx-muted); }
.hero-stats dd { font-size: 2rem; font-weight: 700; margin: 0; }

/* rollout card in the hero */
.rollout-card { background: var(--dbx-panel); border: 1px solid var(--dbx-line); }
.route-row { background: rgba(5, 10, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); }
.pill { font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap; }
.pill-ready { background: #0f3a2a; color: #6ee7b7; }
.pill-block { background: #11314a; color: #7fe7f7; }
.pill-monitor { background: #3a2f0f; color: #fcd34d; }
.pill-illus { background: #11314a; color: #7fe7f7; font-weight: 500; }

/* request path */
.path-step { background: var(--dbx-panel); border: 1px solid rgba(255, 255, 255, 0.1); }
.path-step.is-dbx { border-color: var(--dbx-accent); background: rgba(11, 34, 48, 0.85); }
.path-step .step-no { font-size: 0.8rem; color: var(--dbx-muted); }
.path-step.is-dbx .step-no { color: #7fe7f7; }

/* query illustration */
.query-box { background: rgba(5, 10, 22, 0.7); font-size: 0.9rem; word-break: break-word; }
.query-box.is-new { background: #2a0f12; border: 1px solid #7f1d1d; color: #fecaca; }

/* stats */
.stat-num { font-size: 2.6rem; font-weight: 700; line-height: 1.1; }

/* privacy points */
.point { border-top: 2px solid var(--dbx-accent); }

/* video tile */
.video-tile { aspect-ratio: 16 / 9; max-width: 900px; background: #05070d url("../video/dbshieldx-promo-poster.png") center / cover no-repeat; border: 1px solid var(--dbx-line); text-decoration: none; position: relative; overflow: hidden; }
.video-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(5, 7, 13, 0.85)); }
.video-tile > * { position: relative; z-index: 1; }
.video-tile .play { font-size: 84px; margin-top: auto; }
.video-tile:hover { border-color: var(--dbx-accent); }

/* pricing highlight */
.plan-featured { border-color: var(--dbx-accent) !important; }

/* stack strip */
.stack-strip span { color: var(--dbx-muted); }

/* the template's accordion, made legible on the blue theme */
.accordion-button { font-weight: 600; }

@media (max-width: 575.98px) {
  .hero-stats dd { font-size: 1.45rem; }
  .stat-num { font-size: 2.1rem; }
}

/* readable text links on the dark theme */
main p a, main li a, main td a, .accordion-body a, .footer-strip a { color: #7fe7f7; }
main p a:hover, main li a:hover, main td a:hover, .footer-strip a:hover { color: #c4f6fd; }

/* --- Astro rebuild (Nov 2026): classes that replace inline styles, plus inner-page and blog styles --- */
.route-row-dashed { border-style: dashed; }
.pill-alert { background: #2a0f12; color: #fca5a5; }
.pill-draft { background: #3a2f0f; color: #fcd34d; }
.font-body { font-family: inherit; }
.page-heading { font-size: clamp(2rem, 4vw, 3rem); }
.cta-copy { max-width: 640px; }

/* long-form text: legal pages, blog posts, reports */
.prose { max-width: 860px; }
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p, .prose li { color: #dbe3f3; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.35rem; }
.prose code { color: #7fe7f7; background: rgba(5, 10, 22, 0.6); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; }
.prose pre { background: rgba(5, 10, 22, 0.8); border: 1px solid var(--dbx-line); padding: 1rem; border-radius: 8px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 3px solid var(--dbx-accent); padding-left: 1rem; color: var(--dbx-muted); }
.prose table { width: 100%; margin-bottom: 1rem; }
.prose th, .prose td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem 0.75rem; vertical-align: top; }
.prose a, .post-card a, .tag-list a, .glossary dt a { color: #7fe7f7; }

.post-card { background: var(--dbx-panel); border: 1px solid var(--dbx-line); }
.post-card h2 a, .post-card h3 a { color: #fff; text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: #7fe7f7; }
.tag { display: inline-block; font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: #11314a; color: #7fe7f7; text-decoration: none; }
.tag:hover { color: #c4f6fd; }
.post-meta { font-size: 0.9rem; color: var(--dbx-muted); }
.draft-banner { background: #3a2f0f; color: #fcd34d; border: 1px solid #6b5514; }

.glossary dt { font-size: 1.15rem; margin-top: 2rem; scroll-margin-top: 90px; }
.glossary dd { color: #dbe3f3; line-height: 1.7; margin-left: 0; }
.compare-table td, .compare-table th { vertical-align: top; }


/* the template opens desktop sub-menus on hover only; also open them on click and keyboard focus */
@media (min-width: 1200px) {
  .primary-menu .navbar-nav .dropdown .dropdown-menu.show,
  .primary-menu .navbar-nav .dropdown:focus-within > .dropdown-menu { display: block; }
}

/* the 45-second tour, in a native dialog */
.tour-dialog { width: min(960px, 94vw); padding: 0; border: 1px solid var(--dbx-line); border-radius: 12px; background: #05070d; overflow: visible; }
.tour-dialog::backdrop { background: rgba(2, 4, 10, 0.85); }
.tour-dialog video { display: block; width: 100%; height: auto; border-radius: 12px; }
.tour-close { position: absolute; top: -40px; right: 0; }

/* images and videos in posts (components/Figure.astro, components/Video.astro) */
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.post-figure, .post-video { margin: 2rem 0; }
.post-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--dbx-line); border-radius: 10px; }
.post-video video { display: block; width: 100%; height: auto; border-radius: 10px; background: #05070d; }
.post-figure figcaption, .post-video figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--dbx-muted); }
.yt-frame { border: 1px solid var(--dbx-line); border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.12), #05070d 70%); }
.yt-frame iframe { border: 0; }
.yt-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem; text-align: center; color: #fff; text-decoration: none; }
.yt-facade:hover, .yt-facade:focus { color: #fff; background: rgba(34, 211, 238, 0.06); }
.yt-facade .play { font-size: 4rem; color: var(--dbx-accent); }
.yt-facade .yt-title { font-size: 1.15rem; font-weight: 600; }
.yt-facade .yt-note { font-size: 0.85rem; color: var(--dbx-muted); }