/* ==========================================================================
   CSS Variables & Reset — Om Akhil Vishva Shanti Mahamrityunjaya Gurudham Trust
   Theme: Primary Blue #061969 | Accent Orange #F26811 | Gold #F5E9B9 | Grey #C4BACE
   ========================================================================== */
:root {
    /* ── Brand Colors ── */
    --primary:        #061969;   /* Deep Navy Blue */
    --primary-light:  #0a2494;   /* Lighter Blue */
    --primary-dark:   #030d3a;   /* Darker Blue */
    --accent:         #F26811;   /* Orange Accent */
    --accent-light:   #f5813a;   /* Lighter Orange */
    --accent-dark:    #c85208;   /* Darker Orange */
    --light-gold:     #F5E9B9;   /* Light Gold */
    --light-grey:     #C4BACE;   /* Light Grey-Lavender */

    /* ── Legacy aliases (keep for backward compat) ── */
    --secondary:      #061969;
    --secondary-light:#0a2494;
    --secondary-dark: #061969;

    /* ── Surfaces ── */
    --bg-color:       #FCFCFC;
    --surface:        #ffffff;
    --surface-alt:    #f4f6fb;

    /* ── Text ── */
    --text-main:      #1e2a4a;
    --text-muted:     #6b7280;
    --heading-color:  #061969;

    /* ── Border ── */
    --border-color:   #e2e8f0;

    /* ── Typography ── */
    --font-sans:  'Outfit', sans-serif;
    --font-serif: 'Playfair Display', serif;

    /* ── Layout ── */
    --container-max: 1200px;
    --section-pad:   80px 0;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(6,25,105,0.05);
    --shadow-md: 0 10px 30px rgba(6,25,105,0.07);
    --shadow-lg: 0 20px 40px rgba(6,25,105,0.10);
    --shadow-xl: 0 30px 60px rgba(6,25,105,0.14);

    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   24px;
    --radius-full: 9999px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: var(--font-sans);
    color: var(--text-main);
    background-color: var(--bg-color);
    line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 { color:var(--heading-color); line-height:1.2; margin-bottom:1rem; font-weight:700; }
.font-serif { font-family:var(--font-serif); }
a { text-decoration:none; color:inherit; transition:var(--transition); }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }

.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 20px; }
.section-padding { padding:var(--section-pad); }

/* ==========================================================================
   Typography & Utilities
   ========================================================================== */
.section-title { text-align:center; margin-bottom:3rem; }

.section-title span {
    display:block;
    color:var(--accent);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
    font-size:0.875rem;
}

.section-title h2 {
    font-size:2.5rem;
    font-family:var(--font-serif);
    color:var(--primary);
}

.highlight { color:var(--accent); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    padding:0.75rem 1.75rem;
    border-radius:var(--radius-full);
    font-weight:600;
    cursor:pointer;
    border:none;
    transition:var(--transition);
    text-align:center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: 0 10px 20px -5px rgba(6,25,105,0.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform:translateY(-3px);
    box-shadow: 0 15px 28px -5px rgba(6,25,105,0.5);
    color:white;
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color:white;
    box-shadow: 0 10px 20px -5px rgba(242,104,17,0.35);
}
.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    transform:translateY(-3px);
    color:white;
}

.btn-secondary {
    background: var(--primary);
    color:white;
}
.btn-secondary:hover {
    background: var(--primary-dark);
    transform:translateY(-2px);
    color:white;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}
.btn-outline:hover {
    background: var(--primary);
    color: white;
}

.btn-outline-accent {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.btn-outline-accent:hover {
    background: var(--accent);
    color: white;
}

/* Donate pulse button */
.btn-donate {
    background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
    border:none !important;
    box-shadow: 0 4px 15px rgba(242,104,17,0.4) !important;
    animation: pulse-orange 2s infinite;
}
.btn-donate:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent)) !important;
    transform:translateY(-2px) !important;
}
@keyframes pulse-orange {
    0%   { box-shadow: 0 0 0 0 rgba(242,104,17,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(242,104,17,0); }
    100% { box-shadow: 0 0 0 0 rgba(242,104,17,0); }
}

/* ==========================================================================
   Top Bar
   ========================================================================== */
.top-bar {
    background: var(--primary);
    color: white;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--accent);
}
.top-bar-inner { display:flex; justify-content:space-between; align-items:center; }
.top-bar-info span { margin-right:20px; }
.top-bar-info i { color:var(--light-gold); margin-right:5px; }
.top-bar-social a { color:rgba(255,255,255,0.85); margin-left:15px; transition:color 0.3s; }
.top-bar-social a:hover { color:var(--light-gold); }

.contact-info { display:flex; gap:1.5rem; }
.contact-info a { display:flex; align-items:center; gap:0.5rem; opacity:0.9; color:white; }
.contact-info a:hover { opacity:1; color:var(--light-gold); }

.social-links { display:flex; gap:1rem; }
.social-links a {
    width:28px; height:28px; border-radius:50%;
    background:rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center; font-size:0.75rem;
}
.social-links a:hover { background:var(--accent); transform:translateY(-2px); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(6,25,105,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 3px solid var(--light-gold);
}
.nav-inner {
    display:flex; justify-content:space-between; align-items:center;
    height:90px;
}
.brand-logo { display:flex; align-items:center; gap:0.75rem; text-decoration:none; }
.brand-logo img { flex-shrink: 0; }
.brand-text h1 { margin:0; font-size:1.5rem; font-family:var(--font-serif); color:var(--primary); }
.brand-text span { color:var(--accent); }
.footer-brand-link { display:block; text-decoration:none; }

.nav-links { display:flex; gap:1.25rem; }
.nav-links a {
    font-weight:600; font-size:0.9rem; color:var(--primary);
    position:relative; padding:0.5rem 0.2rem; white-space:nowrap;
}
.nav-links a::after {
    content:''; position:absolute; bottom:0; left:50%;
    transform:translateX(-50%); width:0; height:3px;
    background:var(--accent); border-radius:3px;
    transition:width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-actions { display:flex; align-items:center; gap:1rem; }
.mobile-menu-btn {
    display:none; background:none; border:none;
    font-size:1.5rem; color:var(--primary); cursor:pointer;
}

/* WhatsApp float */
.whatsapp-float {
    position:fixed; width:60px; height:60px; bottom:40px; right:40px;
    background:#25d366; color:#fff; border-radius:50%;
    text-align:center; font-size:30px;
    box-shadow:2px 2px 12px rgba(37,211,102,0.5); z-index:100;
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.3s ease;
}
.whatsapp-float:hover { transform:scale(1.12); color:white; }

/* ==========================================================================
   Hero Section (legacy)
   ========================================================================== */
.hero {
    position:relative; min-height:80vh; display:flex; align-items:center;
    background: linear-gradient(rgba(6,25,105,0.82), rgba(6,25,105,0.92)),
                url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
    color:white;
}
.hero-content { max-width:800px; text-align:center; margin:0 auto; }
.hero-subtitle {
    display:inline-block; padding:0.5rem 1.5rem;
    background:rgba(242,104,17,0.2); border:1px solid var(--accent);
    border-radius:var(--radius-full); color:var(--light-gold);
    font-weight:600; letter-spacing:2px; text-transform:uppercase;
    margin-bottom:1.5rem; animation:fadeInUp 1s ease;
}
.hero h1 {
    font-size:4.5rem; font-family:var(--font-serif); color:white;
    margin-bottom:1.5rem; line-height:1.1;
    text-shadow:0 10px 30px rgba(0,0,0,0.3); animation:fadeInUp 1s ease 0.2s both;
}
.hero p { font-size:1.25rem; color:rgba(255,255,255,0.9); margin-bottom:2rem; animation:fadeInUp 1s ease 0.4s both; }
.hero-actions { display:flex; justify-content:center; gap:1rem; animation:fadeInUp 1s ease 0.6s both; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-section { margin-top:-60px; position:relative; z-index:10; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }

.stat-card {
    background:var(--surface);
    padding:3rem 2rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
    text-align:center; display:flex; flex-direction:column; align-items:center;
    gap:1rem; transition:var(--transition);
    border:1px solid var(--light-gold);
    border-top: 4px solid var(--accent);
}
.stat-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-xl); }
.stat-icon {
    width:60px; height:60px; border-radius:50%;
    background: rgba(242,104,17,0.12); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.stat-card h3 { font-size:2.5rem; color:var(--primary); margin:0; font-family:var(--font-sans); }
.stat-card p { color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:1px; font-size:0.875rem; }

/* ==========================================================================
   About Section
   ========================================================================== */
.about-home { padding:var(--section-pad); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-image { position:relative; }
.about-image img { border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); }
.about-image-overlay {
    position:absolute; bottom:-30px; right:-30px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color:white; padding:2rem; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg); text-align:center;
}
.about-image-overlay h4 { font-size:2.5rem; color:white; margin:0; }
.about-image-overlay p { margin:0; font-weight:500; }
.about-content h2 { font-size:2.5rem; font-family:var(--font-serif); color:var(--primary); margin-bottom:1.5rem; }
.about-content span.highlight { color:var(--accent); }
.about-content p { color:var(--text-muted); margin-bottom:1.5rem; font-size:1.1rem; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
.feature-item { display:flex; align-items:center; gap:1rem; }
.feature-item i { color:var(--accent); background:rgba(242,104,17,0.1); padding:10px; border-radius:50%; }
.feature-item span { font-weight:600; color:var(--primary); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:2rem; }
.card {
    background:var(--surface); border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-md); transition:var(--transition);
    border: 1px solid rgba(6,25,105,0.06); display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.card-img { height:240px; overflow:hidden; position:relative; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); }
.card:hover .card-img img { transform:scale(1.08); }
.card-badge {
    position:absolute; top:1rem; right:1rem;
    background:var(--accent); color:white;
    padding:0.25rem 1rem; border-radius:var(--radius-full);
    font-size:0.875rem; font-weight:600;
}
.card-content { padding:1.5rem; }
.card-title { font-size:1.25rem; margin-bottom:0.75rem; }
.card-title a { color:var(--primary); }
.card-title a:hover { color:var(--accent); }
.card-desc { color:var(--text-muted); margin-bottom:1.5rem; font-size:0.95rem; }
.card-meta {
    display:flex; align-items:center; gap:1rem;
    padding-top:1rem; border-top:1px solid var(--border-color);
    font-size:0.875rem; color:var(--text-muted);
}
.card-meta span { display:flex; align-items:center; gap:0.5rem; }
.card-meta i { color:var(--accent); }

/* ==========================================================================
   Page Headers
   ========================================================================== */
.page-header {
    background: linear-gradient(rgba(6,25,105,0.88), rgba(6,25,105,0.92)),
                url('https://images.unsplash.com/photo-1593113580332-ceb4b8a24fc5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
    padding:100px 0 60px; text-align:center; color:white;
}
.page-header h1 { font-size:3rem; font-family:var(--font-serif); color:white; margin-bottom:1rem; }
.breadcrumb { display:flex; justify-content:center; align-items:center; gap:0.5rem; color:rgba(255,255,255,0.7); }
.breadcrumb a { color:var(--light-gold); }
.breadcrumb a:hover { color:var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background:var(--primary); color:#c4cde6; padding-top:5rem; }
.footer-inner {
    display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:3rem; margin-bottom:4rem;
}
.footer-logo .brand-text h2 { color:white; margin:0; }
.footer-logo i { color:var(--light-gold); }
.footer-desc { margin:1.5rem 0; line-height:1.8; color:rgba(255,255,255,0.7); }
.footer h3 {
    color:white; font-size:1.25rem; margin-bottom:1.5rem;
    position:relative; padding-bottom:1rem;
}
.footer h3::after {
    content:''; position:absolute; left:0; bottom:0;
    width:40px; height:2px; background:var(--accent);
}
.footer-links li { margin-bottom:0.75rem; }
.footer-links a { color:inherit; display:flex; align-items:center; gap:0.5rem; }
.footer-links a::before {
    content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900;
    font-size:0.75rem; color:var(--accent); transition:var(--transition);
}
.footer-links a:hover { color:var(--light-gold); transform:translateX(5px); }
.footer-contact li { display:flex; gap:1rem; margin-bottom:1rem; }
.footer-contact i { color:var(--accent); margin-top:0.25rem; }
.footer-social .social-links a { background:rgba(255,255,255,0.1); }
.footer-social .social-links a:hover { background:var(--accent); }
.footer-bottom { background:var(--primary-dark); padding:1.5rem 0; border-top:2px solid rgba(245,233,185,0.15); }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { margin:0; color:rgba(255,255,255,0.6); }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:rgba(255,255,255,0.5); }
.footer-bottom-links a:hover { color:var(--light-gold); }

/* ==========================================================================
   Donate / Register pages — form accent
   ========================================================================== */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(242,104,17,0.12);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px) {
    .hero h1 { font-size:3rem; }
    .footer-inner { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    .top-bar { display:none; }
    .mobile-menu-btn { display:block; }
    .nav-links {
        display:none; position:absolute; top:90px; left:0; width:100%;
        background:rgba(255,255,255,0.98); backdrop-filter:blur(10px); flex-direction:column;
        padding:2rem; box-shadow:var(--shadow-lg); gap:1.5rem;
        border-top:3px solid var(--accent);
    }
    .nav-links.active { display:flex; }
    
    /* Ensure Header logo fits */
    .brand-logo img { max-width: 220px !important; height: auto !important; max-height: 70px !important; flex-shrink: 0 !important; }
    .brand-logo i { font-size: 2.2rem !important; }
    .brand-text h1 { font-size: 1.1rem !important; }
    
    /* Hide nav action buttons on mobile */
    .nav-actions .btn { display: none !important; }

    /* Show mobile-only buttons in the dropdown */
    .mobile-only-btn { display: block !important; }

    .hero h1 { font-size:2.5rem; }
    .about-grid { grid-template-columns:1fr; gap:3rem; }
    .about-image-overlay { right:0; left:0; bottom:-20px; width:90%; margin:0 auto; }
    .footer-inner { grid-template-columns:1fr; }
    .footer-bottom-inner { flex-direction:column; text-align:center; gap:1rem; }
    .whatsapp-float { width:50px; height:50px; bottom:20px; right:20px; font-size:26px; }
}

/* ==========================================================================
   Animations & Utilities
   ========================================================================== */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}

.text-center { text-align:center; }
.mt-5 { margin-top:3rem; }
.mb-5 { margin-bottom:3rem; }
.mb-4 { margin-bottom:1.5rem; }
.mb-3 { margin-bottom:1rem; }
.mb-1 { margin-bottom:0.25rem; }
.pt-5 { padding-top:3rem; }
.pb-5 { padding-bottom:3rem; }
.text-muted { color:var(--text-muted); }

/* Gold accent bar utility */
.gold-bar { width:50px; height:4px; background:var(--light-gold); border-radius:4px; margin:0.75rem auto; }
.gold-bar-left { margin-left:0; }

/* Highlighted tag pill */
.tag-pill {
    display:inline-block; padding:5px 16px; border-radius:var(--radius-full);
    background:rgba(242,104,17,0.1); color:var(--accent);
    font-size:0.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
}