/*
 * Site-wide custom CSS for sriramchandra.in
 * Design: Option B — "Divine Clarity"
 *
 * 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;
}


/* ══════════════════════════════════════════════════════════════════
   LAVENDER GRADIENT — Hero Background
   A soft, calming gradient used behind the hero section.
   Blends spiritual purple tones with a hint of teal for warmth.
   ══════════════════════════════════════════════════════════════════ */
.lavender-gradient {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 40%, #F0FDFA 100%);
}