/* ==========================================================================
   Aim IT — Base
   Element-level styling only. No class selectors except the few global
   utilities at the end. This keeps specificity flat and predictable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self hosted. See assets/fonts/README.txt for the exact files.
   The site is fully usable before the font files are added: every family
   has a system fallback in tokens.css.
   -------------------------------------------------------------------------- */

/* Archivo — variable, used for headings. Width axis gives the brand its
   engineered look. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans — body and interface */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — product interface mockups only, where tabular numbers are
   functionally correct. Never used for labels or decoration. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Arabic and Urdu. Loaded only when Arabic-script characters appear. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Bangla */
@font-face {
  font-family: "Noto Sans Bengali";
  src: url("/assets/fonts/noto-sans-bengali-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Bengali";
  src: url("/assets/fonts/noto-sans-bengali-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

/* Hindi */
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("/assets/fonts/noto-sans-devanagari-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+A830-A839, U+25CC;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("/assets/fonts/noto-sans-devanagari-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+A830-A839, U+25CC;
}

/* Fallback metrics for Archivo. Reduces layout shift while the font loads. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 101%;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* The page background is set here, on the root element, as well as on the
     body element below.

     A browser normally takes the body background and paints the whole page
     canvas with it. Embedded viewers, such as an in-app document preview or
     a sandboxed frame, often skip that step. The result is a light canvas
     behind light text, so the page looks broken precisely in dark mode.
     Painting the root element directly removes that assumption. */
  background-color: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem; /* clears the sticky header on anchor jumps */
  tab-size: 4;
}

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* The main content area paints the page colour itself. Relying on the body
   background reaching the canvas is one assumption too many on a phone, where
   an embedded viewer or an automatic dark mode may interfere with it. */
main {
  background-color: var(--bg);
  color: var(--text);
}

/* Locks page scrolling while the mobile drawer or a modal is open. */
body[data-scroll-lock="true"] {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. HEADINGS AND TEXT
   Headings are sentence case. No all-caps labels, no single coloured word
   inside a heading, no arrows glued to link text.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-head);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-display);
  font-variation-settings: "wdth" var(--width-display);
  font-weight: var(--weight-bold);
}

h2 {
  font-size: var(--fs-h2);
  font-variation-settings: "wdth" var(--width-head);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

p,
li,
dd,
dt,
figcaption,
blockquote {
  max-width: var(--measure);
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

small {
  font-size: var(--fs-small);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-data);
  font-size: 0.9375em;
}

/* --------------------------------------------------------------------------
   4. LINKS
   -------------------------------------------------------------------------- */

a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color var(--t-fast) var(--ease),
    text-decoration-color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--brand-hover);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   5. LISTS
   -------------------------------------------------------------------------- */

ul,
ol {
  padding-inline-start: 1.25em;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-inline-start: 0;
}

li + li {
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------------------------
   6. MEDIA
   -------------------------------------------------------------------------- */

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

img,
video {
  height: auto;
}

svg {
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   7. FORM ELEMENTS — reset only. Styling lives in components.css
   -------------------------------------------------------------------------- */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

:disabled {
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   8. TABLES
   -------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: start;
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   9. FOCUS — always visible, never removed
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   10. SELECTION AND SCROLLBARS
   -------------------------------------------------------------------------- */

::selection {
  background-color: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   11. RIGHT TO LEFT
   Layout uses logical properties throughout, so Arabic and Urdu mirror with
   dir="rtl" alone. Only direction-carrying icons are flipped. Logos,
   numbers, charts and product mockups are never flipped.
   -------------------------------------------------------------------------- */

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

[dir="rtl"] .no-flip,
[dir="rtl"] .logo,
[dir="rtl"] .mock {
  direction: ltr;
}

/* Numbers stay readable in every language. */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   12. GLOBAL UTILITIES
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  z-index: var(--z-toast);
  padding: var(--s-3) var(--s-4);
  background-color: var(--brand);
  color: var(--text-on-brand);
  font-weight: var(--weight-semibold);
  border-radius: var(--r-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--text-on-brand);
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   12b. THEME SAFETY NET

   Belt and braces for the page background. These two rules restate the
   background with a literal colour and a stronger selector, so that even if
   a custom property fails to resolve in an unusual viewer, light text never
   ends up on a light page, or dark text on a dark one.
   -------------------------------------------------------------------------- */

html:not([data-theme="light"]),
html:not([data-theme="light"]) body {
  background-color: #05101f;
  color: #eaf0fa;
}

html[data-theme="light"],
html[data-theme="light"] body {
  background-color: #f4f6fa;
  color: #0c2340;
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   Everything decorative stops. The hero diagram jumps straight to its
   finished state (handled in hero.js as well).
   -------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. PRINT
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .site-footer,
  .float-actions,
  .cookie-bar,
  .lang-suggest {
    display: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ---------------------------------------------------------------------------
   Multilingual safety net
   ---------------------------------------------------------------------------
   The English copy was written to fit. A translation of the same sentence can
   be half again as long, and some languages produce long unbroken strings
   (transliterated product names, URLs in body copy). These rules stop any of
   that pushing content out of its container. They change nothing about the
   English layout, because English never reaches the limits they set.

   Icon and logo mirroring is handled above and deliberately not repeated
   here: logos, numbers, charts and mockups are never flipped.
   ------------------------------------------------------------------------ */

body {
  /* Break a word only when it genuinely cannot fit, rather than letting it
     stick out of the card. */
  overflow-wrap: break-word;
}

/* A flex or grid child defaults to min-width:auto, which refuses to shrink
   below its longest word and is the usual cause of a row overflowing its
   track. These are the containers whose children hold translated text. */
.grid > *,
.cluster > *,
.flow > *,
.card,
.panel {
  min-inline-size: 0;
}

/* Headings are balanced for English line counts; a longer translation should
   take another line rather than be squeezed out of its box. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

/* Tables carry the shortest cells and the longest translations. Let the cells
   wrap and let the table scroll on its own rather than widening the page. */
.table-scroll,
.table-basic {
  overflow-wrap: break-word;
}

/* A number keeps its own direction inside right-to-left prose, so "100+" and
   "300,000+" read correctly rather than being reordered by the bidi
   algorithm when the words around them are Arabic or Urdu. */
[dir="rtl"] .stat__value,
[dir="rtl"] .achievement strong {
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   Arabic and Urdu typography
   ---------------------------------------------------------------------------
   The layout mirrors correctly on its own, because this stylesheet uses
   logical properties throughout. What does not survive the switch is the
   typography, and that is what was breaking these two languages:

   1. Letter spacing. Arabic and Urdu are cursive: the letters of a word are
      joined. Adding or removing space between them severs those joins, so a
      word renders as a row of disconnected shapes. Every tracking value in
      this stylesheet, positive or negative, has to be off.

   2. Line height. These scripts carry their meaning above and below the
      baseline, in diacritics and in deep descenders. Leading tuned for Latin
      clips them, which reads as text cut off at the edge of its box.

   3. The display family. Archivo has no Arabic coverage, so headings fell
      back glyph by glyph to whatever the system offered, at whatever metrics
      that font happened to have.

   None of this touches the English layout: every rule is scoped to the two
   right-to-left languages.
   ------------------------------------------------------------------------ */

[lang="ar"],
[lang="ur"] {
  /* Headings use the text family, which already carries Arabic. */
  --font-display: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI",
    Tahoma, system-ui, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI",
    Tahoma, system-ui, sans-serif;

  /* Tracking is a Latin typographic device. In a cursive script it breaks
     the joins between letters. */
  --tracking-body: normal;
  --tracking-head: normal;
  --tracking-display: normal;
}

/* The tokens above cover most of the stylesheet. These few components set
   their own spacing directly, so they are cleared here as well. */
[lang="ar"] *,
[lang="ur"] * {
  letter-spacing: normal;
}

/* Room for diacritics above and descenders below. The values are floors, so
   anything already more generous keeps its own leading. */
[lang="ar"] body,
[lang="ur"] body {
  line-height: 1.85;
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4 {
  line-height: 1.5;
}

/* The four components whose leading is tightest in English, and which
   therefore clipped first. */
[lang="ar"] .nav__link, [lang="ur"] .nav__link,
[lang="ar"] .mock-cell, [lang="ur"] .mock-cell,
[lang="ar"] .stat__value, [lang="ur"] .stat__value,
[lang="ar"] .achievement, [lang="ur"] .achievement {
  line-height: 1.6;
}

/* A card sized to a fixed English line count has to be free to grow when the
   same sentence takes more lines. */
[lang="ar"] .card, [lang="ur"] .card,
[lang="ar"] .panel, [lang="ur"] .panel {
  block-size: auto;
}