/**
 * @file
 * Design tokens (from Figma) and base styles for the Social Researcher Award.
 *
 * Font: Taleeq (self-hosted in ../fonts) on English and Arabic pages; Arabic
 * pages use the Bold file throughout ("Taleeq Arabic", as in the Arabic
 * Figma). Taleeq has Arabic letters, digits and punctuation but no Latin
 * letters, so Latin letters fall back to Noto Sans.
 */

@font-face {
  font-family: "Taleeq";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/taleeq-light.woff2") format("woff2");
}

@font-face {
  font-family: "Taleeq";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/taleeq-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Taleeq";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/taleeq-bold.woff2") format("woff2");
}

/* Arabic pages: the Arabic Figma sets every text in the Taleeq Bold file
   (headings and body alike), so all weights map to it. Latin text on Arabic
   pages falls back to Noto Sans at its own weight. */
@font-face {
  font-family: "Taleeq Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/taleeq-bold.woff2") format("woff2");
}

:root {
  /* Font */
  --sra-font: "Taleeq", "Noto Sans", "Noto Sans Arabic", system-ui, sans-serif;
  --sra-font-ar: "Taleeq Arabic", "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;

  /* Colours */
  --sra-white: #fff;
  --sra-black: #000;
  --sra-primary-50: #ecf6f5;
  --sra-primary-500: #00938f;
  --sra-primary-700: #0d5e5b;
  --sra-primary-800: #054442;
  --sra-primary-100: #daedeb;
  --sra-primary-200: #b7dad7;
  --sra-primary-300: #88c2be;
  --sra-primary-400: #56aaa6;
  --sra-secondary-100: #e7e4f1;
  --sra-secondary-400: #9385b6;
  --sra-secondary-500: #7866a1;
  --sra-secondary-200: #cec8e0;
  --sra-secondary-300: #b0a6cb;
  --sra-secondary-600: #635486;
  --sra-secondary-700: #4e416a;
  --sra-secondary-950: #1a1426;
  --sra-tertiary-500: #0f6765;
  --sra-tertiary-700: #034240;
  --sra-tertiary-50: #ebf3f3;
  --sra-tertiary-900: #00211f;
  --sra-tertiary-950: #001716;
  --sra-gray-50: #f8f8f0;
  --sra-gray-100: #efede6;
  --sra-gray-200: #e4dfd9;
  --sra-gray-400: #969495;
  --sra-gray-500: #717074;
  --sra-gray-600: #65656a;
  --sra-gray-700: #464649;
  --sra-gray-800: #2f2f32;
  --sra-gray-900: #1c1c1f;
  --sra-gray-950: #131314;
  --sra-taupe-300: #c4bfb9;
  --sra-taupe-500: #827e79;
  --sra-white-68: rgba(255, 255, 255, 0.68);
  --sra-line: rgba(0, 33, 31, 0.1);
  --sra-line-dark: rgba(255, 255, 255, 0.12);
  --sra-shadow-medium: 0 2px 4px rgba(2, 45, 48, 0.04), 0 12px 32px -8px rgba(2, 45, 48, 0.12);
  --sra-taupe-50: #f8f5f1;
  --sra-text-01: #212529;
  --sra-text-02: #31373c;
  --sra-track-schools: #e25928;
  --sra-track-universities: #00938f;
  --sra-track-social: #7866a1;

  /* Radius */
  --sra-radius-sm: 12px;
  --sra-radius-md: 20px;
  --sra-radius-lg: 28px;
  --sra-radius-full: 999px;

  /* Layout */
  --sra-gutter: 80px;
  --sra-max-width: 1440px;
  --sra-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) {
  :root {
    --sra-gutter: 24px;
  }
}

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

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

body {
  margin: 0;
  background: var(--sra-white);
  color: var(--sra-tertiary-950);
  font-family: var(--sra-font);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic text styles in Figma have no letter-spacing; negative tracking
   would also break up joined Arabic letters. */
[dir="rtl"] body,
[dir="rtl"] body * {
  letter-spacing: 0 !important;
}

[dir="rtl"] body {
  font-family: var(--sra-font-ar);
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
blockquote,
figure {
  margin: 0;
}

/* Anchored sections stop below the fixed header. */
[id] {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* Buttons (Figma: Button). */
.sra-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--sra-radius-full);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sra-button--small {
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 20px;
}

.sra-button--large {
  height: 60px;
  padding: 0 32px;
  font-size: 16px;
  line-height: 24px;
}

.sra-button--medium {
  height: 48px;
  padding: 0 24px 0 32px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.04em;
}

.sra-button--medium .sra-button__icon {
  margin-inline-end: -4px;
}

.sra-button--light {
  gap: 6px;
  background: var(--sra-white);
  color: var(--sra-tertiary-950);
}

.sra-button--light:hover,
.sra-button--light:focus-visible {
  background: var(--sra-primary-50);
}

[dir="rtl"] .sra-button--light .sra-button__icon {
  transform: none;
}

.sra-button--primary {
  gap: 6px;
  background: var(--sra-primary-500);
  color: var(--sra-white);
}

.sra-button--primary:hover,
.sra-button--primary:focus-visible {
  background: var(--sra-primary-700);
}

[dir="rtl"] .sra-button--primary .sra-button__icon {
  transform: none;
}

/* Ghost on dark bands (Figma: Button · Ghost on Dark). */
.sra-button--ghost-dark {
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: var(--sra-white);
}

.sra-button--ghost-dark:hover,
.sra-button--ghost-dark:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.sra-button--dark {
  background: var(--sra-gray-800);
  color: var(--sra-white);
  filter: drop-shadow(0 16px 16px rgba(2, 45, 48, 0.08)) drop-shadow(0 6px 8px rgba(2, 45, 48, 0.07)) drop-shadow(0 1px 1px rgba(2, 45, 48, 0.05));
}

.sra-button--dark:hover,
.sra-button--dark:focus-visible {
  background: var(--sra-tertiary-950);
  transform: translateY(-1px);
}

.sra-button--outline {
  border: 1.5px solid rgba(0, 33, 31, 0.18);
  color: var(--sra-gray-700);
}

.sra-button--outline:hover,
.sra-button--outline:focus-visible {
  border-color: var(--sra-tertiary-950);
  color: var(--sra-tertiary-950);
}

.sra-button__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

[dir="rtl"] .sra-button__icon {
  transform: scaleX(-1);
}

/* Sections (Figma: Section Header + 80px gutters, 96px vertical rhythm). */
.sra-section {
  position: relative;
  padding: 96px var(--sra-gutter);
}

.sra-section__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.sra-section__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.sra-section__title {
  color: var(--sra-gray-900);
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.04em;
}

.sra-section__lead {
  color: var(--sra-gray-500);
  font-size: 18px;
  line-height: 28px;
}

.sra-section--dark {
  background: var(--sra-gray-900);
}

.sra-section--dark .sra-section__title {
  color: var(--sra-white);
}

.sra-section--dark .sra-section__lead {
  color: var(--sra-white-68);
}

/* Track icon tile (Figma: Track Icon/*). */
.sra-track-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--sra-gray-700);
}

.sra-track-icon--small {
  width: 52px;
  height: 52px;
}

.sra-track-card--orange .sra-track-icon,
.sra-track-icon--orange {
  background: var(--sra-track-schools);
}

.sra-track-card--teal .sra-track-icon,
.sra-track-icon--teal {
  background: var(--sra-track-universities);
}

.sra-track-card--purple .sra-track-icon,
.sra-track-icon--purple {
  background: var(--sra-track-social);
}

/* Segmented tab bar (Figma: Tab Bar). */
.sra-tabbar {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--sra-line);
  border-radius: var(--sra-radius-full);
  background: var(--sra-white);
}

.sra-tabbar__tab {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--sra-radius-full);
  background: transparent;
  color: var(--sra-gray-700);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.sra-tabbar__tab[aria-selected="true"] {
  background: var(--sra-tertiary-950);
  color: var(--sra-white);
}

.sra-tabbar__tab:focus-visible,
.sra-button:focus-visible,
.sra-nav__link:focus-visible {
  outline: 2px solid var(--sra-primary-500);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .sra-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .sra-section__title {
    font-size: 32px;
    line-height: 40px;
  }

  .sra-section__lead {
    font-size: 16px;
    line-height: 26px;
  }
}