/* ===== دنیای کوکودژ — de-clutter preview additions (2026-10-27) =====
   Only existing palette vars are used. Loaded after the live stylesheets. */

/* --- sticky in-page chip bar (sits under the 64px sticky header) --- */
.chipbar {
  position: sticky; top: 64px; z-index: 45;
  background: rgba(10, 27, 63, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.chipbar-in {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 9px 14px; scrollbar-width: none;
  max-width: 1200px; margin: 0 auto;
}
.chipbar-in::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none;
}
.chip:active, .chip:hover { background: var(--yellow); color: #221A00; border-color: var(--yellow); }

/* anchor jumps must clear the sticky header + chip bar */
body > section, .hero { scroll-margin-top: 128px; }

/* --- visual rhythm: one consistent section beat + soft alternate bands --- */
body > section.section { padding-top: 54px; padding-bottom: 54px; }
section.band-alt { background: rgba(255, 255, 255, .028); }
#stories, #faq, #info { background: rgba(255, 255, 255, .028); }

/* --- compact menu showcase (replaces tiles + full menu) --- */
.cat-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 26px; }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 128px;
}
.cat-card > img { width: 100%; height: 118px; object-fit: cover; display: block; }
@media (min-width: 900px) { .cat-card > img { height: 160px; } }
.cat-card-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.cat-card-body h3 { font-size: .98rem; margin: 0 0 5px; line-height: 1.7; }
.cat-card-body p { color: var(--muted); font-size: .84rem; line-height: 1.95; margin: 0 0 12px; flex: 1; }
.cat-btn {
  display: block; text-align: center; background: var(--yellow); color: #221A00;
  font-weight: 700; font-size: .87rem; border-radius: 12px; padding: 9px 8px; text-decoration: none;
}

/* --- FAQ accordion (all Q/A text stays in the DOM) --- */
.faq-acc { margin-top: 24px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  margin-top: 12px; overflow: hidden;
}
.faq-item h3.faq-qh { margin: 0; }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.9;
  text-align: right; padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.faq-chev { color: var(--yellow); transition: transform .25s; flex: 0 0 auto; }
.faq-item.open .faq-chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 16px 16px; }
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0; line-height: 2.05; color: var(--ink); }

/* --- back to top --- */
#toTop {
  position: fixed; bottom: 18px; inset-inline-start: 16px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--yellow); color: #221A00; border: 0; cursor: pointer;
  font-size: 1.25rem; font-weight: 900; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#toTop.show { opacity: 1; pointer-events: auto; }

/* ===== multi-page preview additions (2026-10-27) =====
   Same palette vars. Adds: back bar, about-teaser link row, flowing bands. */

/* --- back-to-hub bar (sub-pages; sits where the chip bar sits on the hub) --- */
.backbar {
  position: sticky; top: 64px; z-index: 45;
  background: rgba(10, 27, 63, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.backbar-in { max-width: 1200px; margin: 0 auto; padding: 10px 14px; }
.back-link { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .93rem; }
.back-link:hover { color: var(--yellow); }

/* --- hub about teaser --- */
.teaser-more { max-width: 820px; margin: 14px auto 0; }

/* --- flowing bands: fixed-height horizontal auto-motion rows --- */
.flow-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.flow-head .section-title { text-align: right; }
.flow-all {
  flex: 0 0 auto; color: var(--yellow); font-weight: 700;
  text-decoration: none; font-size: .95rem;
}
.flow-band {
  direction: ltr; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; margin-top: 22px; border-radius: var(--radius);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.flow-band::-webkit-scrollbar { display: none; }
.flow-track {
  display: flex; width: max-content;
  animation: flowmove var(--dur, 55s) linear infinite;
}
.flow-half { display: flex; gap: 14px; padding-inline-end: 14px; }
@keyframes flowmove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.flow-band:hover .flow-track,
.flow-band:active .flow-track,
.flow-band.paused .flow-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .flow-track { animation: none; }
}
.flow-card {
  direction: rtl; text-align: right; flex: 0 0 auto; width: 232px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
}
.flow-card img { width: 100%; height: 128px; object-fit: cover; display: block; }
.flow-cover {
  height: 128px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; color: var(--yellow);
  background: rgba(255, 255, 255, .05); padding: 0 12px; text-align: center;
}
.flow-card h3 { font-size: .95rem; line-height: 1.8; margin: 0; padding: 10px 12px 12px; }
.flow-quote {
  direction: rtl; text-align: right; flex: 0 0 auto; width: 320px; margin: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column;
}
.flow-quote blockquote { margin: 0; font-size: .98rem; line-height: 2; color: var(--ink); }
.flow-quote figcaption { margin-top: auto; padding-top: 12px; }
.flow-quote .tst-name { font-weight: 700; color: var(--yellow); }
.flow-quote .tst-src { color: var(--muted); font-size: .85rem; }

/* auditfix2 2026-10-27: voice thumbs float inside the quote (band height unchanged) */
.flow-quote blockquote .tst-thumb{float:right;width:44px;height:44px;border-radius:50%;object-fit:cover;margin:8px 0 6px 12px;border:2px solid rgba(255,255,255,.25)}