/*
  Theme Name:   Jannah
  Theme URI:    http://jannah.tielabs.com/
  Description:  Beautiful, Powerful & Flexible WordPress Theme for News, Magazine and Blog websites.
  Author:       TieLabs
  Author URI:   https://tielabs.com/
  Version:      7.1.0
  License:      license purchased
  License URI:  http://themeforest.net/licenses/regular_extended
  Tags:         two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
  Text Domain:  jannah
  Tested up to: 6.4
  Requires at least: 5.0
*/

/* ===== GPX3 Article — Styles (Title above hero) ===== */
:root{
  --panel-bg: rgba(17,28,56,.75);
  --ink:#e9f2ff; --ink-strong:#fff; --muted:#9fb3c8;
  --brand:#24c1ff; --brand-2:#4ae1ff; --ring:rgba(36,193,255,.45);
  --line:rgba(120,170,220,.28); --soft:rgba(255,255,255,.06);
  --radius:18px; --shadow:0 10px 28px rgba(0,0,0,.35);
  --fs-ttl:1.05rem; --lh-ttl:1.35;
  --img2lines: calc(2 * var(--fs-ttl) * var(--lh-ttl));
}

.gpx3-wrap{ color:var(--ink) }
.gpx3-card{
  position:relative; background:var(--panel-bg); border:1.5px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; margin:14px 0;
  backdrop-filter:saturate(140%) blur(3px); overflow:hidden;
}

/* Breadcrumb */
.gpx3-bc{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.gpx3-bc-a{ color:#d6eeff; text-decoration:none; padding:6px 10px; border-radius:10px; background:var(--soft); border:1.5px solid var(--line); font-weight:800 }
.gpx3-bc-a:hover{ background:rgba(36,193,255,.12); color:#fff }
.gpx3-bc-s{ color:#7fa6c4 }

/* Meta */
.gpx3-meta-row{display:flex; align-items:center; justify-content:space-between; gap:16px; direction:rtl}
.gpx3-meta-author,.gpx3-meta-cat{display:flex; align-items:center; gap:10px}
.gpx3-meta-l{color:var(--muted); font-size:.95rem}
.gpx3-meta-v{font-weight:800; color:var(--ink-strong)}
.gpx3-meta-badge{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(36,193,255,.14); border:1.5px solid var(--line); color:#eaffff; text-decoration:none; font-weight:800 }
.gpx3-meta-badge:hover{ background:rgba(36,193,255,.22) }

/* Hero image */
.gpx3-hero{padding:0}
.gpx3-hero-f{
  position:relative; border:1.5px solid var(--line);
  border-radius:calc(var(--radius) + 2px); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  aspect-ratio:16/9; min-height:260px;
}
.gpx3-hero-f img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transform:scale(1.035); transition:opacity .35s ease, transform .35s ease;
}
.gpx3-hero-f.gpx3-shown img, .gpx3-hero-f img.gpx3-loaded{ opacity:1; transform:scale(1) }

.gpx3-cam{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:26px; color:#cfeeff;
  background:linear-gradient(180deg, rgba(24,44,88,.55), rgba(14,24,44,.55));
}
.gpx3-hero-f.gpx3-shown .gpx3-cam{ display:none !important }

.gpx3-hero-badge{
  position:absolute; top:10px; inset-inline-start:10px;
  background:linear-gradient(90deg, rgba(36,193,255,.95), rgba(74,225,255,.95));
  color:#001629; padding:6px 10px; border-radius:10px; font-size:.86rem; font-weight:900;
  box-shadow:0 6px 16px rgba(0,0,0,.35); z-index:2;
}

/* المحتوى الأبيض */
.gpx3-content{ background:#fff !important; color:#1b2430; border:1px solid #e8edf3; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.05); padding:18px 20px }
.gpx3-content p{margin:0 0 1em; line-height:1.85; color:#1a1a1a}
.gpx3-content ul, .gpx3-content ol{margin:0 0 1.1em 1.4em; color:#1a1a1a}
.gpx3-content li{margin:.25em 0}
.gpx3-content img{max-width:100%; height:auto; border-radius:10px}
/* روابط واضحة على أبيض */
.gpx3-content a{ color:#003366; text-decoration:none; border-bottom:2px solid #3399ff; font-weight:600; transition: color .25s ease, border-color .25s ease }
.gpx3-content a:hover{ color:#3399ff; border-bottom-color:#003366 }
/* عناوين داخل المحتوى */
.gpx3-content h2,.gpx3-content h3,.gpx3-content h4{
  position:relative; margin:1.2em 0 .8em; color:#0c223a;
  line-height:1.35; font-weight:800; padding:10px 14px 12px;
  background:#f9fbfe; border:1px solid #d9e6f7; border-radius:12px; box-shadow:0 4px 12px rgba(5,25,55,.05)
}
.gpx3-content h2::before,.gpx3-content h3::before,.gpx3-content h4::before{
  content:""; position:absolute; inset-inline-start:10px; top:10px; width:6px; height:calc(100% - 20px); border-radius:6px; background:linear-gradient(180deg,#24c1ff,#4ae1ff)
}
.gpx3-content h2::after,.gpx3-content h3::after,.gpx3-content h4::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:linear-gradient(90deg,#b7dfff,#9fd7ff); border-radius:2px; opacity:.85
}
.gpx3-content h2{font-size:1.45rem}
.gpx3-content h3{font-size:1.25rem}
.gpx3-content h4{font-size:1.1rem}

/* الوسوم */
.gpx3-tags-w{display:flex; gap:8px; flex-wrap:wrap}
.gpx3-tag{ background:rgba(36,193,255,.12); border:1.5px solid var(--line); color:#0de; text-decoration:none; padding:6px 10px; border-radius:999px; font-size:.92rem; font-weight:800 }
.gpx3-tag:hover{ background:rgba(74,225,255,.18) }

/* الأقسام المرتبطة */
.gpx3-h{margin:0 0 10px; font-size:1.05rem; color:#e9f6ff}
.gpx3-h-lg{font-size:1.18rem}
.gpx3-cats-w{display:flex; gap:10px; flex-wrap:wrap}
.gpx3-cat{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1.5px solid var(--line); color:#e7f5ff; text-decoration:none; font-weight:800 }
.gpx3-cat:hover{ background:rgba(36,193,255,.12); color:#fff }

/* مشاركة */
.gpx3-share{display:flex; gap:10px; flex-direction:column}
.gpx3-share-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.gpx3-share-btn{ --size:42px; display:inline-grid; place-items:center; width:var(--size); height:var(--size); border-radius:50%; border:1.5px solid var(--line); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; text-decoration:none; transition:transform .12s, background .12s, border-color .12s }
.gpx3-share-btn:hover{ transform:translateY(-1px); background:rgba(36,193,255,.18); border-color:rgba(74,225,255,.35) }
.gpx3-share-btn svg{width:22px; height:22px; fill:currentColor; display:block}

/* قد تشاهد أيضًا */
.gpx3-hl{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.gpx3-hl-a{ position:relative; display:block; background:rgba(255,255,255,.06); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; color:#e8f6ff; text-decoration:none; font-size:1.06rem; font-weight:800; transition:transform .12s, box-shadow .12s, background .12s }
.gpx3-hl-a:hover{ transform:translateY(-1px); box-shadow:var(--shadow); background:rgba(36,193,255,.10) }
.gpx3-hl-a::after{ content:attr(data-date); position:absolute; top:50%; inset-inline-end:12px; transform:translateY(-50%) translateX(6px); background:linear-gradient(90deg, rgba(36,193,255,.95), rgba(74,225,255,.95)); color:#001629; padding:6px 10px; border-radius:10px; font-size:.86rem; font-weight:900; box-shadow:0 6px 16px rgba(0,0,0,.35); opacity:0; transition:opacity .15s, transform .15s; white-space:nowrap }
.gpx3-hl-a:hover::after{opacity:1; transform:translateY(-50%)}

/* أحدث 8 */
.gpx3-l8{display:grid; gap:12px}
.gpx3-l8-i{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; text-decoration:none; color:#ffffff; border:1.5px solid var(--line); border-radius:12px; padding:10px; background:rgba(255,255,255,.06); transition:transform .15s, box-shadow .15s, background .15s, border-color .15s }
.gpx3-l8-i:hover{ transform:translateY(-1px); box-shadow:var(--shadow); background:rgba(36,193,255,.10); border-color:rgba(74,225,255,.35) }
.gpx3-l8-img{ position:relative; width: calc(var(--img2lines) * 1.6); height: var(--img2lines); border-radius:10px; overflow:hidden; border:1.5px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04)) }
.gpx3-l8-img img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.035); transition:opacity .35s ease, transform .35s ease }
.gpx3-l8-img.gpx3-shown img, .gpx3-l8-img img.gpx3-loaded{ opacity:1; transform:scale(1) }
.gpx3-l8-img .gpx3-cam{ position:absolute; inset:0; display:grid; place-items:center; font-size:22px; color:#cfeeff; background:linear-gradient(180deg, rgba(24,44,88,.55), rgba(14,24,44,.55)) }
.gpx3-l8-img.gpx3-shown .gpx3-cam{ display:none !important }
.gpx3-l8-ttl{ font-size: var(--fs-ttl); line-height: var(--lh-ttl); margin:0; color:#ffffff; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; position:relative; padding-bottom:4px }
.gpx3-l8-i .gpx3-l8-ttl::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:linear-gradient(90deg, #00e0ff, #1a75ff) }
.gpx3-l8-i:hover .gpx3-l8-ttl{color:#00e0ff}
.gpx3-l8-i:hover .gpx3-l8-ttl::after{background:linear-gradient(90deg, #1a75ff, #00e0ff)}

.gpx3-empty{color:#dfeeff; text-align:center; padding:8px 0}
.gpx3-ph{ display:block; width:100%; height:100%; background:repeating-linear-gradient(45deg,rgba(255,255,255,.12),rgba(255,255,255,.12) 10px,rgba(255,255,255,.07) 10px,rgba(255,255,255,.07) 20px) }

/* A11y */
.gpx3-wrap a:focus-visible, .gpx3-wrap button:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

/* Responsive */
@media (max-width: 640px){
  .gpx3-card{padding:12px}
  .gpx3-main-title .gpx3-title-text{ font-size:1.5rem; padding:12px }
  .gpx3-content{padding:14px}
  .gpx3-content h2{font-size:1.32rem}
  .gpx3-content h3{font-size:1.16rem}
  .gpx3-content h4{font-size:1.04rem}
}

/* Print */
@media print{
  .gpx3-wrap{ background:#fff; color:#000 }
  .gpx3-card{ background:#fff; border:1px solid #ddd; box-shadow:none }
  .gpx3-main-title .gpx3-title-text{
    background:#fff; border:1px solid #ccc; border-radius:10px; color:#000; box-shadow:none
  }
  .gpx3-content{box-shadow:none; border-color:#ddd}
  .gpx3-content h2,.gpx3-content h3,.gpx3-content h4{background:#fff; border-color:#ccc; box-shadow:none}
  .gpx3-content a{color:#000; border-bottom:1px solid #000}
}


/* ================= GPX3C Category — COMPLETE STYLES ================= */
/* ألوان وقيم عامة */
:root{
  --page-bg: rgba(7,16,36,.92);
  --page-grad: radial-gradient(80% 60% at 50% -10%, rgba(15,80,120,.20), transparent 50%),
               radial-gradient(60% 50% at 110% 10%, rgba(0,180,255,.10), transparent 60%);
  --panel-bg: rgba(17,28,56,.75);
  --ink:#e9f2ff; --ink-strong:#ffffff; --muted:#9fb3c8;
  --brand:#24c1ff; --brand-2:#4ae1ff; --ring:rgba(36,193,255,.45);
  --line:rgba(120,170,220,.28); --soft:rgba(255,255,255,.06);
  --radius:18px; --shadow:0 10px 28px rgba(0,0,0,.35);
  --fs-ttl:1rem; --lh-ttl:1.35;
  --grid-gap:12px;
}

*{box-sizing:border-box}

/* نطاق الصفحة */
.gpx3c.gpx3-scope{
  direction: rtl;
  background:var(--page-bg);
  background-image:var(--page-grad);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding:12px 10px;
}

/* الروابط العامة في المناطق الداكنة */
.gpx3c.gpx3-scope a{ color:#eaf6ff; text-decoration:none }
.gpx3c.gpx3-scope a:hover{ color:#ffffff }

/* بطاقات عامة/أغلفة */
.gpx3c-card{
  position:relative;
  background:var(--panel-bg);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  margin:14px 0;
  backdrop-filter:saturate(140%) blur(3px);
  overflow:hidden;
}
.gpx3c-card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(18px 18px at 12px 12px, rgba(36,193,255,.20), transparent 70%) no-repeat,
    radial-gradient(18px 18px at calc(100% - 12px) calc(100% - 12px), rgba(74,225,255,.12), transparent 70%) no-repeat;
  mix-blend-mode:screen;
}

/* عناوين مقاطع داكنة */
.gpx3c .gpx3c-h{margin:0 0 10px; font-size:1.05rem; color:#e9f6ff; font-weight:800}

/* ====== هيدر الصفحة (اسم الموقع + الدومين) ====== */
.gpx3c-site{display:grid; place-items:center; text-align:center}
.gpx3c-site-name{font-size:2rem; font-weight:900; color:var(--ink-strong); margin:2px 0}
.gpx3c-site-domain{color:#bcd3ea; font-weight:700}

/* ====== أفضل الأقسام / الأقسام الفرعية ====== */
.gpx3c-list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center
}
.gpx3c-list a{
  padding:6px 10px; border-radius:10px;
  background:var(--soft); border:1.5px solid var(--line);
  color:#eaf6ff; font-weight:800;
}
.gpx3c-list a:hover{ background:rgba(36,193,255,.12) }

/* ====== عنوان القسم ====== */
.gpx3c-head{display:flex; align-items:center; justify-content:center}
.gpx3c-title{margin:0; color:#fff; font-size:1.6rem; font-weight:900; letter-spacing:.2px}

/* ====== بانر نصي بعرض الحاوية ====== */
.gpx3c-banner{padding:0}
.gpx3c-banner .gpx3c-banner-txt{
  padding:14px 16px; text-align:center; font-weight:800; color:#001a2f;
  background:linear-gradient(90deg, rgba(36,193,255,.95), rgba(74,225,255,.95));
  border-radius:calc(var(--radius) + 2px);
}

/* ====== تبويبات: الأحدث / يشاهدون الآن ====== */
.gpx3c-tabs-nav{display:flex; gap:8px; margin-bottom:10px}
.gpx3c-tab{
  appearance:none; border:1.5px solid var(--line);
  background:rgba(255,255,255,.08);
  color:#e9f6ff; padding:8px 14px; border-radius:10px;
  cursor:pointer; font-weight:900; letter-spacing:.2px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.gpx3c-tab.is-active, .gpx3c-tab:hover{
  background:rgba(36,193,255,.18);
  border-color:rgba(74,225,255,.35);
  color:#ffffff;
}
.gpx3c-tab:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }
.gpx3c-panel{display:none}
.gpx3c-panel.is-active{display:block}

/* ====== شبكة المقالات (4×) ====== */
.gpx3c-grid{
  display:grid; gap:var(--grid-gap);
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width:1200px){ .gpx3c-grid{ grid-template-columns:repeat(3, 1fr) } }
@media (max-width:900px){  .gpx3c-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:600px){  .gpx3c-grid{ grid-template-columns:repeat(1, 1fr) } }

/* ====== بطاقة مقال ====== */
.gpx3c-card .gpx3c-imgwrap{
  position:relative; display:block;
  border:1.5px solid var(--line); border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  aspect-ratio:16/9; min-height:160px; text-decoration:none;
}
.gpx3c-card .gpx3c-imgwrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transform:scale(1.035);
  transition:opacity .35s ease, transform .35s ease;
}
.gpx3c-card .gpx3c-imgwrap.gpx3c-shown img,
.gpx3c-card .gpx3c-imgwrap img.gpx3c-loaded{ opacity:1; transform:scale(1) }

/* طبقة الكاميرا قبل ظهور الصورة */
.gpx3c-cam{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#cfeeff; font-size:22px;
  background:linear-gradient(180deg, rgba(24,44,88,.55), rgba(14,24,44,.55));
}
.gpx3c-imgwrap.gpx3c-shown .gpx3c-cam,
.gpx3c-imgwrap img.gpx3c-loaded ~ .gpx3c-cam{ display:none }

/* شارة التاريخ “منذ …” */
.gpx3c-badge{
  position:absolute; top:10px; inset-inline-start:10px;
  background:linear-gradient(90deg, rgba(36,193,255,.95), rgba(74,225,255,.95));
  color:#001629; padding:6px 10px; border-radius:10px;
  font-size:.86rem; font-weight:900; box-shadow:0 6px 16px rgba(0,0,0,.35); z-index:2;
}

/* نصوص البطاقة */
.gpx3c-body{padding:10px 2px 2px}
.gpx3c-ttl{
  margin:0 0 6px 0; font-size:1.02rem; line-height:var(--lh-ttl);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.gpx3c-ttl a{
  color:#ffffff; font-weight:900; position:relative; padding-bottom:4px;
}
.gpx3c-ttl a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg, #00e0ff, #1a75ff);
  transition:background .2s ease;
}
.gpx3c-card:hover .gpx3c-ttl a{ color:#cfeeff }
.gpx3c-card:hover .gpx3c-ttl a::after{ background:linear-gradient(90deg, #1a75ff, #00e0ff) }

.gpx3c-desc{
  margin:0; color:#cfe4ff; font-size:.95rem; line-height:1.6;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* ====== المزيد (Auto + Button) ====== */
.gpx3c-more{margin-top:10px; display:grid; gap:10px}
.gpx3c-sentinel{height:1px}
.gpx3c-more-btn{
  appearance:none; border:1.5px solid var(--line); background:rgba(255,255,255,.08);
  color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:800;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.gpx3c-more-btn:hover{ background:rgba(36,193,255,.18); border-color:rgba(74,225,255,.35); transform:translateY(-1px) }
.gpx3c-more-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

/* ====== عناصر فارغة وبدائل ====== */
.gpx3c-empty{color:#dfeeff; text-align:center; padding:8px 0}
.gpx3c-ph{
  display:block; width:100%; height:100%;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.12),rgba(255,255,255,.12) 10px,rgba(255,255,255,.07) 10px,rgba(255,255,255,.07) 20px)
}

/* ====== إمكانية الوصول ====== */
.gpx3c a:focus-visible, .gpx3c button:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px
}

/* ====== تقليل الحركة ====== */
@media (prefers-reduced-motion:reduce){
  .gpx3c-card, .gpx3c-card .gpx3c-imgwrap img, .gpx3c-tab, .gpx3c-more-btn{ transition:none !important }
}

/* ====== طباعة ====== */
@media print{
  .gpx3c.gpx3-scope{ background:#fff; color:#000 }
  .gpx3c-card{ background:#fff; border:1px solid #ccc; box-shadow:none }
  .gpx3c-site-name, .gpx3c-title{ color:#000 }
  .gpx3c-banner .gpx3c-banner-txt{ background:#f0f0f0; color:#000 }
  .gpx3c a{ color:#000; text-decoration:underline }
}

/* The stylesheet is located in "assets/css/style.css". */