/* ==========================================================================
   AAC Energy — Components
   محرك التنسيق المعاد بناؤه. مبني على Grid وتوكنات tokens.css.
   لا يعتمد على أي عرض نسبي مأخوذ من تصدير Figma.
   ========================================================================== */

/* ---------- الجذر ---------- */
body.aac-ltr, body.aac-rtl { margin: 0; padding: 0; }
.aac-main > * { margin-block: 0; }

/* ---------- القسم ---------- */
.aac-section {
  position: relative;
  padding-block: clamp(3rem, 1.6rem + 5vw, 7rem);
}
.aac-section--dark { background-color: #091C31; color: var(--aac-white); }
.aac-section--dark :is(h1, h2, h3, h4, p, li) { color: var(--aac-white); }
.aac-section--dark .aac-c-muted { color: rgba(255, 255, 255, 0.72); }

/* ---------- الحاوية ----------
   كل محتوى قسم يمر عبر حاوية واحدة: عرض التصميم + هوامش متجاوبة */
.aac-container {
  inline-size: 100%;
  max-inline-size: var(--aac-container, 80rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 5rem);
}
.aac-section > .aac-box:not(.aac-container) { inline-size: 100%; }

/* ---------- المكدّس الافتراضي ---------- */
.aac-box {
  display: flex;
  flex-direction: column;
  gap: var(--aac-space-4);
  min-inline-size: 0;
}
/* الصفوف الأفقية من التصميم يجب ألا يدهسها الاتجاه العمودي أعلاه */
.aac-sec .aac-box.is-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.aac-sec .aac-box.is-horizontal > * { flex: 1 1 320px; min-inline-size: 0; }
@media (max-width: 48rem) { .aac-sec .aac-box.is-horizontal { flex-direction: column; align-items: stretch; } }

/* المحاذاة الرأسية من ووردبريس تقلّص الأبناء لعرض المحتوى — تُبطَل، والتوسيط يبقى نصياً */
.aac-sec .is-vertical.is-content-justification-center { align-items: stretch; text-align: center; }
.aac-sec .is-vertical.is-content-justification-left   { align-items: stretch; }
.aac-sec .aac-grid .is-vertical.is-content-justification-center,
.aac-sec .aac-grid .is-vertical.is-content-justification-center * { text-align: start; }

/* الصور تملأ عمودها */
.aac-sec figure.aac-img { inline-size: 100%; margin: 0; }
.aac-sec figure.aac-img img { inline-size: 100%; block-size: auto; border-radius: 12px; }

/* البطاقات: كل صندوق بزوايا 16 يحمل نصاً */
.aac-sec .aac-box[style*="border-radius:16px"]:has(p, h2, h3) {
  background-color: var(--aac-white);
  box-shadow: 0 10px 30px -8px rgba(2, 7, 19, 0.10);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.aac-section--dark .aac-box[style*="border-radius:16px"]:has(p, h2, h3),
.aac-ov .aac-box[style*="border-radius:16px"]:has(p, h2, h3) {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.aac-box > * { margin-block: 0; }
/* التوسيط الرأسي من Figma لا يعني توسيط النص — يُطبّق بصرياً لكل قسم */
.aac-stack--center { align-items: stretch; }

/* ---------- الشبكة ----------
   عمود واحد على الجوال، ثم تتوسع. لا تكسّر ولا تجاوز أفقي. */
.aac-grid {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  align-items: start;
  grid-template-columns: 1fr;
}
.aac-grid > .aac-box { min-inline-size: 0; }
@media (min-width: 48rem) {
  .aac-grid--2, .aac-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aac-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .aac-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aac-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* صف نص + صورة: يتساوى العمودان ويتكدّسان تحت 64rem */
.aac-grid--2 > .aac-media, .aac-grid--2 > .aac-box { align-self: stretch; }



/* النصوص تلتف دائماً — لا قصّ ولا انكسار داخل الكلمة */
.aac-section :is(h1, h2, h3, h4, p) { overflow-wrap: break-word; text-wrap: pretty; }
.has-text-align-center { text-align: center; }
.aac-sec { text-align: start; }

/* ---------- البطاقة ---------- */
.aac-card { border-radius: 16px; }
.aac-section--dark .aac-card,
.aac-ov .aac-card {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

/* ---------- الوسائط ---------- */
.aac-media { border-radius: 12px; overflow: hidden; margin: 0; }
.aac-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.aac-grid--2 > .aac-media img { min-block-size: 16rem; }

/* ---------- الأقسام ذات الخلفية المصوّرة (هيرو / CTA / داكن) ---------- */
.aac-ov { position: relative; isolation: isolate; color: var(--aac-white); }
.aac-ov__bg { position: absolute; inset: 0; z-index: -2; }
.aac-ov__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.aac-ov::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(4, 12, 26, 0.86), rgba(4, 12, 26, 0.80));
}
.aac-ov--hero::after {
  background:
    linear-gradient(to right, rgba(2, 7, 19, 0.86) 0%, rgba(2, 7, 19, 0.45) 55%, rgba(2, 7, 19, 0.15) 100%),
    linear-gradient(to top, rgba(2, 7, 19, 0.4), rgba(2, 7, 19, 0) 45%);
}
[dir="rtl"] .aac-ov--hero::after {
  background:
    linear-gradient(to left, rgba(2, 7, 19, 0.90) 0%, rgba(2, 7, 19, 0.58) 55%, rgba(2, 7, 19, 0.34) 100%),
    linear-gradient(to top, rgba(2, 7, 19, 0.5), rgba(2, 7, 19, 0) 45%);
}
.aac-ov :is(h1, h2, h3, p) { color: var(--aac-white); }
.aac-ov .aac-c-muted { color: rgba(255, 255, 255, 0.78); }
.aac-ov--hero { padding-block: clamp(4rem, 2rem + 8vw, 9rem); }
.aac-ov--hero .aac-container > .aac-box { max-inline-size: 60rem; align-items: flex-start; }

/* السطر المتدرّج في عناوين الهيرو */
.aac-t--grad {
  background-image: linear-gradient(90deg, #2F5D97, #4D97E5 55%, #80AAEE);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #4D97E5;
}
[dir="rtl"] .aac-t--grad { background-image: linear-gradient(-90deg, #2F5D97, #4D97E5 55%, #80AAEE); }

/* ---------- الأزرار ---------- */
a.aac-figbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--aac-space-2);
  padding: 0.875rem 1.75rem; border-radius: 8px;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); font-weight: 600; line-height: 1.2;
  text-align: center; transition: filter var(--aac-transition), background-color var(--aac-transition), color var(--aac-transition);
}
a.aac-figbtn--sm { padding: 0.5rem 1rem; font-size: 1rem; }
a.aac-figbtn--grad { background-image: linear-gradient(135deg, #1A385E, #4583D1); color: var(--aac-white) !important; }
a.aac-figbtn--grad:hover { filter: brightness(1.12); box-shadow: var(--aac-shadow-primary); }
a.aac-figbtn--outline-light { border: 2px solid var(--aac-white); color: var(--aac-white) !important; }
a.aac-figbtn--outline-light:hover { background-color: var(--aac-white); color: var(--aac-ink) !important; }
a.aac-figbtn--outline-blue { border: 2px solid var(--aac-primary-light); color: var(--aac-primary-light) !important; }
a.aac-figbtn--outline-blue:hover { background-color: var(--aac-primary-light); color: var(--aac-white) !important; }

/* صف أزرار متجاور يلتف على الجوال */
.aac-box:has(> a.aac-figbtn + a.aac-figbtn) { flex-direction: row; flex-wrap: wrap; gap: var(--aac-space-4); }
.aac-stack--center:has(> a.aac-figbtn + a.aac-figbtn) { justify-content: center; }

/* ---------- الشارات (pills) ---------- */
.aac-box[style*="border-radius:100px"] { align-self: flex-start; flex-direction: row; padding: 0.375rem 1rem; }
.aac-stack--center > .aac-box[style*="border-radius:100px"] { align-self: center; }

/* ---------- الأرقام الزخرفية ---------- */
p.aac-num {
  font-size: clamp(3rem, 2rem + 3vw, 5rem) !important;
  font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.03em;
  color: #E7ECF4 !important; flex-shrink: 0;
}
@supports (-webkit-text-stroke: 1px #000) {
  p.aac-num { color: transparent !important; -webkit-text-stroke: 2.5px #D9E1EE; }
}
.aac-section--dark p.aac-num, .aac-ov p.aac-num { -webkit-text-stroke-color: rgba(255,255,255,0.28); }

/* ---------- التعداد المثلث ---------- */
.aac-tri {
  display: inline-block; flex-shrink: 0; inline-size: 0.8rem; block-size: 0.9rem;
  margin-block-start: 0.3rem; background-color: var(--aac-primary);
  -webkit-mask: var(--aac-tri-mask); mask: var(--aac-tri-mask);
}
:root { --aac-tri-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M1.5 1.2c0-.9 1-1.5 1.8-1L11 6c.8.5.8 1.6 0 2.1L3.3 13c-.8.5-1.8-.1-1.8-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="rtl"] .aac-tri { transform: scaleX(-1); }
.aac-section--dark .aac-tri, .aac-ov .aac-tri { background-color: var(--aac-white); }
.aac-tri--inline { vertical-align: -0.05em; margin-inline-end: 8px; margin-block-start: 0; }

.aac-bullet { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.aac-bullet--plain { font-weight: 600; }

/* ---------- أيقونات التواصل ---------- */
.aac-ico { display: inline-block; flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; background-color: var(--aac-primary-light); }
.aac-ico--mail { -webkit-mask: var(--m-mail); mask: var(--m-mail); }
.aac-ico--pin  { -webkit-mask: var(--m-pin);  mask: var(--m-pin); }
.aac-ico--in   { -webkit-mask: var(--m-in);   mask: var(--m-in); }
:root {
  --m-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm2.4.9 7 5.6a1 1 0 0 0 1.2 0l7-5.6H4.4zM20 8.2l-6.9 5.5a3 3 0 0 1-3.7 0L2.5 8.2H4v11h16v-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  --m-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 1 7.5 7.5c0 5.2-6.2 11.5-6.9 12.2a.9.9 0 0 1-1.2 0C10.7 21 4.5 14.7 4.5 9.5A7.5 7.5 0 0 1 12 2zm0 4.6a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  --m-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM2.5 9h3.2v12H2.5zM9 9h3v1.7h.1c.4-.8 1.5-1.9 3.3-1.9 3.5 0 4.1 2.3 4.1 5.2V21h-3.2v-6c0-1.4 0-3.2-2-3.2s-2.2 1.5-2.2 3.1V21H9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- شارة تشغيل الفيديو ---------- */
.aac-media--video { position: relative; }
.aac-media--video .aac-play {
  position: absolute; inset: 0; margin: auto; inline-size: 64px; block-size: 64px;
  border-radius: 50%; background-color: var(--aac-primary-light);
  box-shadow: 0 8px 24px rgba(2, 7, 19, 0.35); pointer-events: none;
}
.aac-media--video .aac-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; inline-size: 22px; block-size: 24px;
  background-color: var(--aac-white); -webkit-mask: var(--aac-tri-mask); mask: var(--aac-tri-mask);
}

/* ---------- رسم تقييم المخاطر (UPS) ---------- */
.aac-chart { display: flex; justify-content: space-between; align-items: flex-end; inline-size: 100%; block-size: 12rem; gap: 4%; }
.aac-chart span { flex: 1; block-size: var(--h, 60%); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #4D97E5, #1A385E); }

/* ---------- نموذج التواصل ---------- */
.aac-form-wrap { border: 0; box-shadow: 0 18px 45px -12px rgba(2, 7, 19, 0.14); }
.aac-form input, .aac-form select, .aac-form textarea { background-color: #F8FAFD; }
.aac-form input:focus, .aac-form select:focus, .aac-form textarea:focus { background-color: var(--aac-white); }
.aac-btn--send { background-image: linear-gradient(135deg, #1A385E, #4583D1); padding-inline: var(--aac-space-8); }
.aac-btn--send:hover { filter: brightness(1.12); }
.aac-ico-send {
  display: inline-block; inline-size: 1rem; block-size: 1rem; background-color: currentColor;
  -webkit-mask: var(--m-send); mask: var(--m-send);
}
:root { --m-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 2.3 21.2 10.9c.9.4.9 1.7 0 2.2L3.4 21.7c-1 .5-2-.5-1.6-1.5L4.6 13 14 12 4.6 11 1.8 3.8c-.4-1 .7-2 1.6-1.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="rtl"] .aac-ico-send { transform: scaleX(-1); }


/* ==========================================================================
   تصغير متجاوب يحترم قيم التصميم الدقيقة
   القيم أعلاه هي قياسات Figma على 1440 وتبقى كما هي على الديسكتوب.
   هنا نصغّرها نسبياً للشاشات الأصغر فقط.
   ========================================================================== */
@media (max-width: 1200px) {
  [style*="font-size:116px"] { font-size: 92.8px !important; }
  [style*="font-size:96px"] { font-size: 76.8px !important; }
  [style*="font-size:60px"] { font-size: 48.0px !important; }
  [style*="font-size:54px"] { font-size: 43.2px !important; }
  [style*="font-size:48px"] { font-size: 38.4px !important; }
  [style*="font-size:36px"] { font-size: 28.8px !important; }
  [style*="font-size:30px"] { font-size: 24.0px !important; }
  [style*="font-size:24px"] { font-size: 19.2px !important; }
  [style*="font-size:20px"] { font-size: 16.0px !important; }
  [style*="font-size:18px"] { font-size: 14.4px !important; }
  [style*="font-size:16px"] { font-size: 13px !important; }
  [style*="font-size:15.6px"] { font-size: 13px !important; }
  [style*="font-size:15px"] { font-size: 13px !important; }
  [style*="font-size:14px"] { font-size: 13px !important; }
  [style*="font-size:12px"] { font-size: 13px !important; }
}
@media (max-width: 768px) {
  [style*="font-size:116px"] { font-size: 69.6px !important; }
  [style*="font-size:96px"] { font-size: 57.6px !important; }
  [style*="font-size:60px"] { font-size: 36.0px !important; }
  [style*="font-size:54px"] { font-size: 32.4px !important; }
  [style*="font-size:48px"] { font-size: 28.8px !important; }
  [style*="font-size:36px"] { font-size: 21.6px !important; }
  [style*="font-size:30px"] { font-size: 18.0px !important; }
  [style*="font-size:24px"] { font-size: 14.4px !important; }
  [style*="font-size:20px"] { font-size: 13px !important; }
  [style*="font-size:18px"] { font-size: 13px !important; }
  [style*="font-size:16px"] { font-size: 13px !important; }
  [style*="font-size:15.6px"] { font-size: 13px !important; }
  [style*="font-size:15px"] { font-size: 13px !important; }
  [style*="font-size:14px"] { font-size: 13px !important; }
  [style*="font-size:12px"] { font-size: 13px !important; }
}