/* ══════════════════════════════════════════════════════════════════
   قالب أيمن عبيد — الأنماط
   الرموز (ألوان/خطوط/مسافات) تأتي من theme.json كمتغيرات --wp--preset--*
   وهذا الملف يبني عليها. أي لون هنا يجب أن يكون متغيّراً لا قيمة صريحة،
   وإلا انكسر الوضع الداكن وتغييرُ اللوحة من اللوحة.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ay-navy:       var(--wp--preset--color--navy);
  --ay-navy-dark:  var(--wp--preset--color--navy-dark);
  --ay-coral:      var(--wp--preset--color--coral);
  --ay-coral-tint: var(--wp--preset--color--coral-tint);
  --ay-gold:       var(--wp--preset--color--gold);
  --ay-ink:        var(--wp--preset--color--ink);
  --ay-muted:      var(--wp--preset--color--muted);
  --ay-line:       var(--wp--preset--color--line);
  --ay-alt:        var(--wp--preset--color--alt);
  --ay-base:       var(--wp--preset--color--base);

  --ay-f-display: var(--wp--preset--font-family--display);
  --ay-f-body:    var(--wp--preset--font-family--body);
  --ay-f-num:     var(--wp--preset--font-family--numeric);

  --ay-r:      12px;
  --ay-sh-s:   var(--wp--preset--shadow--soft);
  --ay-sh-m:   var(--wp--preset--shadow--lift);
  --ay-header: 66px;
}

html{ scroll-behavior:smooth }
body{ -webkit-font-smoothing:antialiased; overflow-x:hidden }
img{ max-width:100% }

/* الأرقام اللاتينية وسط نصّ عربي: تُجبَر على اتجاه LTR وإلا انقلب ترتيبها */
.ay-num, .wp-block-post-date time{
  font-family:var(--ay-f-num); font-variant-numeric:tabular-nums;
  direction:ltr; display:inline-block;
}

.ay-torn svg{ display:block; width:100%; height:100% }
.ay-torn--wave  { height:clamp(24px,3vw,44px) }
.ay-torn--slant { height:clamp(18px,2.2vw,30px) }

/* ── العنوان المرسوم بالفرشاة ──────────────────────────────────── */
.ay-painted{ position:relative; display:inline-block; padding:.85rem 2.6rem; isolation:isolate }
.ay-painted > svg{ position:absolute; inset:0; width:100%; height:100%; z-index:-1 }
.ay-painted > :where(h1,h2,h3,p){ color:#fff; margin:0; line-height:1.3 }
.ay-painted--light > :where(h1,h2,h3,p){ color:var(--ay-navy-dark) }

/* ── أنماط الكتل المسجَّلة في functions.php ─────────────────────── */
.wp-block-group.is-style-ayman-card{
  background:var(--ay-base); border:1px solid var(--ay-line);
  border-radius:var(--ay-r); box-shadow:var(--ay-sh-s); padding:1.4rem;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.wp-block-group.is-style-ayman-card:hover{
  transform:translateY(-5px); box-shadow:var(--ay-sh-m); border-color:var(--ay-coral);
}
.wp-block-group.is-style-ayman-card-outline{
  background:var(--ay-base); border:2px solid var(--ay-navy);
  border-radius:var(--ay-r); padding:1.3rem; box-shadow:var(--ay-sh-s);
  transition:transform .25s, border-color .25s;
}
.wp-block-group.is-style-ayman-card-outline:hover{ transform:translateY(-6px); border-color:var(--ay-coral) }
.wp-block-group.is-style-ayman-card-flat{
  background:var(--ay-alt); border-radius:var(--ay-r); padding:1.3rem;
}
.wp-block-group.is-style-ayman-dashed{
  border:2px dashed var(--ay-navy); border-radius:14px;
  padding:clamp(1.2rem,.8rem + 1.4vw,2rem); background:var(--ay-base); box-shadow:var(--ay-sh-s);
}
.wp-block-group.is-style-ayman-band{ padding-block:var(--wp--preset--spacing--50) }
.wp-block-image.is-style-ayman-framed img{
  border-radius:var(--ay-r); border:1px solid var(--ay-line); box-shadow:var(--ay-sh-m);
}
.wp-block-image.is-style-ayman-tilted img{
  border-radius:10px; border:3px solid var(--ay-base); box-shadow:var(--ay-sh-m);
  transform:rotate(-1.2deg); transition:transform .3s;
}
.wp-block-image.is-style-ayman-tilted:hover img{ transform:rotate(0) translateY(-6px) scale(1.02) }
.wp-block-button.is-style-ayman-ghost .wp-block-button__link{
  background:transparent; color:var(--ay-navy); border:2px solid var(--ay-navy);
}
.wp-block-button.is-style-ayman-ghost .wp-block-button__link:hover{ background:var(--ay-navy); color:#fff }
.wp-block-button.is-style-ayman-pill .wp-block-button__link{ border-radius:999px }
.wp-block-list.is-style-ayman-check,
.wp-block-list.is-style-ayman-arrow{ list-style:none; padding-inline-start:0 }
.wp-block-list.is-style-ayman-check li,
.wp-block-list.is-style-ayman-arrow li{ position:relative; padding-inline-start:1.8rem; margin-block:.5rem }
.wp-block-list.is-style-ayman-check li::before{
  content:"✓"; position:absolute; inset-inline-start:0; color:var(--ay-coral); font-weight:800;
}
.wp-block-list.is-style-ayman-arrow li::before{
  content:"←"; position:absolute; inset-inline-start:0; color:var(--ay-navy); font-weight:800;
}
.wp-block-quote.is-style-ayman-testimonial{
  background:var(--ay-base); border:1px solid var(--ay-line); border-inline-start:4px solid var(--ay-coral);
  border-radius:var(--ay-r); padding:1.4rem 1.3rem; box-shadow:var(--ay-sh-s);
}
.wp-block-quote.is-style-ayman-testimonial cite{
  font-family:var(--ay-f-display); font-style:normal; font-weight:700; color:var(--ay-navy);
}

/* ── بطاقة مقال (قوالب الاستعلام) ──────────────────────────────── */
.ay-cards .wp-block-post{
  background:var(--ay-base); border:1px solid var(--ay-line); border-radius:var(--ay-r);
  overflow:hidden; box-shadow:var(--ay-sh-s); display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.ay-cards .wp-block-post:hover{ transform:translateY(-5px); box-shadow:var(--ay-sh-m); border-color:var(--ay-coral) }
.ay-cards .wp-block-post-featured-image{ margin:0 }
.ay-cards .wp-block-post-featured-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s }
.ay-cards .wp-block-post:hover .wp-block-post-featured-image img{ transform:scale(1.05) }
.ay-cards .wp-block-post-title{ font-size:var(--wp--preset--font-size--large); line-height:1.6; margin:0 }
.ay-cards .wp-block-post-title a{ color:var(--ay-ink); text-decoration:none; transition:color .2s }
.ay-cards .wp-block-post:hover .wp-block-post-title a{ color:var(--ay-coral) }
.ay-cards .wp-block-post-excerpt__excerpt{ font-size:.86rem; color:var(--ay-muted); line-height:1.85 }
.ay-card-body{ padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.ay-card-foot{
  margin-block-start:auto; padding-block-start:.6rem; border-block-start:1px solid var(--ay-line);
  font-size:.74rem; color:var(--ay-muted);
}

/* 🌟 قصّ العنوان والمقتطف بعدد أسطر ثابت: عناوين المقالات هنا تتراوح
   بين ٥٨ و٩٦ حرفاً، فتأخذ بطاقةٌ سطرين وأختها أربعة — وهو سبب تفاوت
   الطول الذي يبدو كأنّ بعض البطاقات «منتفخة». القصّ يجعلها متطابقة. */
.ay-cards .wp-block-post-title a,
.ay-cards .wp-block-post-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden}
.ay-cards .wp-block-post-title{min-height:calc(3 * 1.6em)}
.ay-cards .wp-block-post-excerpt__excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden;min-height:calc(3 * 1.85em)}
.ay-cards .wp-block-post-excerpt{margin:0}
/* تُلغى في العمود الواحد (الجوال) حيث لا بطاقة بجانبها تُقارَن بها. */
@media (max-width:560px){
  .ay-cards .wp-block-post-title,
  .ay-cards .wp-block-post-excerpt__excerpt{min-height:0}
}

/* ── المقال ────────────────────────────────────────────────────── */
/* 🌟 العنوان بلا text-wrap:balance عمداً — الموازنة تكسر السطر مبكراً
   فيبدو العنوان ناقصاً وكأن بقيّته حُذفت. */
.ay-post-title{ text-wrap:initial; line-height:1.5; margin-block-end:.9rem }
.ay-post-hero{ margin:0 0 1.9rem }          /* فاصل بين الصورة البارزة والعنوان */
.ay-post-hero img{ width:100%; height:auto; border-radius:var(--ay-r); border:1px solid var(--ay-line); box-shadow:var(--ay-sh-m) }
.ay-byline{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  font-size:.8rem; color:var(--ay-muted);
  padding-block-end:1rem; margin-block-end:1.4rem; border-block-end:2px solid var(--ay-coral-tint);
}
.ay-byline img{ width:32px; height:32px; border-radius:50%; object-fit:cover }
.ay-content > *{ margin-block:1rem }
.ay-content p{ line-height:2.05; color:var(--ay-ink) }
.ay-content h2{ margin-block:2rem .3rem; color:var(--ay-navy) }
.ay-content h3{ margin-block:1.5rem .2rem }
.ay-content ul, .ay-content ol{ line-height:2.05; padding-inline-start:1.4rem }
.ay-content li{ margin-block:.45rem }
.ay-content a{ color:var(--ay-coral); font-weight:700; text-decoration:underline; text-underline-offset:3px }
.ay-content img{ border-radius:var(--ay-r) }

/* ── الشريط الجانبي ────────────────────────────────────────────── */
.ay-layout{ align-items:flex-start }
.ay-sidebar{ position:sticky; top:calc(var(--ay-header) + 18px) }
@media (max-width:1020px){ .ay-sidebar{ position:static } }
.ay-widget{
  background:var(--ay-base); border:1px solid var(--ay-line);
  border-radius:var(--ay-r); overflow:hidden; box-shadow:var(--ay-sh-s);
}
.ay-widget__hd{
  font-family:var(--ay-f-display); font-weight:800; font-size:1rem; color:var(--ay-coral);
  padding:.85rem 1rem .55rem; border-block-end:2px solid var(--ay-coral-tint); margin:0;
}
.ay-widget__bd{ padding:1rem }

/* ── التذييل ───────────────────────────────────────────────────── */
.ay-footer{ background:var(--ay-navy-dark); color:#fff }
.ay-footer :where(h1,h2,h3,h4,p,li,a){ color:#fff }
.ay-footer a{ text-decoration:none; opacity:.8; transition:opacity .16s, color .16s }
.ay-footer a:hover{ opacity:1; color:var(--ay-coral) }
/* 🌟 الشعار بعرض محدَّد وارتفاع تلقائي: ضبط الارتفاع وحده داخل حاوية
   flex يمدّ العرض تبعاً لتمدّد العنصر فيظهر ممطوطاً. */
.ay-footer .wp-block-site-logo img{ width:190px; height:auto }

/* ── حركة الظهور ───────────────────────────────────────────────── */
/* 🌟 لا شيء مخفيّ في CSS: الإخفاء يُضاف بجافاسكربت لما هو أسفل الشاشة
   وقت التحميل فقط، فالصفحة مقروءة كاملةً لو تعطّل السكربت. */
.ay-anim.is-hidden{ opacity:0; transform:translateY(20px) }
.ay-anim.is-in{
  opacity:1; transform:none;
  transition:opacity .65s ease var(--ay-d,0s), transform .65s cubic-bezier(.2,.75,.3,1) var(--ay-d,0s);
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
.ay-anim{ opacity:1 !important; transform:none !important }
}

/* 🌟 الوسوم تختفي كلياً حين لا وسم للمقال: تسعة من مقالات أيمن الاثنين
   والعشرين بلا وسوم، وبقاء الكتلة فارغةً يترك فاصلة «·» معلّقة قبلها. */
.ay-byline .wp-block-post-terms:empty,
.ay-byline .wp-block-post-terms:not(:has(a)){ display:none }
.ay-byline .wp-block-post-terms:not(:has(a)) + *{ display:none }
.ay-byline .wp-block-post-terms:not(:has(a)){ margin-inline-start:-0.6rem }

/* ── مخطط الأسهم المتفرّعة ─────────────────────────────────────
   🌟 بلا preserveAspectRatio="none": إجبار النسبة يسحق المنحنيات
   ويقصّ رؤوس الأسهم فتبدو مبتورة. وviewBox وحده يكفي للتحجيم. */
/* 🌟 عرض الرسم = عرض صفّ البطاقات بالضبط (wideSize) لا 980 بكسل ثابتة:
   نقاط نهاية الأسهم الأربع محسوبة كنِسَب من عرض الرسم، فإن كان الرسم
   أضيق من الصفّ وقعت الرؤوس على البطاقتين الوسطيتين وأخطأت الطرفيتين.
   والفجوة تتّسع كلّما اتّسعت الشاشة: عند 1920 كان الصفّ 1240 والرسم 980. */
.ay-fan{ display:block; width:100%;
  max-width:var(--wp--style--global--wide-size, 1240px);
  margin:.4rem auto -.6rem; height:auto; overflow:visible }
/* 🌟 مرسومة افتراضاً: الحالة المخفيّة تُضاف بـis-armed من السكربت فقط.
   كانت مخفيّة في CSS تنتظر is-in من سكربت لم يُكتب، فبقيت فراغاً
   أبيض بارتفاع 150 بكسل تحت العنوان بلا أي خطأ يدلّ عليه. */
.ay-fan path{ fill:none; stroke:var(--ay-navy); stroke-width:2.4; opacity:.75 }
.ay-fan.is-armed path{ stroke-dasharray:520; stroke-dashoffset:520 }
.ay-fan.is-armed.is-in path{
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1); stroke-dashoffset:0;
}
@media (max-width:820px){ .ay-fan{ display:none } }

/* ── السهم النابض ─────────────────────────────────────────────── */
.ay-arrow{
  width:40px; height:40px; border-radius:50%; background:var(--ay-base);
  display:grid; place-items:center; box-shadow:0 8px 20px -8px rgba(0,0,0,.45);
  animation:ay-bob 1.9s ease-in-out infinite;
}
.ay-arrow svg{ width:18px; height:18px; fill:var(--ay-navy-dark) }
.ay-arrow--coral{ background:var(--ay-coral) }
.ay-arrow--coral svg{ fill:#fff }
@keyframes ay-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ── شريط الأرقام ─────────────────────────────────────────────── */
.ay-stat{ display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center }
.ay-stat__n{
  font-family:var(--ay-f-num); font-weight:800; direction:ltr; line-height:1;
  font-size:clamp(1.4rem,1.05rem + 1.2vw,1.95rem);
}
.ay-stat svg{ width:30px; height:30px; margin-block-end:.1rem }

/* ── صفّ صور مائلة (حالات واتس) ───────────────────────────────── */
.ay-tilt-row .wp-block-image{ margin:0 }
.ay-tilt-row .wp-block-image img{
  border-radius:10px; border:3px solid var(--ay-base); box-shadow:var(--ay-sh-m);
  transition:transform .3s; width:100%;
}
.ay-tilt-row .wp-block-image:nth-child(odd) img{ transform:rotate(-1deg) }
.ay-tilt-row .wp-block-image:nth-child(even) img{ transform:rotate(1deg) }
.ay-tilt-row .wp-block-image:hover img{ transform:rotate(0) translateY(-7px) scale(1.03) }

/* ── معرض الأعمال ─────────────────────────────────────────────── */
.ay-work .wp-block-image{ margin:0; position:relative; border-radius:12px; overflow:hidden;
  border:2px solid var(--ay-line); box-shadow:var(--ay-sh-s); transition:border-color .25s, transform .25s }
.ay-work .wp-block-image:hover{ border-color:var(--ay-coral); transform:translateY(-5px) }
.ay-work .wp-block-image img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; transition:transform .6s }
.ay-work .wp-block-image:hover img{ transform:scale(1.06) }
.ay-work figcaption{
  position:absolute; inset-block-end:0; inset-inline:0; margin:0;
  padding:1.6rem .85rem .7rem; color:#fff; font-size:.78rem;
  background:linear-gradient(to top, rgba(26,44,85,.93), transparent);
}

/* ── شهادة على أرضية كحلية ────────────────────────────────────── */
.ay-quote-dark{
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.25);
  border-radius:12px; padding:1.4rem 1.3rem 1.1rem; transition:transform .25s, background .25s;
}
.ay-quote-dark:hover{ transform:translateY(-5px); background:rgba(255,255,255,.14) }
.ay-quote-dark :where(p,cite,strong){ color:#fff }
.ay-quote-dark::before{
  content:"❞"; display:block; font-family:var(--ay-f-display);
  font-size:1.9rem; line-height:.7; color:#FF9E9E; margin-block-end:.5rem;
}

/* تظليل ذهبي للجُمل المفتاحية — يقف عند 62% من ارتفاع السطر فيبدو كقلم تحديد */
.ay-mark, .ay-content mark.ay-mark{
  background:linear-gradient(transparent 62%, var(--ay-gold) 62%);
  font-weight:700; color:var(--ay-ink); padding:0;
}

/* ── نموذج الاشتراك ───────────────────────────────────────────── */
.ay-subscribe{ display:flex; gap:.5rem; flex-wrap:wrap }
.ay-subscribe input{
  flex:1; min-width:180px; font-family:var(--ay-f-body); font-size:.92rem; color:var(--ay-ink);
  background:var(--ay-base); border:2px solid var(--ay-line); border-radius:9px; padding:.7rem .85rem;
}
.ay-subscribe input:focus{ border-color:var(--ay-navy); outline:none }
.ay-subscribe button{
  font-family:var(--ay-f-display); font-weight:700; font-size:.92rem; color:#fff;
  background:var(--ay-coral); border:0; border-radius:9px; padding:.7rem 1.4rem; cursor:pointer;
  transition:background .2s, transform .2s;
}
.ay-subscribe button:hover{ background:var(--ay-navy); transform:translateY(-2px) }

/* ── بطاقة قناة تواصل ─────────────────────────────────────────── */
.ay-chan{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem;
  padding:1.3rem 1.1rem; border:2px solid var(--ay-line); border-radius:12px;
  background:var(--ay-base); text-decoration:none; box-shadow:var(--ay-sh-s);
  transition:transform .22s, border-color .22s; height:100%;
}
.ay-chan:hover{ transform:translateY(-5px); border-color:var(--ay-c) }
.ay-chan svg{ width:27px; height:27px; fill:var(--ay-c) }
.ay-chan b{ font-family:var(--ay-f-display); font-size:1.15rem; color:var(--ay-c) }
.ay-chan span{ font-size:.84rem; color:var(--ay-muted); line-height:1.8 }

/* ── خطوات مرقّمة ─────────────────────────────────────────────── */
.ay-step{
  background:var(--ay-base); border:2px solid var(--ay-line); border-radius:12px; padding:1rem;
  display:flex; flex-direction:column; gap:.35rem; height:100%;
  transition:transform .22s, border-color .22s;
}
.ay-step:hover{ transform:translateY(-5px); border-color:var(--ay-c, var(--ay-coral)) }
.ay-step__n{ font-family:var(--ay-f-num); font-weight:800; font-size:1.4rem; line-height:1; direction:ltr; color:var(--ay-c, var(--ay-coral)) }
.ay-step b{ font-family:var(--ay-f-display); font-size:.95rem; display:block }
.ay-step span{ font-size:.8rem; color:var(--ay-muted); line-height:1.75 }

/* ── أسئلة شائعة (أكورديون أصيل بلا جافاسكربت) ────────────────── */
/* 🌟 <details> مدعوم في كل المتصفحات ويعمل بلوحة المفاتيح وقارئ الشاشة
   بلا سطر جافاسكربت — أفضل من أكورديون مبنيّ يدوياً. */
.ay-faq{ border:1px solid var(--ay-line); border-radius:var(--ay-r); overflow:hidden; background:var(--ay-base) }
.ay-faq details{ border-block-end:1px solid var(--ay-line) }
.ay-faq details:last-child{ border-block-end:0 }
.ay-faq summary{
  cursor:pointer; list-style:none; padding:1rem 1.15rem;
  font-family:var(--ay-f-display); font-weight:700; font-size:.98rem; color:var(--ay-ink);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:background .18s;
}
.ay-faq summary::-webkit-details-marker{ display:none }
.ay-faq summary::after{ content:"+"; font-family:var(--ay-f-num); font-size:1.3rem; color:var(--ay-coral); transition:transform .25s }
.ay-faq details[open] summary::after{ transform:rotate(45deg) }
.ay-faq summary:hover{ background:var(--ay-alt) }
.ay-faq .ay-faq__a{ padding:0 1.15rem 1.15rem; font-size:.92rem; color:var(--ay-muted); line-height:1.95 }

/* ── صفّ أداة (صورة + نصّ متناوب) ─────────────────────────────── */
.ay-tool{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:1.4rem; align-items:center;
  background:var(--ay-base); border:2px solid var(--ay-line); border-radius:var(--ay-r);
  padding:1.2rem; box-shadow:var(--ay-sh-s); transition:border-color .25s, transform .25s;
}
.ay-tool:hover{ border-color:var(--ay-coral); transform:translateY(-4px) }
.ay-tool:nth-of-type(even){ grid-template-columns:minmax(0,1fr) minmax(0,300px) }
.ay-tool:nth-of-type(even) .ay-tool__ph{ order:2 }
@media (max-width:760px){
  .ay-tool, .ay-tool:nth-of-type(even){ grid-template-columns:1fr }
.ay-tool:nth-of-type(even) .ay-tool__ph{ order:0 }
}
.ay-tool__ph{ margin:0; border-radius:10px; overflow:hidden; border:1px solid var(--ay-line); background:var(--ay-alt) }
.ay-tool__ph img{ width:100%; height:auto; display:block }
.ay-tool h3{ font-size:1.15rem; color:var(--ay-coral); margin-block-end:.5rem }
.ay-tool p{ font-size:.88rem; color:var(--ay-muted); line-height:2 }

/* ══ الفواصل: ارتفاع وشكل قابلان للضبط من المحرّر ══════════════
   🌟 الارتفاع متغيّر لا قيمة ثابتة: القسم الكحلي العريض يحتاج حافّة
   أعمق من فاصل بين قسمين فاتحين، والمستخدم يضبطها بسحب واحد. */
.ay-torn{ height:var(--ay-h, clamp(20px,2.6vw,34px)) }
.ay-torn--sm{ --ay-h:clamp(14px,1.8vw,22px) }
.ay-torn--lg{ --ay-h:clamp(34px,4.4vw,64px) }
.ay-torn--xl{ --ay-h:clamp(48px,6vw,90px) }
/* الحافّة المتوهّجة: خطّ رفيع بلون مغاير يوحي بالعمق */
.ay-torn--glow{ filter:drop-shadow(0 -2px 0 rgba(255,255,255,.22)) }

/* ══ الترويسة: ستة أنماط تُختار من «الأنماط» على كتلة الترويسة ══════
   🌟 الأنماط أصناف على الترويسة لا ملفات منفصلة: تبديل الشكل نقرةٌ
   واحدة تُبقي الروابط والشعار كما هي بلا إعادة بناء. */
.ay-header{ --ay-nav-gap:.1rem }

/* ══ العنوان المرسوم: توسيط حقيقي ومقاس يتبع النصّ ═════════════
   🌟 كان <span> داخل حاوية flex فورث محاذاتها، ويأخذ عرض السطر
   كاملاً فيبدو ملتصقاً باليمين. inline-block + توسيط صريح يحلّها،
   والعرض يتبع النصّ فيتمدّد المستطيل المرسوم معه. */
/* 🌟 block + width:fit-content بدل inline-block: هامش auto لا يوسّط
   عنصراً سطرياً إطلاقاً — يُتجاهَل بصمت. فكانت العناوين تلتصق بحافّة
   حاويتها، وانحرافها = نصف الفرق بين عرض الحاوية وعرض العنوان، فكلّما
   قصُر العنوان زاد انحرافه. وهذا الشكل يتوسّط سواء أكان الأب كتلةً
   أم مرناً (flex)، فلا يعتمد على تخطيط الأب. */
.ay-painted{
  display:block; width:fit-content; position:relative; isolation:isolate;
  padding:var(--ay-pad-y,.9rem) var(--ay-pad-x,2.8rem);
  margin-inline:auto; max-width:100%;
}
/* 🌟 التوسيط بوسيلتين لأن الأب قد يكون أيّ الاثنين:
   - في أبٍ عادي: margin-inline:auto يوسّط كتلةً بعرض محتواها.
   - في أبٍ مرن (flex): ووردبريس يصفّر هوامش الأبناء فيُلغي ما سبق،
     وalign-self:center يوسّطه على المحور العرضي ولا يمسّه ذلك التصفير.
   وتُرفع الأولوية بذكر الأب صراحةً لتغلب قاعدة ووردبريس ذات الأولوية نفسها. */
.ay-painted{ align-self:center }
.is-layout-flex > .ay-painted,
.is-layout-constrained > .ay-painted,
.wp-block-group > .ay-painted,
.entry-content > .ay-painted{
  margin-inline:auto; align-self:center;
}
.ay-painted > svg{ position:absolute; inset:0; width:100%; height:100%; z-index:-1 }
.ay-painted > :where(h1,h2,h3,h4,p){
  color:var(--ay-painted-fg,#fff); margin:0; line-height:1.35; text-align:center;
  font-size:var(--ay-painted-size, clamp(1.05rem,.88rem + .8vw,1.5rem));
}
.ay-painted--light > :where(h1,h2,h3,h4,p){ --ay-painted-fg:var(--ay-navy-dark) }
/* مقاسات جاهزة */
.ay-painted--sm{ --ay-pad-y:.6rem; --ay-pad-x:1.8rem; --ay-painted-size:1rem }
.ay-painted--lg{ --ay-pad-y:1.1rem; --ay-pad-x:3.4rem; --ay-painted-size:clamp(1.3rem,1rem + 1.2vw,1.9rem) }
/* الحاوية تُوسّط العنوان دوماً */
.ay-painted-wrap{ display:flex; justify-content:center; width:100% }

/* ══ تساوي ارتفاع البطاقات ════════════════════════════════════
   🌟 العمود في ووردبريس يأخذ ارتفاع محتواه، فبطاقة نصّها أطول
   تصير أعلى من جارتها. الشبكة + stretch تجعلها كلها بارتفاع أطولها،
   والنصّ يتمدّد داخلها لا تتمدّد هي. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ display:flex; flex-direction:column }
.wp-block-column > .wp-block-group.is-style-ayman-card,
.wp-block-column > .wp-block-group.is-style-ayman-card-outline,
.wp-block-column > .wp-block-group.is-style-ayman-card-flat{ height:100%; flex:1 }
/* النصّ يملأ الفراغ فتستقرّ العناصر أسفل البطاقة على خطّ واحد */
.is-style-ayman-card-outline > p:last-child,
.is-style-ayman-card > p:last-child{ margin-block-start:auto }

/* ══════════════ هيرو الصفحات الداخلية ══════════════ */
.ay-phero{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(3rem,7vw,5.4rem) clamp(3.4rem,8vw,6rem);
  background:linear-gradient(160deg,var(--wp--preset--color--navy) 0%,#1e3465 100%);
  color:#fff;text-align:center}

/* 🌟 الوهج عنصر منفصل لا خلفية على الحاوية: خلفية إضافية على العنصر
   نفسه تتعارض مع لون القسم الذي قد يغيّره المستخدم من المحرّر. */
/* 🌟 max-width:none صراحةً: العنصر مطلق الموضع لكنه ابنٌ مباشر لحاوية
   مقيَّدة، فيرث منها max-width:760px — والعنصر المطلق يخضع لها. النتيجة
   مستطيل وهج أضيق من الصدر تظهر حوافّه كرقعة باهتة خلف النصّ. */
.ay-phero__glow{position:absolute;inset:-40% -10% auto;height:120%;z-index:-1;
  max-width:none;width:auto;
  background:radial-gradient(52% 58% at 50% 0%,rgba(231,95,95,.34),transparent 68%),
             radial-gradient(40% 46% at 12% 92%,rgba(255,255,255,.14),transparent 70%);
  pointer-events:none}
.ay-phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);
          mask-image:linear-gradient(to bottom,#000,transparent 72%)}

.ay-phero__k{margin:0 0 .85rem;font-family:var(--wp--preset--font-family--display);
  font-size:.82rem;font-weight:700;letter-spacing:.14em;color:#ffd9a0;
  display:flex;align-items:center;justify-content:center;gap:.7rem}
.ay-phero__k::before,.ay-phero__k::after{content:"";width:2.2rem;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,217,160,.85))}
.ay-phero__k::after{background:linear-gradient(90deg,rgba(255,217,160,.85),transparent)}

.ay-phero__t{margin:0 auto;max-width:22ch;color:#fff;line-height:1.35;
  text-wrap:balance;text-shadow:0 12px 34px rgba(0,0,0,.28)}
.ay-phero__x{margin:1.1rem auto 0;max-width:58ch;color:#cfdaf2;
  font-size:1.06rem;line-height:2}
.ay-phero .wp-block-image{margin-block-start:1.8rem}
.ay-phero .wp-block-image img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}

/* ══════════════ حقل البحث ══════════════ */
/* 🌟 التنسيق على .wp-block-search كلها لا على .ay-search وحدها: كتلة
   البحث تظهر أيضاً في صفحة النتائج و404 وفي أي مكان يضيفها المستخدم،
   وقصر الشكل على نسخة الشريط الجانبي يترك تلك بشكلها الخام. */
.wp-block-search{margin-block:0}
.wp-block-search .wp-block-search__label{
  font-family:var(--wp--preset--font-family--display);font-size:.9rem;
  font-weight:700;margin-block-end:.55rem;display:block}

.wp-block-search .wp-block-search__inside-wrapper{
  position:relative;isolation:isolate;border-radius:999px;padding:3px;
  background:linear-gradient(135deg,var(--wp--preset--color--line),var(--wp--preset--color--line));
  border:0;box-shadow:0 10px 26px -20px rgba(48,79,142,.6);
  transition:background .25s,box-shadow .25s,transform .25s}
.wp-block-search .wp-block-search__inside-wrapper::before{
  content:"";position:absolute;inset:3px;border-radius:999px;
  background:var(--wp--preset--color--base);z-index:-1}
.wp-block-search .wp-block-search__inside-wrapper:focus-within{
  background:linear-gradient(135deg,var(--wp--preset--color--navy),var(--wp--preset--color--coral));
  box-shadow:0 16px 34px -18px rgba(48,79,142,.75);transform:translateY(-1px)}

.wp-block-search .wp-block-search__input{
  border:0!important;background:transparent!important;box-shadow:none!important;
  padding:.82rem 1.2rem;font:inherit;font-size:.95rem;
  color:var(--wp--preset--color--ink);min-width:0}
.wp-block-search .wp-block-search__input:focus{outline:none}
.wp-block-search .wp-block-search__input::placeholder{
  color:var(--wp--preset--color--muted);opacity:1}

.wp-block-search .wp-block-search__button{
  display:grid;place-items:center;flex:0 0 auto;
  width:2.55rem;height:2.55rem;padding:0;margin:0;border:0;border-radius:50%;
  color:#fff;background:var(--wp--preset--color--navy);cursor:pointer;
  transition:background .22s,transform .22s}
.wp-block-search .wp-block-search__button:hover{
  background:var(--wp--preset--color--coral);transform:rotate(-8deg) scale(1.06)}
.wp-block-search .wp-block-search__button svg{width:1.05rem;height:1.05rem;fill:currentColor}

/* النسخة خارج الشريط الجانبي (صفحة النتائج/404) أوسع وأكبر قليلاً. */
.wp-block-search.ay-search--lg .wp-block-search__input{padding:1.05rem 1.5rem;font-size:1.05rem}
.wp-block-search.ay-search--lg .wp-block-search__button{width:3.1rem;height:3.1rem}
@media (prefers-reduced-motion:reduce){
  .wp-block-search .wp-block-search__inside-wrapper,
  .wp-block-search .wp-block-search__button{transition:none}
}

/* ══════════════ التعليقات ══════════════ */
.ay-comments{margin-block-start:2.4rem}
.ay-comments__head{position:relative;padding-inline-start:1.1rem;margin-block-end:1.9rem}
.ay-comments__head::before{content:"";position:absolute;inset-inline-start:0;top:.3rem;bottom:.3rem;
  width:5px;border-radius:999px;
  background:linear-gradient(180deg,var(--wp--preset--color--coral),var(--wp--preset--color--navy))}
.ay-comments__h{margin:0;font-family:var(--wp--preset--font-family--display);line-height:1.5}
.ay-comments__sub{margin:.3rem 0 0;color:var(--wp--preset--color--muted)}

/* 🌟 بطاقة لكل تعليق بدل قائمة عارية: التعليقات بلا حدّ بصري تختلط
   بنصّ المقال فوقها، فلا يعرف القارئ أين انتهى الكاتب وبدأ الزوّار. */
.ay-comments .wp-block-comment-template{list-style:none;margin:0;padding:0}
.ay-comments .wp-block-comment-template > li{
  position:relative;margin:0 0 1rem;padding:1.25rem 1.35rem;
  background:var(--wp--preset--color--base);
  border:1px solid var(--wp--preset--color--line);border-radius:16px;
  transition:border-color .22s,box-shadow .22s,transform .22s}
.ay-comments .wp-block-comment-template > li:hover{
  border-color:rgba(48,79,142,.35);box-shadow:0 16px 36px -28px rgba(48,79,142,.55)}
/* الردود مزاحة ومعلَّمة بخيط رفيع ليُقرأ التسلسل بلا حاجة لعدّ الإزاحات. */
.ay-comments .wp-block-comment-template ol{list-style:none;margin:1rem 0 0;padding:0;
  padding-inline-start:1.5rem;border-inline-start:2px solid var(--wp--preset--color--alt)}
.ay-comments .wp-block-comment-template ol > li{background:var(--wp--preset--color--alt);border-style:dashed}

.ay-comments .wp-block-avatar img{border-radius:50%;border:2px solid var(--wp--preset--color--line)}
.ay-comments .wp-block-comment-author-name,
.ay-comments .wp-block-comment-author-name a{
  font-family:var(--wp--preset--font-family--display);
  color:var(--wp--preset--color--navy);text-decoration:none}
.ay-comments .wp-block-comment-date,
.ay-comments .wp-block-comment-date a{color:var(--wp--preset--color--muted);text-decoration:none}
.ay-comments .wp-block-comment-content p{line-height:2;margin-block:.55rem 0}

.ay-comments .wp-block-comment-reply-link a,
.ay-comments .wp-block-comment-edit-link a{
  display:inline-block;margin-block-start:.5rem;text-decoration:none;
  font-size:.78rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;
  color:var(--wp--preset--color--navy);background:var(--wp--preset--color--alt);
  transition:background .2s,color .2s}
.ay-comments .wp-block-comment-reply-link a:hover,
.ay-comments .wp-block-comment-edit-link a:hover{
  background:var(--wp--preset--color--coral);color:#fff}

.ay-comments .wp-block-comments-pagination{margin-block:1.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.ay-comments .wp-block-comments-pagination a,
.ay-comments .wp-block-comments-pagination .current{
  text-decoration:none;padding:.4rem .85rem;border-radius:10px;font-size:.85rem;font-weight:700;
  border:1px solid var(--wp--preset--color--line);color:var(--wp--preset--color--navy)}
.ay-comments .wp-block-comments-pagination .current{
  background:var(--wp--preset--color--navy);color:#fff;border-color:transparent}

/* ── نموذج التعليق ── */
.ay-comment-form{margin-block-start:2.2rem;padding:clamp(1.3rem,3vw,2.1rem);
  border-radius:20px;background:var(--wp--preset--color--alt);
  border:1px solid var(--wp--preset--color--line)}
.ay-comment-form .comment-reply-title{
  margin:0 0 1.2rem;font-family:var(--wp--preset--font-family--display);
  font-size:1.25rem;color:var(--wp--preset--color--ink)}
.ay-comment-form .comment-notes,
.ay-comment-form .logged-in-as{font-size:.85rem;color:var(--wp--preset--color--muted);margin:0 0 1.1rem}
.ay-comment-form .required{color:var(--wp--preset--color--coral)}

/* 🌟 الحقول الثلاثة في شبكة لا في أسطر متتابعة: الاسم والبريد والموقع
   قصيرة، وسطرٌ كامل لكلٍّ منها يجعل النموذج شريطاً طويلاً يُرهق. */
.ay-comment-form .comment-form-author,
.ay-comment-form .comment-form-email,
.ay-comment-form .comment-form-url{display:inline-block;width:100%;margin-block-end:.9rem}
@media(min-width:720px){
  .ay-comment-form form{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
  .ay-comment-form .comment-form-comment,
  .ay-comment-form .comment-reply-title,
  .ay-comment-form .comment-notes,
  .ay-comment-form .logged-in-as,
  .ay-comment-form .form-submit,
  .ay-comment-form .comment-form-cookies-consent{grid-column:1/-1}
  .ay-comment-form .comment-form-url{grid-column:1/-1}
}
.ay-comment-form label{display:block;font-size:.86rem;font-weight:700;margin-block-end:.4rem;
  color:var(--wp--preset--color--ink)}
.ay-comment-form input[type=text],
.ay-comment-form input[type=email],
.ay-comment-form input[type=url],
.ay-comment-form textarea{
  width:100%;box-sizing:border-box;padding:.8rem 1rem;font:inherit;font-size:.95rem;
  color:var(--wp--preset--color--ink);background:var(--wp--preset--color--base);
  border:1.5px solid var(--wp--preset--color--line);border-radius:12px;
  transition:border-color .18s,box-shadow .18s}
.ay-comment-form textarea{min-height:9rem;line-height:2;resize:vertical}
.ay-comment-form input:focus,.ay-comment-form textarea:focus{
  outline:none;border-color:var(--wp--preset--color--navy);
  box-shadow:0 0 0 4px rgba(48,79,142,.13)}
.ay-comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:.5rem;
  font-size:.84rem;color:var(--wp--preset--color--muted);margin-block:.4rem 1rem}
.ay-comment-form .comment-form-cookies-consent label{margin:0;font-weight:400}
.ay-comment-form .comment-form-cookies-consent input{width:auto}
.ay-comment-form .form-submit{margin:.4rem 0 0}
.ay-comment-form .submit{
  padding:.85rem 2.2rem;font:inherit;font-weight:700;font-size:1rem;color:#fff;
  background:var(--wp--preset--color--coral);border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(231,95,95,.75);
  transition:transform .18s,box-shadow .18s}
.ay-comment-form .submit:hover{transform:translateY(-2px);
  box-shadow:0 20px 38px -14px rgba(231,95,95,.85)}
@media(prefers-reduced-motion:reduce){
  .ay-comments .wp-block-comment-template > li,
  .ay-comment-form .submit{transition:none}
}

/* ══════════════ زرّ تحميل المزيد ══════════════ */
.ay-more__wrap{display:flex;justify-content:center;margin-block-start:2.2rem}
.ay-more{position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 2.4rem;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;
  color:var(--wp--preset--color--navy);background:var(--wp--preset--color--base);
  border:2px solid var(--wp--preset--color--line);border-radius:999px;
  transition:border-color .22s,color .22s,transform .22s,box-shadow .22s}
.ay-more:hover:not(:disabled){border-color:var(--wp--preset--color--coral);
  color:var(--wp--preset--color--coral);transform:translateY(-2px);
  box-shadow:0 18px 34px -24px rgba(231,95,95,.8)}
.ay-more:disabled{opacity:.7;cursor:progress}
.ay-more__spin{display:none;width:1em;height:1em;border-radius:50%;
  border:2px solid var(--wp--preset--color--line);
  border-top-color:var(--wp--preset--color--coral);
  animation:ay-more-spin .7s linear infinite}
.is-loading .ay-more__spin{display:inline-block}
@keyframes ay-more-spin{to{transform:rotate(360deg)}}

/* الترقيم الأصلي يبقى في الصفحة لجوجل ولمن لا جافاسكربت لديه. */
.ay-more__fallback{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.ay-more__new{animation:ay-more-in .45s ease both}
@keyframes ay-more-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ay-more,.ay-more__new{transition:none;animation:none}
  .ay-more__spin{animation-duration:2.4s}
}

/* البحث فوق خلفية داكنة (صدر المدوّنة). */
.ay-phero .wp-block-search{max-width:32rem;margin:1.9rem auto 0}
.ay-search--onDark .wp-block-search__inside-wrapper{
  background:rgba(255,255,255,.28);box-shadow:none}
.ay-search--onDark .wp-block-search__inside-wrapper::before{background:rgba(255,255,255,.1)}
.ay-search--onDark .wp-block-search__input{color:#fff}
.ay-search--onDark .wp-block-search__input::placeholder{color:rgba(255,255,255,.72)}
.ay-search--onDark .wp-block-search__inside-wrapper:focus-within{
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.5))}
.ay-search--onDark .wp-block-search__inside-wrapper:focus-within::before{background:rgba(12,26,56,.55)}
.ay-search--onDark .wp-block-search__button{background:var(--wp--preset--color--coral)}
/* الحشو السفلي أقلّ من العلوي: الفاصل المسنّن يشغل ارتفاعه أسفل
   الصدر، فحشوٌ متساوٍ يترك شريطاً كحلياً فارغاً فوق الفاصل. */
.ay-phero--blog{padding-block:clamp(3rem,6.4vw,4.6rem) clamp(2rem,4vw,3rem)}

/* ══════════════ الصفحات النظامية (شروط/خصوصية) ══════════════ */
.ay-phero--legal{padding-block:clamp(2.8rem,6vw,4.4rem) clamp(3.4rem,8vw,5.6rem)}

/* 🌟 عرض القراءة يُضيَّق عمداً هنا خلافاً لبقية الصفحات: نصّ نظامي
   طويل بلا صور، وسطرٌ بعرض ١٢٤٠ بكسل يفقد القارئ موضعه عند الرجوع
   إلى أول السطر التالي. ٦٨ حرفاً هو المدى المريح للقراءة العربية. */
.ay-legal{max-width:68ch;margin-inline:auto}
.ay-legal__h{position:relative;margin:2.6rem 0 .9rem;padding-inline-start:1rem;
  font-family:var(--wp--preset--font-family--display);line-height:1.55;
  color:var(--wp--preset--color--navy);scroll-margin-top:6rem}
.ay-legal__h:first-child{margin-block-start:0}
.ay-legal__h::before{content:"";position:absolute;inset-inline-start:0;top:.32em;bottom:.32em;
  width:4px;border-radius:999px;background:var(--wp--preset--color--coral)}
.ay-legal__p{margin:0 0 1.05rem;line-height:2.1;color:var(--wp--preset--color--ink);
  font-size:1.01rem;text-align:justify;text-justify:inter-word}
.ay-legal__p a{color:var(--wp--preset--color--coral);
  text-decoration-thickness:1px;text-underline-offset:.25em}
.ay-legal .wp-block-list{line-height:2.05;margin-block-end:1.2rem}
.ay-legal .ay-callout{margin-block-start:2.6rem}
.ay-legal .wp-block-buttons{margin-block-start:1.6rem}

/* 🌟 عنوان البطاقة بارتفاع سطرين دوماً: من العناوين الأربعة في «ماذا
   نُقدّم» واحدٌ يقع في سطر وثلاثةٌ في سطرين، فيبدأ نصّ البطاقة الثالثة
   أعلى من جاراتها بسطر كامل ويبدو الصفّ مائلاً. حجز سطرين يسوّيها
   دون قصّ أي عنوان. */
.wp-block-column > .wp-block-group.is-style-ayman-card-outline > h3,
.wp-block-column > .wp-block-group.is-style-ayman-card-flat > h3,
.wp-block-column > .wp-block-group.is-style-ayman-card > h3{
  min-height:calc(2 * 1.6em); display:flex; align-items:center;
  justify-content:center; text-align:center; margin-block:.2rem .35rem;
}
@media (max-width:781px){
  .wp-block-column > .wp-block-group.is-style-ayman-card-outline > h3,
  .wp-block-column > .wp-block-group.is-style-ayman-card-flat > h3,
  .wp-block-column > .wp-block-group.is-style-ayman-card > h3{ min-height:0 }
}

/* الفواصل عناصر HTML خام داخل حاويات مقيَّدة — تُعفى من حدّ العرض صراحةً. */
.is-layout-constrained > .ay-torn.alignfull,
.ay-torn.alignfull{ max-width:none; width:100% }

/* ══════════════ القائمة الرئيسية ══════════════ */

.ay-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ay-base) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-block-end:1px solid color-mix(in srgb, var(--ay-line) 70%, transparent);
  transition:box-shadow .3s, background .3s;
}
.ay-header:hover{ box-shadow:0 10px 30px -22px rgba(48,79,142,.55) }
.ay-header .wp-block-site-logo img{ width:186px; height:auto; transition:transform .3s }
.ay-header .wp-block-site-logo a:hover img{ transform:scale(1.04) }

.ay-nav{ gap:.15rem }
.ay-nav .wp-block-navigation-item{ position:relative }

/* 🌟 الرابط شبكة من عمودين: الأيقونة ثم النصّ. بهذا يبقى النصّ متّسقاً
   رأسياً مهما اختلف ارتفاع الأيقونة، ولا يُزيحه سطرٌ ثانٍ عند الضيق. */
.ay-nav a.wp-block-navigation-item__content{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1rem; border-radius:12px;
  font-family:var(--ay-f-display); font-weight:700; font-size:.94rem;
  color:var(--ay-navy); text-decoration:none; line-height:1.5;
  transition:color .22s, background .22s, transform .22s;
}
.ay-nav a.wp-block-navigation-item__content::before{
  content:""; flex:0 0 auto; width:1.12em; height:1.12em;
  background:currentColor; opacity:.82;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .22s;
}
.ay-nav a.wp-block-navigation-item__content:hover{
  color:var(--ay-coral); background:var(--ay-coral-tint); transform:translateY(-1px);
}
.ay-nav a.wp-block-navigation-item__content:hover::before{
  transform:translateY(-2px) rotate(-8deg) scale(1.1); opacity:1;
}

/* خطّ متدرّج ينمو من الوسط تحت العنصر النشط وعند التمرير. */
.ay-nav .wp-block-navigation-item::after{
  content:""; position:absolute; inset-inline:12%; bottom:2px; height:2px;
  border-radius:2px; transform:scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,var(--ay-navy),var(--ay-coral));
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.ay-nav .wp-block-navigation-item:hover::after,
.ay-nav .current-menu-item::after{ transform:scaleX(1) }

.ay-nav .current-menu-item > a.wp-block-navigation-item__content{
  color:var(--ay-coral); background:var(--ay-coral-tint);
}

/* الترويسة الكحلية: الأيقونات تتبع لون النصّ تلقائياً بحكم currentColor. */
.ay-header.is-style-nav-dark .ay-nav a.wp-block-navigation-item__content{ color:#eaf0ff }
.ay-header.is-style-nav-dark .ay-nav a.wp-block-navigation-item__content:hover,
.ay-header.is-style-nav-dark .ay-nav .current-menu-item > a{ color:#fff; background:rgba(255,255,255,.14) }

@media (max-width:1080px){
  .ay-header .wp-block-site-logo img{ width:140px }
  .ay-nav a.wp-block-navigation-item__content{ padding:.48rem .6rem; font-size:.82rem; gap:.35rem }
}
@media (max-width:760px){
  .ay-nav a.wp-block-navigation-item__content::before{ width:1em; height:1em }
}
@media (prefers-reduced-motion:reduce){
  .ay-nav a.wp-block-navigation-item__content,
  .ay-nav a.wp-block-navigation-item__content::before,
  .ay-nav .wp-block-navigation-item::after,
  .ay-header .wp-block-site-logo img{ transition:none }
}

/* أيقونة كل عنصر — تُطابَق برابطه، وعنصرٌ بلا مطابقة يظهر بلا أيقونة */
/* 🌟 أيقونة الرئيسية تُطابَق بموضع العنصر لا برابطه: الرابط
   يحمل نطاق الموقع كاملاً، فأي محدِّد يذكره يتعطّل لحظة نقل
   الموقع إلى نطاق آخر — ويختفي الرمز بلا أي خطأ يدلّ عليه. */
.ay-nav .wp-block-navigation-item:first-child a::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011.5%2012%204l9%207.5M5.5%2010v9.5h13V10%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011.5%2012%204l9%207.5M5.5%2010v9.5h13V10%22%2F%3E%3C%2Fsvg%3E") }
.ay-nav a[href$="/blog/"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5h6.5a2.5%202.5%200%200%201%202.5%202.5v11a2%202%200%200%200-2-2H4zM20%205.5h-6.5A2.5%202.5%200%200%200%2011%208v11a2%202%200%200%201%202-2h7z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.5h6.5a2.5%202.5%200%200%201%202.5%202.5v11a2%202%200%200%200-2-2H4zM20%205.5h-6.5A2.5%202.5%200%200%200%2011%208v11a2%202%200%200%201%202-2h7z%22%2F%3E%3C%2Fsvg%3E") }
.ay-nav a[href$="/start-here/"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5l2.6%205.3%205.9.85-4.25%204.15%201%205.85L12%2016.9l-5.25%202.75%201-5.85L3.5%209.65l5.9-.85z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5l2.6%205.3%205.9.85-4.25%204.15%201%205.85L12%2016.9l-5.25%202.75%201-5.85L3.5%209.65l5.9-.85z%22%2F%3E%3C%2Fsvg%3E") }
.ay-nav a[href$="/tools/"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202.5%204.5%2013.5h6L11%2021.5%2019.5%2010.5h-6z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202.5%204.5%2013.5h6L11%2021.5%2019.5%2010.5h-6z%22%2F%3E%3C%2Fsvg%3E") }
.ay-nav a[href$="/call-me/"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%206.5h17v11h-17zM3.5%207l8.5%206%208.5-6%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%206.5h17v11h-17zM3.5%207l8.5%206%208.5-6%22%2F%3E%3C%2Fsvg%3E") }

/* ══════════════ فواصل ناعمة بلا شكل هندسي ══════════════ */
.ay-div__soft{display:block;width:100%;height:100%}

/* تلاشٍ لوني: أنعم انتقال ممكن — لا حافّة ولا شكل. */
.ay-div--fade .ay-div__soft{
  background:linear-gradient(to bottom,var(--ay-div-top,transparent),var(--ay-div-bottom,#304F8E))}

/* وهج ضبابي: هالة لونية تتسرّب من القسم التالي إلى ما قبله. */
.ay-div--glow{background:var(--ay-div-top,transparent);position:relative;overflow:hidden}
.ay-div--glow .ay-div__soft{
  background:radial-gradient(70% 140% at 50% 108%,var(--ay-div-bottom,#304F8E) 0%,
             color-mix(in srgb,var(--ay-div-bottom,#304F8E) 42%,transparent) 42%,transparent 72%)}

/* شبكة ضبابية: ثلاث هالات متداخلة — أثر «mesh gradient» الحديث. */
.ay-div--mesh{background:var(--ay-div-top,transparent);overflow:hidden}
.ay-div--mesh .ay-div__soft{
  filter:blur(26px);
  background:
    radial-gradient(38% 120% at 18% 100%,var(--ay-div-bottom,#304F8E),transparent 70%),
    radial-gradient(34% 110% at 52% 118%,color-mix(in srgb,var(--ay-div-bottom,#304F8E) 70%,#fff),transparent 68%),
    radial-gradient(40% 130% at 86% 104%,var(--ay-div-bottom,#304F8E),transparent 72%)}

/* خيط متدرّج يتلاشى عند الطرفين — للفصل الخفيف داخل قسم واحد. */
.ay-div--line-soft{background:var(--ay-div-top,transparent);display:grid;place-items:center}
.ay-div--line-soft .ay-div__soft{
  height:1px;width:min(78%,900px);border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ay-div-bottom,#304F8E),transparent);
  opacity:.55}

/* نقاط متلاشية — فاصل هادئ بلا خطّ صريح. */
.ay-div--dots{background:var(--ay-div-top,transparent);display:grid;place-items:center}
.ay-div--dots .ay-div__soft{
  height:100%;
  background-image:radial-gradient(currentColor 1.4px,transparent 1.4px);
  background-size:14px 14px;color:var(--ay-div-bottom,#304F8E);opacity:.28;
  -webkit-mask-image:radial-gradient(70% 100% at 50% 50%,#000,transparent 72%);
          mask-image:radial-gradient(70% 100% at 50% 50%,#000,transparent 72%)}

/* ظلّ علوي ناعم: يوحي بأن القسم التالي يعلو ما قبله بلا أي خطّ. */
.ay-div--shadow{background:var(--ay-div-bottom,#304F8E)}
.ay-div--shadow .ay-div__soft{
  background:var(--ay-div-top,transparent);
  border-end-start-radius:36px;border-end-end-radius:36px;
  box-shadow:0 22px 40px -18px rgba(12,24,52,.45)}

/* ══════════════ حركات ناعمة تُطبَّق على أي كتلة ══════════════ */
/* 🌟 العنصر ظاهر افتراضاً، والسكربت هو من «يُسلِّحه»: لو تعطّلت
   الجافاسكربت أو لم يصل السكربت، يبقى المحتوى مقروءاً كاملاً بدل أن
   يختفي إلى الأبد — وهو ما حدث فعلاً برسم الأسهم حين انتظر صنفاً
   لا يضيفه أحد. */
[class*="is-style-ay-rv-"]{--ay-rv-dur:.72s;--ay-rv-delay:0s}

.is-armed[class*="is-style-ay-rv-"]{
  opacity:0;
  transition:opacity var(--ay-rv-dur) cubic-bezier(.22,.7,.28,1) var(--ay-rv-delay),
             transform var(--ay-rv-dur) cubic-bezier(.22,.7,.28,1) var(--ay-rv-delay),
             filter var(--ay-rv-dur) ease var(--ay-rv-delay);
  will-change:opacity,transform}
.is-armed.is-in[class*="is-style-ay-rv-"]{opacity:1;transform:none;filter:none}

.is-armed.is-style-ay-rv-up{transform:translateY(26px)}
.is-armed.is-style-ay-rv-down{transform:translateY(-26px)}
.is-armed.is-style-ay-rv-start{transform:translateX(34px)}
.is-armed.is-style-ay-rv-end{transform:translateX(-34px)}
.is-armed.is-style-ay-rv-zoom{transform:scale(.93)}
.is-armed.is-style-ay-rv-pop{transform:scale(.86);
  transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.is-armed.is-style-ay-rv-blur{filter:blur(12px);transform:translateY(14px)}
.is-armed.is-style-ay-rv-fade{transform:none}
.is-armed.is-style-ay-rv-tilt{transform:perspective(900px) rotateX(9deg) translateY(20px);
  transform-origin:top center}

/* تتابُع الأبناء: كل ابن يتأخّر عن سابقه فيدخل الصفّ واحداً بعد واحد. */
.is-style-ay-rv-stagger > *{--ay-rv-dur:.66s}
.is-armed.is-style-ay-rv-stagger > *{opacity:0;transform:translateY(22px);
  transition:opacity var(--ay-rv-dur) cubic-bezier(.22,.7,.28,1) var(--ay-rv-delay),
             transform var(--ay-rv-dur) cubic-bezier(.22,.7,.28,1) var(--ay-rv-delay)}
.is-armed.is-in.is-style-ay-rv-stagger > *{opacity:1;transform:none}
.is-armed.is-style-ay-rv-stagger > :nth-child(1){--ay-rv-delay:0s}
.is-armed.is-style-ay-rv-stagger > :nth-child(2){--ay-rv-delay:.09s}
.is-armed.is-style-ay-rv-stagger > :nth-child(3){--ay-rv-delay:.18s}
.is-armed.is-style-ay-rv-stagger > :nth-child(4){--ay-rv-delay:.27s}
.is-armed.is-style-ay-rv-stagger > :nth-child(5){--ay-rv-delay:.36s}
.is-armed.is-style-ay-rv-stagger > :nth-child(6){--ay-rv-delay:.45s}
.is-armed.is-style-ay-rv-stagger > :nth-child(n+7){--ay-rv-delay:.54s}

/* حركات دائمة خفيفة — تعمل بلا مراقب تمرير. */
.is-style-ay-float{animation:ay-float 5.5s ease-in-out infinite}
@keyframes ay-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.is-style-ay-pulse{animation:ay-pulse 3.2s ease-in-out infinite}
@keyframes ay-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.is-style-ay-sheen{position:relative;overflow:hidden;isolation:isolate}
.is-style-ay-sheen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-120%);animation:ay-sheen 4.5s ease-in-out infinite}
@keyframes ay-sheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
  .is-armed[class*="is-style-ay-rv-"],
  .is-armed.is-style-ay-rv-stagger > *{opacity:1!important;transform:none!important;
    filter:none!important;transition:none!important}
  .is-style-ay-float,.is-style-ay-pulse,.is-style-ay-sheen::after{animation:none}
}

/* ══════════════ أزرار ══════════════ */
.wp-block-button.is-style-ayman-grad .wp-block-button__link{
  background:linear-gradient(120deg,var(--ay-coral),#f08a5d);border:0;color:#fff;
  box-shadow:0 14px 30px -14px rgba(231,95,95,.8)}
.wp-block-button.is-style-ayman-grad .wp-block-button__link:hover{
  transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(231,95,95,.9)}

.wp-block-button.is-style-ayman-glow .wp-block-button__link{
  position:relative;background:var(--ay-navy);color:#fff;border:0;isolation:isolate}
.wp-block-button.is-style-ayman-glow .wp-block-button__link::before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--ay-coral),var(--ay-navy),var(--ay-coral));
  opacity:0;transition:opacity .3s;filter:blur(7px)}
.wp-block-button.is-style-ayman-glow .wp-block-button__link:hover::before{opacity:.95}

.wp-block-button.is-style-ayman-arrow .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.5rem}
.wp-block-button.is-style-ayman-arrow .wp-block-button__link::after{
  content:"←";transition:transform .25s}
.wp-block-button.is-style-ayman-arrow .wp-block-button__link:hover::after{
  transform:translateX(-5px)}

.wp-block-button.is-style-ayman-soft .wp-block-button__link{
  background:var(--ay-coral-tint);color:var(--ay-coral);border:0;font-weight:700}
.wp-block-button.is-style-ayman-soft .wp-block-button__link:hover{
  background:var(--ay-coral);color:#fff}

.wp-block-button .wp-block-button__link{transition:transform .22s,box-shadow .22s,background .22s,color .22s}

/* ══════════════ قوالب الصور ══════════════ */
.wp-block-image.is-style-ayman-blob img{
  border-radius:62% 38% 44% 56%/48% 58% 42% 52%;
  animation:ay-blobmorph 14s ease-in-out infinite}
@keyframes ay-blobmorph{
  0%,100%{border-radius:62% 38% 44% 56%/48% 58% 42% 52%}
  50%{border-radius:42% 58% 62% 38%/58% 42% 58% 42%}}

.wp-block-image.is-style-ayman-arch img{border-radius:999px 999px 18px 18px}
.wp-block-image.is-style-ayman-soft img{border-radius:22px;
  box-shadow:0 26px 54px -30px rgba(12,24,52,.55)}
.wp-block-image.is-style-ayman-ring{position:relative;isolation:isolate}
.wp-block-image.is-style-ayman-ring img{border-radius:20px;position:relative;z-index:1}
.wp-block-image.is-style-ayman-ring::before{
  content:"";position:absolute;inset:-10px;z-index:0;border-radius:28px;
  background:linear-gradient(130deg,var(--ay-coral),var(--ay-navy));opacity:.18}
.wp-block-image.is-style-ayman-mask img{
  -webkit-mask-image:radial-gradient(82% 82% at 50% 46%,#000 62%,transparent 100%);
          mask-image:radial-gradient(82% 82% at 50% 46%,#000 62%,transparent 100%)}
@media (prefers-reduced-motion:reduce){
  .wp-block-image.is-style-ayman-blob img{animation:none}
}

/* 🌟 لا ميلان على الجوال: الدوران درجةً واحدة يُخرج زاوية الصورة بضعة
   بكسلات خارج الشاشة، فيظهر شريط تمرير أفقي في صفحة لا تحتاجه —
   ٨ بكسل قِستُها فعلاً عند عرض 390. والميلان زينة تُستغنى عنها هنا. */
@media (max-width:640px){
  .ay-tilt-row .wp-block-image:nth-child(odd) img,
  .ay-tilt-row .wp-block-image:nth-child(even) img{ transform:none }
}
/* حزام أمان عام: لا عنصر يتجاوز عرض الشاشة أفقياً. */
html,body{ overflow-x:clip }