/*
Theme Name: Education Portal
Theme URI: https://weblayer.co/
Author: Nidal Seyam
Description: قالب ووردبريس مصمم خصيصاً للموسوعة التعليمية يشمل نظام فلترة متدرج لعرض المقالات حسب الدولة والمرحلة والصف والفصل والمادة ونوع المصدر، مع تصميم مريح وواجهة عربية RTL. يدعم تغيير الألوان والخطوط والشعار من خلال التخصيص، ويعرض أحدث المقالات مع إمكانية تصفح المحتوى بسهولة.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: education-portal
*/

/* جلب خط تاوجوال من جوجل */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700&display=swap');

:root {
    /* يمكن التحكم بهذه المتغيرات من خلال التخصيص */
    --primary-color: #1e375a;
    --secondary-color: #f5f7fa;
    --accent-color: #007acc;
    --text-color: #333333;
    --heading-color: #222222;
    --font-family: 'Tajawal', sans-serif;
    --card-radius: 12px;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* =============================
   UI/UX V2 (Style B)
   - تصميم أكثر تماسكًا (Header / Footer / Cards)
   - مسافات واضحة + عناصر تفاعلية محسّنة
   ============================= */

/* Base */
*, *::before, *::after{box-sizing:border-box}
body{line-height:1.7}
.ep-container{max-width:var(--ep-container,1200px);margin:0 auto;padding:0 16px}

/* Header */
.ep-header{position:relative;z-index:1000;background:linear-gradient(180deg,rgba(30,55,90,.96),rgba(30,55,90,.92));backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.ep-header--sticky{position:sticky;top:0}
.ep-header--sticky{position:sticky;top:0}
.ep-header__inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.ep-brand{display:flex;align-items:center;gap:12px;min-width:180px}
.ep-brand__title{font-size:1.35rem;font-weight:800;color:#fff;text-decoration:none;letter-spacing:.2px}
.ep-brand img{height:42px;width:auto}
.ep-nav{flex:1}
.ep-nav__toggle{display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:10px 12px;line-height:1;cursor:pointer}
.ep-nav__menu{display:flex;gap:10px;justify-content:center;align-items:center;list-style:none;margin:0;padding:0}
.ep-nav__menu a{color:#fff;text-decoration:none;font-weight:700;padding:10px 12px;border-radius:12px;opacity:.92;display:inline-flex;align-items:center}
.ep-nav__menu a:hover{background:rgba(255,255,255,.12);opacity:1}
.ep-nav__menu .current-menu-item > a{background:rgba(255,255,255,.14)}
.ep-header__actions{display:flex;align-items:center;gap:12px}

/* Search */
.ep-search{position:relative;min-width:280px}
.ep-search__form{position:relative}
.ep-search__icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.75;pointer-events:none}
.ep-search__input{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);color:#fff;padding:10px 42px 10px 12px;outline:none}
.ep-search__input::placeholder{color:rgba(255,255,255,.75)}
.ep-search__input:focus{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.16)}

.ajax-search-results{position:absolute;right:0;top:calc(100% + 8px);width:100%;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.10);overflow:hidden;display:none;z-index:1001}
.ajax-search-results li{border-bottom:1px solid rgba(0,0,0,.06)}
.ajax-search-results li:last-child{border-bottom:none}
.ajax-search-results a{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--ep-text);text-decoration:none}
.ajax-search-results a:hover{background:var(--ep-soft)}
.ep-search__thumb{width:44px;height:44px;flex:0 0 44px;border-radius:12px;object-fit:cover;background:rgba(0,0,0,.06)}
.ep-search__title{font-weight:700;line-height:1.35}
.ep-search__all a{justify-content:center;font-weight:800;color:var(--ep-accent)}

/* Footer */
.ep-footer{margin-top:32px;background:linear-gradient(180deg,var(--primary-color),#0b1d33);color:#fff;padding:26px 0 14px}
.ep-footer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ep-footer__title{margin:0 0 10px;font-size:1.1rem}
.ep-footer__text{margin:0;opacity:.92}
.ep-footer__bottom{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);text-align:center;opacity:.92;font-size:.95rem}
.ep-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ep-footer__menu a{color:#fff;opacity:.92}
.ep-footer__menu a:hover{opacity:1;text-decoration:underline}
.ep-footer__ad{margin-bottom:12px}

/* General cards + buttons */
.ep-card,.tax-card,article.post-card,.resource-card,.stage-card,.ep-related-card{border-radius:var(--ep-radius);box-shadow:var(--ep-shadow)}
.btn,.button,input[type="button"],input[type="submit"],button{border-radius:12px}

/* Responsive */
@media (max-width: 992px){
  .ep-search{min-width:220px}
  .ep-footer__grid{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .ep-header__inner{flex-wrap:wrap}
  .ep-nav{order:3;width:100%}
  .ep-nav__toggle{display:inline-flex}
  .ep-nav__menu{display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px;margin-top:10px}
  .ep-nav.is-open .ep-nav__menu{display:flex}
  .ep-search{width:100%;min-width:0}
}

body {
    font-family: var(--font-family);
    background-color: var(--secondary-color);
    color: var(--text-color);
    margin: 0;
    direction: rtl;
}

a {
    color: var(--accent-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

header.site-header {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 1rem;
}

nav.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav.main-navigation ul li {
    display: inline-block;
    margin: 0 0.5rem;
}
nav.main-navigation ul li a {
    color: #ffffff;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
nav.main-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Header search styling */
.header-search input[type="search"] {
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    width: 220px;
    background-color: #fff;
    color: var(--text-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.header-search ul {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-top: none;
    position: absolute;
    right: 0;
    top: 105%;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 99;
    display: none;
}

/* تحسين مظهر مربع البحث وأيقونة البحث */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 1rem;
}
.header-search form {
    position: relative;
    width: 220px;
}
.header-search .search-icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #888;
    pointer-events: none;
}
.header-search .ajax-search-results {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-top: none;
    position: absolute;
    right: 0;
    top: 110%;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    z-index: 99;
    display: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.header-search .ajax-search-results li {
    border-bottom: 1px solid #eee;
}
.header-search .ajax-search-results li a {
    display: block;
    padding: 0.5rem;
    color: var(--text-color);
    text-decoration: none;
}
.header-search .ajax-search-results li a:hover {
    background-color: var(--secondary-color);
}
.header-search ul li {
    border-bottom: 1px solid #eee;
}
.header-search ul li a {
    display: block;
    padding: 0.5rem;
    color: var(--text-color);
    text-decoration: none;
}
.header-search ul li a:hover {
    background-color: var(--secondary-color);
}

header .site-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

nav.main-navigation {
    margin-top: 0.5rem;
}

nav.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

nav.main-navigation li a {
    color: #ffffff;
    font-weight: 600;
}

.filter-form {
    background-color: #ffffff;
    border-radius: var(--card-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--card-shadow);
}

/* When the filter form appears inside a sidebar (e.g., filter-sidebar), make the fields vertical. */
aside .filter-form .filter-row {
    flex-direction: column;
}

/* Filter row styling */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.filter-field select {
    width: 100%;
    padding: 0.6rem 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: #fff;
    color: var(--text-color);
}

.filter-form select {
    margin: 0.5rem 0;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
}

.filter-form input[type="submit"], .filter-form button {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

.filter-form input[type="submit"]:hover, .filter-form button:hover {
    background-color: var(--accent-color);
}

/* Generic button style */
.button, .btn, input[type="button"], input[type="submit"] {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
}
.button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-color: var(--accent-color);
    color: #ffffff;
}

.posts-list {
    padding: 1rem;
    background-color: #ffffff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.posts-list .post-item {
    margin-bottom: 2rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 1rem;
}

.posts-list .post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.posts-list .post-item h2 {
    margin-top: 0;
    font-size: 1.4rem;
    color: var(--heading-color);
}

.posts-list .post-item .post-meta {
    font-size: 0.85rem;
    color: #777777;
}

footer.site-footer {
    background-color: var(--primary-color);
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

/* بطاقات العرض في الصفحة الرئيسية */
.tax-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.tax-card {
    background-color: #ffffff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* شبكة المقالات ذات الصلة: عرض أفقي قابل للتمرير */
.related-posts-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.related-posts-grid .tax-card {
    min-width: 240px;
}

/* Layout for posts grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Responsive layout for single post with sidebar */
@media (max-width: 768px) {
    .single-wrapper {
        flex-direction: column !important;
    }
    .single-sidebar {
        flex: 0 0 100% !important;
        max-width: none !important;
        margin-bottom: 2rem;
    }
    .single-content {
        flex: 1 1 100% !important;
    }
}

article.post-card {
    background-color: #ffffff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

article.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.education-breadcrumbs {
    font-size: 0.85rem;
    color: #666666;
    margin-bottom: 1rem;
}
.education-breadcrumbs a {
    color: var(--accent-color);
    text-decoration: none;
}
.education-breadcrumbs a:hover {
    text-decoration: underline;
}

.tax-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.tax-card img {
    max-width: 80px;
    margin-bottom: 0.5rem;
}

.tax-card .tax-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
}

/* Ajax search results with thumbnails */
.ajax-search-results li a{
  display:flex;
  align-items:center;
  gap:10px;
}
.ajax-search-results .ajax-search-thumb{
  width:34px;
  height:34px;
  object-fit:cover;
  border-radius:8px;
  flex:0 0 34px;
  border:1px solid rgba(0,0,0,.06);
}
.ajax-search-results .ajax-search-item--all a{
  justify-content:center;
  font-weight:700;
  color: var(--accent-color);
}

/* Single polish */
.ep-article__content a{font-weight:700}
.ep-article__content blockquote{
  border-right:4px solid var(--ep-accent);
  background:var(--ep-soft);
  margin:18px 0;
  padding:14px 16px;
  border-radius:14px;
}
.ep-article__content ul, .ep-article__content ol{padding-right:18px}
.ep-article__content h2, .ep-article__content h3{
  scroll-margin-top: 90px;
}
.ep-toc__list li{padding:6px 0}
.ep-toc__list a{
  display:block;
  padding:8px 10px;
  border-radius:12px;
}
.ep-toc__list a:hover{
  background:var(--ep-soft);
}
.ep-toc__item--h3 a{opacity:.9; padding-right:18px}

/* Print */
@media print{
  header.site-header, footer.site-footer, .ep-sidebar, .ep-reading-progress {display:none !important;}
  .ep-grid{grid-template-columns:1fr !important;}
  .ep-article{box-shadow:none !important; border:none !important;}
}


/* ===== Single UI/UX C ===== */
.epx-container{max-width:1200px;margin:0 auto;padding:0 16px;}
.epx-main{padding:18px 0 50px;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--secondary-color) 60%);}

.epx-hero{position:relative; padding:28px 0 18px; margin-bottom:10px;}
.epx-hero__bg{position:absolute; inset:0; overflow:hidden;}
.epx-hero__img{width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: saturate(1.05) contrast(1.05);}
.epx-hero__overlay{position:absolute; inset:0;
  background:radial-gradient(60% 60% at 70% 20%, rgba(0,0,0,.10), rgba(0,0,0,.55)),
             linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.65));
}
.epx-hero__inner{position:relative; color:#fff; padding-top:200px;}
.epx-breadcrumbs{opacity:.92;font-size:.85rem;margin-bottom:10px}
.epx-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.epx-chip{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  font-size:.85rem;
}
.epx-chip--accent{background:rgba(255,255,255,.20)}
.epx-hero__title{margin:0; font-size:2.3rem; line-height:1.25; max-width:950px;}
.epx-hero__meta{margin-top:10px; opacity:.92; display:flex; flex-wrap:wrap; gap:10px; font-size:.95rem}
.epx-hero__actions{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}

.epx-btn{border-radius:14px; padding:10px 14px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10); color:#fff; cursor:pointer; text-decoration:none; font-weight:700;
}
.epx-btn--primary{background:var(--accent-color); border-color:transparent}
.epx-btn--ghost:hover{background:rgba(255,255,255,.16)}

.epx-layout{display:grid; grid-template-columns: 1fr 320px; gap:18px; align-items:start}
@media (max-width: 992px){
  .epx-hero__img{height:320px}
  .epx-hero__inner{padding-top:160px}
  .epx-layout{grid-template-columns:1fr}
}

.epx-paper{
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);
  padding:22px;
  border:1px solid rgba(0,0,0,.06);
}
.epx-paper__content{
  font-size:1.10rem;
  line-height:1.95;
  color:var(--text-color);
}
.epx-paper__content img{max-width:100%; height:auto; border-radius:14px}
.epx-paper__content h2{margin-top:28px}
.epx-paper__content h3{margin-top:18px}
.epx-paper__footer{margin-top:18px; padding-top:14px; border-top:1px solid rgba(0,0,0,.06)}
.epx-nav{display:flex; justify-content:space-between; gap:12px}
.epx-nav a{font-weight:800}

.epx-side{position:sticky; top:16px; display:flex; flex-direction:column; gap:14px}
@media (max-width: 992px){ .epx-side{position:static} }

.epx-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
  overflow:hidden;
}
.epx-card__head{padding:14px 14px 0}
.epx-card__title{margin:0; font-size:1rem; color:var(--heading-color)}
.epx-card__sub{margin:6px 0 0; color:#6b7280; font-size:.9rem}
.epx-card__body{padding:14px}

.epx-share{display:flex; flex-direction:column; gap:8px}
.epx-share__btn{
  display:flex; justify-content:center; align-items:center;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  background:var(--secondary-color);
  color:var(--text-color);
  font-weight:800;
  text-decoration:none;
}
.epx-share__btn:hover{transform:translateY(-1px)}
.epx-miniurl input{
  width:100%; margin-top:10px; padding:10px 12px; border-radius:14px;
  border:1px solid rgba(0,0,0,.06); background:#f7f8fb;
}

.epx-block{margin-top:18px}
.epx-comments{background:#fff; border-radius:18px; padding:18px; border:1px solid rgba(0,0,0,.06); box-shadow:0 14px 40px rgba(0,0,0,.06)}

@media print{
  header.site-header, footer.site-footer, .epx-side, .epx-hero__actions {display:none !important;}
  .epx-layout{grid-template-columns:1fr !important;}
  .epx-paper{box-shadow:none !important; border:none !important;}
}