/* style.css - 2025 City Nursing Institute (Final) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Serif+Bengali:wght@400;700&display=swap');

:root {
    --primary: #00695c;      /* Deep Teal (Medical Standard) */
    --primary-light: #e0f2f1;
    --secondary: #0288d1;    /* Professional Blue */
    --accent: #ff6f00;       /* Warning/Highlight Orange */
    --alert: #d32f2f;        /* Urgent Red */
    --text-main: #263238;
    --text-light: #546e7a;
    --bg-light: #f4f7f6;     
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; scroll-behavior: smooth; }
/* Update this block at the top of style.css */
html, body {
    overflow-x: hidden; /* Forces anything outside the screen to be cut off */
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-light); 
    color: var(--text-main); 
}

/* --- 1. Header & Navigation --- */
header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    height: 80px;
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

nav {
    max-width: 1300px; margin: 0 auto; padding: 0 20px;
    height: 100%; display: flex; justify-content: space-between; align-items: center;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 50px; }
.logo-text span { display: block; font-weight: 700; color: var(--primary); font-size: 1.1rem; text-transform: uppercase; white-space: nowrap; }
.logo-text small { color: var(--text-light); font-weight: 600; letter-spacing: 0.5px; font-size: 0.75rem; }

/* Desktop Menu */
.nav-links { list-style: none; display: flex; align-items: center; gap: 25px; }
.nav-links a.nav-item { 
    text-decoration: none; color: var(--text-main); font-weight: 500; font-size: 0.9rem; position: relative; transition: 0.3s; 
}
.nav-links a.nav-item::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--secondary); transition: width 0.3s;
}
.nav-links a.nav-item:hover::after, .nav-links a.nav-item.active::after { width: 100%; }
.nav-links a.nav-item.active { color: var(--secondary); font-weight: 600; }

/* Buttons */
.btn-group { display: flex; gap: 15px; margin-left: 20px; }
.btn {
    padding: 8px 20px; border-radius: 50px; font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: all 0.3s ease;
}
.btn-portal { background: var(--secondary); color: white; box-shadow: 0 4px 15px rgba(2, 136, 209, 0.3); }
.btn-portal:hover { background: #01579b; transform: translateY(-2px); }
.btn-staff { border: 2px solid var(--primary); color: var(--primary); background: transparent; }
.btn-staff:hover { background: var(--primary); color: white; }

/* Mobile Menu */
.menu-toggle { display: none; font-size: 1.8rem; color: var(--text-main); cursor: pointer; }
@media (max-width: 1024px) {
    .logo-text span { font-size: 0.9rem; } /* Smaller font on medium screens */
    .nav-links { gap: 15px; }
}
/* --- MOBILE SPECIFIC --- */
@media (max-width: 900px) {
    .nav-links {
        position: fixed; 
        top: 80px; 
        right: -100%; /* Pushes it off screen */
        width: 80%; 
        height: calc(100vh - 80px); 
        background: white; 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 40px;
        transition: right 0.4s ease-in-out, visibility 0.4s; /* Animate visibility too */
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        
        /* FIX 1: Hide it completely when closed so you can't scroll to it */
        visibility: hidden; 
        
        /* FIX 2: Allow scrolling inside the menu if items are too tall */
        overflow-y: auto; 
    }
    
    .nav-links.active { 
        right: 0; 
        /* FIX 3: Only make it visible when the class is added */
        visibility: visible; 
    }
    
    .btn-group { flex-direction: column; width: 100%; margin: 20px 0 40px 0; }
    .btn { width: 100%; text-align: center; }
    .menu-toggle { display: block; }
    
    /* --- Mobile Dropdown Logic --- */
    .dropdown {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .dropdown-content {
        position: static; /* Pushes content down instead of floating */
        box-shadow: none;
        border: none;
        background: #f9f9f9;
        width: 100%;
        padding-left: 20px;
        display: none; /* Hidden by default */
    }
    
    /* Show dropdown on Tap/Hover */
    .dropdown:hover .dropdown-content, 
    .dropdown:active .dropdown-content,
    .dropdown:focus-within .dropdown-content {
        display: block;
    }
    
}
/* --- 2. Hero Slider --- */
.hero-slider { position: relative; width: 100%; height: 80vh; overflow: hidden; }
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease;
}
.slide.active { opacity: 1; transform: scale(1.05); transition: opacity 1.5s ease, transform 6s linear; }
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,60,60,0.2), rgba(0,40,40,0.6));
}

/* --- 3. Main Split Container --- */
.main-container {
    max-width: 1200px; margin: -120px auto 50px auto; padding: 0 20px;
    position: relative; z-index: 10; display: grid; grid-template-columns: 2fr 1fr; gap: 30px;
}

/* Welcome Card */
.welcome-card {
    background: white; padding: 40px; border-radius: 15px; box-shadow: var(--shadow);
    border-top: 5px solid var(--primary);
}
.blink-badge {
    background: var(--alert); color: white; padding: 8px 18px; border-radius: 20px; 
    font-size: 0.9rem; font-weight: 700; display: inline-block; margin-bottom: 15px;
    animation: pulseRed 2s infinite; box-shadow: 0 0 10px rgba(211, 47, 47, 0.5);
}
.welcome-card h1 { font-size: 2.5rem; color: var(--text-main); line-height: 1.2; margin-bottom: 10px; }
.welcome-card h1 span { color: var(--secondary); }
.tagline-bn {
    font-family: 'Noto Serif Bengali', serif; font-size: 1.6rem; color: var(--primary);
    margin: 20px 0; font-style: italic; border-left: 4px solid var(--accent); padding-left: 15px;
}

/* Vertical Notice Board */
.notice-board {
    background: white; border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; height: 450px;
    display: flex; flex-direction: column; border-top: 5px solid var(--accent);
}
.notice-header { background: var(--primary); color: white; padding: 15px 20px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.notice-scroll-area { padding: 0 20px; flex: 1; overflow: hidden; position: relative; }
.marquee-vertical { display: flex; flex-direction: column; gap: 15px; padding-top: 20px; animation: scrollUp 15s linear infinite; }
.notice-scroll-area:hover .marquee-vertical { animation-play-state: paused; }
.notice-item { border-bottom: 1px solid #eee; padding-bottom: 10px; }
.notice-date { font-size: 0.75rem; color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: 4px; font-weight: bold; display: inline-block; margin-bottom: 5px; }
.notice-item p { font-size: 0.9rem; font-weight: 500; color: var(--text-main); cursor: pointer; transition: 0.2s; }
.notice-item p:hover { color: var(--secondary); text-decoration: underline; }

/* --- 4. Marketing / About Section --- */
.marketing-section { background: white; padding: 80px 20px; text-align: center; }
.marketing-content { max-width: 800px; margin: 0 auto; }
.marketing-content h2 { color: var(--primary); font-size: 2.2rem; margin-bottom: 20px; }
.marketing-content p { color: var(--text-light); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.8; }

/* --- 5. Events Section --- */
.section-title { text-align: center; margin: 60px 0 40px; }
.section-title h2 { color: var(--primary); font-size: 2.2rem; margin-bottom: 10px; }
.section-title p { color: var(--text-light); }

.events-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; max-width: 1200px; margin: 0 auto 60px; padding: 0 20px;
}
.event-card {
    background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: 0.3s; cursor: pointer;
}
.event-card:hover { transform: translateY(-5px); }
.event-img { width: 100%; height: 200px; object-fit: cover; }
.event-details { padding: 20px; }
.event-date { color: var(--accent); font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; display: block; }
.event-details h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-main); }
.event-details p { font-size: 0.9rem; color: var(--text-light); line-height: 1.5; }

/* --- 6. Leadership Section --- */
.leadership-section { background: var(--primary-light); padding: 80px 20px; margin-bottom: 60px; }
.leader-container { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.leader-card { display: flex; align-items: center; gap: 20px; background: white; padding: 30px; border-radius: 15px; box-shadow: var(--shadow); }
.leader-img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--secondary); object-fit: cover; }
.leader-info h3 { color: var(--primary); font-size: 1.2rem; margin-bottom: 5px; }
.leader-info span { color: var(--text-light); font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 10px; }
.leader-info p { font-size: 0.9rem; color: #555; font-style: italic; }

/* --- 7. Info Grid (Facilities) --- */
.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; max-width: 1200px; margin: 0 auto 80px; padding: 0 20px;
}
.info-box {
    background: white; padding: 40px 25px; border-radius: 12px; text-align: center;
    border: 1px solid #eee; transition: 0.3s; position: relative; overflow: hidden;
}
.info-box:hover { transform: translateY(-10px); box-shadow: var(--shadow); border-color: transparent; }
.info-box i { font-size: 3rem; color: var(--primary); margin-bottom: 20px; }
.info-box h3 { margin-bottom: 10px; font-size: 1.3rem; color: var(--text-main); }
.info-box p { color: var(--text-light); font-size: 0.95rem; }

/* --- 8. Footer --- */
footer {
    background: #004d40; 
    color: #e0f2f1; 
    padding: 70px 20px 40px; /* Reduced bottom padding since copyright is separate */
}

.footer-content {
    max-width: 1200px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 1.2fr 0.8fr; /* Middle column (Map) is slightly wider */
    gap: 50px; 
    align-items: start;
}
.footer-col h3 { color: white; margin-bottom: 25px; font-size: 1.3rem; position: relative; display: inline-block; }
.footer-col h3::after { content: ''; display: block; width: 50px; height: 2px; background: var(--accent); margin-top: 10px; }
.footer-col p, .footer-col li { font-size: 0.95rem; margin-bottom: 15px; line-height: 1.6; list-style: none; }
.footer-col a { color: #b2dfdb; text-decoration: none; transition: 0.3s; }
.footer-col a:hover { color: var(--white); padding-left: 5px; }
.contact-icon { color: var(--accent); margin-right: 12px; width: 20px; }

/* Animations */
@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); } }
@keyframes scrollUp { 0% { transform: translateY(100%); } 100% { transform: translateY(-150%); } }

/* Mobile */
@media (max-width: 768px) {
    .main-container { grid-template-columns: 1fr; margin-top: -50px; }
    .hero-slider { height: 50vh; }
    .leader-container { grid-template-columns: 1fr; gap: 30px; }
    .leader-card { flex-direction: column; text-align: center; }
}

/* Specific styling for the map column on mobile */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* Stack columns on phone */
        text-align: center;
    }
}

/* New Copyright Bar Styles */
.copyright-bar {
    background: #00251a; /* Darker shade of teal/blackish */
    color: #90a4ae;
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    border-top: 1px solid #003d33;
}

/* --- DROPDOWN MENU STYLES (Add to style.css) --- */

/* 1. Container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 2. The Dropdown Box (Hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 1000;
    border-top: 4px solid var(--secondary); /* Blue top border */
    border-radius: 0 0 8px 8px;
    top: 100%; /* Pushes it exactly below the link */
    left: 0;
}

/* 3. Links inside Dropdown */
.dropdown-content a {
    color: var(--text-main);
    padding: 14px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    text-align: left;
    border-bottom: 1px solid #f1f1f1;
    transition: 0.2s;
}

/* Last link no border */
.dropdown-content a:last-child { border-bottom: none; }

/* Hover Effects */
.dropdown-content a:hover {
    background-color: #f4fcfc;
    color: var(--primary);
    padding-left: 25px; /* Slide effect */
}

/* Show Dropdown on Hover (Desktop) */
.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Highlight the Parent Link when Hovered */
.dropdown:hover > .nav-item {
    color: var(--secondary);
}

/* --- MOBILE SPECIFIC --- */
@media (max-width: 900px) {
    .dropdown {
        width: 100%;
    }
    
    /* Make the parent link look like a normal mobile link */
    .dropdown > .nav-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* The Dropdown Box on Mobile */
    .dropdown-content {
        position: relative;
        box-shadow: none;
        border-top: none;
        top: 0;
        width: 100%;
        background-color: #f9f9f9; /* Slightly darker bg for nested items */
        padding-left: 20px; /* Indent sub-items */
    }
    
    .dropdown-content a {
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        color: #555;
    }
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}