/* =================================================================
   تموون | TMOON Hyper — base styles
   Design tokens, reset, layout and accessibility utilities, shared
   typography and buttons. Loaded first on every page; the component
   and page stylesheets build on these tokens.

   Mobile-first: every rule targets the smallest screen, larger screens
   are layered on with min-width queries. Custom properties can't be
   used inside media queries, so the breakpoint scale lives here:

     481px   large phones
     769px   tablets — main layout switch (keep in sync with js/utils/dom.js)
     992px   laptops — inline header navigation appears
     1201px  wide desktops
   ================================================================= */

/* ─────────────────────────── Tokens ─────────────────────────── */

:root {
  /* Brand palette, taken from the logo. Colours that are also used
     see-through keep their RGB channels in a -rgb token, used as
     rgb(var(--color-teal-rgb) / 0.2); the solid colour is built from the
     same channels, so changing one value changes every use. */
  --color-teal-rgb:       56 134 153;
  --color-teal:           rgb(var(--color-teal-rgb));        /* #388699 logo teal — fills, icons, large type */
  --color-teal-deep-rgb:  36 95 109;
  --color-teal-deep:      rgb(var(--color-teal-deep-rgb));   /* #245F6D — teal text and links (7:1 on white) */
  --color-teal-mist:      #E9F2F4;
  --color-ink-rgb:        14 47 55;
  --color-ink:            rgb(var(--color-ink-rgb));         /* #0E2F37 — text and dark sections */
  --color-ink-soft:       #4A6168;                           /* 6:1 on the page background */
  --color-amber-rgb:      247 181 54;
  --color-amber:          rgb(var(--color-amber-rgb));       /* #F7B536 logo smile — primary actions, highlights */
  --color-amber-deep:     #EAA21C;
  --color-leaf:           #6FAE43;                           /* logo leaf — fresh departments */
  --color-leaf-deep:      #3F7A22;                           /* green text (5:1 on white) */
  --color-leaf-mist:      #EDF5E6;
  --color-sky:            #1389B1;                           /* backdrop of the campaign photos */
  --color-paper:          #FFFFFF;
  --color-mist:           #F5F9FA;

  /* Semantic roles — components use these, not the palette directly */
  --color-text:       var(--color-ink);
  --color-text-soft:  var(--color-ink-soft);
  --color-heading:    var(--color-ink);
  --color-link:       var(--color-teal-deep);
  --color-bg:         var(--color-mist);
  --color-bg-alt:     var(--color-teal-mist);
  --color-surface:    var(--color-paper);
  --color-border:     #D3E2E5;

  /* Typography: Alexandria for headings (geometric, like the logo
     lettering), IBM Plex Sans Arabic for reading, IBM Plex Mono for
     receipt-style details. Each stack covers Arabic and Latin. */
  --font-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --text-xs:      1.3rem;
  --text-button:  1.4rem;   /* button labels on phones */
  --text-sm:      1.45rem;
  --text-base:    1.6rem;
  --text-md:      1.8rem;
  --text-lg:      2.1rem;
  --text-title:   clamp(2.6rem, 1.9rem + 2.2vw, 4.2rem);
  --text-display: clamp(3.4rem, 2.1rem + 4.4vw, 6.6rem);

  /* Layout — gutters and section spacing grow with the viewport (below) */
  --container-max: 128rem;
  --header-height: 6.4rem;
  --page-gutter:   1.6rem;
  --section-space: 6.4rem;

  /* Shape */
  --radius-sm:   0.8rem;
  --radius-md:   1.2rem;
  --radius-lg:   2.4rem;
  --radius-pill: 999px;
  /* The logo's shopping bag: square-ish top, fully rounded bottom */
  --radius-bag:  var(--radius-lg) var(--radius-lg) 50% 50% / var(--radius-lg) var(--radius-lg) 34% 34%;

  --shadow-soft:   0 0.2rem 0.8rem rgb(var(--color-ink-rgb) / 0.06), 0 1.2rem 3.2rem rgb(var(--color-ink-rgb) / 0.08);
  --shadow-raised: 0 0.4rem 1.2rem rgb(var(--color-ink-rgb) / 0.1), 0 2rem 4.8rem rgb(var(--color-ink-rgb) / 0.14);

  /* Motion */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s ease;

  /* Focus ring colour (dark sections override it) */
  --focus-ring-color: var(--color-teal-deep);

  /* Stacking order */
  --z-header:             100;
  --z-floating:           150;
  --z-side-nav-backdrop:  199;
  --z-side-nav:           200;
  --z-dialog-backdrop:    8000;
  --z-dialog:             8001;
  --z-skip-link:          9999;
}

@media (min-width: 769px) {
  :root { --page-gutter: 3.2rem; --section-space: 8rem; --header-height: 7.2rem; }
}

@media (min-width: 992px) {
  :root { --page-gutter: 4rem; --section-space: 9.6rem; --header-height: 8rem; }
}

/* ─────────────────────────── Reset ─────────────────────────── */

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

/* 1rem = 10px at the browser's default size (and scales with the visitor's setting) */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1.6rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;   /* fallback for browsers without "clip" */
  overflow-x: clip;     /* unlike hidden, doesn't break the sticky header */
  -webkit-font-smoothing: antialiased;
}

/* Arabic is a joined script: letter-spacing pulls its letters apart, so
   tracking only ever applies to Latin text. Latin runs inside Arabic pages
   (the brand name, handles) carry lang="en" and keep theirs. */
:lang(ar) { letter-spacing: normal !important; }

/* The hidden attribute always wins over a component's display value */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
blockquote, cite { font-style: normal; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: 1.35; color: var(--color-heading); }
address { font-style: normal; }

/* Less motion on request: no looping animations, instant transitions and scrolling */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Focus ring. Dark sections switch --focus-ring-color so the ring keeps
   at least 3:1 contrast against its background. */
:focus-visible {
  outline: 0.3rem solid var(--focus-ring-color);
  outline-offset: 0.3rem;
}

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

/* Elements given tabindex="-1" only receive focus from scripts (e.g. <main>
   after "back to top"); they need no ring of their own */
[tabindex="-1"]:focus { outline: none; }

::selection { background: rgb(var(--color-amber-rgb) / 0.55); color: var(--color-ink); }

/* ─────────────────────────── Layout utilities ─────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Horizontal scroll-snap row on phones; a normal (non-scrolling) box from
   tablets up, where each component lays its items out as a grid. */
.scroll-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(26rem, 78%);
  gap: 1.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-gutter);
  padding-block-end: 0.4rem;   /* room for card shadows */
  scrollbar-width: none;
}
.scroll-rail::-webkit-scrollbar { display: none; }
.scroll-rail > * { scroll-snap-align: start; }

@media (min-width: 769px) {
  .scroll-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* ─────────────────────────── Accessibility utilities ─────────────────────────── */

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 1.6rem;
  z-index: var(--z-skip-link);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
.skip-link:focus { top: 1.6rem; }

/* ─────────────────────────── Scroll reveal ─────────────────────────── */
/* js/components/reveal.js marks below-the-fold .reveal elements as
   .reveal--pending (hidden) and removes that again as each one scrolls into
   view, so the content stays visible whenever the script doesn't run.
   Zero specificity (:where) lets a component's own transitions and hover
   lift win. .reveal--tablet-up: items inside a phone scroll rail are never
   hidden on phones — they sit off to the side until swiped. */

:where(.reveal) { transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }

:where(.reveal--pending:not(.reveal--tablet-up)) {
  opacity: 0;
  transform: translateY(2.4rem);
}

@media (min-width: 769px) {
  :where(.reveal--pending.reveal--tablet-up) {
    opacity: 0;
    transform: translateY(2.4rem);
  }
}

/* ─────────────────────────── Backdrop ─────────────────────────── */
/* Dimmed layer behind the side menu and the contact dialog */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgb(var(--color-ink-rgb) / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.backdrop--visible { opacity: 1; pointer-events: auto; }

.backdrop--side-nav { z-index: var(--z-side-nav-backdrop); }
.backdrop--dialog   { z-index: var(--z-dialog-backdrop); }

/* ─────────────────────────── Sections ─────────────────────────── */

.section { padding-block: var(--section-space); }

.section--alt     { background-color: var(--color-bg-alt); }
.section--surface { background-color: var(--color-surface); }

/* Dark section: ink background, light text, white focus ring */
.section--dark {
  --focus-ring-color: var(--color-amber);
  --color-heading: var(--color-paper);
  background-color: var(--color-ink);
  color: rgb(255 255 255 / 0.86);
}

/* Section intro (eyebrow, title, subtitle). Phones: always centred.
   Tablets up: aligned to the reading edge unless it is --center. */
.section__header {
  max-width: 64rem;
  margin-inline: auto;
  margin-bottom: 4rem;
  text-align: center;
}

@media (min-width: 769px) {
  .section__header { margin-inline: 0; text-align: start; }
  .section__header--center { margin-inline: auto; text-align: center; }
}

.section__title {
  font-size: var(--text-title);
  font-weight: var(--font-weight-black);
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.section__title:has(.highlight) { line-height: 1.55; }

.section__subtitle {
  font-size: var(--text-base);   /* phones; larger from tablets up */
  line-height: 1.8;
  color: var(--color-text-soft);
  max-width: 56ch;
}

.section__header .section__subtitle { margin-inline: auto; }

@media (min-width: 769px) {
  .section__subtitle { font-size: var(--text-md); }
  .section__header .section__subtitle { margin-inline: 0; }
  .section__header--center .section__subtitle { margin-inline: auto; }
}
.section--dark .section__subtitle { color: rgb(255 255 255 / 0.78); }

/* ─────────────────────────── Eyebrow (small label above a heading) ─────────────────────────── */
/* The marker is the logo's rounded amber "eye". */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 0.2rem 0.5rem 0.5rem 0.5rem;
  background: var(--color-amber);
}

.section--dark .eyebrow { color: var(--color-amber); }

/* ─────────────────────────── Highlight ─────────────────────────── */
/* The amber box the shop's posters set their key phrase in. Used only on
   the three poster slogans, so it keeps meaning something.
   The dots under a final "ي" hang below the display face's descent, i.e.
   below an inline element's background, so the box reaches further down
   than the text box; headings that hold a highlight get the extra line
   height to keep a wrapped box from covering the line above. */

.highlight {
  padding: 0.04em 0.28em 0.2em;
  border-radius: 0.28em;
  background: var(--color-amber);
  color: var(--color-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ─────────────────────────── Buttons ─────────────────────────── */

/* Phones: a little more compact, so two buttons fit side by side */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4.4rem;
  padding: 0.8rem 1.6rem;
  border: 0.2rem solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.button:active { transform: translateY(1px); }

.button__icon { flex-shrink: 0; width: 1.8rem; height: 1.8rem; }

@media (min-width: 769px) {
  .button {
    gap: 0.8rem;
    min-height: 4.8rem;
    padding: 0.8rem 2.4rem;
    font-size: var(--text-base);
  }

  .button__icon { width: 2rem; height: 2rem; }
}

/* Direction-aware arrow: points toward the reading direction */
[dir="rtl"] .button__icon--forward { transform: scaleX(-1); }

.button--primary {
  background: var(--color-amber);
  color: var(--color-ink);
  box-shadow: 0 0.6rem 1.6rem rgb(var(--color-amber-rgb) / 0.35);
}
.button--primary:hover { background: var(--color-amber-deep); box-shadow: 0 0.8rem 2.2rem rgb(var(--color-amber-rgb) / 0.45); }

.button--secondary {
  border-color: var(--color-teal-deep);
  color: var(--color-teal-deep);
}
.button--secondary:hover { background: var(--color-teal-deep); color: var(--color-paper); }

/* Outline button for dark sections and panels */
.button--light {
  border-color: rgb(255 255 255 / 0.7);
  color: var(--color-paper);
}
.button--light:hover { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }

.button--block { width: 100%; }

/* Round icon-only button */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  border: 0.15rem solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-teal-deep);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.icon-button:hover {
  background: var(--color-teal-deep);
  border-color: var(--color-teal-deep);
  color: var(--color-paper);
}

/* ─────────────────────────── Social links ─────────────────────────── */
/* Round platform buttons: footer, side menu, savings section */

.social-links { display: flex; flex-wrap: wrap; gap: 1rem; }

.social-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 0.15rem solid currentColor;
  border-radius: 50%;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.social-links__link:hover { background: var(--color-amber); border-color: var(--color-amber); color: var(--color-ink); }

.social-links__icon { width: 2rem; height: 2rem; }

/* ─────────────────────────── Text link with arrow ─────────────────────────── */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.15rem;
  text-underline-offset: 0.5rem;
  text-decoration-color: rgb(var(--color-teal-deep-rgb) / 0.35);
  transition: text-decoration-color var(--transition-base), color var(--transition-base);
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link__icon { width: 1.8rem; height: 1.8rem; transition: transform var(--transition-base); }
[dir="rtl"] .text-link__icon { transform: scaleX(-1); }
.text-link:hover .text-link__icon { transform: translateX(0.3rem); }
[dir="rtl"] .text-link:hover .text-link__icon { transform: scaleX(-1) translateX(0.3rem); }

/* ─────────────────────────── Media frame ─────────────────────────── */
/* Rounded photo frame. The sky backdrop matches the campaign photos, so
   no gap shows while an image loads. --bag gives it the logo's bag shape. */

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-sky);
}
.media-frame--bag { border-radius: var(--radius-bag); }

.media-frame__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}