/*
Theme Name: MarocSocial Lite
Theme URI: https://marocsocial.com
Author: MarocSocial
Description: قالب خفيف سريع ومحسن للسيو.
Version: 1.0
Text Domain: marocsocial-lite
*/

/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.7;color:#111;background:#fff}
a{color:inherit}
img{max-width:100%;height:auto}
.container{max-width:980px;margin:0 auto;padding:16px}

/* Header */
.site-header{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{font-weight:800;text-decoration:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.nav a{text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}

/* Footer */
.site-footer{border-top:1px solid #eee;margin-top:28px;padding:18px 0;opacity:.9}

/* Posts */
.card{padding:14px 0;border-bottom:1px solid #f1f1f1}
.post-title{margin:0 0 6px}
.excerpt{margin:0;opacity:.85}

/* Home */
.hero{padding:34px 0}
.hero h1{font-size:34px;line-height:1.2;margin:0 0 10px}
.hero p{max-width:720px;margin:0 0 16px;opacity:.85}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#111;color:#fff;text-decoration:none}
.btn-outline{background:transparent;color:#111;border:1px solid #111}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.box{border:1px solid #eee;border-radius:12px;padding:14px}
.box h2{margin:0 0 6px;font-size:18px}

.latest h2{margin:28px 0 12px}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.posts .card{border:1px solid #f1f1f1;border-radius:12px;padding:14px}
.posts .post-title{margin:0 0 8px;font-size:18px}

/* Responsive */
@media (max-width:768px){
  .grid{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .hero h1{font-size:26px}
}

.header-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.menu a{text-decoration:none;opacity:.9}
.menu a:hover{opacity:1}
.btn-small{padding:8px 12px;border-radius:10px}
@media (max-width:768px){
  .header-row{flex-wrap:wrap;justify-content:center}
}

body{
  direction: rtl;
  text-align: right;
}

.header-row{
  flex-direction: row-reverse;
}

.menu{
  flex-direction: row-reverse;
}

.hero-actions{
  justify-content: flex-start;
}

.hero-platform{padding:40px 0 18px}
.search{margin:14px 0}
.search input{width:100%;max-width:720px;padding:12px 14px;border:1px solid #e7e7e7;border-radius:12px;font-size:16px}

.cats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.chip{border:1px solid #e7e7e7;background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer}
.chip.is-active{background:#111;color:#fff;border-color:#111}

.services{padding:10px 0 30px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-card{border:1px solid #eee;border-radius:14px;padding:14px;background:#fff}
.service-top{display:flex;gap:12px;align-items:flex-start}
.service-icon{width:42px;height:42px;border-radius:12px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.service-title{margin:0 0 4px;font-size:18px}
.service-desc{margin:0;opacity:.85}
.service-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.disclaimer{margin:18px 0 0;opacity:.8;font-size:14px}

@media (max-width:900px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .services-grid{grid-template-columns:1fr}
}

.service-header{padding:28px 0}
.service-subtitle{opacity:.85;margin:6px 0 14px}
.service-section{margin:22px 0;padding:16px;border:1px solid #eee;border-radius:12px;background:#fff}
.service-steps{margin:10px 0 0;padding-right:18px}
.faq-item{border-top:1px solid #eee;padding:10px 0}
.faq-item:first-child{border-top:0}
.faq-item summary{cursor:pointer;font-weight:700}
.faq-answer{opacity:.9;margin-top:8px;line-height:1.8}

.service-hero-icon{
  width:70px;
  height:70px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-size:28px;
  font-weight:700;
  margin-bottom:20px;
}

.service-fr-title{
  font-size:18px;
  opacity:.8;
  margin-bottom:10px;
}

.service-meta-desc{
  max-width:720px;
  margin:10px auto 20px;
  line-height:1.7;
  opacity:.9;
}