/* =========================
   SF Header V2 — جُل Style
   Applied exactly as designed
========================= */
:root {
  --sf-bg: #dbe9e4;
  --sf-bg-soft: rgba(219, 233, 228, 0.78);
  --sf-surface: rgba(255, 255, 255, 0.34);
  --sf-surface-strong: rgba(255, 255, 255, 0.52);

  --sf-primary: #143b5c;
  --sf-primary-soft: rgba(20, 59, 92, 0.68);

  --sf-accent: #dfa64b;
  --sf-accent-dark: #d29a3e;

  --sf-menu-bg: rgba(26, 79, 72, 0.72);
  --sf-menu-bg-2: rgba(40, 101, 92, 0.72);
  --sf-menu-text: #f6f1e9;
  --sf-menu-line: rgba(255, 255, 255, 0.08);

  --sf-border: rgba(20, 59, 92, 0.08);
  --sf-shadow: 0 12px 32px rgba(14, 30, 32, 0.08);
  --sf-shadow-lg: 0 24px 80px rgba(8, 24, 25, 0.18);

  --sf-radius-sm: 7px;
  --sf-radius-md: 9px;
  --sf-radius-lg: 24px;
  --sf-radius-xl: 28px;

  --sf-container: 1600px;
  --sf-transition: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --sf-blur: 22px;
}

/* =========================
   HEADER
========================= */
.sf-header {
    width: 100%;
    background: linear-gradient(180deg, rgba(150, 210, 202, 0.5) 2.09%, rgba(228, 243, 236, 0.5) 95.45%);
    height: 460px;
    margin-bottom: -310px;
}

.sf-header__inner {
  max-width: var(--sf-container);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 122px;
}

/* يمين: الشعار فقط */
.sf-header__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.sf-header__logo {
  width: 86px;
  height: auto;
  display: block;
}

/* يسار: كل شيء */
.sf-header__left {
  flex: initial;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 34px;
}

/* الروابط */
.sf-header__nav {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}

.sf-nav-card {
  text-decoration: none;
  color: var(--sf-primary);
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 7px;
  transition: background var(--sf-transition), transform var(--sf-transition), opacity var(--sf-transition);
  white-space: nowrap;
}

.sf-nav-card:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.sf-nav-card__title {
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--sf-primary);
}

.sf-nav-card__desc {
  font-size: 0.86rem;
  line-height: 1.25;
  color: var(--sf-primary-soft);
}

/* Sub-menu dropdown */
.sf-nav-card-wrap {
  position: relative;
}

.sf-nav-card--dropdown {
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: none !important;
}

.sf-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(20, 59, 92, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(14, 30, 32, 0.12);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--sf-transition), transform var(--sf-transition);
}

.sf-nav-dropdown.sf-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sf-nav-dropdown__item {
  display: block;
  padding: 8px 12px;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--sf-primary);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--sf-transition);
}

.sf-nav-dropdown__item:hover {
  background: rgba(20, 59, 92, 0.05);
}

/* البحث والزر */
.sf-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* البحث — تصميم مخصص بالكامل، لا يتأثر بستايلات الثيم */
.sf-header-search {
  width: 270px;
  height: 62px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.26) !important;
  border: 1px solid rgba(20, 59, 92, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition:
    background var(--sf-transition),
    border-color var(--sf-transition),
    box-shadow var(--sf-transition),
    transform var(--sf-transition);
  margin: 0;
  color-scheme: light only;
}

.sf-header-search:hover,
.sf-header-search:focus-within {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(20, 59, 92, 0.1) !important;
  box-shadow: var(--sf-shadow) !important;
}

.sf-header-search__icon {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--sf-primary) !important;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  outline: none;
}

.sf-header-search__icon svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-header-search input,
.sf-header-search input[type="search"] {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--sf-primary) !important;
  font-size: 1rem !important;
  text-align: right !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 0 !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.sf-header-search input::placeholder,
.sf-header-search input[type="search"]::placeholder {
  color: rgba(20, 59, 92, 0.78) !important;
}

.sf-header-search input:focus,
.sf-header-search input[type="search"]:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.sf-header-cta {
  min-width: 148px;
  height: 62px;
  padding: 10px 16px;
  border-radius: 7px;
  background: var(--sf-accent);
  color: #fff9f2;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 10px 24px rgba(223, 166, 75, 0.22);
  transition: transform var(--sf-transition), filter var(--sf-transition), box-shadow var(--sf-transition);
}

.sf-header-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  color: #fff5e8;
}

.sf-header-cta__title {
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.1;
}

.sf-header-cta__desc {
  font-size: 0.78rem;
  line-height: 1.1;
  opacity: 0.94;
}

/* زر الجوال */
.sf-header__menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: var(--sf-primary);
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
}

/* =========================
   FULLSCREEN MENU
========================= */
.sf-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sf-transition),
    visibility var(--sf-transition);
}

.sf-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sf-menu-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 23, 21, 0.12);
}

.sf-menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 22px 18px 28px;
  background:
    linear-gradient(180deg, var(--sf-menu-bg) 0%, var(--sf-menu-bg-2) 100%);
  backdrop-filter: blur(var(--sf-blur));
  -webkit-backdrop-filter: blur(var(--sf-blur));
  color: var(--sf-menu-text);
  transform: translateY(-12px);
  transition: transform var(--sf-transition);
}

.sf-menu-overlay.is-open .sf-menu {
  transform: translateY(0);
}

.sf-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sf-menu__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.sf-menu__logo {
  width: 76px;
  height: auto;
  display: block;
}

.sf-menu__close {
    border: 0;
    background: transparent;
    color: #f7f2eb;
    font-size: 1.2rem;
    font-weight:400;
    cursor: pointer;
    padding: 8px 0;
}

.sf-menu__divider {
  width: 100%;
  height: 1px;
  background: var(--sf-menu-line);
  margin: 18px 0 20px;
}

.sf-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.sf-menu-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-menu-link__title {
    font-size: clamp(2rem, 6vw, 2.6rem);
    line-height: 1.06;
    font-weight: 400;
    color: var(--sf-accent);
    font-family: 'itfFatimahArabic', sans-serif;
    font-feature-settings: 'swsh' off, 'salt' off, 'ss01' on, 'curs' off, 'kern' off, 'liga' on;
}

.sf-menu-link__desc {
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    line-height: 1.34;
    color: rgba(247, 242, 235, 0.92);
}

.sf-menu__bottom {
  margin-top: auto;
  padding-top: 16px;
}

.sf-menu__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: stretch;
}

/* البحث داخل القائمة الجانبية — تصميم مخصص بالكامل */
.sf-header-search--menu {
  width: 100% !important;
  background: rgba(229, 241, 237, 0.9) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sf-header-search--menu input,
.sf-header-search--menu input[type="search"] {
  color: var(--sf-primary) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sf-header-search--menu input::placeholder,
.sf-header-search--menu input[type="search"]::placeholder {
  color: rgba(20, 59, 92, 0.6) !important;
}

.sf-header-search--menu .sf-header-search__icon {
  color: var(--sf-primary) !important;
  background: transparent !important;
  border: 0 !important;
}

.sf-header-cta--menu {
  min-width: 132px;
}

.sf-menu__social {
  margin-top: 18px;
  text-align: center;
}

.sf-menu__social-title {
  display: block;
  margin-bottom: 10px;
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--sf-accent);
}

	.sf-menu__social-title {
    display: block;
    margin-bottom: 10px;
    font-size: 1.33rem;
    font-weight: 400;
    color: var(--sf-accent);
    font-family: 'itfFatimahArabic', sans-serif;
    font-feature-settings: 'swsh' off, 'salt' on, 'ss01' on, 'curs' off, 'kern' off, 'liga' on;
    text-align: right;
}

.sf-menu__social-links a {
    text-decoration: none;
    color: rgba(247, 242, 235, 0.88);
    font-size: 1.3rem;
}

.sf-menu__corner {
  width: 44px;
  height: 44px;
  margin: 28px auto 0;
  background: var(--sf-accent);
  clip-path: polygon(0 48%, 48% 0, 100% 0, 100% 52%, 52% 52%, 52% 100%, 0 100%);
  opacity: 0.96;
}

body.sf-menu-open {
  overflow: hidden;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1280px) {
  .sf-header__inner {
    padding: 20px 22px;
  }

  .sf-header__left {
    gap: 22px;
  }

  .sf-header__nav {
    gap: 10px;
  }

  .sf-nav-card__title {
    font-size: 1rem;
  }

  .sf-nav-card__desc {
    font-size: 0.8rem;
  }

  .sf-header-search {
    width: 240px;
  }
}

@media (max-width: 1024px) {
  .sf-header__inner {
    min-height: 94px;
    padding: 18px 18px;
  }

  .sf-header__left {
    display: none;
  }

  .sf-header__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }

  .sf-header__logo {
    width: 78px;
  }
}

@media (max-width: 640px) {
	.sf-about__text {
    font-size: 18px;
}

  .sf-menu {
    padding: 20px 16px 26px;
  }

  .sf-menu__actions {
    grid-template-columns: 1.1fr 1fr;
    gap: 12px;
  }

  .sf-header-cta--menu {
    min-width: 0;
    width: 100%;
    height: 56px;
    padding: 8px 10px;
  }

  .sf-header-cta--menu .sf-header-cta__title {
    font-size: 0.92rem;
  }

  .sf-header-cta--menu .sf-header-cta__desc {
    font-size: 0.72rem;
  }

  .sf-header-search--menu {
    height: 56px;
  }

  .sf-menu__social-links {
        gap: 10px;
        text-align: right;
        display: flex;  }
}

button#sfMenuToggle {
    font-family: 'itfFatimahArabic', sans-serif;
}

button#sfMenuClose {
    font-family: 'itfFatimahArabic', sans-serif;
}

.sf-homepage .sf-glossary-card-word, .sf-glossary-section:not(.sf-dark-theme) .sf-glossary-card-word {
    font-family: 'itfFatimahArabic', sans-serif;
font-feature-settings: 'swsh' off, 'salt' off, 'ss01' on, 'curs' off, 'kern' off, 'liga' on;
}

h3.sf-article-card-v2__title {
    font-family: 'itfFatimahArabic', sans-serif;
}

h1.sf-glossary-single__word {
    font-family: 'itfFatimahArabic', sans-serif;
    font-feature-settings: 'swsh' off, 'salt' off, 'ss01' on, 'curs' off, 'kern' off, 'liga' on;
}

h3.sf-glossary-card-word {
    font-family: 'itfFatimahArabic', sans-serif;
    font-feature-settings: 'swsh' off, 'salt' off, 'ss01' on, 'curs' off, 'kern' off, 'liga' on;
}

h3.sf-article-small__title {
    font-family: 'itfFatimahArabic', sans-serif;
}