/*
Theme Name: School WP Theme FA (Customizer)
Author: ChatGPT
Description: Persian RTL theme for an elementary boys' school. Includes Customizer section "School Contact" with Primary Color, Hero texts, and contact links.
Version: 1.1.0
Text Domain: school-wp-theme-fa
License: GPL-2.0-or-later
*/
:root{
  --primary:#1357d1;
  --primary-600:#0f47ab;
  --muted:#667085;
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:#e6e8ee;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans Arabic',Tahoma,Arial; margin:0; background:var(--bg); color:#0f1728; direction:rtl}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-600)}
.container{max-width:1200px; margin:0 auto; padding:1rem}
.header{background:var(--card); border-bottom:1px solid var(--border)}
.header-top{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.75rem}
.brand .title{margin:0; font-size:1.4rem}
.brand .desc{margin:.2rem 0 0; color:var(--muted); font-size:.95rem}
.nav{display:flex; flex-wrap:wrap; gap:.5rem; padding-bottom:.75rem}
.nav a{background:#eef2ff; padding:.5rem .75rem; border-radius:.6rem}
.ctas{display:flex; gap:.5rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.6rem .9rem; border-radius:.6rem; border:1px solid var(--primary); color:#fff; background:var(--primary); font-weight:600}
.btn.outline{background:transparent; color:var(--primary)}
.hero{background:linear-gradient(180deg,#ebf2ff,transparent); padding:2rem 0}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem}
.hero h1{margin:0 0 .5rem 0; font-size:2rem}
.badges{display:flex; gap:.5rem; margin:.75rem 0}
.badge{background:#e8f0ff; color:#0b3aa3; padding:.25rem .5rem; border-radius:999px; font-size:.85rem}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; box-shadow:0 1px 0 rgba(0,0,0,.04)}
.card h3{margin-top:0}
.section{margin:2rem 0}
.section h2{margin:0 0 .75rem 0; font-size:1.4rem}
.post-meta{color:var(--muted); font-size:.9rem}
.footer{background:var(--card); border-top:1px solid var(--border); margin-top:2rem}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.2rem 0}
.notice{background:#fff7e6; border:1px dashed #ffd27a; padding:.75rem; border-radius:.75rem}
.list{display:flex; flex-direction:column; gap:.75rem}
.list a{display:block}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.avatar{width:90px; height:90px; border-radius:50%; object-fit:cover; border:2px solid var(--border)}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem}
.gallery img{width:100%; height:140px; object-fit:cover; border-radius:.6rem; border:1px solid var(--border)}
.pagination{display:flex; gap:.5rem; margin-top:1rem}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0d12; --card:#0f1219; --border:#1a2030; --muted:#9aa3b2}
  body{color:#e8edf5}
  .nav a{background:#121a2b}
  .badge{background:#0f1a33; color:#c7d7ff}
}