/* =============================================================================
 * IEC base layer: self-hosted fonts, reset, typography, focus, motion.
 * One family throughout: Thmanyah Serif Display (see --font-primary), with
 * Thmanyah Serif Text and IBM Plex Sans Arabic behind it as fallbacks.
 * ========================================================================== */

/* ---- @font-face: Thmanyah Serif Display ---- */
@font-face {
  font-family: 'Thmanyah Serif Display';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../fonts/thmanyah/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/thmanyah/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/thmanyah/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/thmanyah/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/thmanyah/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Display';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('../fonts/thmanyah/thmanyahserifdisplay/woff2/thmanyahserifdisplay-Black.woff2') format('woff2');
}

/* ---- @font-face: Thmanyah Serif Text ---- */
@font-face {
  font-family: 'Thmanyah Serif Text';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../fonts/thmanyah/thmanyahseriftext/woff2/thmanyahseriftext-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/thmanyah/thmanyahseriftext/woff2/thmanyahseriftext-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/thmanyah/thmanyahseriftext/woff2/thmanyahseriftext-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/thmanyah/thmanyahseriftext/woff2/thmanyahseriftext-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/thmanyah/thmanyahseriftext/woff2/thmanyahseriftext-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Thmanyah Serif Text';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('../fonts/thmanyah/thmanyahseriftext/woff2/thmanyahseriftext-Black.woff2') format('woff2');
}

/* ---- @font-face: IBM Plex Sans Arabic ---- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-arabic-latin-400-normal.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+2074, 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-display: swap;
  font-weight: 400;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/ibm-plex-sans-arabic-latin-500-normal.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+2074, 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-display: swap;
  font-weight: 500;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/ibm-plex-sans-arabic-latin-600-normal.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+2074, 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-display: swap;
  font-weight: 600;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/ibm-plex-sans-arabic-latin-700-normal.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+2074, 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-display: swap;
  font-weight: 700;
  src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

:where(button, [role='button'], summary):not(:disabled):not([aria-disabled='true']) {
  cursor: pointer;
}

/* Keep anchored sections clear of the sticky header when scrolled to. */
section[id] {
  scroll-margin-top: var(--header-height);
}

body {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Type: display face for titles ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-feature-settings: 'cv01' on, 'ss01' on;
}

/* Arabic headings need a taller line-height floor than Latin. */
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3 {
  line-height: 1.35;
}

/* Statistics / tabular figures. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---- Focus: visible, consistent keyboard focus; gold on brand surfaces ---- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.on-brand :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--color-ring-on-brand);
}

/* ---- Scroll-reveal: hidden "from" state only where scripting exists; JS adds .is-in ---- */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
  }

  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* "Pop" variant: springs up from small with an overshoot when revealed,
     for cards that should feel dynamic (vision/mission, initiatives).
     Animation-driven so it never fights a card's own hover transition, and
     `backwards` fill keeps staggered cards hidden through their delay. */
  [data-reveal='pop'] {
    opacity: 0;
    transform: scale(0.82);
  }

  [data-reveal='pop'].is-in {
    opacity: 1;
    transform: none;
    animation: iec-reveal-pop var(--motion-slow) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: var(--reveal-delay, 0ms);
  }
}

@keyframes iec-reveal-pop {
  from {
    opacity: 0;
    transform: scale(0.82);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Drawer entrance (JS-opened, so gated on scripting). */
@media (scripting: enabled) {
  [data-drawer-overlay] {
    animation: iec-fade var(--motion-base) var(--ease-out) both;
  }

  [data-drawer-panel] {
    animation: iec-drawer-in var(--motion-gentle) var(--ease-emphasized) both;
  }
}

@keyframes iec-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes iec-drawer-in {
  from {
    opacity: 0;
    transform: translateX(var(--drawer-from, 24px));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Slide from the inline-end edge in both writing directions. */
[dir='rtl'] [data-drawer-panel] {
  --drawer-from: -24px;
}

/* ---- Reduced motion: collapse animation/transition, keep content visible ---- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}