/* ==========================================================================
   DNA — shared styles (fonts, base, header, side menu, language switch)
   ========================================================================== */

@font-face {
  font-family: 'ZapfHumnst BT';
  src: url('../fonts/ZapfHumanist601BT-Roman.woff') format('woff'),
       url('../fonts/ZapfHumanist601BT-Roman.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Latin text uses the brand font; it has no Arabic glyphs, so Arabic falls through to IBM Plex Sans Arabic. */
  --font: 'ZapfHumnst BT', 'IBM Plex Sans Arabic', sans-serif;
  --text: #404040;
  --heading: #191919;
  --nav: #4d4d4d;
  --blue: #4eacea;
  --blue-2: #2d94d8;
  --page-bg: #f5f5f5;
  --header-h: 90px;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
@media (max-width: 921px) { html { font-size: 91.2%; } }

body {
  margin: 0;
  font: 400 1rem/1.7em var(--font); /* em: inherited as a fixed value, like the original theme */
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The original theme forced the brand font on every element. */
body * { font-family: var(--font) !important; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.2; color: var(--heading); }
p { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Hide the page until the saved language is applied (set by the inline head script). */
html.i18n-wait body { visibility: hidden; }

/* --------------------------------------------------------------------------
   Header — fixed, transparent with a light blur; overlays the page top.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 99;
  height: var(--header-h);
  backdrop-filter: blur(2px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.site-header__logo img { width: 80.5px; }

.main-nav { display: flex; align-items: center; }
.main-nav a,
.lang-switch {
  padding: 0 20px;
  font-size: 16px;
  line-height: 20px;
  color: var(--nav);
}

.lang-switch {
  background: none;
  border: 0;
  cursor: pointer;
}
.site-header__actions { display: none; }

.menu-toggle {
  display: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle img { width: 41px; }

/* Tablet & mobile: logo + language + hamburger (opens the side menu). */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .site-header__inner { padding: 0; padding-inline-end: 20px; }
  .site-header__logo { width: 30%; text-align: center; }
  .site-header__logo img { width: 115px; }
  .site-header__actions { display: flex; align-items: center; gap: 18px; }
  .site-header .lang-switch { margin: 0; padding: 0; font-size: 15px; }
}
@media (max-width: 767px) {
  .site-header { position: fixed; }
  .site-header__inner { padding: 0; padding-inline: 20px 15px; }
  .site-header__logo { width: auto; text-align: start; }
  .site-header__logo img { width: 57.5px; }
  .menu-toggle img { width: 39.6px; }
  /* On phones the header takes its own space instead of overlaying the page. */
  body { padding-top: var(--header-h); }
}

/* --------------------------------------------------------------------------
   Side menu (tablet & mobile) — native <dialog>, slides in from the start edge.
   -------------------------------------------------------------------------- */
.side-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: 300px;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 10px;
  border: 0;
  background: #fff;
  color: var(--text);
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  font-size: 1rem;
  line-height: 1.5;
  overflow-y: auto;
}
.side-menu::backdrop { background: rgba(0, 0, 0, .8); }
.side-menu[open] { animation: slide-in .3s ease both; }
@keyframes slide-in { from { transform: translateX(-100%); } }
[dir="rtl"] .side-menu { inset: 0 0 0 auto; }
[dir="rtl"] .side-menu[open] { animation-name: slide-in-rtl; }
@keyframes slide-in-rtl { from { transform: translateX(100%); } }

.side-menu__close {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  width: 15px;
  height: 15px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--nav);
}
.side-menu__close:focus:not(:focus-visible) { outline: none; }
.side-menu__close svg { width: 100%; height: 100%; fill: currentColor; }
.side-menu__logo { display: block; width: 57.5px; height: 45px; }

.side-menu__nav { display: flex; flex-direction: column; margin-top: 130px; }
.side-menu__nav a {
  padding: 13px 0;
  font-size: 1rem;
  line-height: 20px;
  color: var(--nav);
  text-align: start;
}

.side-menu__social {
  display: flex;
  justify-content: center;
  margin-top: 85px;
}
.side-menu__social span { display: grid; place-items: center; width: 40px; height: 40px; }
.side-menu__social svg { width: 20px; height: 20px; fill: #000; }

.side-menu__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5px -8px 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 18px;
}
.side-menu__legal li { margin: 0 8px; }
.side-menu__legal a { color: var(--nav); }
.side-menu__copy { margin-top: 5px; text-align: center; font-size: 10px; line-height: 15px; }

@media (max-width: 767px) {
  .side-menu { width: 80vw; }
  .side-menu__close { top: 5.3%; width: 14.4px; height: 24px; }
  .side-menu__logo { margin-top: 25px; }
  .side-menu__nav { margin-top: 90px; }
  .side-menu__nav a { padding: 20px 0; font-size: 18px; }
  .side-menu__social { margin-top: 100px; }
  .side-menu__social span { width: 46px; height: 46px; }
  .side-menu__social svg { width: 23px; height: 23px; }
  .side-menu__legal { margin-top: 0; margin-inline: -8px; font-size: 13px; line-height: 19.5px; }
  .side-menu__copy { margin-top: 5px; }
}