/* ==========================================================================
   CUSTOM LAYER  —  طبقة التخصيص
   --------------------------------------------------------------------------
   style.css هو تصميم الموقع الأساسي — لا تعدّله.
   كل التعديلات الخاصة بنا (اللوجو، زر اللغة، دعم العربية RTL) هنا.

   style.css carries the base design — leave it alone.
   Everything specific to this site (logo, language switch, Arabic RTL
   support) lives in this file so the base can be replaced wholesale.
   ========================================================================== */

/* ====================================================== 0. DIMCO BRAND
   ألوان وخطوط ديمكو كما في دليل الهوية (Brand Guideline.pdf).
   هذا الملف يُحمَّل بعد style.css فتفوز القيم هنا.

   The DIMCO palette and typefaces, straight from the brand guideline.
   This file loads after style.css, so these values win.               */
:root {
  --dimco-navy:   #092C4A;   /* Pantone 5395 C */
  --dimco-orange: #F16522;   /* Pantone 1585 C */
  --dimco-gray:   #9CA3AF;   /* Pantone 429 C  */
  --dimco-tint:   #FCE4D8;   /* برتقالي فاتح — بديل الأصفر الباهت في القالب */

  /* نعيد تعريف متغيّرات القالب بدل تعديل style.css */
  --brand:  var(--dimco-navy);
  --yellow: var(--dimco-orange);
  --grey:   var(--dimco-gray);

  --body-font:  "Roboto", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --montserrat: "Roboto", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* المواضع التي كتب فيها القالب لونه القديم مباشرةً بدل المتغيّر */
.btn-yellow { border: 2px solid rgba(241, 101, 34, .62); }

.navbar .btn-primary .icon,
footer .form__wrap .btn { background-color: var(--dimco-tint); }

footer .form__wrap { border-color: var(--dimco-tint); }
footer .label      { color: var(--dimco-tint); }
footer             { background-color: var(--dimco-navy); }

/* أيقونات بيانات التواصل في الفوتر على مستوى واحد.
   القالب كان يوسّطها رأسياً، فكان العنوان (٣ أسطر) يُنزل أيقونته عن الباقي.
   The template centred each icon against its own text, so the three-line
   address pushed its icon below the others. Pin them to the top instead. */
footer .row > [class*="col-"] > .d-flex:has(> .icon__box) {
  align-items: flex-start !important;
}
footer .icon__box { flex: 0 0 auto; }

@media (max-width: 991px) {
  .header__wrapper .carousel-item::before { background: var(--dimco-navy); }
}

/* النمط من دليل الهوية — علامة مائية خفيفة خلف شريط الأرقام فقط.
   The guideline pattern, used once as a faint watermark behind the
   counters strip. Delete this block to drop it.                       */
.bg-primary:has(.counter__row) {
  position: relative;
  overflow: hidden;
}
.bg-primary:has(.counter__row)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern.png") repeat-x left center / auto 150%;
  opacity: .14;
  pointer-events: none;
}
.bg-primary:has(.counter__row) > * { position: relative; }

.contact__wrapper .map__box .curve_top {
  border-left-color: var(--dimco-navy);
  border-top-color: var(--dimco-navy);
}
.contact__wrapper .map__box .curve_bottom {
  border-right-color: var(--dimco-navy);
  border-bottom-color: var(--dimco-navy);
}

/* ------------------------------------------------- 0.1 منع السحب الأفقي
   شريط شعارات الشركاء عرضه ثابت 7200px حتى تعمل حركته، لكن حاويته في
   القالب الأصلي بلا قصّ — فكانت الصفحة كلها تُسحب أفقياً وتظهر فارغة من
   جانب. نقصّ الحاوية، ونضع شبكة أمان على المستند نفسه.

   The partner-logo marquee is a fixed 7200px wide so its animation works,
   but the template never clipped its container, so the whole page could be
   dragged sideways. Clip the container, and belt-and-braces the document.
   clip (not hidden) so no scroll container is created and sticky still works. */
html,
body { overflow-x: clip; }

.container-fluid:has(> .scroll-animation),
.container:has(> .scroll-animation) { overflow: hidden; }

/* ----------------------------------------------------------------- 1. LOGO
   اللوجو أعرض من لوجو القالب الأصلي، فنحدّد له ارتفاعاً مناسباً.
   Our wordmark is wider than the template's, so cap the height instead.   */
.navbar .navbar-brand img { height: 2.6rem; max-width: 100%; }
footer .logo img { height: 2.6rem; max-width: 100%; }

@media (max-width: 576px) {
  .navbar .navbar-brand img { height: 2rem; }
}

/* ------------------------------------------------------- 2. LANGUAGE BUTTON
   زر تبديل اللغة داخل الشريط العلوي بجوار أيقونات التواصل.
   Sits in the top bar next to the social icons.                           */
.lang__item { display: inline-flex; }

.lang__toggle {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 2rem;
  padding: .3rem .85rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.lang__toggle:hover { background: var(--yellow); color: var(--brand); }
.lang__toggle:active { transform: scale(.96); }
.lang__toggle svg { flex: 0 0 auto; }

/* --------------------------------------------------- 3. IMAGE PROPORTIONS
   صور القالب الأصلي كانت بنسبة ثابتة (600×360). صور ورشتنا بنسب مختلفة،
   فنثبّت النسبة هنا حتى تبقى الكروت متساوية الارتفاع ومصطفّة.

   The template's photos were a uniform 600×360; ours are not, so the card
   media is pinned to the same ratio and cropped — otherwise the grid ends
   up ragged, with each card's title at a different height.               */
.service__card > a img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }

/* زوايا حادة لصور بطاقات الخدمات والمدونة — تناسب الحواف المائلة في الهوية.
   القالب كان يدوّرها بأصناف Bootstrap داخل الـHTML، فنلغيها هنا بدل تعديل
   ٢٣ صفحة.  Square corners on the card media: the template rounded them with
   Bootstrap classes in the markup, so undo it here instead of editing every
   page.                                                                  */
.service__card,
.service__card > a,
.service__card > a img { border-radius: 0 !important; }

/* معرض الصور داخل صفحات الخدمات */
.galleryItem img,
a.galleryItem > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* صور بطاقات "خبرتنا" داخل صفحة إصلاح المحركات */
.expert__repair__card img,
.rewind__industry__card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------- 4. MAP BOX
   لو لم يُضبط رابط الخريطة في config.js نعرض لوحة بديلة بدل إطار فارغ.
   Stand-in panel shown when no Google Maps embed is configured.           */
.map__placeholder {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 22rem;
  padding: 2rem;
  background: rgba(255, 255, 255, .07);
  border: 1px dashed rgba(255, 255, 255, .35);
  color: #fff;
}

/* ==========================================================================
   4. ARABIC / RTL  —  العربية واتجاه الكتابة من اليمين
   --------------------------------------------------------------------------
   نسخة Bootstrap RTL تُحمَّل تلقائياً من الهيدر عند اختيار العربية،
   وهنا نصحّح ما تبقّى من تفاصيل التصميم الأساسي المكتوب أصلاً LTR.
   ========================================================================== */

/* الخط العربي | Arabic typeface — تجوّل حسب دليل الهوية */
[dir="rtl"] body,
[dir="rtl"] .ff-montserrat,
[dir="rtl"] .ff-montsterrat {
  font-family: "Tajawal", "Roboto", system-ui, sans-serif;
}

/* العربية أعرض بصرياً — نخفّف أحجام العناوين الضخمة قليلاً */
[dir="rtl"] .display-4 { font-size: calc(1.475rem + 2.7vw); }
[dir="rtl"] .display-5 { font-size: calc(1.425rem + 2.1vw); }
[dir="rtl"] .display-6 { font-size: calc(1.375rem + 1.5vw); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .lead-lg, [dir="rtl"] .lead-sm { line-height: 1.55; }
[dir="rtl"] p, [dir="rtl"] li { line-height: 1.95; }

/* لا نقلب الأرقام ولا وسائل الاتصال */
[dir="rtl"] .counter,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .form-control[type="email"],
[dir="rtl"] .form-control[type="tel"] {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .counter__row a[href^="tel:"] { display: inline-block; }

/* الشريط العلوي وأيقونات التواصل */
[dir="rtl"] .header__social { direction: ltr; }

/* التسطير أسفل الكلمات المميّزة في العناوين — يعمل في الاتجاهين */
[dir="rtl"] .title__line,
[dir="rtl"] .title__line2 { background-position: -2px 75%; }

/* سهم القوائم المنسدلة */
[dir="rtl"] .navbar .nav-link.chevron::after {
  margin-left: 0;
  margin-right: .25rem;
}

/* شريط الماركات: يلف في الاتجاه المعاكس بالعربية */
[dir="rtl"] .scroll-animation.scroll-right-left {
  animation-name: scrollLeft;
}
[dir="rtl"] .scroll-animation.scroll-left-right {
  animation-name: scroll;
}

/* النصوص المحاذاة للبداية داخل الكروت */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .text-justify { text-align: justify; }

/* قوائم الصح ✓ — النقطة تنتقل لليمين */
[dir="rtl"] .check__list li {
  padding-right: 1.6rem;
  padding-left: 0;
}
[dir="rtl"] .check__list li::before {
  right: 0;
  left: auto;
  transform: scaleX(-1);
}

/* الحواف المشطوفة في الكروت: نعكس الـ clip-path نفسه بدل قلب العنصر.
   قلب العنصر بـ scaleX كان يتعارض مع أنيميشن كروت خطوات العمل ويزيحها.

   Mirror the clip path itself rather than flipping the element: a scaleX
   flip fights the entrance animation on the process cards, which set their
   own transform, and left them misplaced with the connector on the wrong
   side. Every card that uses this variable is corrected at once.        */
[dir="rtl"] {
  --bottom-right-clip: polygon(0 0, 0 calc(100% - 50px), 50px 100%, 100% 100%, 100% 0);
}

/* نقاط الربط في مسار خطوات العمل تنتقل للجهة المقابلة */
[dir="rtl"] .motor__rewind__process__wrapper .left__column .why__choose__card::before {
  right: auto;
  left: -2.12rem;
}
[dir="rtl"] .motor__rewind__process__wrapper .right__column .why__choose__card::before {
  left: auto;
  right: -2.12rem;
}

@media (max-width: 767px) {
  [dir="rtl"] .motor__rewind__process__wrapper .left__column .why__choose__card,
  [dir="rtl"] .motor__rewind__process__wrapper .right__column .why__choose__card {
    margin-left: 0;
    margin-right: auto;
  }
  [dir="rtl"] .motor__rewind__process__wrapper .left__column .why__choose__card::before,
  [dir="rtl"] .motor__rewind__process__wrapper .right__column .why__choose__card::before {
    left: auto;
    right: -2rem;
  }
}

/* أزرار أوول كاروسيل */
[dir="rtl"] .owl-nav .owl-prev svg,
[dir="rtl"] .owl-nav .owl-next svg { transform: scaleX(-1); }

/* الفوتر: الروابط ونقاطها */
[dir="rtl"] footer .links li { padding-right: 1rem; padding-left: 0; }
[dir="rtl"] footer .links li::before { right: 0; left: auto; }
[dir="rtl"] footer address { font-style: normal; }

/* القائمة الجانبية للجوال تفتح من اليمين */
[dir="rtl"] .offcanvas-start {
  right: 0;
  left: auto;
  transform: translateX(100%);
}
[dir="rtl"] .offcanvas-start.show { transform: none; }
[dir="rtl"] .offcanvas-body .list-unstyled.border-end {
  border-right: 0 !important;
  border-left: 1px solid var(--border-color) !important;
}
[dir="rtl"] .offcanvas-body .collapse-icon { transform: rotate(90deg) scaleY(-1); }
[dir="rtl"] .offcanvas-body a[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); }

/* القائمة الكبيرة (ميجا مينيو) */
[dir="rtl"] .navbar .dropdown-menu .border-end {
  border-right: 0 !important;
  border-left: 1px solid var(--border-color) !important;
}

/* أزرار البانر الرئيسي وأسهم السلايدر */
[dir="rtl"] .carousel-control-prev-icon,
[dir="rtl"] .carousel-control-next-icon { transform: scaleX(-1); }

/* زر واتساب العائم وزر العودة للأعلى */
[dir="rtl"] .whatsapp { right: auto; left: 1.25rem; }
[dir="rtl"] .backTop { right: auto; left: 1.25rem; }

/* الخريطة ونموذج التواصل */
[dir="rtl"] .contact__wrapper .form-control,
[dir="rtl"] .contact__wrapper .form-select { text-align: right; }

/* ------------------------------------------------------------ 5. POLISH
   تحسينات صغيرة تنطبق على اللغتين.                                        */

/* حتى لا يقفز المحتوى تحت الهيدر الثابت عند فتح رابط بعلامة # */
.scroll__margin__top { scroll-margin-top: 6rem; }

/* رسالة نجاح إرسال النموذج */
.form__note {
  font-size: .8125rem;
  opacity: .8;
  margin-top: .75rem;
}

/* معرض الأعمال | work gallery */
.gallery__grid { --gap: 1rem; }
.gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  background: #0d1b2e;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
}
.gallery__item:hover img { transform: scale(1.07); opacity: .9; }

/* إخفاء لحظي أثناء تطبيق الترجمة العربية — مع مؤقت أمان في الهيدر
   Brief hold while the Arabic pass runs; the head script always releases it. */
html.is-translating body { opacity: 0; }
body { transition: opacity .18s ease; }

/* ------------------------------------------------------- 6. BLOG LISTING
   بطاقات المدونة تستخدم نفس كلاس كروت الخدمات، لكن عنوانها نص عادي
   وليس شريطاً كحلياً مشطوفاً — نلغي التنسيق الموروث هنا فقط.

   The blog cards reuse the service-card class, but their heading is plain
   text rather than the clipped navy bar, so the inherited title styling is
   cancelled inside the listing only.                                     */
.blog__listing .service__card .title {
  min-height: auto;
  clip-path: none;
  background: transparent !important;
  padding: 0 !important;
  color: var(--brand);
}
.blog__listing .service__card .title a { color: var(--brand); }
.blog__listing .service__card .title a:hover { color: var(--yellow); }
.blog__listing .service__card { overflow: hidden; transition: all .3s ease; }
.blog__listing .service__card:hover {
  box-shadow: 4px 12px 23px rgba(184, 185, 185, .28);
  transform: translateY(-5px);
}
.blog__listing .service__card .link { color: var(--brand); text-decoration: underline; }
.blog__listing .service__card .link:hover { color: var(--yellow); }

/* قصّ الملخّص إلى ثلاثة أسطر | clamp the excerpt to three lines */
.ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* صفحة المقالة | article page */
.post__detail__wrapper .post__thumbnail {
  margin: 0 0 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.post__detail__wrapper .post__thumbnail img { aspect-ratio: 16 / 9; object-fit: cover; }
.post__detail__wrapper h2 { font-size: 1.5rem; font-weight: 600; color: var(--brand); margin: 2rem 0 .75rem; }
.post__detail__wrapper h3 { font-size: 1.175rem; font-weight: 600; color: var(--brand); margin: 1.5rem 0 .5rem; }
.post__detail__wrapper p { margin-bottom: 1rem; }
.post__detail__wrapper ul { margin: 0 0 1.25rem 1.1rem; }
.post__detail__wrapper ul li { margin-bottom: .4rem; }
.post__detail__wrapper a { color: var(--brand); text-decoration: underline; }
.post__detail__wrapper a:hover { color: var(--yellow); }
[dir="rtl"] .post__detail__wrapper ul { margin: 0 1.1rem 1.25rem 0; }

.post__sidebar { position: sticky; top: 6.5rem; }
.post__sidebar a { color: var(--link-color); text-decoration: none; }
.post__sidebar a:hover { color: var(--brand); }