/* =========================================================
   ديوان محافظة صلاح الدين — نظام التصميم
   Navy authority + restrained gold. RTL, Cairo.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    --navy:        #0A2240;
    --navy-2:      #0C284B;
    --navy-3:      #1B3A5F;
    --gold:        #B8945A;
    --gold-soft:   #C9A96E;
    --paper:       #FAF8F4;
    --paper-2:     #F3EEE4;
    --line:        #E4DAC7;
    --ink:         #1F2933;
    --ink-soft:    #4A5568;
    --ink-mute:    #8A8577;
    --white:       #FFFFFF;

    --wrap:        1200px;
    --radius:      8px;
    --shadow-card: 0 1px 3px rgba(10,34,64,0.06), 0 1px 2px rgba(10,34,64,0.04);

    --font:        'Cairo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; font-family: var(--font);
    background: var(--paper); color: var(--ink);
    line-height: 1.75; font-size: 16px; direction: rtl;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Top utility bar */
.topbar { background: var(--navy); color: #C9D2DE; font-size: 12.5px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar a:hover { color: var(--gold); }
.topbar .links { display: flex; gap: 18px; }
.topbar .links a { display: inline-flex; align-items: center; gap: 5px; }

.goldrule { height: 3px; background: var(--gold); }

/* Masthead */
.masthead { background: var(--navy); }
.masthead .wrap { display: flex; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.masthead .emblem { flex-shrink: 0; height: 60px; width: auto; }
.masthead .titles .name { color: var(--white); font-size: 22px; font-weight: 800; line-height: 1.3; }
.masthead .titles .sub  { color: var(--gold); font-size: 12.5px; font-weight: 500; letter-spacing: 1px; margin-top: 2px; }
.masthead .search { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(184,148,90,0.35); border-radius: var(--radius); padding: 8px 12px; }
.masthead .search input { background: transparent; border: 0; outline: 0; color: var(--white); font-family: var(--font); font-size: 13px; width: 150px; }
.masthead .search input::placeholder { color: #9BAAC0; }
.masthead .search button { background: 0; border: 0; color: var(--gold); cursor: pointer; display: flex; }

/* Navigation */
.mainnav { background: var(--navy-2); border-top: 1px solid rgba(184,148,90,0.25); }
.mainnav .wrap { display: flex; padding: 0; }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.mainnav li { position: relative; }
.mainnav > .wrap > ul > li > a { display: block; color: #C9D2DE; font-size: 14px; font-weight: 500; padding: 13px 18px; border-bottom: 3px solid transparent; transition: color .15s; }
.mainnav > .wrap > ul > li > a:hover { color: var(--white); }
.mainnav > .wrap > ul > li.active > a,
.mainnav > .wrap > ul > li:hover > a { color: var(--white); border-bottom-color: var(--gold); }
.mainnav .dropdown { position: absolute; top: 100%; inset-inline-start: 0; min-width: 220px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-card); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s; z-index: 40; }
.mainnav li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mainnav .dropdown a { display: block; color: var(--ink); font-size: 13.5px; padding: 9px 18px; border-inline-start: 3px solid transparent; }
.mainnav .dropdown a:hover { background: var(--paper-2); border-inline-start-color: var(--gold); color: var(--navy); }
.navtoggle { display: none; }

/* News ticker */
.ticker { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.ticker .wrap { display: flex; align-items: center; gap: 14px; height: 44px; }
.ticker .tag { flex-shrink: 0; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 4px; }
.ticker .track { overflow: hidden; flex: 1; }
.ticker .move { display: inline-flex; gap: 48px; white-space: nowrap; animation: ticker-scroll var(--ticker-duration, 40s) linear infinite; }
.ticker:hover .move { animation-play-state: paused; }
.ticker .move a { font-size: 13.5px; color: var(--ink); }
.ticker .move a:hover { color: var(--gold); }
.ticker .move .dot { color: var(--gold); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Section heading */
.section { padding: 40px 0; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy); position: relative; padding-inline-start: 14px; }
.section-head h2::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 4px; background: var(--gold); border-radius: 2px; }
.section-head .more { margin-inline-start: auto; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.section-head .more:hover { color: var(--gold); }

/* Footer */
.footer { background: var(--navy); color: #B9C4D4; margin-top: 48px; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 40px 0 32px; }
.footer h3 { color: var(--white); font-size: 15px; font-weight: 700; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(184,148,90,0.3); }
.footer a:hover { color: var(--gold); }
.footer .links { list-style: none; margin: 0; padding: 0; }
.footer .links li { padding: 5px 0; font-size: 13.5px; }
.footer .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer .brand img { height: 48px; }
.footer .brand .n { color: var(--white); font-weight: 700; font-size: 16px; }
.footer .about { font-size: 13.5px; line-height: 1.9; color: #A3B0C2; }
.footer .social { display: flex; gap: 10px; margin-top: 14px; }
.footer .social a { width: 34px; height: 34px; border: 1px solid rgba(184,148,90,0.4); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.footer .social a:hover { background: var(--gold); color: var(--navy); }
.footer .copy { border-top: 1px solid rgba(255,255,255,0.08); padding: 16px 0; font-size: 12.5px; text-align: center; color: #8494A8; }

/* Responsive */
@media (max-width: 860px) {
    .masthead .search { display: none; }
    .masthead .titles .name { font-size: 18px; }
    .navtoggle { display: flex; align-items: center; gap: 8px; color: #fff; background: 0; border: 0; font-family: var(--font); font-size: 14px; padding: 13px 18px; cursor: pointer; }
    .mainnav > .wrap { flex-direction: column; }
    .mainnav ul { flex-direction: column; width: 100%; display: none; }
    .mainnav ul.open { display: flex; }
    .mainnav .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: var(--navy-3); border-radius: 0; }
    .mainnav .dropdown a { color: #C9D2DE; }
    .footer .cols { grid-template-columns: 1fr; gap: 24px; }
}