/*
 * 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.
 */


/* ─── 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: #FDFAF5;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
    padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
    .reading-card {
        padding: 2.5rem 3rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   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 {
    color: #1e40af;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(30, 64, 175, 0.3);
    transition: color 0.15s, text-decoration-color 0.15s;
}
.about-content a:hover {
    color: #1e3a8a;
    text-decoration-color: rgba(30, 64, 175, 0.8);
}


/* ══════════════════════════════════════════════════════════════════
   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);
}

.dark .reading-card {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark .about-content a {
    color: #93c5fd;
    text-decoration-color: rgba(147, 197, 253, 0.3);
}
.dark .about-content a:hover {
    color: #bfdbfe;
    text-decoration-color: rgba(147, 197, 253, 0.8);
}

.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%);
}

.dark .nav-dropdown {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}