/* my-pathshala — base.css (tokens & primitives not handled by Tailwind) */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background-color: #1daa04; color: #fff; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Student panel sidebar nav — the global 10px light-gray track showed as an
   out-of-place gray strip on the white sidebar with a low-contrast thumb.
   Use a thin scrollbar that blends with the sidebar: transparent track + a
   rounded thumb in the sidebar's neutral gray palette (darkens on hover). */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Subtle gradient for hero backgrounds */
.bg-gradient-hero {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf3 50%, #d1fadf 100%);
}

.bg-gradient-brand {
    background: linear-gradient(135deg, #1daa04 0%, #126e02 100%);
}

.bg-gradient-ink {
    background: linear-gradient(135deg, #051b02 0%, #14401a 50%, #1daa04 100%);
}

/* Decorative grid pattern */
.bg-grid {
    background-image:
        linear-gradient(to right, rgba(29, 170, 4, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(29, 170, 4, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Card lift hover */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(5, 27, 2, 0.10);
}

/* Marquee for horizontal stories */
.marquee {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee > * { scroll-snap-align: start; }

/* Aspect ratios fallback */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-card  { aspect-ratio: 4 / 3; }

/* Form focus override */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 170, 4, 0.15);
    border-color: #1daa04;
}

/* Underline animation for nav links */
.nav-underline {
    position: relative;
}
.nav-underline::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: #1daa04;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.nav-underline:hover::after,
.nav-underline.active::after { transform: scaleX(1); }

/* Print niceties */
@media print {
    .no-print { display: none !important; }
}

/* ── Rendered rich text (Quill HTML saved by admin editors) ──────────────────
   The site loads Tailwind's Play CDN WITHOUT the Typography plugin, so the
   `prose` / `prose-invert` classes are no-ops, and Tailwind's preflight resets
   list markers, list padding and heading sizes to none. That silently strips
   the numbers/bullets from a category description, blog body or legal doc.
   Restore sensible defaults here. Markers inherit currentColor, so this works
   on light pages AND the coloured category banner (white text → white markers). */
.rich-text ol { list-style: decimal; padding-left: 1.5rem; margin: 0.4rem 0; }
.rich-text ul { list-style: disc;    padding-left: 1.5rem; margin: 0.4rem 0; }
.rich-text li { margin: 0.15rem 0; }
.rich-text p  { margin: 0.4rem 0; }
.rich-text a  { text-decoration: underline; }
.rich-text strong { font-weight: 700; }
.rich-text em     { font-style: italic; }
.rich-text u      { text-decoration: underline; }
.rich-text h1 { font-size: 1.6em;  font-weight: 800; margin: 0.6rem 0 0.3rem; }
.rich-text h2 { font-size: 1.35em; font-weight: 700; margin: 0.6rem 0 0.3rem; }
.rich-text h3 { font-size: 1.15em; font-weight: 700; margin: 0.5rem 0 0.25rem; }
.rich-text blockquote { border-left: 3px solid currentColor; padding-left: 0.75rem; margin: 0.5rem 0; opacity: 0.85; }
/* Quill alignment + indent helpers so admin formatting survives on the public side. */
.rich-text .ql-align-center  { text-align: center; }
.rich-text .ql-align-right   { text-align: right; }
.rich-text .ql-align-justify { text-align: justify; }
.rich-text .ql-indent-1 { padding-left: 3em; }
.rich-text .ql-indent-2 { padding-left: 6em; }
.rich-text .ql-indent-3 { padding-left: 9em; }

/* Two-column feature checklist (opt-in via `rich-cols` next to `rich-text`,
   used on the category page). A bullet list lays out as a 2-column grid that
   fills left→right, top→bottom: item 1 = top-left, item 2 = top-right, item 3
   = row-2 left, and so on — so consecutive pairs sit side by side. The ✅
   emoji is the marker, so the disc bullet is dropped. One column on mobile. */
.rich-cols ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 2.5rem;
    margin: 0.5rem 0;
}
.rich-cols ul li { margin: 0; }
@media (max-width: 640px) {
    .rich-cols ul { grid-template-columns: 1fr; }
}