/* =========================================================
   موقع تعليمي مغربي — استايل كامل (RTL-ready)
   ألوان وهوية موحّدة للهيدر + الصفحة الرئيسية + الفوتر
   ========================================================= */

/* 0) خطوط وهوية */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap");

:root{
  --edu-green:#2e7d32;      /* أساسي */
  --edu-blue:#1976d2;       /* مساعد */
  --edu-orange:#ef6c00;     /* تفاعل */
  --edu-teal:#009688;       /* لمسار */
  --edu-purple:#673ab7;     /* للطلبة */
  --edu-grey:#6b7280;       /* للأخبار */
  --text:#0f172a;
  --muted:#6b7280;
  --bg:#ffffff;

  --radius-lg:16px;
  --radius-md:12px;
  --shadow-sm:0 6px 18px rgba(15,23,42,.03);
  --shadow-md:0 12px 30px rgba(0,0,0,.06);
}

/* 1) أساسيات عامة */
html{scroll-behavior:smooth}
html[dir="rtl"] body{direction:rtl}
*{box-sizing:border-box}
body{
  margin:0;background:#fff;color:var(--text);
  font-family:"Almarai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container,.mx-container{width:min(1160px, 92%);margin-inline:auto}

/* 2) شريط علوي صغير (اختياري) */
.topbar{
  background: var(--edu-green);
  color:#fff; font-weight:800; font-size:.95rem;
  padding:10px 0;
}
.topbar a{color:#fff}
.topbar a:hover{color:var(--edu-orange)}

/* 3) الهيدر */
.site-header{
  background:#fff; position:relative;
  box-shadow: var(--shadow-sm);
  border-block-end: 0.1px solid var(--edu-blue); /* رُقّقناه من 3px إلى 2px */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.site-branding{display:flex; align-items:center; gap:14px}
.site-branding img{max-height:56px; height:auto}

.primary-nav{display:flex; align-items:center; gap:18px}
.primary-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.primary-nav a{
  color:#fff; font-weight:800; padding:10px 14px; border-radius:10px;
}

/* شريط خلفية أخضر للقائمة الرئيسية */
.header-bar{
  background: var(--edu-green);
}
.header-bar .container{
  display:flex; align-items:center; justify-content:space-between;
}

/* ألوان عناصر القائمة */
.menu-primary > li > a{ color:#fff; }
.menu-primary > li > a:hover,
.menu-primary > li.current-menu-item > a{
  color: var(--edu-orange);
}

/* 3.1) أيقونة الهامبرغر (3 خطوط برتقالية) */
.hamburger{
  width:42px; height:42px; border-radius:10px; border:2px solid rgba(239,108,0,.35);
  display:none; place-items:center; background:#fff;
}
.hamburger .lines{ position:relative; width:22px; height:2px; background:var(--edu-orange); }
.hamburger .lines::before,
.hamburger .lines::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--edu-orange);
}
.hamburger .lines::before{ top:-7px }
.hamburger .lines::after{ top:7px }

/* 3.2) قائمة الموبايل (تفتح من اليمين في RTL) */
@media (max-width: 992px){
  .header-inner{padding:8px 0}
  .site-branding{justify-content:center; margin-inline:auto}
  .hamburger{display:grid; order:3}             /* زر على اليمين */
  .header-bar .container{position:relative}
  .primary-nav{position:fixed; inset-block:0; inset-inline-end:-100%;
    width:min(90vw, 360px); background:#fff; box-shadow: -24px 0 40px rgba(0,0,0,.12);
    display:block; padding:22px; transition: inset-inline-end .25s ease;
  }
  .primary-nav.open{ inset-inline-end:0 }
  .primary-nav ul{ flex-direction:column; gap:10px }
  .primary-nav a{ color:var(--text); padding:12px 10px; border-radius:10px; display:block; }
  .primary-nav a:hover{ background:rgba(25,118,210,.08); color:var(--edu-blue) }
}

/* 4) HERO + البحث */
.mx-hero{
  background: linear-gradient(180deg, rgba(27,94,32,.08) 0%, rgba(27,94,32,0) 100%);
  padding-block: 28px 24px;
  border-block-end: 3px solid var(--edu-blue);
}
.mx-hero__inner{ display:grid; grid-template-columns: 1.3fr .7fr; gap:24px; align-items:center; }
.mx-hero__title{ margin:0 0 8px; font-size: clamp(1.5rem, 3.2vw, 2.2rem); color:var(--text); font-weight:900; line-height:1.3 }
.mx-hero__desc{ margin:0 0 16px; color:var(--muted); line-height:1.9 }
.mx-hero__art{ justify-self:center }

/* البحث */
.mx-search{ display:flex; gap:10px; align-items:stretch }
.mx-search__input{
  flex:1; border:1px solid #e5e7eb; border-radius:12px; padding-inline:16px; background:#fff;
  height:56px; font-size:1rem;
}
.mx-search__btn{
  border:0; border-radius:12px; background: var(--edu-orange); color:#fff; cursor:pointer;
  min-width:120px; height:56px; font-weight:900;
}

/* تحسين قوي للموبايل */
@media (max-width: 920px){ .mx-hero__inner{ grid-template-columns:1fr } .mx-hero__art{display:none} .mx-search{flex-direction:column} }
@media (max-width: 768px){
  .mx-search__input{ height:62px !important; font-size:1.12rem; padding-inline:18px }
  .mx-search__btn{ height:62px !important; font-size:1.12rem; width:100% }
  .mx-search__input::placeholder{ font-size:1.02rem }
}
@media (max-width: 540px){
  .mx-search__input{ height:68px !important; font-size:1.18rem; padding-inline:20px }
  .mx-search__btn{ height:68px !important; font-size:1.18rem }
}

/* روابط سريعة */
.mx-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.mx-quick__link{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  background:#f3f4f6; color:var(--text); font-weight:700; font-size:.95rem; border:1px solid #e5e7eb;
}
.mx-quick__link:hover{ border-color:var(--edu-blue) }

/* 5) أقسام الصفحة */
.mx-sections .mx-block{
  background:#fff; border:1px solid #e8edf3; border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); margin-block:14px 18px;
}
.mx-block__title{
  margin:0 0 10px; font-size: clamp(1.2rem, 2.8vw, 1.6rem); font-weight:900; color:var(--text);
  position:relative;
}
.mx-block__title::after{
  content:""; display:block; height:4px; width:72px; border-radius:999px; margin-top:8px;
  background:linear-gradient(90deg, var(--edu-green), var(--edu-blue) 70%, var(--edu-orange));
}
.mx-block__desc{ margin:0; color:#475569; line-height:1.9 }

/* تلوين وصف الأقسام (عناوين فرعية) */
.mx-sections .mx-block:nth-of-type(1) .mx-block__desc{ color:#27664b } /* مستويات */
.mx-sections .mx-block:nth-of-type(2) .mx-block__desc{ color:#9c4a05 } /* التلميذ */
.mx-sections .mx-block:nth-of-type(3) .mx-block__desc{ color:#0c4a8a } /* الأستاذ */
.mx-sections .mx-block:nth-of-type(4) .mx-block__desc{ color:#066a63 } /* مسار */
.mx-sections .mx-block:nth-of-type(5) .mx-block__desc{ color:#4a2aa6 } /* الطلبة */
.mx-sections .mx-block:nth-of-type(6) .mx-block__desc{ color:#374151 } /* الأخبار */

/* الشبكات (افتراضي) */
.mx-levels{ margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.mx-grid{   margin-top:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px }

/* ضبط الاستجابة حسب طلبك:
   - المستويات: عمودية في المتوسطة والصغيرة
   - بقية الأقسام: 2 في السطر (متوسطة)، 1 في السطر (صغيرة) */
@media (max-width:1100px){
  .mx-grid{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:992px){
  .mx-levels{ grid-template-columns:1fr !important; }             /* عمودي */
  .mx-grid{   grid-template-columns:repeat(2,1fr) !important; }   /* زرين */
}
@media (max-width:560px){
  .mx-levels, .mx-grid{ grid-template-columns:1fr !important; }   /* زر واحد */
  .mx-grid .mx-mini{ width:100%; }
}

/* 5.1) بطاقات المستويات — بارزة + ألوان منفصلة + أيقونات + انقلاب ألوان عند التحويم */
.mx-block--levels{
  position:relative; overflow:hidden; padding:28px; border-color:rgba(46,125,50,.22);
  background:
    radial-gradient(1200px 300px at 100% -20%, rgba(25,118,210,.06), transparent 60%),
    radial-gradient(1000px 280px at -10% 110%, rgba(46,125,50,.08), transparent 60%),
    #fff;
  box-shadow:0 12px 30px rgba(46,125,50,.08);
}
.mx-block--levels .mx-block__title{ font-size: clamp(1.4rem, 3.5vw, 1.9rem) }
.mx-block--levels .mx-block__title::after{ background:linear-gradient(90deg, var(--edu-green), #2e7d32 60%, var(--edu-blue)) }

.mx-block--levels .mx-levels .mx-card{
  display:flex; align-items:flex-start; gap:14px; padding:24px 20px; min-height:120px;
  border-radius:18px; background:linear-gradient(180deg,#fff 0%, #f9fcfa 100%);
  position:relative; overflow:hidden; text-decoration:none !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.mx-block--levels .mx-levels .mx-card *{ text-decoration:none !important }

/* أيقونة */
.mx-card__icon{ flex-shrink:0; width:50px; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;
}
.mx-card__body{ flex:1; display:flex; flex-direction:column }
.mx-block--levels .mx-levels .mx-card__title{ font-size:1.15rem; font-weight:900; margin-bottom:6px; transition:color .2s }
.mx-block--levels .mx-levels .mx-card__desc{ font-size:.95rem; line-height:1.7; transition:color .2s }

/* سهم */
.mx-block--levels .mx-levels .mx-card::after{
  content:"›"; font-size:22px; line-height:1; position:absolute; inset-inline-end:14px; inset-block-end:12px;
  transition:transform .15s ease, color .2s ease;
}
html[dir="rtl"] .mx-block--levels .mx-levels .mx-card::after{ transform:scaleX(-1) }

/* ألوان منفصلة: (1) أخضر (2) أزرق (3) برتقالي */
.mx-block--levels .mx-levels .mx-card:nth-child(1){ border:2px solid rgba(46,125,50,.28); box-shadow:0 12px 28px rgba(46,125,50,.15) }
.mx-block--levels .mx-levels .mx-card:nth-child(1) .mx-card__icon{ background:rgba(46,125,50,.10); color:var(--edu-green) }
.mx-block--levels .mx-levels .mx-card:nth-child(1) .mx-card__title{ color:#14532d } .mx-block--levels .mx-levels .mx-card:nth-child(1) .mx-card__desc{ color:#2e7d32 }
.mx-block--levels .mx-levels .mx-card:nth-child(1)::after{ color:var(--edu-green) }
.mx-block--levels .mx-levels .mx-card:nth-child(1):hover{
  background:var(--edu-green); border-color:var(--edu-green); box-shadow:0 16px 32px rgba(46,125,50,.25); transform:translateY(-5px)
}
.mx-block--levels .mx-levels .mx-card:nth-child(1):hover .mx-card__title,
.mx-block--levels .mx-levels .mx-card:nth-child(1):hover .mx-card__desc{ color:#fff }
.mx-block--levels .mx-levels .mx-card:nth-child(1):hover .mx-card__icon{ background:#fff; color:var(--edu-green) }
.mx-block--levels .mx-levels .mx-card:nth-child(1):hover::after{ color:#fff; transform:translateX(-6px) scaleX(-1) }
html[dir="ltr"] .mx-block--levels .mx-levels .mx-card:nth-child(1):hover::after{ transform:translateX(6px) }

.mx-block--levels .mx-levels .mx-card:nth-child(2){ border:2px solid rgba(25,118,210,.28); box-shadow:0 12px 28px rgba(25,118,210,.15) }
.mx-block--levels .mx-levels .mx-card:nth-child(2) .mx-card__icon{ background:rgba(25,118,210,.10); color:var(--edu-blue) }
.mx-block--levels .mx-levels .mx-card:nth-child(2) .mx-card__title{ color:#0c3c71 } .mx-block--levels .mx-levels .mx-card:nth-child(2) .mx-card__desc{ color:#155b9a }
.mx-block--levels .mx-levels .mx-card:nth-child(2)::after{ color:var(--edu-blue) }
.mx-block--levels .mx-levels .mx-card:nth-child(2):hover{
  background:var(--edu-blue); border-color:var(--edu-blue); box-shadow:0 16px 32px rgba(25,118,210,.25); transform:translateY(-5px)
}
.mx-block--levels .mx-levels .mx-card:nth-child(2):hover .mx-card__title,
.mx-block--levels .mx-levels .mx-card:nth-child(2):hover .mx-card__desc{ color:#fff }
.mx-block--levels .mx-levels .mx-card:nth-child(2):hover .mx-card__icon{ background:#fff; color:var(--edu-blue) }
.mx-block--levels .mx-levels .mx-card:nth-child(2):hover::after{ color:#fff; transform:translateX(-6px) scaleX(-1) }
html[dir="ltr"] .mx-block--levels .mx-levels .mx-card:nth-child(2):hover::after{ transform:translateX(6px) }

.mx-block--levels .mx-levels .mx-card:nth-child(3){ border:2px solid rgba(239,108,0,.28); box-shadow:0 12px 28px rgba(239,108,0,.15) }
.mx-block--levels .mx-levels .mx-card:nth-child(3) .mx-card__icon{ background:rgba(239,108,0,.10); color:var(--edu-orange) }
.mx-block--levels .mx-levels .mx-card:nth-child(3) .mx-card__title{ color:#5b2b00 } .mx-block--levels .mx-levels .mx-card:nth-child(3) .mx-card__desc{ color:#7a3a00 }
.mx-block--levels .mx-levels .mx-card:nth-child(3)::after{ color:var(--edu-orange) }
.mx-block--levels .mx-levels .mx-card:nth-child(3):hover{
  background:var(--edu-orange); border-color:var(--edu-orange); box-shadow:0 16px 32px rgba(239,108,0,.25); transform:translateY(-5px)
}
.mx-block--levels .mx-levels .mx-card:nth-child(3):hover .mx-card__title,
.mx-block--levels .mx-levels .mx-card:nth-child(3):hover .mx-card__desc{ color:#fff }
.mx-block--levels .mx-levels .mx-card:nth-child(3):hover .mx-card__icon{ background:#fff; color:var(--edu-orange) }
.mx-block--levels .mx-levels .mx-card:nth-child(3):hover::after{ color:#fff; transform:translateX(-6px) scaleX(-1) }
html[dir="ltr"] .mx-block--levels .mx-levels .mx-card:nth-child(3):hover::after{ transform:translateX(6px) }

/* 5.2) أزرار أقسام أخرى — ممتلئة افتراضياً + قلب عند hover */
.mx-grid .mx-mini{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:12px 16px; min-height:58px; border-radius:14px; font-weight:800;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  border:1px solid transparent;
}
/* التلميذ */
.mx-sections .mx-block:nth-of-type(2) .mx-mini{ background:var(--edu-orange); color:#fff; border-color:var(--edu-orange) }
.mx-sections .mx-block:nth-of-type(2) .mx-mini:hover{ background:rgba(239,108,0,.10); color:#5b2b00; border-color:rgba(239,108,0,.25); transform:translateY(-2px) }
/* الأستاذ */
.mx-sections .mx-block:nth-of-type(3) .mx-mini{ background:var(--edu-blue); color:#fff; border-color:var(--edu-blue) }
.mx-sections .mx-block:nth-of-type(3) .mx-mini:hover{ background:rgba(25,118,210,.10); color:#0c3c71; border-color:rgba(25,118,210,.25); transform:translateY(-2px) }
/* مسار */
.mx-sections .mx-block:nth-of-type(4) .mx-mini{ background:var(--edu-teal); color:#fff; border-color:var(--edu-teal) }
.mx-sections .mx-block:nth-of-type(4) .mx-mini:hover{ background:rgba(0,150,136,.10); color:#014b48; border-color:rgba(0,150,136,.25); transform:translateY(-2px) }
/* الطلبة */
.mx-sections .mx-block:nth-of-type(5) .mx-mini{ background:var(--edu-purple); color:#fff; border-color:var(--edu-purple) }
.mx-sections .mx-block:nth-of-type(5) .mx-mini:hover{ background:rgba(103,58,183,.10); color:#311b92; border-color:rgba(103,58,183,.25); transform:translateY(-2px) }
/* الأخبار */
.mx-sections .mx-block:nth-of-type(6) .mx-mini{ background:var(--edu-grey); color:#fff; border-color:var(--edu-grey) }
.mx-sections .mx-block:nth-of-type(6) .mx-mini:hover{ background:rgba(107,114,128,.08); color:#1f2937; border-color:rgba(107,114,128,.25); transform:translateY(-2px) }

/* 5.3) الأخبار (قائمة) */
.mx-news{ margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.mx-news__item{ border:1px solid #e8edf3; border-radius:12px; background:#fff; padding:12px 14px; display:flex; flex-direction:column; gap:6px }
.mx-news__title{ font-weight:800; line-height:1.6 }
.mx-news__title:hover{ color:var(--edu-orange) }
.mx-news__date{ color:#9aa3af; font-size:.85rem }
.mx-more-wrap{ margin-top:10px }
.mx-more{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:900;
  background:#f3f4f6; color:var(--text); border:1px solid #e5e7eb }
.mx-more:hover{ border-color:var(--edu-blue) }
@media (max-width:1100px){ .mx-news{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .mx-news{ grid-template-columns:1fr } }

/* 6) الفوتر */
.site-footer{
  background:#0f172a; color:#cbd5e1; margin-top:24px; border-top:4px solid var(--edu-blue);
}
.footer-top{ padding:28px 0 }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:18px }
.footer-title{ color:#fff; font-weight:900; margin:0 0 10px }
.site-desc{ color:#93a3b8; line-height:1.9; margin:0 }

.footer-menu{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.footer-menu a{ color:#e5e7eb; padding:6px 0; display:block; border-radius:8px }
.footer-menu a:hover{ color:#fff; background:rgba(25,118,210,.1) }

.footer-bottom{
  border-top:1px solid rgba(148,163,184,.18);
  padding:12px 0; font-size:.95rem; color:#94a3b8;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-bottom a{ color:#cbd5e1 } .footer-bottom a:hover{ color:#fff }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center }
}