/*
Theme Name: Smart School Management
Author: M Hasan Siam
Description: Responsive WordPress Theme for Schools/Madrasas. All colors & texts editable.
Version: 1.1
*/

body {
    margin: 0; 
    padding: 0; 
    font-family: 'SolaimanLipi', 'Open Sans', Arial, sans-serif; 
    overflow-x: hidden; 
    color: #333;
}

.container {
    max-width: 1200px; 
    margin: auto; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 15px;
}

/* Desktop Icon Circle */
.icon-circle {
    color: #fff; 
    padding: 8px; 
    border-radius: 50%; 
    font-size: 14px; 
    margin-right: 5px;
}

/* Top Bar */
.top-bar {
    padding: 10px 0; 
    font-size: 13px; 
    color: #333; 
}
.top-phone { display: flex; align-items: center; }
.top-date { text-align: center; }
.top-links { display: flex; gap: 15px; align-items: center; }
.top-links a {
    text-decoration: none; 
    color: #333; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    gap: 5px;
}

.mobile-only { display: none !important; }

/* Header Banner */
.header-banner img { width: 100%; height: auto; display: block; }

/* Notice Section */
.notice-section {
    padding: 5px 0; 
    border-top: 2px solid #fff; 
    border-bottom: 2px solid #fff;
}
.notice-label {
    background: #1f7a65; 
    color: #fff; 
    padding: 5px 15px; 
    font-weight: bold; 
    border-radius: 3px;
}
.notice-marquee { flex-grow: 1; padding: 0 10px; }
.notice-marquee a {
    text-decoration: none; 
    color: #000; 
    font-weight: bold; 
    margin-right: 30px;
}
.notice-marquee a i { font-size: 10px; color: #1f7a65; }

/* Main Nav (Desktop) */
.main-nav {
    padding: 8px 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000;
}
.navbar { display: flex; align-items: center; }
.nav-links {
    list-style: none; 
    display: flex; 
    padding: 0; 
    margin: 0;
}
.nav-links li a {
    color: #fff; 
    text-decoration: none; 
    padding: 10px 15px; 
    font-weight: bold; 
    border-right: 1px solid rgba(255,255,255,0.2); 
    transition: 0.3s;
}
.result-btn {
    background: #fff; 
    color: #1f7a65; 
    padding: 8px 20px; 
    border-radius: 5px; 
    font-weight: bold; 
    text-decoration: none; 
    font-size: 15px;
}
.menu-toggle { display: none; }

/* Grid Layouts */
.notice-section .container { display: flex; }
.notice-btn { width: 10%; font-weight: bold; }
.notice-scroll { width: 90%; }
.main-nav .container { display: flex; }
.nav-menu-col { width: 90%; }
.nav-result-col { width: 10%; text-align: right; }

/* =========================================
   Responsive Design
========================================= */
@media (max-width: 992px) {
    .container { max-width: 95%; }
    .nav-links li a { padding: 10px 10px; font-size: 14px; }
}

@media (max-width: 768px) {
    /* Top Bar */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    .top-bar { padding: 8px 0; border-bottom: 2px solid #fff; }
    .top-bar .container { display: grid; grid-template-columns: 75% 25%; }
    .top-date { text-align: left; }
    .top-links { flex-direction: row-reverse; gap: 10px; }
    .top-links a { color: #fff; }

    /* Notice Section Mobile */
    .notice-section .container { flex-direction: column; }
    .notice-btn, .notice-scroll { width: 100%; text-align: center; }
    .notice-label { display: none; }

    /* Main Nav Mobile */
    .main-nav { padding: 10px 0; position: static; }
    .main-nav .container { position: relative; }
    .menu-toggle {
        display: flex; 
        align-items: center; 
        color: #fff; 
        font-size: 20px; 
        font-weight: bold; 
        gap: 5px; 
        cursor: pointer;
    }
    .nav-links {
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        background: #1f7a65; 
        width: 100%; 
        z-index: 999; 
        flex-direction: column; 
        border-top: 2px solid #fff;
    }
    .nav-links.active { display: flex; }
    .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .nav-links li a { padding: 15px; border-right: none; }
    .result-btn { padding: 8px 15px; font-size: 14px; margin-top: 10px; text-align: center; }

    /* Nav & Result stacked */
    .nav-menu-col, .nav-result-col { width: 100%; text-align: center; }
}