/* ========== Reset & Global ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; display: flex; flex-direction: column; }

body {
  font-family: 'Cairo', sans-serif;
  background: #f8f9fa;
  color: #333;
  direction: rtl;
  line-height: 1.6;
}


main { flex: 1; }

a { text-decoration: none; color: inherit; }

.container { width: 90%; max-width: 1200px; margin: auto; }

/* أزرار عامة */
.btn {
  display: inline-block;
  background: #52b788;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}
.btn:hover { background: #2d6a4f; }

/* عناوين عامة */
h1, h2, h3, h4 { font-weight: 700; color: #2d6a4f; }

/* ================= Brand Hero (حل نهائي موحّد) ================= */
:root {
  --fs-green: #2d6a4f;   /* الأخضر */
  --fs-gray:  #dee2e6;   /* الرمادي بين الخطّين */
}

/* العنصر الوحيد المسؤول عن الشريطين + الخلفية */
.brand-hero {
  background:
    /* نغمّق العلوي 4% */
    linear-gradient(#295f4a, #295f4a) top / 100% 20px no-repeat,    /* السفلي يبقى اللون الأساسي */
    linear-gradient(var(--fs-green), var(--fs-green)) bottom / 100% 20px no-repeat,
    var(--fs-gray);
  padding: 25px 0;
  margin: 0;
}


.brand-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* عنوان: F مقلوبة مُلتصقة وبنفس حجم النص */
.brand-title {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
}
.logo-mark {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  color: var(--fs-green);
  font-size: clamp(34px, 6vw, 64px);
  transform: scaleX(-1);
  margin-right: -2px;
}
.brand-title__text {
  margin: 0;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  color: var(--fs-green);
  font-size: clamp(34px, 6vw, 64px);
  letter-spacing: -0.02em;
}

/* كبسات سريعة */
.brand-quicknav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  direction: rtl;
}
.btn-nav {
  padding: 8px 16px;
  border: 1px solid rgba(45,106,79,.4);
  border-radius: 999px;
  background: #fff;
  color: #2d6a4f;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all .2s ease;
}
.btn-nav:hover { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }

/* هيرو الصفحة الرئيسية (لو كنت تستعمله) */
.hero {
  background: url('../images/seeds-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 120px 20px;
}
.hero h2 { font-size: 36px; margin-bottom: 15px; }
.hero p  { font-size: 18px; margin-bottom: 20px; opacity: 0.9; }

/* استجابة للموبايل */
@media (max-width: 768px) {
  .brand-hero__row { flex-direction: column; gap: 14px; }
  .brand-quicknav { justify-content: center; }
}


/* حالة الصفحة النشطة في الهيدر */
.btn-nav.active{
  background:#2d6a4f;
  color:#fff;
  border-color:#2d6a4f;
}

/* (اختياري) لمسة خفيفة لزيادة الوضوح */
.btn-nav.active{
  box-shadow:0 2px 10px rgba(45,106,79,.18);
}
.brand-title { position: relative; }              /* مرجع للـoverlay */
.brand-hit{
  position: absolute; inset: 0;                   /* تغطّي كل صندوق الشعار */
  display: block; z-index: 5;
  text-decoration: none;                          /* لا تغيّر الشكل */
  /* الرابط شفاف بالكامل */
}
.brand-hit:focus-visible{
  outline: 2px solid rgba(45,106,79,.5);
  border-radius: 8px;
}