/* P2P site-wide fixes (2026-06-28)
   1) Kill horizontal overflow that caused mobile hamburger tap to register as a zoom/pan.
   2) Center the orange stat strip on mobile (was cramped 2-col, left-aligned). */

/* 1) Horizontal overflow guard — decorative orbs and hidden mega-dropdowns extend past the
   right edge and make the page pan/zoom on phones. Clip it at the root without creating a
   scroll container, and prevent off-canvas elements from widening the document. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
/* Belt-and-suspenders: hidden dropdown panels must not contribute to scroll width */
.dd-panel { max-width: 100vw; }
@media (max-width: 1000px) {
  .glow-orb { max-width: 100vw; }
}

/* 2) Mobile stat strip: single centered column, centered text. Desktop layout unchanged. */
@media (max-width: 640px) {
  .statstrip {
    grid-template-columns: 1fr !important;
    text-align: center;
    justify-items: center;
    gap: 28px !important;
  }
  .statstrip .stat { text-align: center; width: 100%; }
  .statstrip .stat .n { justify-content: center; }
  .statstrip .stat .l { text-align: center; }
}

/* 3) Header nav links must never wrap (e.g. "Log In / Sign Up" was breaking to 3 lines
   on the standalone pages where the host page CSS gave the nav less room). */
header[data-astro-cid-3ef6ksr2] nav a,
header[data-astro-cid-3ef6ksr2] .trigger {
  white-space: nowrap;
}

/* ============================================================
   Liquid-glass FAQ dropdowns v2 (2026-06-28)
   Frosted glass cards + a SLIGHT extra glassmorphism and a subtle
   "bubble pop" on hover / open / tap. Pure CSS — does not touch the
   native <details>/<summary> accordion behaviour. Applies sitewide
   to every <details class="faq-item">.
   ============================================================ */
.faq-list { display:flex; flex-direction:column; gap:16px; padding-bottom:8px; }

/* The glass card */
.faq-item {
  border-bottom:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  backdrop-filter:blur(18px) saturate(165%);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  box-shadow:0 8px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow:hidden;
  will-change:transform;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),
             border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

/* Slight bubble-pop on hover */
.faq-item:hover {
  transform:translateY(-2px) scale(1.006);
  border-color:rgba(228,156,0,0.38);
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  box-shadow:0 14px 44px rgba(0,0,0,0.42), 0 0 0 1px rgba(228,156,0,0.10), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Open state — a touch more lift + glow */
.faq-item[open] {
  transform:translateY(-1px) scale(1.004);
  border-color:rgba(228,156,0,0.48);
  background:linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.055));
  box-shadow:0 16px 52px rgba(0,0,0,0.48), 0 0 22px rgba(228,156,0,0.10), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Brief press feedback ("pop") when tapped */
.faq-item summary:active { transform:scale(.992); }

.faq-item summary {
  padding:20px 22px !important;
  border-radius:18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:color .25s ease;
}
.faq-item summary:hover { color:var(--accent); }

/* The +/x chip — glass tile that rotates + pops when open */
.faq-item summary .ico {
  flex-shrink:0;
  width:32px !important; height:32px !important;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(228,156,0,0.12);
  border:1px solid rgba(228,156,0,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease;
}
.faq-item:hover summary .ico { background:rgba(228,156,0,0.18); border-color:rgba(228,156,0,0.4); }
.faq-item[open] summary .ico {
  transform:rotate(135deg) scale(1.06);
  background:rgba(228,156,0,0.24);
  border-color:rgba(228,156,0,0.55);
}

/* The answer reveal */
.faq-item .answer {
  padding:0 22px 24px !important;
  line-height:1.65;
  color:var(--text-2, #cfcfcf);
}
.faq-item[open] .answer {
  border-top:1px solid rgba(255,255,255,0.07);
  padding-top:16px !important; margin-top:2px;
  animation:faqGlassReveal .38s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes faqGlassReveal {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Make sure the FAQ section never clips the last card at the bottom */
.faq-section { padding-bottom:96px !important; }

@media (max-width:640px) {
  .faq-item summary { padding:16px 16px !important; font-size:1rem; gap:12px; }
  .faq-item .answer { padding:0 16px 20px !important; }
  .faq-item summary .ico { width:28px !important; height:28px !important; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary .ico, .faq-item[open] .answer { transition:none !important; animation:none !important; transform:none !important; }
}

/* ===== AUTO-BLOG ARTICLE TYPOGRAPHY (daily_blog_gen.py posts) ===== */
.article-body h2{font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.2;letter-spacing:-0.015em;margin:2.4em 0 0.6em;color:var(--text-1,#fff);}
.article-body h3{font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.25;margin:1.8em 0 0.5em;color:var(--text-1,#fff);}
.article-body h2:first-child,.article-body h3:first-child{margin-top:0;}
.article-body p{margin:0 0 1.15em;}
.article-body ul,.article-body ol{margin:0 0 1.3em 1.3em;line-height:1.7;}
.article-body li{margin:0 0 .5em;}
.article-body a{color:var(--accent,#e49c00);text-decoration:underline;text-underline-offset:3px;}
.article-body .faq-item{margin-top:14px;}
/* spacing before the FAQ block */
.article-body details.faq-item:first-of-type{margin-top:30px;}

/* ===== Blog post-card thumbnails + prominent date badge ===== */
.post-card{ overflow:hidden; padding-top:0 !important; }
.post-thumb-wrap{
  position:relative;
  margin:-1px -1px 18px -1px;      /* bleed to card edges */
  border-radius:16px 16px 0 0;
  overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#1a1d24,#0d0f13);
}
.post-thumb{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.post-card:hover .post-thumb{ transform:scale(1.06); }
.post-thumb-wrap::after{   /* subtle dark gradient so the badge always reads */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.post-date-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:#fff;
  padding:6px 11px; border-radius:999px;
  background:rgba(228,156,0,.22);
  border:1px solid rgba(228,156,0,.55);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}