/* ── Prevent horizontal scroll ── */
html { overflow-x: clip; }

/* ── Light mode base ── */
body {
  background-color: #f8fafc;
  background-image: radial-gradient(rgba(203,213,225,0.35) 2px, transparent 1px);
  background-size: 32px 32px;
  color: #0f172a;
}

.brutal-border { border: 3px solid #0f172a; }

.btn-brutal { transition: all 0.15s ease; }
.btn-brutal:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px 0px #0f172a; }
.btn-brutal:active { transform: translate(2px, 2px);   box-shadow: 0px 0px 0px 0px #0f172a; }

.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 10px 10px 0px 0px #0f172a; }

.highlight-text {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.highlight-text::after {
  content: '';
  position: absolute;
  left: -2%;
  bottom: 4px;
  width: 104%;
  height: 40%;
  background-color: #facc15;
  z-index: -1;
  transform: rotate(-1deg);
  border-radius: 4px;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 25s linear infinite; }

/* Accordion (FAQ page) */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] summary .caret-icon { transform: rotate(180deg); }
.caret-icon { transition: transform 0.3s ease; }

/* ── Blog article content ── */
.blog-content {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #334155;
  font-weight: 500;
}
.blog-content p {
  margin-bottom: 1.5rem;
}
.blog-content h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.2;
  color: #0f172a;
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
}
.blog-content h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #0f172a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.blog-content a {
  color: #3b82f6;
  font-weight: 700;
  text-decoration: none;
}
.blog-content a:hover {
  text-decoration: underline;
}
.blog-content strong {
  color: #0f172a;
  font-weight: 700;
}
.blog-content em {
  font-style: italic;
}
.blog-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}
.blog-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}
.blog-content li {
  margin-bottom: 0.75rem;
}
.blog-content blockquote {
  border-left: 4px solid #14b8a6;
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: #64748b;
  font-style: italic;
}
.blog-content img {
  border: 3px solid #0f172a;
  border-radius: 1rem;
  box-shadow: 4px 4px 0px 0px #0f172a;
  margin: 2rem 0;
}
.blog-content hr {
  border: none;
  border-top: 3px solid #0f172a;
  margin: 3rem 0;
}

/* ── Title highlight (front matter driven) ── */
.title-highlight {
  background: linear-gradient(180deg, transparent 55%, rgba(251, 191, 36, 0.4) 55%);
  padding: 0 4px;
  margin: 0 -4px;
}
@media (prefers-color-scheme: dark) {
  .title-highlight {
    background: linear-gradient(180deg, transparent 55%, rgba(251, 191, 36, 0.3) 55%);
  }
}

/* ── Pull-quote highlight ── */
.pull-highlight {
  background: linear-gradient(180deg, transparent 60%, rgba(251, 191, 36, 0.35) 60%);
  padding: 0 2px;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .pull-highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(251, 191, 36, 0.25) 60%);
  }
}

/* ── Blog category badges ── */
.blog-category-badge[data-category="tutorials"]   { background-color: #f472b6; color: #fff; }
.blog-category-badge[data-category="parenting"]    { background-color: #fb7185; color: #fff; }
.blog-category-badge[data-category="philosophy"]   { background-color: #facc15; color: #0f172a; }
.blog-category-badge[data-category="stem"]         { background-color: #2dd4bf; color: #fff; }
.blog-category-badge[data-category="getting-started"] { background-color: #60a5fa; color: #fff; }
.blog-category-badge[data-category="activities"]   { background-color: #a78bfa; color: #fff; }
/* Fallback for unknown categories */
.blog-category-badge:not([data-category])          { background-color: #e2e8f0; color: #0f172a; }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0f172a;
    background-image: radial-gradient(rgba(30,41,59,0.3) 2px, transparent 1px);
    color: #f8fafc;
  }

  /* Nav */
  .dm-nav {
    background-color: rgba(15,23,42,0.95) !important;
    border-color: #334155 !important;
  }
  .dm-nav-brand { color: #f8fafc !important; }
  .dm-nav-link  { color: #cbd5e1 !important; }

  /* Brutal borders — keep dark but soften slightly for dark bg */
  .brutal-border { border-color: #334155; }
  .shadow-hard    { box-shadow: 4px 4px 0px 0px #334155; }
  .shadow-hard-lg { box-shadow: 8px 8px 0px 0px #334155; }
  .btn-brutal:hover { box-shadow: 6px 6px 0px 0px #334155; }
  .card-hover:hover { box-shadow: 10px 10px 0px 0px #334155; }

  /* White cards → dark cards */
  .dm-card  { background-color: #1e293b !important; }
  .dm-text  { color: #f8fafc !important; }
  .dm-muted { color: #94a3b8 !important; }

  /* Hero subtitle box */
  .dm-hero-subtitle { background-color: rgba(30,41,59,0.9) !important; color: #e2e8f0 !important; }

  /* Age badge + filter pills + tag pills */
  .dm-badge { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
  .dm-badge * { color: #e2e8f0 !important; }

  /* Quick Tip card */
  .dm-tip-card { background-color: #1e293b !important; }
  .dm-tip-card .text-brand-dark { color: #f8fafc !important; }
  .dm-tip-card .text-brand-dark\/80 { color: #cbd5e1 !important; }

  /* Cream sections */
  .dm-cream { background-color: #0f172a !important; }
  .dm-cream-border { border-color: #334155 !important; }

  /* Testimonials */
  .dm-testimonial-bg { background-color: #1e293b !important; }

  /* Author section */
  .dm-author-bg { background-color: #1e293b !important; }

  /* Final CTA */
  .dm-cta { background-color: #1e293b !important; }

  /* CTA shortcode — tone down the yellow blast */
  .dm-cta-shortcode.bg-brand-yellow { background-color: rgba(251, 191, 36, 0.15) !important; }
  .dm-cta-shortcode.bg-brand-teal { background-color: rgba(45, 212, 191, 0.15) !important; }
  .dm-cta-shortcode.bg-brand-pink { background-color: rgba(251, 113, 133, 0.15) !important; }
  .dm-cta-shortcode.bg-brand-dark { background-color: rgba(30, 41, 59, 0.8) !important; }
  .dm-cta-shortcode .text-brand-dark { color: #f8fafc !important; }
  .dm-cta-shortcode .text-brand-dark\/70 { color: #94a3b8 !important; }

  /* CTA button — dark bg with light text in dark mode */
  .dm-cta-btn { background-color: #0f172a !important; color: #f8fafc !important; border-color: #475569 !important; }
  .dm-cta-btn * { color: #f8fafc !important; }
  .dm-cta-btn span.bg-brand-dark { background-color: #f8fafc !important; }
  .dm-cta-btn span.bg-brand-dark * { color: #0f172a !important; }

  /* Footer */
  .dm-footer { background-color: #020617 !important; }

  /* Product cards */
  .dm-product-card { background-color: #1e293b !important; }
  .dm-price-muted  { color: #64748b !important; }

  /* Outline button dark mode */
  .dm-outline-btn {
    border-color: #f8fafc !important;
    color: #f8fafc !important;
  }
  .dm-outline-btn:hover {
    background-color: rgba(248,250,252,0.1) !important;
  }

  /* Pricing card inside bundle */
  .dm-pricing-card { background-color: #1e293b !important; }

  /* Blog content */
  .blog-content { color: #94a3b8; }
  .blog-content h2,
  .blog-content h3,
  .blog-content strong { color: #f8fafc; }
  .blog-content a { color: #60a5fa; }
  .blog-content blockquote { color: #64748b; border-color: #14b8a6; }
  .blog-content img { border-color: #334155; box-shadow: 4px 4px 0px 0px #334155; }
  .blog-content hr { border-color: #334155; }

  /* FAQ answer area */
  .dm-cream-answer { background-color: rgba(30,41,59,0.5) !important; }
  .dm-answer-text { color: #94a3b8 !important; }
}