/*
 * Site-wide custom CSS for sriramchandra.in
 * Design: "Divine Clarity" with shared ISRC typography system
 * Fonts: Source Serif 4 (headings) + Source Sans 3 (body)
 *
 * Most styling is handled by Tailwind CSS utility classes directly
 * in templates. This file is for:
 * - Custom styles that can't be expressed with Tailwind utilities
 * - Animations and transitions (hover effects, mobile menu)
 * - Glassmorphism effects (frosted glass look)
 *
 * NOTE: Keep this file focused on effects and interactions.
 *       Layout and spacing should remain in Tailwind classes.
 */


/* ══════════════════════════════════════════════════════════════════
   SKINNABLE DESIGN TOKENS
   Semantic custom properties consumed site-wide via Tailwind utilities
   (bg-surface, text-ink, border-rule, text-accent, bg-band, …) defined
   in tailwind.config.js. A "skin" is one block of values:
     :root      → Daylight  (blue editorial)
     html.dark  → Lamplight (pre-dawn night-indigo + lamp-gold)
   Add a third skin later by adding one selector block — no template churn.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --ground:#F4F7FB;  --surface:#FFFFFF;  --surface-2:#EAEFF7;
    --ink:#15243F;     --ink-soft:#53617D; --rule:#D7DEEA;
    --accent:#2C5E9E;  --accent-deep:#1C4276;
    --band:#15243F;    --band-2:#1E3050;
    --band-ink:#E7ECF5; --band-ink-soft:#A9B6CD;
    --band-line:rgba(231,236,245,.14); --band-accent:#7FAAE0;
    --flame:#C8923D;   --flame-soft:#E0B873;
}
html.dark {
    --ground:#0E1320;  --surface:#141B2C;  --surface-2:#10172A;
    --ink:#E8E2D4;     --ink-soft:#A9A493; --rule:rgba(232,226,212,.13);
    --accent:#C8923D;  --accent-deep:#E0B873;
    --band:#0B0F1A;    --band-2:#141B2C;
    --band-ink:#E8E2D4; --band-ink-soft:#A9A493;
    --band-line:rgba(232,226,212,.10); --band-accent:#E0B873;
    --flame:#C8923D;   --flame-soft:#E0B873;
}


/* ─── Smooth scrolling ─── */
html {
    scroll-behavior: smooth;
}

/* ─── Ensure images don't overflow their containers ─── */
img {
    max-width: 100%;
    height: auto;
}


/* ══════════════════════════════════════════════════════════════════
   GLASSMORPHISM
   Creates a frosted-glass effect by blurring whatever is behind
   the element. Used on the sticky primary nav bar so page content
   shows through with a soft blur as you scroll.
   ══════════════════════════════════════════════════════════════════ */
.glass {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);   /* Safari support */
}


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION DROPDOWNS (CSS-only, no JavaScript needed)
   Uses the CSS "group-hover" pattern: when you hover over a
   .nav-item parent, its child .nav-dropdown becomes visible.
   This is a pure-CSS dropdown — no JS event listeners required.
   ══════════════════════════════════════════════════════════════════ */
.nav-dropdown {
    display: none;
}
.nav-item:hover .nav-dropdown {
    display: block;
}


/* ══════════════════════════════════════════════════════════════════
   DECORATIVE QUOTE MARKS
   Large typographic quotation marks used as visual decoration
   behind blockquotes. Positioned absolutely within a relative
   parent, with very low opacity so they don't distract from text.
   ══════════════════════════════════════════════════════════════════ */
.quote-mark {
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: rgba(107, 33, 168, 0.15);   /* Subtle purple tint */
    position: absolute;
}


/* ══════════════════════════════════════════════════════════════════
   FLOAT CARD — Hover Lift Effect
   Cards throughout the site gently float upward on hover,
   with a deeper shadow appearing underneath. This gives a
   satisfying "lifting off the page" interaction.
   ══════════════════════════════════════════════════════════════════ */
.float-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.float-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(27, 42, 74, 0.12);
}


/* ══════════════════════════════════════════════════════════════════
   PILL LINKS — Useful Links Section
   Rounded pill-shaped buttons that change color and float
   slightly upward on hover. Used in the "Useful Links" section.
   ══════════════════════════════════════════════════════════════════ */
.pill-link {
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pill-link:hover {
    background: #0D9488;   /* teal-600 */
    color: #fff;
    transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU — Animated Expand/Collapse
   Instead of toggling display:none/block (which has no animation),
   we animate max-height from 0 to a large value. This creates a
   smooth slide-down/slide-up effect for the mobile navigation.
   ══════════════════════════════════════════════════════════════════ */
#mobile-menu {
    transition: max-height 0.35s ease;
    overflow: hidden;
}
#mobile-menu.closed {
    max-height: 0;
}
#mobile-menu.open {
    max-height: 2000px;   /* Large enough to fit all menu items */
}

/* Mobile sub-menus (nested under each nav section) */
.mobile-sub {
    display: none;
}
.mobile-sub.open {
    display: block;
}


/* ══════════════════════════════════════════════════════════════════
   WARM GRADIENT — Hero Background
   A soft, warm gradient used behind the hero section.
   Blends spiritual purple tones with warm stone for a grounded feel.
   ══════════════════════════════════════════════════════════════════ */
.lavender-gradient {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 30%, #F5F0EA 100%);
}


/* ══════════════════════════════════════════════════════════════════
   READING CARD — Contained content area for text-heavy pages
   Wraps rich text content in a white card with subtle shadow,
   preventing text from floating in unbounded space. Used on
   About, Pranahuti, Masters, Methods, and other reading pages.
   ══════════════════════════════════════════════════════════════════ */
.reading-card {
    background: var(--surface);
    border-radius: 0.25rem;   /* editorial — barely-there rounding */
    border: 1px solid var(--rule);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 2rem 1.5rem;
    color: var(--ink);
}
@media (min-width: 768px) {
    .reading-card {
        padding: 2.75rem 3.25rem;
    }
}

/* Editorial prose — serif body (Spectral) + Marcellus headings, skin-aware.
   Every reading page wraps its rich text in a per-page `*-content` container
   (about-/chapter-/pranahuti-/master-/method-/event-/celebration-/research-/
   book-content) that carries Tailwind arbitrary classes ([&>h2]:text-navy-500,
   dark:…) for size/spacing AND colour. We override only colour/typography so
   the text follows the active skin in both light and dark, giving the whole
   site one editorial reading style. !important beats the higher-specificity
   `.dark .[&>h2]…` arbitrary variants. */
.about-content,
.chapter-content,
.pranahuti-content,
.master-content,
.method-content,
.event-content,
.celebration-content,
.research-content,
.book-content {
    font-family: "Spectral", Georgia, serif;
    color: var(--ink) !important;
}
.about-content > h2,      .about-content > h3,      .about-content > h4,
.chapter-content > h2,    .chapter-content > h3,    .chapter-content > h4,
.pranahuti-content > h2,  .pranahuti-content > h3,  .pranahuti-content > h4,
.master-content > h2,     .master-content > h3,     .master-content > h4,
.method-content > h2,     .method-content > h3,     .method-content > h4,
.event-content > h2,      .event-content > h3,      .event-content > h4,
.celebration-content > h2,.celebration-content > h3,.celebration-content > h4,
.research-content > h2,   .research-content > h3,   .research-content > h4,
.book-content > h2,       .book-content > h3,       .book-content > h4 {
    font-family: "Marcellus", Georgia, serif !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    border-color: var(--rule) !important;
}
.about-content > blockquote,
.chapter-content > blockquote,
.pranahuti-content > blockquote,
.master-content > blockquote,
.method-content > blockquote,
.event-content > blockquote,
.celebration-content > blockquote,
.research-content > blockquote,
.book-content > blockquote {
    border-color: var(--accent) !important;
    color: var(--ink-soft) !important;
}


/* ══════════════════════════════════════════════════════════════════
   PROSE LINK STYLING — visible links inside reading content
   The .about-content div wraps rich text on GenericContentPage,
   About pages, and other prose sections. Without explicit link
   styles, <a> tags inherit body text color and are invisible.
   ══════════════════════════════════════════════════════════════════ */
.about-content a, .chapter-content a, .pranahuti-content a, .master-content a,
.method-content a, .event-content a, .celebration-content a,
.research-content a, .book-content a {
    color: var(--accent-deep) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transition: color 0.15s, text-decoration-color 0.15s;
}
.about-content a:hover, .chapter-content a:hover, .pranahuti-content a:hover,
.master-content a:hover, .method-content a:hover, .event-content a:hover,
.celebration-content a:hover, .research-content a:hover, .book-content a:hover {
    color: var(--accent) !important;
    text-decoration-color: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   When <html class="dark"> is set, these rules override the light
   theme for elements that use custom CSS (not Tailwind classes).
   Tailwind dark: variants handle the rest in templates.
   ══════════════════════════════════════════════════════════════════ */
.dark .glass {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* .reading-card and .about-content links now use skin tokens (above), so
   their old hardcoded .dark overrides have been removed. */

.dark .quote-mark {
    color: rgba(167, 139, 250, 0.2);
}

.dark .float-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.dark .pill-link:hover {
    background: #0D9488;
    color: #fff;
}

.dark .lavender-gradient {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #1e293b 100%);
}

/* Dropdowns now use the bg-surface / border-rule tokens, which carry their
   own dark-skin values — no hardcoded dark override needed here. */