/* =====================================================================
   INDICLENS — Additional CSS (paste into WordPress Customizer > Additional CSS)
   Tailwind (via CDN in the HTML prototype) covers utility classes.
   Everything below is bespoke: gradients, glow, motion, focus states.
   ===================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: #211A2C;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #7B2FF7;
  outline-offset: 2px;
}

/* ---------- Hero glow orb ---------- */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.95), rgba(237,230,251,0.4) 60%, transparent 75%);
  filter: blur(2px);
  animation: pulse-glow 6s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}

/* ---------- Breadcrumb chip overlapping hero ---------- */
.breadcrumb-chip {
  background: #fff;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 -10px 30px rgba(123,47,247,0.12);
}

/* ---------- Card hover lift ---------- */
.card-lift {
  transition: transform .35s ease, box-shadow .35s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(123,47,247,0.25);
}

/* ---------- Category radio dots (blog sidebar) ---------- */
.cat-item { position: relative; }
.cat-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #D8D3E3; transition: border-color .2s ease;
}
.cat-item:hover .cat-dot { border-color: #7B2FF7; }

/* ---------- Tag pill ---------- */
.tag-pill {
  transition: background-color .2s ease, color .2s ease;
}
.tag-pill:hover {
  background-color: #7B2FF7;
  color: #fff;
}

/* ---------- Pagination ---------- */
.page-num {
  transition: background-color .2s ease, color .2s ease;
}
.page-num.active,
.page-num:hover {
  background-color: #7B2FF7;
  color: #fff;
}

/* ---------- Marquee / floating badge ---------- */
.float-badge {
  animation: float-y 3.5s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .float-badge { animation: none; }
  .card-lift { transition: none; }
}

/* ---------- Mobile nav slide ---------- */
#mobile-menu { animation: slide-down .25s ease; }
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F7F7FA; }
::-webkit-scrollbar-thumb { background: #C9B8F5; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7B2FF7; }

/* =====================================================================
   INDICLENS — additions on top of the existing Aimo design system.
   Same tokens (primary/lavender/blush/panel/ink), no new palette.
   ===================================================================== */

/* ---------- Research content blocks: Evidence / Perspective / Hypothesis ---------- */
.content-block { border-radius: 1.25rem; padding: 1.5rem 1.75rem; margin: 2rem 0; }
.content-block-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .65rem;
}
.block-evidence { background: #F7F7FA; border-left: 4px solid #211A2C; }
.block-evidence .content-block-label { color: #211A2C; }
.block-perspective { background: #EDE6FB; border-left: 4px solid #7B2FF7; }
.block-perspective .content-block-label { color: #7B2FF7; }
.block-hypothesis { background: #F4E7F0; border-left: 4px dashed #9B4DFF; }
.block-hypothesis .content-block-label { color: #5B1FC0; }

/* ---------- Category badges (Existence / Chronicles / Frontiers) ---------- */
.cat-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; }
.cat-existence { background: #EDE6FB; color: #7B2FF7; }
.cat-chronicles { background: #F4E7F0; color: #5B1FC0; }
.cat-frontiers { background: #F7F7FA; color: #211A2C; border: 1px solid rgba(123,47,247,0.2); }

/* ---------- Filter pill (Explore / Research pages) ---------- */
.filter-pill { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.filter-pill.active { background-color: #7B2FF7; color: #fff; border-color: #7B2FF7; }

/* ---------- Pull quote ---------- */
.pull-quote { border-left: 4px solid #7B2FF7; background: #F7F7FA; border-radius: 0 1rem 1rem 0; padding: 1.5rem 1.75rem; margin: 2rem 0; font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; line-height: 1.5; color: #211A2C; }

/* ---------- References list ---------- */
.reference-item { counter-increment: ref; }
.reference-item::before { content: '[' counter(ref) ']'; color: #7B2FF7; font-weight: 600; margin-right: .5rem; }
.reference-list { counter-reset: ref; }

/* ---------- Reading-progress-friendly citation markers ---------- */
.cite-marker { color: #7B2FF7; font-weight: 600; font-size: .8em; vertical-align: super; text-decoration: none; }
.cite-marker:hover { text-decoration: underline; }

/* ---------- Demo-content notice ---------- */
.demo-notice { background: #F7F7FA; border: 1px dashed rgba(123,47,247,0.35); border-radius: .85rem; padding: .85rem 1.1rem; font-size: .8rem; color: #6B6675; }

/* ---------- Research philosophy step connector ---------- */
.step-connector { display: none; }
@media (min-width: 1024px) {
  .step-connector { display: block; position: absolute; top: 1.75rem; left: 100%; width: 2.5rem; height: 2px; background: repeating-linear-gradient(90deg, #C9B8F5 0 6px, transparent 6px 12px); }
}