/* Avadhuta Gita Companion — shared styles that complement the Tailwind CDN utility layer. */

:root {
  --color-ink: #22303e;
  --color-ink-soft: #3f4f5e;
  --color-sand: #f8f4ec;
  --color-sand-deep: #efe7d8;
  --color-indigo: #2c4257;
  --color-indigo-deep: #1a2b38;
  --color-terracotta: #b56a37;
  --color-gold: #c79a4b;
  --color-gold-soft: #f1e3c2;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  background-color: var(--color-sand);
  color: var(--color-ink);
}

.font-display {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
}

.font-ui {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.font-devanagari {
  font-family: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d9cdb2;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ---------- Texture / atmosphere ---------- */
.sky-gradient {
  background: radial-gradient(ellipse at 20% -10%, #3a5a73 0%, #1a2b38 55%, #101a22 100%);
}

.paper-texture {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(34, 48, 62, 0.035) 1px, transparent 0);
  background-size: 22px 22px;
}

.divider-om::before {
  content: "\0950";
  display: inline-block;
  color: var(--color-gold);
  opacity: 0.7;
}

/* ---------- Verse card ---------- */
.verse-card {
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.verse-card:hover {
  box-shadow: 0 12px 34px -12px rgba(34, 48, 62, 0.18);
}
.verse-card.is-key {
  background: linear-gradient(180deg, var(--color-gold-soft) 0%, #fbf7ec 10%, #fbf7ec 100%);
  border-color: #dcc383 !important;
}
.verse-card mark.search-hit {
  background: var(--color-gold-soft);
  color: var(--color-ink);
  border-radius: 3px;
  padding: 0 2px;
}

/* ---------- Bookmark star button ---------- */
.bookmark-btn svg {
  transition: transform 0.2s ease, fill 0.2s ease, color 0.2s ease;
}
.bookmark-btn.is-active svg {
  fill: var(--color-terracotta);
  color: var(--color-terracotta);
  transform: scale(1.08);
}
.bookmark-btn:active svg {
  transform: scale(0.85);
}

/* ---------- Progress ring / bar ---------- */
.progress-track {
  background: #e7dcc3;
}
.progress-fill {
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold));
  transition: width 0.4s ease;
}

/* ---------- Nav active link ---------- */
.nav-link {
  position: relative;
}
.nav-link.is-active {
  color: var(--color-terracotta);
}
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--color-terracotta);
  border-radius: 2px;
}

/* ---------- Fade-in on load ---------- */
.reveal {
  animation: reveal 0.6s ease both;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Search modal ---------- */
#search-backdrop {
  backdrop-filter: blur(3px);
}

/* ---------- Prose for explanations ---------- */
.gita-prose p + p {
  margin-top: 0.65rem;
}

/* ---------- Utility: line clamp fallback ---------- */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Skip link for accessibility ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--color-indigo-deep);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
  .verse-card, .bookmark-btn svg, .progress-fill { transition: none; }
}