/* ==========================================================================
   momenmedhat.com — base.css
   Shared by every page: design tokens, self-hosted fonts, reset, a11y helpers.
   Page styles live in home.css (one-page vCard) and site.css (blog, articles, legal).
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable where available, SIL OFL) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  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: "Roboto";
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Noto Kufi Arabic";
  src: url("../fonts/noto-kufi-arabic-arabic.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Noto Kufi Arabic";
  src: url("../fonts/noto-kufi-arabic-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Agbalumo";
  src: url("../fonts/agbalumo-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Akaya Kanadaka";
  src: url("../fonts/akaya-kanadaka-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rochester";
  src: url("../fonts/rochester-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

/* ---------- Design tokens (extracted from the original Elementor design) ---------- */
:root {
  color-scheme: dark;

  /* brand */
  --gold: #E1B406;
  --gold-50: rgb(225 180 6 / 50%);
  --on-gold: #141414;

  /* text */
  --text: #FFFFFF;
  --text-2: #DDDDDD;
  --text-3: #CFCFCF;
  --muted: #B9BCC0;
  --muted-2: #A3A4A4;

  /* home (vCard) surfaces */
  --home-bg: #0C0C0C;
  --home-card: linear-gradient(250deg, #141414 60%, #1D1D1D 100%);
  --home-card-solid: #161616;
  --home-chip: #232323;
  --line-1: rgb(255 255 255 / 11%);
  --line-2: rgb(255 255 255 / 17%);
  --line-3: rgb(255 255 255 / 23%);
  --line-4: rgb(255 255 255 / 27%);

  /* inner pages (blog, articles, legal) */
  --site-bg: #1E222D;
  --site-panel: #20232A;
  --site-footer: #15181F;
  --site-deep: #131313;

  /* shape */
  --r-sm: 10px;
  --r: 15px;
  --r-md: 20px;
  --r-lg: 30px;

  /* type */
  --font-home: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Agbalumo", "Plus Jakarta Sans", cursive;
  --font-script: "Akaya Kanadaka", "Plus Jakarta Sans", cursive;
  --font-sign: "Rochester", cursive;
  --font-verdana: Verdana, Geneva, "DejaVu Sans", sans-serif;

  /* motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;

  /* layers */
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 100;
}

/* Arabic pages: one family for everything (the display faces have no Arabic glyphs) */
:root:lang(ar) {
  --font-home: var(--font-ar);
  --font-body: var(--font-ar);
  --font-display: var(--font-ar);
  --font-script: var(--font-ar);
  --font-sign: var(--font-ar);
  --font-verdana: var(--font-ar);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:target { scroll-margin-top: 90px; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: fixed; inset-inline-start: 12px; top: 12px; z-index: var(--z-overlay);
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--on-gold); }

/* ---------- Icons (SVG sprite: /assets/images/icons.svg) ---------- */
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.icon--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* ---------- Video facade (YouTube / Vimeo load only on click) ---------- */
.video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #111; border-radius: var(--r);
}
.video > img, .video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0; border: 0; background: transparent;
}
.video__play::before {
  content: ""; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 85%); background: rgb(0 0 0 / 35%);
  transition: transform var(--dur) var(--ease-out), background var(--dur);
}
.video__play .icon { position: absolute; width: 24px; height: 24px; margin-inline-start: 4px; fill: #fff; }
[dir="rtl"] .video__play .icon { margin-inline-start: 0; margin-inline-end: 4px; transform: none; }
.video__play:hover::before, .video__play:focus-visible::before { transform: scale(1.08); background: rgb(225 180 6 / 85%); }
.video__play:focus-visible { outline-offset: -4px; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}