/*
  Mawonah Brand v1.0 for mawonah.com (home, legal pages, 404, recipe banner).

  Token values are copied from the brand package (foundations/
  mawonah-tokens-colour-v1.0.css and mawonah-tokens-type-space-motion-v1.0.css);
  only the ones these pages use are listed. Change them there first, then here.

  Everything is first-party: the fonts come from /fonts/ and the jar from
  /assets/, by absolute path, because 404.html and recipe-banner.php are served
  at any URL depth. A third-party font or asset host would receive every
  visitor's IP without consent.
*/

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('/fonts/ibm-plex-sans-arabic-regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('/fonts/ibm-plex-sans-arabic-semibold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('/fonts/ibm-plex-sans-arabic-bold.woff2') format('woff2'); }

:root {
  /* Colour (brand v1.0) */
  --maw-tide: #1E4E6B;
  --maw-tide-hover: #163E57;
  --maw-tide-soft: #E3ECF2;
  --maw-pearl: #F6F3ED;
  --maw-pearl-elev: #FBF9F3;
  --maw-pearl-muted: #E9E4D8;
  --maw-pearl-line: #D8D0C0;
  --maw-soft-gold: #C89A4A;
  --maw-gold-ink: #7E5C1F;
  --maw-gold-soft: #F3E6CC;
  --maw-ink: #0E1F2A;
  --maw-ink-2: #3F5564;
  --maw-pattern-on-pearl: #E8D8BC;
  --maw-pattern-on-tide: #3C657D;

  /* Type (brand v1.0, web mobile -> desktop) */
  --maw-font: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --maw-size-display: clamp(38px, 28px + 2.6vw, 64px);
  --maw-size-h1: clamp(30px, 25px + 1.3vw, 44px);
  --maw-size-h3: clamp(20px, 18.5px + 0.4vw, 24px);
  --maw-size-lead: clamp(18px, 17.25px + 0.2vw, 20px);
  --maw-size-body: clamp(16px, 15.6px + 0.1vw, 17px);
  --maw-size-small: clamp(14px, 13.6px + 0.1vw, 15px);
  --maw-size-caption: 13px;

  /* Space (brand v1.0) */
  --maw-space-1: 4px;
  --maw-space-2: 8px;
  --maw-space-3: 12px;
  --maw-space-4: 16px;
  --maw-space-5: 24px;
  --maw-space-6: 32px;
  --maw-space-7: 48px;
  --maw-space-8: 64px;
  --maw-space-9: 96px;

  /* Motion (brand v1.0) */
  --maw-duration-fast: 150ms;
  --maw-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Web-only shape tokens (not in the brand package) */
  --maw-radius-md: 14px;
  --maw-radius-lg: 20px;
  --maw-radius-pill: 999px;
  --maw-shadow-raised: 0 1px 2px rgb(14 31 42 / 0.06), 0 18px 40px -20px rgb(30 78 107 / 0.28);
  --maw-gutter: clamp(20px, 4vw, 40px);
  --maw-measure: 44rem;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--maw-font);
  font-size: var(--maw-size-body);
  line-height: 1.7;
  letter-spacing: 0; /* Arabic ligatures break under tracking. */
  color: var(--maw-ink);
  background: var(--maw-pearl);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--maw-tide); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--maw-tide-hover); }

:focus-visible { outline: 2px solid var(--maw-tide); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--maw-gold-soft); color: var(--maw-ink); }

img { display: block; max-width: 100%; }

/* ---------- Brand mark (the jar, never with the name beside it) ---------- */

.maw-topbar {
  display: flex;
  align-items: center;
  padding-block: var(--maw-space-5);
}

.maw-mark { display: inline-flex; border-radius: 6px; }
.maw-mark img { width: auto; height: 44px; }

/* ---------- Buttons ---------- */

.maw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--maw-space-3) var(--maw-space-5);
  border-radius: var(--maw-radius-pill);
  font: 600 17px/1.4 var(--maw-font);
  text-decoration: none;
  text-align: center;
  transition: background-color var(--maw-duration-fast) var(--maw-ease-standard),
              color var(--maw-duration-fast) var(--maw-ease-standard),
              border-color var(--maw-duration-fast) var(--maw-ease-standard);
}
.maw-btn--primary { background: var(--maw-tide); color: var(--maw-pearl); }
.maw-btn--primary:hover { background: var(--maw-tide-hover); color: var(--maw-pearl); }
.maw-btn--quiet {
  background: transparent;
  color: var(--maw-tide);
  box-shadow: inset 0 0 0 1.5px var(--maw-tide);
}
.maw-btn--quiet:hover { background: var(--maw-tide-soft); color: var(--maw-tide-hover); }

/* Store labels, set as text (no third-party badge artwork). A link only when it is an <a>. */
.maw-store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60px;
  padding: var(--maw-space-2) var(--maw-space-5);
  border-radius: var(--maw-radius-md);
  background: var(--maw-tide);
  color: var(--maw-pearl);
  text-decoration: none;
  transition: background-color var(--maw-duration-fast) var(--maw-ease-standard);
}
a.maw-store:hover { background: var(--maw-tide-hover); color: var(--maw-pearl); }
.maw-store__over { font-size: var(--maw-size-caption); line-height: 1.4; color: var(--maw-tide-soft); }
.maw-store__name { font-size: 18px; font-weight: 600; line-height: 1.3; }

/* Graduated pearl scatter: the dots grow row by row, like the brand pattern. */
.maw-scatter {
  --dot: var(--maw-pattern-on-pearl);
  height: 144px;
  background:
    radial-gradient(circle, var(--dot) 0 1.5px, transparent 2px) 0 0 / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 3px, transparent 3.5px) 12px 24px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 4.5px, transparent 5px) 0 48px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 6.5px, transparent 7px) 12px 72px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 8.5px, transparent 9px) 0 96px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 10.5px, transparent 11px) 12px 120px / 24px 24px repeat-x;
}

/* ---------- Home ---------- */

.maw-shell { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--maw-gutter); }

.home-hero { padding-block: var(--maw-space-7) var(--maw-space-8); }
.home-hero h1 {
  max-width: 40rem;
  font-size: var(--maw-size-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--maw-tide);
  text-wrap: balance;
}
.home-lede {
  margin-top: var(--maw-space-4);
  font-size: var(--maw-size-lead);
  line-height: 1.6;
  color: var(--maw-ink-2);
  max-width: 34rem;
}
.home-stores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--maw-space-3);
  margin-top: var(--maw-space-6);
  max-width: 26rem;
}

.home-list {
  list-style: none;
  counter-reset: feature;
  padding-block: var(--maw-space-6) var(--maw-space-8);
  max-width: 40rem;
}
.home-list li {
  counter-increment: feature;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  column-gap: var(--maw-space-3);
  padding-block: var(--maw-space-4);
  font-size: var(--maw-size-lead);
  line-height: 1.55;
  color: var(--maw-ink);
}
.home-list li + li { border-top: 1px solid var(--maw-pearl-line); }
.home-list li::before {
  content: counter(feature, decimal); /* Western digits, never Arabic-Indic. */
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--maw-gold-ink);
}

.maw-footer {
  background: var(--maw-tide);
  color: var(--maw-pearl);
  padding-block: var(--maw-space-7) var(--maw-space-8);
}
.maw-footer__mark {
  display: block;
  width: 28px;
  height: 40px;
  background: var(--maw-soft-gold);
  -webkit-mask: url('/assets/mawonah-symbol-tide.svg') center / contain no-repeat;
  mask: url('/assets/mawonah-symbol-tide.svg') center / contain no-repeat;
}
.maw-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maw-space-3) var(--maw-space-5);
  margin-top: var(--maw-space-5);
  list-style: none;
  font-size: var(--maw-size-small);
}
.maw-footer a { color: var(--maw-pearl); text-decoration: none; }
.maw-footer a:hover { color: var(--maw-gold-soft); text-decoration: underline; }
.maw-footer :focus-visible { outline-color: var(--maw-pearl); }

/* ---------- 404 ---------- */

.maw-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.maw-404 main { flex: 1; }
.maw-notfound { padding-block: var(--maw-space-7) var(--maw-space-8); }
.maw-notfound > * { max-width: 30rem; }
.maw-notfound h1 {
  font-size: var(--maw-size-h1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--maw-tide);
  margin-bottom: var(--maw-space-6);
}
.maw-notfound__en {
  margin-top: var(--maw-space-8);
  padding-top: var(--maw-space-5);
  border-top: 1px solid var(--maw-pearl-line);
}
.maw-notfound__en h2 {
  font-size: var(--maw-size-body);
  font-weight: 600;
  line-height: 1.5;
  color: var(--maw-ink-2);
  margin-bottom: var(--maw-space-1);
}
.maw-notfound__en a { font-size: var(--maw-size-small); }

/* ---------- Legal pages (privacy, terms, delete-account) ---------- */

.maw-doc .container {
  max-width: calc(var(--maw-measure) + 2 * var(--maw-gutter));
  margin-inline: auto;
  padding-inline: var(--maw-gutter);
  padding-bottom: var(--maw-space-8);
}

/* DOM order stays title, date, language switch; the grid only places them. */
.maw-doc header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--maw-space-4);
  padding-block: var(--maw-space-5) var(--maw-space-6);
  border-bottom: 1px solid var(--maw-pearl-line);
}
.maw-doc header .maw-mark { grid-column: 1; grid-row: 1; justify-self: start; }
.maw-doc header .lang-toggle { grid-column: 2; grid-row: 1; }
.maw-doc header h1 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--maw-space-7);
  font-size: var(--maw-size-h1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--maw-tide);
}
.maw-doc .effective-date {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--maw-space-2);
  font-size: var(--maw-size-small);
  color: var(--maw-ink-2);
}

.lang-toggle {
  display: inline-flex;
  gap: var(--maw-space-1);
  padding: var(--maw-space-1);
  border-radius: var(--maw-radius-pill);
  background: var(--maw-pearl-muted);
}
.lang-toggle button {
  min-height: 40px;
  padding-inline: var(--maw-space-4);
  border: 0;
  border-radius: var(--maw-radius-pill);
  background: transparent;
  font: 600 14px/1 var(--maw-font);
  color: var(--maw-ink-2);
  cursor: pointer;
  transition: background-color var(--maw-duration-fast) var(--maw-ease-standard),
              color var(--maw-duration-fast) var(--maw-ease-standard);
}
.lang-toggle button:hover { color: var(--maw-ink); }
.lang-toggle button.active { background: var(--maw-tide); color: var(--maw-pearl); }

.maw-doc section { padding-top: var(--maw-space-6); }
.maw-doc section + section { margin-top: var(--maw-space-6); border-top: 1px solid var(--maw-pearl-line); }

.maw-doc h2 {
  font-size: var(--maw-size-h3);
  font-weight: 600;
  line-height: 1.4;
  color: var(--maw-tide);
  margin-bottom: var(--maw-space-3);
}
.maw-doc h3 {
  font-size: var(--maw-size-lead);
  font-weight: 600;
  line-height: 1.45;
  color: var(--maw-ink);
  margin: var(--maw-space-5) 0 var(--maw-space-2);
}
.maw-doc p, .maw-doc li { color: var(--maw-ink); margin-bottom: var(--maw-space-3); }
.maw-doc ul, .maw-doc ol { padding-inline-start: var(--maw-space-5); }
.maw-doc li::marker { color: var(--maw-gold-ink); }
.maw-doc strong { font-weight: 600; }
.maw-doc a { overflow-wrap: anywhere; }

.maw-doc .highlight {
  margin-block: var(--maw-space-4);
  padding: var(--maw-space-4) var(--maw-space-5);
  border: 1px solid var(--maw-pearl-line);
  border-radius: var(--maw-radius-md);
  background: var(--maw-pearl-elev);
}

.maw-doc table {
  width: 100%;
  margin-block: var(--maw-space-4);
  border: 1px solid var(--maw-pearl-line);
  border-radius: var(--maw-radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--maw-pearl-elev);
  font-size: 14px;
  line-height: 1.55;
}
.maw-doc th, .maw-doc td {
  padding: var(--maw-space-2) var(--maw-space-3);
  text-align: start;
  vertical-align: top;
  hyphens: auto; /* Lets the four-column English tables fit 390px without sideways scroll. */
}
@media (max-width: 480px) {
  .maw-doc table { font-size: 13px; }
  .maw-doc th, .maw-doc td { padding: var(--maw-space-2) 6px; }
}
.maw-doc th { background: var(--maw-tide-soft); color: var(--maw-ink); font-weight: 600; }
.maw-doc tr + tr td, .maw-doc tr + tr th { border-top: 1px solid var(--maw-pearl-line); }
.maw-doc td + td, .maw-doc th + th, .maw-doc th + td { border-inline-start: 1px solid var(--maw-pearl-line); }

.maw-doc .contact-box {
  margin-top: var(--maw-space-7);
  padding: var(--maw-space-6) var(--maw-space-5);
  border-radius: var(--maw-radius-lg);
  background: var(--maw-tide);
  color: var(--maw-pearl);
}
.maw-doc .contact-box h2 { color: var(--maw-pearl); margin-bottom: var(--maw-space-2); }
.maw-doc .contact-box p { color: var(--maw-tide-soft); }
.maw-doc .contact-box a { color: var(--maw-gold-soft); }
.maw-doc .contact-box a:hover { color: var(--maw-pearl); }
.maw-doc .contact-box :focus-visible { outline-color: var(--maw-pearl); }
.maw-doc .contact-box > :last-child { margin-bottom: 0; }

.maw-doc footer {
  margin-top: var(--maw-space-8);
  padding-top: var(--maw-space-5);
  border-top: 1px solid var(--maw-pearl-line);
  font-size: var(--maw-size-caption);
  color: var(--maw-ink-2);
  text-align: center;
}
.maw-doc footer p { color: var(--maw-ink-2); unicode-bidi: plaintext; } /* The English line keeps its own order on the Arabic page. */

/* ---------- Recipe share banner ---------- */

.maw-banner .page { max-width: 30rem; margin-inline: auto; padding-bottom: var(--maw-space-7); }
.maw-banner .maw-topbar { padding-inline: var(--maw-space-5); }
.maw-banner .hero {
  height: 220px;
  margin-inline: var(--maw-space-4);
  overflow: hidden;
  border-radius: var(--maw-radius-lg);
  /* Shown only when the recipe has no image: the same graduated scatter, on Tide. */
  --dot: var(--maw-pattern-on-tide);
  background:
    radial-gradient(circle, var(--dot) 0 1px, transparent 1.5px) 0 0 / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 2px, transparent 2.5px) 12px 24px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 3px, transparent 3.5px) 0 48px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 4px, transparent 4.5px) 12px 72px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 5.5px, transparent 6px) 0 96px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 7px, transparent 7.5px) 12px 120px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 8.5px, transparent 9px) 0 144px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 10px, transparent 10.5px) 12px 168px / 24px 24px repeat-x,
    radial-gradient(circle, var(--dot) 0 11px, transparent 11.5px) 0 192px / 24px 24px repeat-x,
    var(--maw-tide);
}
.maw-banner .hero img { width: 100%; height: 100%; object-fit: cover; }
.maw-banner .card {
  position: relative;
  margin: calc(-1 * var(--maw-space-6)) var(--maw-space-5) 0;
  padding: var(--maw-space-5);
  border: 1px solid var(--maw-pearl-line);
  border-radius: var(--maw-radius-lg);
  background: var(--maw-pearl-elev);
  box-shadow: var(--maw-shadow-raised);
}
.maw-banner .card--solo { margin-top: var(--maw-space-5); margin-inline: var(--maw-space-4); }
.maw-banner h1 {
  font-size: var(--maw-size-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--maw-tide);
  margin-bottom: var(--maw-space-2);
}
.maw-banner .desc { color: var(--maw-ink-2); margin-bottom: var(--maw-space-5); line-height: 1.6; }
.maw-banner .maw-btn + .maw-btn { margin-top: var(--maw-space-3); }
.maw-banner .stores { margin-top: var(--maw-space-4); font-size: var(--maw-size-small); text-align: center; }
.maw-banner .stores a { color: var(--maw-ink-2); }
.maw-banner .footer {
  margin-top: var(--maw-space-6);
  text-align: center;
  font-size: var(--maw-size-caption);
  color: var(--maw-ink-2);
}

/* ---------- Forced colours (Windows High Contrast) ---------- */

/* The quiet button draws its outline with box-shadow, which forced colours
   drops; the filled shapes lose their background. A real border keeps each
   one visible as a control or label. */
@media (forced-colors: active) {
  .maw-btn--quiet, .maw-btn--primary, .maw-store { border: 1.5px solid ButtonText; }
}

/* ---------- Motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}