/* =======================================================
   Doafeer – Unified Home & Header Styles
   ملف موحّد يجمع ما كان في df-home.css + doaf-home.css
   مع مقاييس أحجام متزنة ودعم الوضع الليلي + جسر توافق للأصناف القديمة.
   ======================================================= */

/* -------------------------------
   Fallback tokens + theme.json bridge
----------------------------------*/
:root{
  --container: min(1200px, 92vw);

  /* ألوان السطح والنص والحدود */
  --surface: #ffffff;
  --surface-2: rgba(255,255,255,.85);
  --border: #e2e8f0;

  --text: #1f2937;      /* slate-800 */
  --text-muted: #667085;/* neutral muted */

  /* ألوان الهوية */
  --brand-navy: #1e374e;
  --brand-navy-hover: #163043;
  --brand-lime: #68a00b;

  /* ظلال */
  --shadow-1: 0 2px 8px rgba(0,0,0,.06);

  /* توافق مع theme.json (إن وُجد يستخدمها تلقائيًا) */
  --radius-sm: var(--wp--custom--radius--sm, 6px);
  --radius-md: var(--wp--custom--radius--md, 10px);
  --radius-lg: var(--wp--custom--radius--lg, 14px);

  --shadow-light: var(--wp--custom--shadow--light, 0 2px 8px rgba(0,0,0,.08));
  --shadow-medium: var(--wp--custom--shadow--medium, 0 5px 15px rgba(0,0,0,.12));

  --c-primary: var(--wp--preset--color--doaf-primary, var(--brand-navy));
  --c-secondary: var(--wp--preset--color--doaf-secondary, var(--brand-lime));
  --c-accent: var(--wp--preset--color--doaf-accent, #f39c12);
  --c-text: var(--wp--preset--color--doaf-text, var(--text));
  --c-muted: var(--wp--preset--color--doaf-muted, var(--text-muted));
  --c-surface: var(--wp--preset--color--doaf-surface, var(--surface));
  --c-bg: var(--wp--preset--color--doaf-bg, #f5f7fb);
}

:root[data-theme="dark"]{
  --surface: #0b1116;
  --surface-2: rgba(11,17,22,.78);
  --border: #1b2936;

  --text: #e6edf3;
  --text-muted: #9fb0c1;

  /* لون مقروء على الداكن */
  --brand-navy: #8ab4ff;
  --brand-navy-hover: #bcd3ff;

  --shadow-1: 0 2px 10px rgba(0,0,0,.35);
}

/* يسمح لعناصر النظام بمطابقة الثيم */
:root{ color-scheme: light dark; }

/* -------------------------------
   Header
----------------------------------*/
.doaf-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  will-change: transform;
  transform: translateZ(0);
}
.doaf-header__inner{
  max-inline-size: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 16px;
  padding: 10px clamp(12px, 4vw, 28px);
}

/* فالبك حديث لمقاس الشعار (يتعايش مع CSS الديناميكي من options-page.php) */
.doaf-header .custom-logo{ max-block-size: 56px; height: auto; }

.doaf-nav__toggle{
  display: none; background: transparent; border: 0;
  inline-size: 40px; block-size: 40px; border-radius: 10px; cursor: pointer;
}
.doaf-nav__toggle:focus-visible{ outline: 2px solid color-mix(in srgb, var(--c-primary) 55%, transparent); outline-offset: 2px; }
.doaf-nav__bar{ display: block; block-size: 2px; background: var(--text); margin: 6px 0; border-radius: 2px; }

.doaf-nav{ margin-inline-start: auto; }
.doaf-nav__list{ list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.doaf-nav__list a{
  color: var(--text); font-weight: 600; text-decoration: none; border-radius: 8px; padding: 6px 8px;
}
.doaf-nav__list a:hover{ color: var(--brand-navy-hover); }
.doaf-nav__list a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--c-primary) 50%, transparent);
  outline-offset: 2px;
}

.doaf-header__actions{ display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.doaf-toggle{
  inline-size: 40px; block-size: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); position: relative;
}
.doaf-toggle__icon{
  position: absolute; inset: 0; display: block; border-radius: 10px; opacity: .9;
  background:
    radial-gradient(circle at 60% 40%, #ffe27a 20%, transparent 21%),
    radial-gradient(circle at 62% 42%, #ffcc33 7%, transparent 8%),
    conic-gradient(from 0deg at 50% 50%, #ffcc33, #ffd966, #ffcc33);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .doaf-toggle__icon{
  background:
    radial-gradient(circle at 65% 35%, #dbeafe 22%, transparent 23%),
    radial-gradient(circle at 68% 38%, #93c5fd 9%, transparent 10%),
    radial-gradient(circle at 70% 40%, #60a5fa 6%, transparent 7%);
}

/* Mobile nav */
@media (max-width: 980px){
  .doaf-nav__toggle{ display: inline-flex; margin-inline-start: auto; align-items:center; justify-content:center; }
  .doaf-nav{
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border);
    transform: translateY(-10px); opacity: 0; visibility: hidden; transition: .2s ease;
    pointer-events: none;
    /* تحسين تحريك الرؤية لتجنّب الومضة عند الغلق */
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
  }
  .doaf-nav.is-open{
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .2s ease, opacity .2s ease, visibility 0s;
  }
  .doaf-nav__list{ flex-direction: column; gap: 0; }
  .doaf-nav__list li{ border-block-start: 1px solid var(--border); }
  .doaf-nav__list a{ display: block; padding: 12px 16px; border-radius: 0; }
  body.nav-open{ overflow: hidden; } /* يمنع تمرير الصفحة عند فتح القائمة */
}

/* -------------------------------
   Hero (مع دعم الاسم القديم df-hero)
----------------------------------*/
.doaf-hero,
.df-hero{
  /* Fallback أولي */
  background: var(--surface);
  /* خلفية هادئة متوافقة مع الوضعين — مع fallback إذا لم يُدعَم color-mix */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand-navy) 14%, var(--surface) 86%),
    var(--surface)
  );
  border: 1px solid rgba(30,55,78,.08);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow-light);
  margin-block: 12px;
  border-bottom: 1px solid var(--border);
}

.doaf-hero__inner{
  max-inline-size: var(--container); margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 28px);
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .doaf-hero__inner{ grid-template-columns: 1.2fr .8fr; } /* نص + فورم بحث */
}

.doaf-hero h1,
.df-hero h1{
  /* مقاس متزن (لا يضخم التخطيط) */
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.25;
  text-align: start;
  color: var(--c-primary);
  margin: 0 0 8px;
}
.doaf-hero p.lead,
.df-hero p{
  color: var(--c-muted);
  margin: 0;
  max-inline-size: 820px;
}
.doaf-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* -------------------------------
   Buttons (موحّدة)
----------------------------------*/
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--c-surface);
  color: var(--c-primary);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-light); }
.btn:focus-visible{ outline: 2px solid color-mix(in srgb, var(--brand-navy) 55%, transparent); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; pointer-events:none; }

.btn.btn-lime{
  background: color-mix(in srgb, var(--c-secondary) 92%, white 8%);
  color: #fff; border-color: transparent;
}
.btn.btn-lime:hover{
  background: color-mix(in srgb, var(--c-secondary) 88%, #000);
}
.btn.outline{
  background: transparent; color: var(--c-primary);
  border-color: var(--border);
}
.btn.outline:hover{
  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--border));
  background: rgba(30,55,78,.03);
}

/* -------------------------------
   Search field (مقصور على الهيرو فقط)
----------------------------------*/
.doaf-hero .doaf-search{
  display: flex; gap: 8px; align-items: center; inline-size: 100%;
}
.doaf-hero .doaf-search__input{
  inline-size: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--c-text);
  line-height: 1.2;
  caret-color: var(--c-primary);
}
.doaf-hero .doaf-search__input:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--c-secondary) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-secondary) 18%, transparent);
}

/* -------------------------------
   Sections (عناوين وأزرار "عرض الكل")
----------------------------------*/
.section{ padding-block: clamp(20px, 5vw, 44px); }
.section__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-block-end: 12px;
}
.section__title{
  margin: 0; color: var(--c-primary);
  /* حجم متزن ( ~18–22px ) */
  font-size: clamp(1.1rem, 0.95rem + .6vw, 1.35rem);
  line-height: 1.25;
}
.section__more a{
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--c-primary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.section__more a:hover{
  background: rgba(30,55,78,.05);
  border-color: rgba(30,55,78,.12);
}
.section__more a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--c-primary) 45%, transparent);
  outline-offset: 2px;
}

/* -------------------------------
   Cards – لمسة خفيفة
----------------------------------*/
.df-card__title{
  font-size: 0.98rem; /* خفيف، لا يضخّم */
}

/* -------------------------------
   Bridge: old df-* classes → modern look
----------------------------------*/
:root{
  --doafeer-shadow-light: var(--shadow-1);
  --doafeer-primary-color: var(--brand-navy);
  --doafeer-muted: var(--text-muted);
}
.df-section{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-1);
  margin-block: 18px;
}
.df-section > h2{
  font-size: 1.15rem; /* ~18px */
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.df-featured-list{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 16px;
}
.df-featured{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 12px;
}
.df-featured a{ color: var(--brand-navy); font-weight: 700; text-decoration: none; }
.df-featured a:hover{ text-decoration: underline; }

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .btn, .doaf-hero .doaf-search__input, .doaf-nav{ transition: none !important; }
}

/* طباعة هادئة */
@media print{
  .doaf-header, .doaf-hero, .section__more { display: none !important; }
  body{ background: #fff !important; }
}


/* === Force PDF.js iframe height on mobile (~25% shorter) === */
@media (max-width: 820px){
  :root{ --doaf-pdf-mobile-h: 70svh; } /* 70svh × 0.75 ≈ 52.5svh */

  /* استهدف أي iframe للـ pdf.js حتى لو ما عليه كلاس df-pdf */
  iframe.df-pdf,
  .df-pdf iframe,
  .doaf-pdf iframe,
  .doaf-pdf-wrap > iframe,
  iframe#doaf-pdf,
  iframe#doaf-pdf-iframe,
  iframe[src*="viewer.html"],
  iframe[src*="/pdfjs/"],
  iframe[src*="doafeer-pdfjs-bridge"]{
    height: var(--doaf-pdf-mobile-h) !important;
    max-height: var(--doaf-pdf-mobile-h) !important;
    display: block;
  }

  /* لو في رابر يستخدم padding-top كنسبة (مثل يوتيوب)، عطّله */
  .doaf-pdf-wrap,
  .df-pdf-wrap{
    height: var(--doaf-pdf-mobile-h) !important;
    max-height: var(--doaf-pdf-mobile-h) !important;
    padding-top: 0 !important;
  }

  /* لو كنت تستخدم العنصر مباشرة بدون رابر */
  .df-pdf,
  .doaf-pdf{
    height: var(--doaf-pdf-mobile-h) !important;
    max-height: var(--doaf-pdf-mobile-h) !important;
  }
}

/* =======================================================
   Icon Grid – enforce pixel sizes per variant (inside .df-grid-icons only)
   يحل مشكلة تثبيت العرض على 140px عبر ضبط الحاوية والصورة معاً،
   وإلغاء أي aspect-ratio موروث من ملفات أخرى.
   ======================================================= */

/* قاعدة الحاوية: مركز الصورة وتحديد المقاس بالمتغيرات */
.df-grid-icons .df-card__img-wrap{
  inline-size: var(--df-icon-w, 140px);
  block-size: var(--df-icon-h, 140px);
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* الصورة تملأ الحاوية بالكامل */
.df-grid-icons .df-card__img{
  inline-size: 100%;
  block-size: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  /* ألغِ أي نسب أبعاد قديمة */
  aspect-ratio: auto;
}

/* الأربعة الأنماط — تعيين المتغيرات (عرض × ارتفاع) */
.df-grid-icons .df-card__img.df-main  { --df-icon-w:150px; --df-icon-h:120px; }
.df-grid-icons .df-card__img.df-term  { --df-icon-w:140px; --df-icon-h:140px; }
.df-grid-icons .df-card__img.df-cover { --df-icon-w:140px; --df-icon-h:170px; }
.df-grid-icons .df-card__img.df-sub   { --df-icon-w:150px; --df-icon-h:130px; }


.df-grid-icons .df-card__img.df-main,
.df-grid-icons .df-card__img.df-term,
.df-grid-icons .df-card__img.df-cover,
.df-grid-icons .df-card__img.df-sub{
  width: 100%;
  height: 100%;
}



/* توافق إضافي: لو تم تمرير img حقيقي داخل الرابط */
.df-grid-icons .df-card__img > img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* تحسين بسيط للتجاوب الصغير لو ضاق العمود جداً */
@media (max-width: 480px){
  .df-grid-icons .df-card__img.df-main  { --df-icon-w:140px; --df-icon-h:112px; }
  .df-grid-icons .df-card__img.df-sub   { --df-icon-w:140px; --df-icon-h:121px; }
  /* cover و term يبقيان كما هما لضمان وضوح الغلاف والمربّع */
}

/* ===== term1 فقط: الفالبك يظهر لأيقونة التصنيف نفسه، لا لأبنائه ===== */

/* 0) أحجام افتراضية للأيقونة (إن احتجت مظهرًا ثابتًا) */
body.term-term1 .df-term-image,
body.term-term1 .term-image,
body.term-term1 .term-thumbnail,
body.term-term1 .doaf-term-image{
  width:150px;
  height:120px;
  border-radius:12px;
  display:block;
  overflow:hidden;
}

/* 1) أحجام الأيقونات داخل الشبكة (ابقِها للجميع) */
.df-grid-icons .df-card__img.df-main  { width:150px !important; height:120px !important; }
.df-grid-icons .df-card__img.df-term  { width:140px !important; height:140px !important; }
.df-grid-icons .df-card__img.df-cover { width:140px !important; height:170px !important; }
.df-grid-icons .df-card__img.df-sub   { width:150px !important; height:130px !important; }
.df-grid-icons .df-card__img{
  display:block !important;
  border-radius:12px;
  background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
}

/* 2) فالبك مقيّد: فعِّل الخلفية الافتراضية فقط لبطاقة "التصنيف الرئيسي" لـ term1
      - الشرط: رابط الأيقونة يحتوي /term1/
      - والـ <a> عندها كلاس df-main (الأيقونة الرئيسية)
      - ولا يوجد style=background-image أصلاً
*/
.df-grid-icons a.df-card__img.df-main[href*="/term1/"]:not([style*="background-image"]) {
  background-image: url("https://doafeer.net/wp-content/uploads/trm1/term1.png") !important;
}

/* 3) دعم <img> داخلي إن وُجد بدل الخلفية */
.df-grid-icons .df-card__img > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:inherit !important;
}