/* Core Variables based on Logo.jpg */
:root {
    --gold: #c5a059; /* Matching the logo shield */
    --gold-hover: #e0b96b;
    --dark-bg: #1a1a1a; /* Matching header.png */
    --light-bg: #fdfaf6;
    --text-dark: #333333;
    --text-light: #ffffff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: var(--light-bg);
    color: var(--text-dark);
}

.container { max-width: 1200px; margin: auto; padding: 0 20px; }

/* Fixed Dark Header (from header.png) */
.site-header {
    background-color: var(--dark-bg);
    color: var(--text-light);
    border-bottom: 3px solid var(--gold);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo-area a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--text-light);
}

.nav-logo { height: 50px; width: auto; }
.logo-text { font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; }

.nav-links { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
.nav-links a { color: var(--text-light); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.3s; }
.nav-links a:hover { color: var(--gold); }

/* Dropdown styling */
.dropdown { position: relative; }
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dark-bg);
    list-style: none;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.dropdown:hover .submenu { display: block; }
.submenu li { padding: 10px 20px; }
.submenu a { display: block; }

/* =========================================
   HEADER & NAVIGATION STYLES (UNIFIED)
   ========================================= */

/* 1. Main Header Container */
.site-header {
    background-color: var(--dark-bg);
    color: var(--text-light);
    border-bottom: 3px solid var(--gold);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: relative;
}

/* 2. Logo Area (Fixes the giant logo and blue text) */
.logo-area a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none; /* Removes the blue underline */
    color: var(--text-light); /* Makes text white */
}

.nav-logo { 
    height: 50px; /* Forces the logo to be a reasonable size */
    width: auto; 
}
.logo-text { 
    font-size: 1.2rem; 
    font-weight: bold; 
    letter-spacing: 1px; 
}

/* 3. Desktop Navigation Links (Fixes the vertical list) */
.nav-links { 
    list-style: none; 
    display: flex; /* Puts items in a horizontal row */
    gap: 25px; 
    margin: 0; 
    padding: 0; 
    align-items: center;
}

.nav-links a { 
    color: var(--text-light); 
    text-decoration: none; 
    font-size: 0.95rem; 
    font-weight: 500; 
    transition: color 0.3s; 
}

.nav-links a:hover { color: var(--gold); }

/* 4. Desktop Dropdown Logic */
.dropdown { position: relative; padding: 10px 0; }

.submenu {
    display: none; /* Hides the submenu by default */
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--dark-bg);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    border-top: 3px solid var(--gold);
    z-index: 1000;
}

.dropdown:hover .submenu { display: block; } /* Shows submenu on hover */
.submenu li { padding: 0; }
.submenu a { display: block; padding: 12px 20px; font-size: 0.95rem; }
.submenu a:hover { background-color: #333; }

/* 5. Mobile Menu Button (Hidden on Desktop) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
}

/* =========================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================= */
@media (max-width: 900px) {
    
    /* Show the hamburger button */
    .mobile-menu-toggle { display: block; }

    /* Hide the horizontal row and stack them for mobile */
    .nav-links {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--dark-bg);
        border-bottom: 3px solid var(--gold);
        box-shadow: 0 10px 15px rgba(0,0,0,0.5);
        padding: 10px 0;
    }

    /* Shown when JS clicks the button */
    .nav-links.active { display: flex; }

    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #333;
    }
    .nav-links li:last-child { border-bottom: none; }

    /* Fix the submenu to push other links down instead of overlapping */
    .submenu {
        position: static;
        box-shadow: none;
        background-color: #111;
        border-top: none;
        margin-top: 10px;
        display: none; /* Keep hidden initially on mobile */
    }
    
    /* On mobile, we show the submenu always to avoid hover issues on touch screens */
    .dropdown .submenu { display: block; }

    .submenu a { padding: 10px 20px; font-size: 0.9rem; color: #aaa; }
}

/* Adjust Logo for very small phones */
@media (max-width: 450px) {
    .logo-text { font-size: 0.9rem; }
    .nav-logo { height: 40px; }
}

/* =========================================
   UI UPGRADE: LIGHT GLASSMORPHISM (BLUE/WHITE)
   ========================================= */

:root {
    --primary-blue: #0A369D; /* Deep Royal/Navy Blue */
    --accent-blue: #4285F4;  /* Bright Sky Blue */
    --text-main: #1e293b;    /* Dark slate for readable text */
    --text-muted: #64748b;   /* Muted slate */
}

/* 1. Dynamic Light Background (Crucial for the glass effect) */
body {
    /* A soft, fluid gradient of light blues and whites */
    background: linear-gradient(135deg, #e2eafc 0%, #f8fafc 40%, #dbeafe 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
}

/* 2. Frosted Blue Header & Dropdowns */
.site-header {
    background: rgba(10, 54, 157, 0.75) !important; /* Semi-transparent Royal Blue */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

.logo-text, .nav-links a, .mobile-menu-toggle {
    color: #FFFFFF !important;
}

.nav-links a:hover {
    color: #bfdbfe !important; /* Very light blue */
}

.submenu {
    background: rgba(10, 54, 157, 0.85) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 3px solid var(--accent-blue) !important;
}

.submenu a { color: #FFFFFF !important; }
.submenu a:hover { background-color: rgba(255, 255, 255, 0.15) !important; }

/* 3. The Light Glass Cards (The Magic) */
.card-dark, .card, .schedule-card, .welcome-card, .hukam-card, 
.academy-container, .class-card, .don-card, .member-card, .info-box, 
.timeline-content, .video-card, .maryada-section, .value-card, 
.services-list, .whatsapp-section, .booking-section, .gallery-category img, .news-card {
    background: rgba(255, 255, 255, 0.6) !important; /* 60% transparent white */
    backdrop-filter: blur(16px); /* Frosted glass blur */
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8) !important; /* Sharp white reflection edge */
    box-shadow: 0 8px 32px 0 rgba(10, 54, 157, 0.08) !important; /* Soft blue depth shadow */
    border-radius: 12px !important;
    color: var(--text-main) !important;
}

/* 4. Text Accents */
.don-card h3, .member-card h3, .info-box h3, .class-card h3, .card h2, 
h1.text-gold, h2.text-gold, .text-gold, .section-title, .video-info h3 {
    color: var(--primary-blue) !important;
    border-bottom-color: rgba(10, 54, 157, 0.1) !important;
}

.prakash-time, .punjabi-text { color: var(--accent-blue) !important; }
p, li, .text-muted, .date-stamp, .schedule-group ul, .schedule-group h4 { color: var(--text-muted) !important; }
.schedule-table td { border-bottom: 1px solid rgba(10, 54, 157, 0.1) !important; }

/* 5. Buttons */
.btn-gold-solid, .btn-submit, .btn-primary, .btn-academy, .filter-btn.active {
    background: var(--primary-blue) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--primary-blue) !important;
    box-shadow: 0 4px 10px rgba(10, 54, 157, 0.2) !important;
}

.btn-gold-solid:hover, .btn-submit:hover, .btn-primary:hover, .btn-academy:hover {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
}

.btn-gold-outline, .btn-secondary, .filter-btn {
    border: 2px solid var(--primary-blue) !important;
    color: var(--primary-blue) !important;
    background: rgba(255, 255, 255, 0.3) !important; /* Slight glass fill */
}

.btn-gold-outline:hover, .filter-btn:hover {
    background: var(--primary-blue) !important;
    color: #FFFFFF !important;
}

/* 6. Light Glass Forms & Inputs */
.custom-form input, .admin-card input, .admin-card textarea, .admin-card select, .custom-form label {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(10, 54, 157, 0.15) !important;
    color: var(--text-main) !important;
}

.custom-form input:focus, .admin-card input:focus, .admin-card textarea:focus, .admin-card select:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15) !important;
    outline: none !important;
}

/* 7. Admin Panel Glassification */
.admin-card {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

.admin-card .section-box {
    background: rgba(248, 250, 252, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.admin-card h2, .admin-card h3, .admin-card label, .admin-card td, .admin-card th { color: var(--text-main) !important; }
.admin-card th { background: rgba(241, 245, 249, 0.7) !important; border-bottom: 2px solid rgba(10, 54, 157, 0.1) !important; }
.header-area { background: rgba(10, 54, 157, 0.8) !important; color: #FFFFFF !important; border-bottom: none !important; }

/* 8. Frosted Deep Blue Footer */
.site-footer {
    background: rgba(10, 54, 157, 0.9) !important; /* Slightly more opaque for readability */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #e2e8f0 !important;
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.footer-col h4, .footer-links a, .footer-link, .highlight-link { color: #FFFFFF !important; }
.footer-links a:hover, .footer-link:hover, .highlight-link:hover { color: #bfdbfe !important; }

.footer-bottom {
    background: rgba(6, 35, 102, 0.95) !important; /* Very dark blue glass */
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.footer-bottom p, .admin-link { color: #94a3b8 !important; }
.admin-link:hover { color: #FFFFFF !important; }