/* ==================================================================
   Manarah identity layer — "The Light, Behind your business"
   Source: Manarah Brand Guidelines (2026). Loaded last, after the theme
   (main.css) and rtl_additions.css, so the theme stays untouched.

   The rules this file enforces:
   - Three colours: white, black, stone grey (#E8E8E8).
   - Blue (#1B7FFF) is light, not ink: it glows behind things on dark
     grounds, or marks structure in tiny amounts. It is never a fill,
     a band, a button or a headline.
   - Montserrat / Alexandria; display type is 200 set against 700.
   - The pattern is the rounded square from the mark, in grey on white
     or near-white on black, never blue, never behind a paragraph, and
     never on the same surface as the light.
   - Only the light animates: it rises once, the mark never moves.
================================================================== */

/* ---------- 04 · Colour ---------- */
:root {
  --mn-white: #FFFFFF;
  --mn-black: #000000;
  --mn-stone: #E8E8E8;
  --mn-light: #1B7FFF;
  --mn-light-rgb: 27, 127, 255;

  /* 02.1 · three intensities of one soft source whose origin sits off-frame (top right),
     so the viewer never sees where it starts — and (with the mask below) never where it ends */
  --mn-glow-full: radial-gradient(circle 900px at calc(100% + 60px) -160px, rgba(27,127,255,.9) 0%, rgba(27,127,255,.23) 44%, rgba(27,127,255,0) 70%);
  --mn-glow-present: radial-gradient(circle 900px at calc(100% + 60px) -160px, rgba(27,127,255,.55) 0%, rgba(27,127,255,.14) 44%, rgba(27,127,255,0) 70%);
  --mn-glow-ambient: radial-gradient(circle 900px at calc(100% + 60px) -160px, rgba(27,127,255,.22) 0%, rgba(27,127,255,.06) 44%, rgba(27,127,255,0) 70%);
  /* proportional, so short sections (phones) fade as gently as tall ones */
  --mn-glow-falloff: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%);

  /* Theme tokens remapped: the old blue accent was used as a fill, which the light can never be */
  --manarah-blue: var(--mn-light);
  --manarah-blue-rgb: var(--mn-light-rgb);
  --accent--dark: #FFFFFF;
  --accent-rgb--dark: 255, 255, 255;
  --additional--dark: #FFFFFF;
  --additional-rgb--dark: 255, 255, 255;
  --accent--light: #000000;
  --accent-rgb--light: 0, 0, 0;
  --additional--light: #000000;
  --additional-rgb--light: 0, 0, 0;
  --base--dark: #000000;
  --base-shade--dark: #000000;
  --bg-page--light: var(--mn-stone);

  /* 05.1 · type */
  --_font-default: "Montserrat", sans-serif;
  --_font-accent: "Montserrat", sans-serif;
  --fw-regular--dark: 400;
  --fw-regular--light: 400;
}

:root[lang="ar"],
[dir="rtl"] {
  --_font-default: "Alexandria", "Montserrat", sans-serif;
  --_font-accent: "Alexandria", "Montserrat", sans-serif;
}

::selection {
  background-color: rgba(var(--mn-light-rgb), .35);
  color: inherit;
}

/* ---------- 05 · Typography: 200 against 700, nothing between ---------- */
h1, h2,
.inner-headline__title,
.mxd-promo__caption,
.mxd-promo__title {
  font-weight: 200 !important;
  letter-spacing: -0.025em;
}

h1 strong, h1 b, h2 strong, h2 b,
.mxd-promo__caption strong, .mxd-promo__caption b {
  font-weight: 700 !important;
}

h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

strong, b {
  font-weight: 700;
}

:root[lang="ar"] h1, :root[lang="ar"] h2,
[dir="rtl"] h1, [dir="rtl"] h2 {
  letter-spacing: 0; /* Arabic letterforms must not be tracked */
}

/* ---------- 15 · Blue on structure: markers only ---------- */
.mxd-point-subtitle svg,
.mxd-point-subtitle svg path {
  fill: var(--mn-light);
}

/* The menu's project count was a blue pill; a marker may not be a field */
.footer-nav__counter {
  background-color: var(--mn-stone) !important;
  color: var(--mn-black) !important;
}

/* ---------- 02 · The light: a ground of its own, on dark surfaces only ----------
   Used on inner page headlines only. The home hero stays plain black: no light, no pattern. */
.mxd-section-inner-headline {
  position: relative;
  isolation: isolate;
}

.mxd-section-inner-headline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--mn-glow-present);
  /* the light reaches zero before the surface ends, so its edge is never visible */
  -webkit-mask-image: var(--mn-glow-falloff);
  mask-image: var(--mn-glow-falloff);
}

/* Inner headlines start below the header strip; extend the light up behind it so no top edge shows */
.mxd-section-inner-headline::before {
  top: -160px;
}

/* Arabic reads from the right; the source moves to the opposite (top-left) corner, away from the headline */
[dir="rtl"] .mxd-section-inner-headline::before {
  background: radial-gradient(circle 900px at -60px -160px, rgba(27,127,255,.55) 0%, rgba(27,127,255,.14) 44%, rgba(27,127,255,0) 70%);
}

/* Light belongs to dark grounds; on a light scheme the headline ground stays plain */
@media (prefers-color-scheme: light) {
  :root:not([color-scheme="dark"]) .mxd-section-inner-headline::before { background: none; }
}
[color-scheme="light"] .mxd-section-inner-headline::before { background: none; }

/* ---------- 14 · The pattern: small touches only ----------
   The pattern is an accent, never a background: a small patch anchored to one
   corner of one surface, fading to nothing well before any text. */

/* Home: the white "40+" card, bottom corner (well under a fifth of the card) */
.mxd-stats-cards__inner.bg-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.mxd-stats-cards__inner.bg-light::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 140px;
  height: 140px;
  z-index: -1;
  pointer-events: none;
  background: url("../img/brand/tile-grey-small.svg") right bottom / 26px 26px repeat;
  -webkit-mask-image: radial-gradient(circle 140px at 100% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(circle 140px at 100% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
}

[dir="rtl"] .mxd-stats-cards__inner.bg-light::after {
  right: auto;
  left: 0;
  background-position: left bottom;
  -webkit-mask-image: radial-gradient(circle 140px at 0% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(circle 140px at 0% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
}

/* Footer: a small patch in the bottom corner */
#mxd-footer {
  position: relative;
  isolation: isolate;
}

#mxd-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 220px;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: url("../img/brand/tile-lit-small.svg") right bottom / 26px 26px repeat;
  -webkit-mask-image: radial-gradient(circle 220px at 100% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(circle 220px at 100% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
  opacity: .45;
}

[dir="rtl"] #mxd-footer::before {
  right: auto;
  left: 0;
  background-position: left bottom;
  -webkit-mask-image: radial-gradient(circle 220px at 0% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(circle 220px at 0% 100%, #000 0%, #000 12%, rgba(0,0,0,.42) 44%, rgba(0,0,0,0) 78%);
}