/* ==========================================================================
   NGIS website — responsive layer.
   The page components render their layout as inline styles (grid-template-
   columns, fixed hero type scale, etc.), so this sheet targets the className
   hooks added to those containers and overrides them with !important at
   each breakpoint. Design tokens (--text-*, --space-*) are also rescaled on
   :root so every component that reads them shrinks together on small screens.
   ========================================================================== */

/* overflow-x is set on html only (not body) — setting it on both pairs
   overflow-y to "auto" on each per the CSS overflow spec, which turns body
   into its own (non-scrolling) box and breaks any position:sticky
   descendant, since it stops tracking the real page scroll on html. */
html {
  overflow-x: hidden;
}
body {
  min-width: 320px;
}

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

/* ---- Heading scale ---------------------------------------------------- */
/* Pages set h1/h2 font-size inline via the --text-4xl/5xl/6xl tokens (those
   tokens are shared with non-heading elements — stat numbers, pull-quotes,
   the ETM-equation "+" glyphs — so they can't just be redefined). Override
   the elements directly instead, uniformly, at every breakpoint. */
h1 { font-size: 26px !important; }
h2 { font-size: 22px !important; }

/* ---- Multi-column grids: repeat(N, 1fr) --------------------------------- */
@media (max-width: 1024px) {
  .ngis-grid-4, .ngis-grid-5, .ngis-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .ngis-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 680px) {
  .ngis-grid-2, .ngis-grid-3, .ngis-grid-4, .ngis-grid-5, .ngis-grid-6 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .ngis-grid-2-sm { grid-template-columns: 1fr !important; }
}

/* Prevents the GAMES/STEAM framework columns (min-width: 280px) and the
   compulsory-Arabic text column from forcing horizontal scroll on very
   narrow phones, where 280px no longer fits alongside the section padding. */
@media (max-width: 400px) {
  .ngis-minw-280 { min-width: 100% !important; }
}

/* ---- Asymmetric two-column hero / feature sections ---------------------- */
@media (max-width: 900px) {
  .ngis-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Footer ---------------------------------------------------------------*/
@media (max-width: 900px) {
  .ngis-footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .ngis-footer-grid { grid-template-columns: 1fr !important; }
}

/* ---- Header / mobile nav ------------------------------------------------ */
/* Seven nav links + logo + Apply button need more room than the old 5-link
   nav did before they'd wrap/overflow, so the switch to the hamburger menu
   happens at a wider breakpoint than the rest of the layout. */
@media (max-width: 1180px) {
  :root { --header-height: 64px; }
  .ngis-nav { display: none !important; }
  .ngis-header-cta { display: none !important; }
  .ngis-nav-toggle { display: flex !important; }
}
@media (min-width: 1181px) {
  .ngis-nav-mobile { display: none !important; }
}
@media (max-width: 340px) {
  .ngis-header-title { display: none !important; }
}

/* ---- Type scale: shrink display headings on small screens --------------- */
@media (max-width: 768px) {
  :root {
    --text-6xl: 2.75rem;
    --text-5xl: 2.25rem;
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
    --space-9: 3rem;
    --space-8: 2.5rem;
    --space-7: 2rem;
  }
}
@media (max-width: 480px) {
  :root {
    --text-6xl: 2.1rem;
    --text-5xl: 1.85rem;
    --text-4xl: 1.5rem;
    --text-3xl: 1.35rem;
    --space-9: 2.25rem;
    --space-8: 2rem;
    --space-7: 1.5rem;
  }
}

/* ---- Hero typewriter cursor ---------------------------------------------- */
.ngis-cursor {
  animation: ngisBlink 1s step-end infinite;
}
@keyframes ngisBlink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ngis-cursor { animation: none; }
}

/* ---- Visually-hidden text (screen readers only) --------------------------- */
.ngis-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Fact cards: hover lift ------------------------------------------------ */
.ngis-fact-card {
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ngis-fact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .ngis-fact-card { transition: none; }
  .ngis-fact-card:hover { transform: none; }
}