/* ================================================
   MAINTENANCE PAGE — Self-contained stylesheet
   Subset of global.css for a logo-only header,
   standard breakout/flow layout, and stripped
   copyright-only footer.
   ================================================ */

/* ---- Fonts: Inter variable (latin only) ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-flex-normal-latin.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+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- Fonts: Poppins 700 normal (latin only, for headings) ---- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---- Fonts: Noto Sans Arabic 700 normal (arabic only, for rtl headings) ---- */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("../fonts/noto-sans-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Alyamama";
  src: url("../fonts/alyamama-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* ---- Custom Properties ---- */
:root {
  /* Spacing */
  --space-3xs: clamp(0.25rem, 0.2344rem + 0.0781vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4844rem + 0.0781vw, 0.5625rem);
  --space-s: clamp(1rem, 0.9688rem + 0.1563vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4531rem + 0.2344vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9375rem + 0.3125vw, 2.25rem);
  --space-xl: clamp(3rem, 2.9063rem + 0.4688vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.875rem + 0.625vw, 4.5rem);
  --space-fixed-4: 8px;
  --space-fixed-9: 32px;

  /* Layout */
  --page-gutters: clamp(var(--space-m), 3vi, var(--space-xl));
  --page-max: 44rem;

  /* Type scale (steps used on this page only) */
  --step--2: clamp(0.7901rem, 0.7675rem + 0.1006vw, 0.8681rem);
  --step--1: clamp(0.8889rem, 0.8445rem + 0.1971vw, 1.0417rem);
  --step-5: clamp(1.802rem, 1.4222rem + 1.6882vw, 3.1104rem);
  --step-6: clamp(2.0273rem, 1.5322rem + 2.2002vw, 3.7325rem);
  --step-7: clamp(2.2807rem, 1.6425rem + 2.8365vw, 4.479rem);

  /* Typography */
  --font-base: "Inter", system-ui, sans-serif;
  --font-display: "Poppins", var(--font-base);
  --font-bold: 700;
  --font-normal: 400;

  /* Radius */
  --radius-3: 0.375rem;

  /* Logo */
  --logo-height: 38px;

  /* Colors (light mode; header/footer are always dark) */
  --color-teal-500: #00999d;
  --color-coral-500: #ff5350;
  --color-bg: #ffffff;
  --color-fg: #212121;
  --color-fg-interactive: #007477; /* teal-700 */
  --color-fg-interactive-hover: #003638; /* teal-900 */
  --color-fg-light: #ffffff;
  --color-fg-muted: rgba(33, 33, 33, 0.7);
  --color-fg-contrast-muted: rgba(255, 255, 255, 0.7);
  --color-border-footer: rgba(255, 255, 255, 0.15);
  --focus-outline: 2px solid #00999d; /* teal-600 */
  --focus-outline-offset: 2px;
}

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

:where(ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  line-height: 1.1;
  text-wrap: balance;
}

img,
picture,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* ---- Body ---- */
body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-base);
  font-size: var(--step--1);
  font-weight: var(--font-normal);
}

/* ---- Links ---- */
a {
  color: var(--color-fg-interactive);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

a:where(:hover, :focus-visible) {
  color: var(--color-fg-interactive-hover);
  text-decoration: none;
}

a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* ---- Headings ---- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: 1.2;
}

h1 {
  font-size: var(--step-7);
  letter-spacing: -1.8px;
}
h2 {
  font-size: var(--step-6);
  letter-spacing: -1.8px;
}
h3 {
  font-size: var(--step-5);
  line-height: 1.3;
  letter-spacing: -0.8px;
}

/* ---- Page wrapper (flex column, sticky footer support) ---- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---- Breakout layout ---- */
/* https://ryanmulligan.dev/blog/layout-breakouts/ */
.breakout {
  --gap: var(--space-m);
  --content: min(var(--page-max), 100% - var(--gap) * 2);
  --gutter: minmax(var(--gap), calc(1rem + 10vw));
  --popout: minmax(0px, 1rem);

  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [gutter-start] var(--gutter)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--gutter) [gutter-end]
    1fr [full-end];
}

@media (max-width: 56.25em) {
  .breakout {
    --gap: var(--space-s);
  }
}

:where(.breakout) > * {
  grid-column: content-start / content-end;
}

main {
  align-items: center;
  background:
    linear-gradient(245deg, var(--color-coral-500) 0%, transparent 60%),
    var(--color-teal-500);
  color: var(--color-fg-light);
  /* min-height: 100dvh; */
  padding-block: var(--space-l);
}

/* ---- Flow content area ---- */
.flow {
  flex-grow: 1;
}

:where(.flow > * + *) {
  --flow-space: var(--space-l);
}

@media (min-width: 56.25em) {
  :where(.flow > * + *) {
    --flow-space: var(--space-2xl);
  }
}

/* ---- Site header (logo only) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #212121; /* black-800; matches dark-theme header */
  color: var(--color-fg-light);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(var(--page-gutters) - var(--space-3xs) * 2);
  padding-block: var(--space-2xs);
}

.site-header__logo {
  display: flex;
  align-items: center;
  padding: var(--space-3xs);
  border-radius: var(--radius-3);
  color: var(--color-fg-light);
  text-decoration: none;
}

.site-header__logo svg {
  display: block;
  height: var(--logo-height);
}

.site-header__logo:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* ---- Site footer (copyright bar only) ---- */
.site-footer {
  position: sticky;
  top: 100vh;
  background-color: #003638; /* teal-900; matches brand-primary-900 */
  color: var(--color-fg-light);
}

.site-footer__lower {
  display: flex;
  justify-content: center;
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-border-footer);
}

.site-footer__copyright {
  display: flex;
  flex-direction: column;
  gap: var(--space-fixed-4);
  font-size: var(--step--2);
  text-align: center;
  color: var(--color-fg-contrast-muted);
}

/* ---- Language nav ---- */
nav.langs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.08);
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

nav.langs button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  transition: background 0.2s ease;
}

nav.langs button:hover {
  background: rgba(255, 255, 255, 0.1);
}

nav.langs button.active {
  background: var(--color-teal-500);
  color: #0e1e1e;
}

/* ---- Language block visibility ---- */
[data-lang] {
  display: none;
}

[data-lang].active {
  display: block;
}

/* ---- Content typography ---- */
h1 em {
  font-style: normal;
}

[dir="rtl"] h1 {
  font-family: "Noto Sans Arabic", sans-serif;
}

[dir="rtl"] p {
  font-family: "Alyamama", "Noto Sans Arabic", sans-serif;
}

p.lead {
  margin-top: var(--space-m);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.33);
  line-height: 1.6;
}

p.detail {
  margin-top: var(--space-s);
  font-size: var(--step-0);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.33);
  line-height: 1.6;
}

@media (max-width: 40em) {
  nav.langs {
    border-radius: var(--radius-3);
  }
}