/* ==========================================================================
   رواد الترميز — الأنماط المشتركة
   كل القيم هنا منقولة حرفياً من التصميم المعتمد. لا لون ولا مقاس جديد،
   عدا ما يلزم لزر قائمة الجوال (ألوانه من نفس اللوحة).
   ========================================================================== */

/* --------------------------------------------------------------------------
   IBM Plex Sans Arabic — مستضاف محلياً بدل Google Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   الأساس — منقول حرفياً من <helmet> في كل صفحة تصميم
   -------------------------------------------------------------------------- */

body { margin: 0; background: #FAF8F3; font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #102A43; text-decoration: none; }
a:hover { color: #A58127; }
::selection { background: #FBF3DF; color: #102A43; }
:focus-visible { outline: 2px solid #C9A227; outline-offset: 3px; }

/* حقول النموذج — منقولة حرفياً من <helmet> في صفحة «تواصل معنا» */
input, textarea, select { font-family: inherit; font-size: 15.5px; color: #102A43; background: #FFFFFF; border: 1px solid #C9A227; border-radius: 4px; padding: 13px 16px; width: 100%; line-height: 1.7; }
input::placeholder, textarea::placeholder { color: #94A3B4; }
input:focus, textarea:focus, select:focus { border-color: #A58127; outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18); }

/* --------------------------------------------------------------------------
   حالات التمرير — بديل سمة style-hover التي اخترعتها أداة التصميم.
   القيم مطابقة لها حرفاً بحرف. !important ضروري لأن التنسيق inline
   يتفوق على الأصناف، وهو سبب اختراع السمة أصلاً.
   -------------------------------------------------------------------------- */

.hv-gold:hover           { color: #A58127 !important; }
.hv-white:hover          { color: #FFFFFF !important; }
.hv-bright:hover         { color: #E4BD22 !important; }

.hv-bg-white:hover       { background: #FFFFFF !important; }
.hv-bg-cream:hover       { background: #FAF8F3 !important; }
.hv-bg-navy:hover        { background: #0A1A2B !important; }
.hv-bg-bright:hover      { background: #E4BD22 !important; }
.hv-btn-gold:hover       { background: #A58127 !important; color: #FFFFFF !important; }

.hv-bd-gold:hover        { border-color: #C9A227 !important; }
.hv-bd-soft:hover        { border-color: #DFC98A !important; }
.hv-bd-bright:hover      { border-color: #E4BD22 !important; }
.hv-bd-gold-white:hover  { border-color: #C9A227 !important; background: #FFFFFF !important; }
.hv-bd-gold-cream:hover  { border-color: #C9A227 !important; background: #FAF8F3 !important; }

/* --------------------------------------------------------------------------
   تمييز الصفحة النشطة — بلون التمرير الموجود نفسه، لا لون جديد
   -------------------------------------------------------------------------- */

.nav-active { color: #A58127 !important; }

/* --------------------------------------------------------------------------
   قائمة الجوال — الترويسة كانت تعتمد flex-wrap وحده وتنكسر تحت 900px
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #EDE5D6;
  border-radius: 6px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
}
.nav-toggle:hover { border-color: #C9A227; }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #102A43;
}
.nav-toggle[aria-expanded="true"] { border-color: #C9A227; }
.nav-toggle[aria-expanded="true"] span { background: #A58127; }

@media (max-width: 899px) {
  .nav-toggle { display: flex; }

  .hdr-inner .hdr-nav,
  .hdr-inner .hdr-cta { display: none !important; }

  .hdr-inner.is-open .hdr-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
    margin-top: 12px;
    border-top: 1px solid #EDE5D6;
  }
  .hdr-inner.is-open .hdr-nav > a {
    padding: 14px 0;
    border-bottom: 1px solid #EDE5D6;
  }
  .hdr-inner.is-open .hdr-cta {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    margin: 16px 0 6px;
  }
}

/* --------------------------------------------------------------------------
   الحقل الخفي (فخ الروبوتات) — مخفي عن العين وعن قارئ الشاشة، لا عن الروبوت
   -------------------------------------------------------------------------- */

/* لا نستخدم left:-9999px — في صفحة RTL يُنشئ تجاوزاً أفقياً على الجوال */
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   الاتجاه — ما لا تملك CSS له صيغة منطقية
   القيم العربية هنا مطابقة للأصل حرفاً بحرف؛ الفرع LTR وحده جديد.
   -------------------------------------------------------------------------- */

/* قناع أشرطة الباترن الزخرفية. التدرّجات لا تعرف start/end فتُعرَّف لكل اتجاه.
   --fade تبقى inline بقيمتها المضبوطة لكل شريط (70% … 80%). */
.pat-fade {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to left, transparent 0, #000 var(--fade));
}
[dir="ltr"] .pat-fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}

/* الأشرطة المعاكسة — تجلس على حافة البداية المنطقية */
.pat-fade-start {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}
[dir="ltr"] .pat-fade-start {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to left, transparent 0, #000 var(--fade));
}

/* السهم — يخرج من نص الترجمة نهائياً فلا يتكرّر الخطأ مع كل مفتاح جديد */
.arw::after            { content: "←"; }
[dir="ltr"] .arw::after { content: "→"; }
/* السهم داخل نص رابط: مسافة قبله كما في الأصل */
.arw-in::after            { content: " ←"; }
[dir="ltr"] .arw-in::after { content: " →"; }

/* ارتفاع السطر — العربي كما هو، واللاتيني أضيق قليلاً */
:root       { --lh-body: 1.9;  --lh-lead: 1.85; --lh-note: 1.8; }
[dir="ltr"] { --lh-body: 1.72; --lh-lead: 1.68; --lh-note: 1.65; }

/* --------------------------------------------------------------------------
   مبدّل اللغة — بألوان القائمة ومقاساتها نفسها، بلا لون جديد
   -------------------------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  flex: none;
}
.lang-switch .lang-sep {
  display: block;
  width: 1px;
  height: 14px;
  background: #EDE5D6;
}
.lang-switch a { color: #102A43; text-decoration: none; }
.lang-switch a:hover { color: #A58127; }
.lang-switch .lang-current { color: #A58127; }

@media (max-width: 899px) {
  .hdr-inner .lang-switch { display: none !important; }
  .hdr-inner.is-open .lang-switch {
    display: flex !important;
    justify-content: center;
    width: 100%;
    padding: 14px 0 0;
  }
}