/*
 * CSS for Veera Narasimha Yuva Committee - Homepage (index.css)
 * NOTE: Includes new styling for the Deeds Gallery thumbnails and Lightbox support.
 * NEW: Added styles for the scrolling Marquee/Notice Board.
 * UPDATED: Added styles for the new HTML5 Video Thumbnails and Custom Modal.
 */

/* General Styles */
body {
    font-family: 'Teko', sans-serif; /* Strong, clear font */
    margin: 0;
    /* Soft Ochre background */
    background: #fff8e6;
    color: #333;
    line-height: 1.6;
}

/* Container Utility (for general spacing consistency) */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Header & Navigation --- */
header {
    /* Rich Saffron/Gold header with a shadow */
    background: #ffcc33; 
    color: #000;
    padding: 15px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Stronger shadow for depth */
}

.nav-container {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2.2em; /* Larger logo */
    margin: 0;
    color: #a30000; /* Deep Crimson for name */
}

nav {
    display: flex;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: #000;
    margin: 0 10px;
    font-weight: 500;
    font-size: 1.1em;
    padding: 5px 0;
    transition: color 0.3s ease;
}

nav a.active, nav a:hover {
    color: #a30000; /* Crimson on hover */
}

/* Login Button Styling */
.login-btn {
    background: #a30000; 
    color: #fff !important; 
    padding: 8px 15px;
    border-radius: 5px; /* Angular corners for strength */
    margin-left: 20px; 
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

.login-btn:hover {
    background: #cc0000; /* Brighter Crimson on hover */
}

/*
 * ==========================================================
 * NOTICE BOARD / MARQUEE STYLES
 * ==========================================================
 */
#noticeBoard {
    /* Use the primary saffron color for high visibility */
    background-color: #ffcc33; 
    height: 40px; 
    overflow: hidden; /* CRITICAL: Hides content outside the boundary */
    position: relative;
    margin: 0; 
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) inset; /* Subtle inner shadow */
}

#marqueeContent {
    height: 100%;
    width: 100%; 
    /* Centers the text vertically */
    display: flex; 
    align-items: center; 
    white-space: nowrap; /* CRITICAL: Keeps all notices on one line */
    font-size: 1.5em; /* Large font for visibility */
    color: #a30000; /* Deep Crimson text color */
    font-weight: 700;
    font-family: 'Teko', sans-serif;
    position: absolute;
    /* The initial left position and animation will be managed by JavaScript */
    left: 100%; 
}

#marqueeContent span {
    /* Ensures space between notices */
    padding-right: 150px; 
}


/* --- Hero Section: BACKGROUND IMAGE IMPLEMENTATION --- */
.hero {
    background-image: url('https://i.ibb.co/JNTSMKN/Whats-App-Image-2025-10-11-at-00-02-48-b6ea475f.jpg'); /* Lord Narasimha Image */
    background-size: cover; /* Essential: Ensures image covers the full area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    min-height: 60vh; /* Ensure it has enough height to display well */
    position: relative; /* Needed for the overlay below */
    padding: 100px 20px;
    text-align: center;
}

/* OPTIONAL: Semi-transparent overlay for text readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay (adjust opacity 0.1 to 0.7) */
    z-index: 1;
}

.hero-content {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    position: relative; /* Lifts content above the overlay */
    z-index: 2;
}

.hero h1 {
    font-size: 3.4em; /* Command font size */
    color: #fff; /* Changed to white for contrast */
    margin-bottom: 15px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Text shadow for clarity */
}

.hero p {
    font-size: 1.5em;
    color: #f0f0f0; /* Light color for contrast */
    margin-bottom: 30px;
    font-weight: 400;
    font-family: sans-serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Text shadow for clarity */
}

.hero .btn {
    /* Primary action button in contrasting Crimson */
    display: inline-block;
    background: #cc0000;
    color: #fff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.3em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: background 0.3s ease, transform 0.2s;
}

.hero .btn:hover {
    background: #a30000;
    transform: translateY(-2px);
}

/* --- About & Good Deeds Section Headings --- */
.about, .good-deeds {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto;
    background: #fff8e6;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
}

.about h2, .good-deeds h2 {
    color: #cc0000; /* Crimson Heading */
    font-size: 2.6em;
    margin-bottom: 10px;
    border-bottom: 3px solid #ffde7d; /* Gold underline */
    padding-bottom: 5px;
}

/* --- Features Section (Core Pillars) --- */
.features {
    background: #ffde7d; /* Light gold band for features */
    padding: 50px 20px;
    /* FIX: Center cards horizontally and allow wrapping */
    justify-content: center; 
    align-items: flex-start; 
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    text-align: center; /* Ensure the section title is centered */
}

/* FIX: Styling the "Our Core Pillars" Title */
.features h2 {
    /* Ensure the title uses the full width above the cards */
    width: 100%; 
    font-size: 3em; /* BIGGER FONT SIZE for impact */
    color: #a30000; 
    margin-bottom: 30px; /* Increased separation from cards */
}

.feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    flex-basis: 300px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    min-height: 220px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center; 
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.feature-card i {
    font-size: 3.5em;
    color: #a30000; /* Crimson Icon color */
    margin-bottom: 15px;
}

.feature-card h3 {
    color: #000;
    font-size: 2.2em; 
    margin-top: 0;
    margin-bottom: 10px;
}

.feature-card p {
    color: #444;
    font-size: 1.1em; 
    font-family: sans-serif; 
}

/* --- Good Deeds Section --- */
.good-deeds {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto;
    text-align: center;
    padding: 40px; 
    background: #fff8e6; 
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.good-deeds h2 {
    color: #cc0000;
    font-size: 2.6em;
    margin-bottom: 10px;
    border-bottom: 3px solid #ffde7d; /* Gold underline */
    padding-bottom: 5px;
}
.good-deeds p {
    font-size: 1.1em;
    color: #444;
    margin-bottom: 30px;
    font-family: sans-serif;
}

/* Deeds Gallery Grid */
.deeds-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

/* Individual Deed Item Styling (Thumbnail Card) */
.deed-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s;
    /* Added flex to ensure layout consistency */
    display: flex;
    flex-direction: column;
    
    position: relative; 
    /* 🟢 FIX: Allow the card height to be determined by its content (media + title) */
    height: auto; 
    cursor: pointer;
}
.deed-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Thumbnail Image/Video Styling (CRITICAL for size compression) */
.deed-item img, .deed-item video {
    width: 100%;
    /* 🟢 FIX: Set a fixed height for the media only, creating space for the title below */
    height: 150px; 
    object-fit: cover; /* Ensures media fills the area without distortion */
    display: block;
}

/* Hide controls on the grid video thumbnails to allow only looping */
.deed-item video::-webkit-media-controls { 
    display:none !important; 
}
.deed-item video { 
    pointer-events: none; /* Prevents accidental clicks triggering default controls */
}

/* P tag underneath the media */
.deed-item p {
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
    margin: 15px 10px;
    text-align: center;
    font-family: sans-serif;
}

/*
 * ==========================================================
 * NEW: CUSTOM VIDEO MODAL STYLES (UPDATED FOR YOUTUBE IFRAME)
 * ==========================================================
 */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Dark backdrop */
    display: none; /* Hidden by default - IMPORTANT */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Highest priority to cover everything */
}
.video-container {
    position: relative;
    width: 90%;
    max-width: 800px; 
    background: #000;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(163, 0, 0, 0.5); /* Crimson glow for focus */
}
.close-btn {
    position: fixed; /* Fixed position relative to viewport */
    top: 20px;
    right: 40px;
    color: #ffcc33; /* Saffron close button */
    font-size: 3em;
    cursor: pointer;
    z-index: 10000;
    text-shadow: 0 0 5px #000;
}
/* 🟢 NEW: Styling for the YouTube Iframe Wrapper to maintain 16:9 ratio */
.video-container #iframeWrapper {
    /* Standard 16:9 Aspect Ratio container */
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9/16 * 100) */
    overflow: hidden; /* Ensures nothing spills out */
}

.video-container #youtubePlayer {
    /* Make the iframe fill the container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Ensures no border on the iframe */
}


/* --- Call to Action (CTA) --- */
.cta {
    background: #ffcc33;
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 0;
}

.cta h2 {
    color: #333;
    font-size: 2.4em;
}

.cta .btn {
    /* Matching the Hero CTA style */
    display: inline-block;
    background: #cc0000;
    color: #fff;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.3em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: background 0.3s ease, transform 0.2s;
}

/* --- Footer --- */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 1em;
    font-family: sans-serif;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
    }

    nav {
        margin-top: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav a {
        margin: 5px 10px;
    }

    .logo {
        font-size: 1.8em;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.5em;
    }
    
    .features h2 {
        font-size: 2.4em; /* Smaller title on mobile */
    }

    .features, .about, .good-deeds {
        width: 100%;
        padding: 20px 10px;
    }

    .feature-card {
        flex-basis: 100%;
    }
    
    .deed-item {
        /* Adjusted the height for mobile to match the 150px image + title space */
        height: auto; 
    }
    
    .close-btn {
        right: 20px;
    }
    
    /* 🟢 NEW: Ensure the modal title is readable on small screens */
    .video-container #videoTitle {
        font-size: 1.2em;
    }
}
/*
 * ==========================================================
 * FINAL SIMPLELIGHTBOX POSITIONING & STYLE OVERRIDE
 * (The image-only lightbox is still functional for image deeds)
 * ==========================================================
 */

/* 1. Backdrop (sl-overlay): Ensures dark screen background */
.sl-overlay {
    background: rgba(0, 0, 0, 0.9) !important; 
    z-index: 9998 !important; 
}

/* 2. Wrapper (sl-wrapper): Centers the image container on the screen */
.sl-wrapper {
    /* CRITICAL: Use Flexbox to center everything vertically and horizontally */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 40px !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 3. Image Container (sl-image): Style, Center, and Glow */
.sl-image {
    /* CRITICAL FIX: Give the container a black background to match the video modal */
    background: #000 !important; 
    position: relative !important; 
    box-shadow: 0 0 30px rgba(163, 0, 0, 0.5); /* Crimson glow */
    border-radius: 8px;
    padding: 10px; /* Space for the glow/border */
    
    /* Reset SimpleLightbox's default positioning for perfect centering */
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    
    display: flex; /* Helps center the image inside */
    align-items: center;
    justify-content: center;
}
.sl-image img {
    max-width: 100%;
    max-height: 100%;
}


/* 4. Close Button (sl-close): Move to the top-right corner of the image container */
.sl-close {
    position: fixed !important; 
    top: 50px !important; /* Fixed distance from the top */
    right: 50px !important; /* Fixed distance from the right */
    
    /* Style Overrides */
    color: #ffcc33 !important; 
    font-size: 3em !important;
    text-shadow: 0 0 5px #000 !important;
    
    width: auto !important;
    height: auto !important;
}

/* 5. Navigation Arrows (sl-prev, sl-next): Keep on the browser edges */
.sl-prev, .sl-next {
    position: fixed !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    
    color: #ffcc33 !important;
    font-size: 4em !important;
}

/* Specific Arrow Positions */
.sl-prev {
    left: 10px !important; 
}
.sl-next {
    right: 10px !important;
}

/* 6. Caption Style: Centered below the image */
.sl-caption {
    position: absolute !important;
    bottom: 0 !important; /* Move caption to the bottom of the viewport */
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.5em !important;
    background: none !important;
    width: 80% !important;
}

/* Hide the image counter (1/2) that may interfere with the layout */
.sl-counter {
    display: none !important; 
}

/* Transparency Section Styling */
.transparency-section h2 {
    color: #cc0000;
    font-size: 2.6em;
    text-align: center;
    border-bottom: 3px solid #ffde7d;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.stat-card-public {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    flex-basis: 280px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-top: 5px solid #ffcc33;
}

.stat-card-public i {
    font-size: 2.5em;
    color: #a30000;
    margin-bottom: 10px;
}

.stat-number {
    font-size: 2.5em;
    color: #2e7d32; /* Green for money */
    font-weight: 700;
}

.btn-outline {
    display: inline-block;
    border: 2px solid #a30000;
    color: #a30000;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: #a30000;
    color: #fff;
}

/* Live Pulse Indicator */
.live-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 0.45em; 
    vertical-align: middle;
    margin-left: 8px;
    background: rgba(163, 0, 0, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    color: #a30000;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-weight: bold;
}

.dot {
    height: 7px;
    width: 7px;
    background-color: #ff0000;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.6; }
    100% { transform: scale(0.9); opacity: 1; }
}
#nav-user-profile {
    display: none; /* JavaScript will change this to 'flex' */
    align-items: center;
    gap: 15px; /* Adds space between the Dashboard text, Photo, and Logout button */
    flex-wrap: nowrap; /* Prevents buttons from jumping to a new line */
}

#nav-admin-text-link {
    white-space: nowrap; /* Prevents "Admin Dashboard" from splitting into two lines */
}