/* ملف: announcements.css */

/* =========================================
   متغيرات الألوان الأساسية (Variables)
   ========================================= */
:root {
    --white: #ffffff;
    --secondary-color: #007bff; /* يمكنك تعديله للون الثانوي لموقعك */
    --transition: all 0.3s ease;
}

/* =========================================
   الإعدادات العامة
   ========================================= */
body { 
    font-family: 'Cairo', sans-serif; 
    background-color: #f4f7f6; 
    margin: 0; 
    padding: 0; 
}

/* =========================================
   تنسيقات القائمة العلوية (Navbar)
   ========================================= */
.site-header { background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.logo { display: flex; align-items: center; text-decoration: none; gap: 10px; }
.logo-text { font-size: 1.5rem; font-weight: 900; color: #004a8c; letter-spacing: 1px; }

.nav-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; align-items: center; }
.nav-links li a { text-decoration: none; color: #333; font-weight: 600; font-size: 0.95rem; transition: color 0.3s; padding: 5px 10px; }
.nav-links li a:hover, .nav-links li a.active { color: #0056b3; }

/* أزرار القائمة المخصصة */
.btn-decisions { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; }
.btn-nav { background-color: #0056b3; color: white !important; padding: 8px 15px !important; border-radius: 5px; }
.btn-nav:hover { background-color: #004a8c; }
.staff-login-btn { background-color: #dc3545; color: white !important; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; padding: 0 !important; }
.staff-login-btn:hover { background-color: #c82333; }

.menu-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: #004a8c; cursor: pointer; }

/* --- التجاوب مع شاشات الهواتف المحمولة (Responsive) --- */
@media (max-width: 992px) {
    .menu-toggle { display: block; }
    
    .nav-links {
        display: none; /* مخفية افتراضياً في الجوال */
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 20px;
        gap: 15px;
        text-align: center;
    }
    
    .nav-links.show { display: flex; } /* تظهر عند الضغط على الزر */
    .nav-links li { width: 100%; }
    .nav-links li a { display: block; padding: 10px; border-bottom: 1px solid #f0f0f0; }
    .staff-login-btn { width: 100%; border-radius: 5px; margin-top: 10px; padding: 10px !important; }
}

/* =========================================
   تصميم ترويسة الصفحة (Page Header)
   ========================================= */
.page-header { background: linear-gradient(135deg, #004a8c, #007bff); color: white; padding: 60px 20px; text-align: center; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.page-header h1 { margin: 0; font-size: 2.5rem; font-weight: 700; }
.page-header p { margin-top: 10px; font-size: 1.1rem; opacity: 0.9; }

/* =========================================
   حاوية وتصميم بطاقات الإعلانات
   ========================================= */
.announcements-container { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }

.ad-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; border: 1px solid #eee; }
.ad-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.ad-image { width: 100%; height: 200px; object-fit: cover; border-bottom: 3px solid #0056b3; }
.ad-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.ad-date { font-size: 0.85rem; color: #6c757d; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.ad-title { font-size: 1.3rem; font-weight: 700; color: #333; margin: 0 0 15px; line-height: 1.4; }
.ad-excerpt { color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-btn { background: white; color: #0056b3; border: 2px solid #0056b3; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: 600; font-family: 'Cairo'; transition: all 0.3s ease; text-align: center; width: 100%; }
.ad-btn:hover { background: #0056b3; color: white; }

/* =========================================
   تصميم النافذة المنبثقة (Modal)
   ========================================= */
.public-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); }
.public-modal-content { background-color: #fff; margin: 5% auto; padding: 0; border-radius: 12px; max-width: 800px; width: 90%; position: relative; animation: slideIn 0.3s ease-out; overflow: hidden; }
@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close-public-modal { position: absolute; top: 15px; left: 20px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; z-index: 10; transition: color 0.3s; background: rgba(255,255,255,0.8); width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 38px; }
.close-public-modal:hover { color: #dc3545; }
.modal-cover-image { width:100%; height:300px; background-size:cover; background-position:center; display:none; }
.modal-body { padding: 30px; }
.modal-title { font-size: 1.8rem; color: #004a8c; margin-top: 0; margin-bottom: 10px; line-height: 1.4; }
.modal-text { font-size: 1.1rem; line-height: 1.8; color: #444; white-space: pre-wrap; margin-bottom: 30px; }
.modal-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.modal-gallery img { width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.3s; }
.modal-gallery img:hover { transform: scale(1.02); }

/* حالة التحميل أو عدم وجود إعلانات */
.status-message { text-align: center; grid-column: 1 / -1; padding: 50px; font-size: 1.2rem; color: #666; }

/* =========================================
   7. الفوتر
   ========================================= */
footer { background-color: #0a0e14; color: #a0aab5; padding: 70px 0 20px; font-size: 0.95rem; }
.footer-content {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px;
    margin-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 50px;
}
.footer-logo { display: flex; align-items: center; gap: 15px; color: var(--white); font-size: 1.8rem; font-weight: 900; margin-bottom: 25px; text-decoration: none;}
.footer-col h3 { color: var(--white); margin-bottom: 25px; font-size: 1.2rem; font-weight: 800; position: relative; padding-bottom: 10px;}
.footer-col h3::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 3px; background: var(--secondary-color); border-radius: 2px;}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 15px; }
.footer-links a { text-decoration: none; color: inherit; transition: var(--transition); display: inline-block;}
.footer-links a:hover { color: var(--secondary-color); padding-right: 8px; }

.social-links { display: flex; gap: 15px; }
.social-icon {
    width: 45px; height: 45px; background: rgba(255, 255, 255, 0.05); color: #fff;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.2rem; transition: var(--transition); text-decoration: none;
}
.social-icon:hover { transform: translateY(-5px); background: var(--secondary-color); }
.copyright { text-align: center; font-size: 0.95rem; color: #666;}

/* تجاوب الفوتر مع الشاشات الصغيرة */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Responsive hardening */
html { overflow-x: clip; }
body { min-width: 320px; overflow-x: hidden; }
.navbar > nav, .footer-content > *, .ad-card { min-width: 0; }
.ad-title, .ad-excerpt, .modal-text, .footer-col { overflow-wrap: anywhere; }

@media (min-width: 1201px) and (max-width: 1480px) {
    .container { max-width: none; width: 98%; padding-inline: 12px; }
    .nav-links { gap: 7px; }
    .nav-links li a { padding-inline: 7px; font-size: .82rem; }
}

@media (max-width: 1200px) {
    .site-header { position: sticky; }
    .navbar { padding: 9px 0; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: #f3f6fa; }
    .nav-links {
        display: none; position: fixed; top: 70px; right: 10px; left: 10px;
        width: auto; max-height: calc(100dvh - 82px); overflow-y: auto;
        flex-direction: column; align-items: stretch; gap: 4px; padding: 12px;
        border: 1px solid #e6ebf1; border-radius: 14px; background: #fff;
        box-shadow: 0 18px 45px rgba(0,0,0,.18); z-index: 1100;
    }
    .nav-links.show, .nav-links.active { display: flex; }
    .nav-links li, .nav-links li a { width: 100%; }
    .nav-links li a { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 0; padding: 10px 12px; border-radius: 8px; }
    .staff-login-btn { height: 46px; border-radius: 8px; }
    .announcements-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .container { width: 100%; padding-inline: 16px; }
    .logo img { width: auto; height: 40px; }
    .logo-text { font-size: 1.2rem; }
    .nav-links { top: 64px; right: 8px; left: 8px; }
    .page-header { padding: 42px 16px; margin-bottom: 28px; }
    .page-header h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
    .announcements-container { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 14px 45px; }
    .public-modal { padding: 10px; }
    .public-modal-content { width: 100%; margin: 2vh auto; max-height: 96dvh; overflow-y: auto; }
    .modal-cover-image { height: 220px; }
    .modal-body { padding: 22px 16px; }
    .modal-title { padding-left: 42px; font-size: 1.45rem; }
    .modal-gallery { grid-template-columns: minmax(0, 1fr); }
    .footer-content { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .footer-logo, .social-links { justify-content: center; }
}