/* ============================================================
   Malsoon — Base styles (fonts, reset, layout primitives,
   buttons, nav, footer, waveform motif). Shared by all pages.
   Look is driven entirely by tokens.css.
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-semibold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/inter-medium.woff2") format("woff2"); }
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/plex-arabic.woff2") format("woff2"); }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Arabic direction uses the Arabic typeface for body copy */
html[dir="rtl"] body { font-family: var(--font-arabic); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--lh-tight); font-weight: 600; margin: 0; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: var(--font-arabic); font-weight: 400; }
p { margin: 0; }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--sp-9); }
.section--alt { background: var(--bg-alt); }
.section__head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-7); }
.kicker {
  display: inline-block; font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-tiny); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--sp-3);
}
html[dir="rtl"] .kicker { letter-spacing: 0; text-transform: none; font-family: var(--font-arabic); }
.section__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.section__sub { color: var(--text-muted); font-size: var(--fs-lead); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.9em 1.6em; border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  text-align: center;
}
html[dir="rtl"] .btn { font-family: var(--font-arabic); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-coral); }
.btn--primary:hover { background: var(--accent-strong); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 1.05em 2em; font-size: var(--fs-lead); }
.btn[disabled], .btn.is-disabled {
  background: var(--bg-alt); color: var(--text-faint); box-shadow: none;
  cursor: not-allowed; pointer-events: none; border-color: var(--border);
}

/* ---- Waveform motif (the logo's M, breathing) — reused from app HUD ---- */
.wave { display: inline-flex; align-items: center; gap: var(--wave-gap); height: 46px; }
.wave i {
  width: var(--wave-bar-w); border-radius: 2px; background: var(--wave-color);
  height: 8px; animation: wave-dance 1100ms ease-in-out infinite;
}
/* M silhouette: tall–mid–short–mid–tall, mirrored — 11 bars */
.wave i:nth-child(1)  { --h: 18px; animation-delay: -80ms; }
.wave i:nth-child(2)  { --h: 30px; animation-delay: -240ms; }
.wave i:nth-child(3)  { --h: 46px; animation-delay: -400ms; }
.wave i:nth-child(4)  { --h: 34px; animation-delay: -160ms; }
.wave i:nth-child(5)  { --h: 22px; animation-delay: -320ms; }
.wave i:nth-child(6)  { --h: 14px; animation-delay: -480ms; }
.wave i:nth-child(7)  { --h: 22px; animation-delay: -560ms; }
.wave i:nth-child(8)  { --h: 34px; animation-delay: -80ms; }
.wave i:nth-child(9)  { --h: 46px; animation-delay: -640ms; }
.wave i:nth-child(10) { --h: 30px; animation-delay: -200ms; }
.wave i:nth-child(11) { --h: 18px; animation-delay: -360ms; }
@keyframes wave-dance {
  0%, 100% { height: calc(var(--h) * 0.4); opacity: 0.7; }
  50%      { height: var(--h); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wave i { animation: none; height: var(--h); }
}
/* static waveform for dividers/footers */
.wave--static i { animation: none; height: var(--h); opacity: 0.9; }
.wave--peach i { background: var(--wave-color-2); }
.wave--sm { height: 26px; }
.wave--sm i:nth-child(3), .wave--sm i:nth-child(9) { --h: 26px; }
.wave--sm i { --h: 12px; }

/* subtle section divider using the motif */
.wave-divider { display: flex; justify-content: center; padding-block: var(--sp-2); opacity: 0.5; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, 0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); }
.nav__brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-heading); font-weight: 600; color: var(--accent); font-size: 1.25rem; }
.nav__brand img { height: 34px; width: auto; }
/* compact brand wave — scaled bar heights so the M reads at small size */
.nav__brand .wave, .footer__brand .wave { height: 24px; gap: 2px; }
.nav__brand .wave i, .footer__brand .wave i { width: 3px; }
.nav__brand .wave i:nth-child(1), .footer__brand .wave i:nth-child(1),
.nav__brand .wave i:nth-child(11), .footer__brand .wave i:nth-child(11) { --h: 9px; }
.nav__brand .wave i:nth-child(2), .footer__brand .wave i:nth-child(2),
.nav__brand .wave i:nth-child(10), .footer__brand .wave i:nth-child(10) { --h: 15px; }
.nav__brand .wave i:nth-child(3), .footer__brand .wave i:nth-child(3),
.nav__brand .wave i:nth-child(9), .footer__brand .wave i:nth-child(9) { --h: 24px; }
.nav__brand .wave i:nth-child(4), .footer__brand .wave i:nth-child(4),
.nav__brand .wave i:nth-child(8), .footer__brand .wave i:nth-child(8) { --h: 18px; }
.nav__brand .wave i:nth-child(5), .footer__brand .wave i:nth-child(5),
.nav__brand .wave i:nth-child(7), .footer__brand .wave i:nth-child(7) { --h: 12px; }
.nav__brand .wave i:nth-child(6), .footer__brand .wave i:nth-child(6) { --h: 7px; }
.nav__links { display: flex; align-items: center; gap: var(--sp-5); }
.nav__links a { color: var(--text-muted); font-size: var(--fs-small); transition: color var(--dur-fast); }
.nav__links a:hover { color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.lang-toggle {
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 0.4em 0.85em; font-size: var(--fs-tiny); font-weight: 500; color: var(--text-muted);
  transition: all var(--dur-fast);
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav__menu-btn { display: none; }
@media (max-width: 860px) {
  .nav__links { display: none; }
}
/* very small screens: drop the nav CTA (hero CTA is right below) */
@media (max-width: 520px) {
  .nav__actions .btn { display: none; }
}

/* ---- Footer ---- */
.footer { background: var(--charcoal); color: var(--cream); padding-block: var(--sp-8) var(--sp-6); }
.footer a { color: rgba(250, 247, 242, 0.7); font-size: var(--fs-small); transition: color var(--dur-fast); }
.footer a:hover { color: var(--peach); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); }
.footer__brand { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-heading); font-weight: 600; color: var(--peach); font-size: 1.3rem; margin-bottom: var(--sp-3); }
.footer__brand .wave i { background: var(--peach); }
.footer__tag { color: rgba(250, 247, 242, 0.6); font-size: var(--fs-small); max-width: 34ch; }
.footer__col h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--cream); margin-bottom: var(--sp-3); }
html[dir="rtl"] .footer__col h4 { font-family: var(--font-arabic); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__disclosure {
  border-top: 1px solid rgba(250, 247, 242, 0.12); padding-top: var(--sp-5);
  direction: rtl; text-align: right;
}
.footer__disclosure p { color: rgba(250, 247, 242, 0.55); font-size: var(--fs-tiny); line-height: 1.9; font-family: var(--font-arabic); }
.footer__rights { margin-top: var(--sp-4); color: rgba(250, 247, 242, 0.4); font-size: var(--fs-tiny); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ---- Utility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Scroll reveal — hidden state only applies when JS is running
   (html.js), so content is never blank without JS; main.js also
   force-reveals leftovers as a safety net. */
.fade-up { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
html.js .fade-up:not(.in) { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) { html.js .fade-up:not(.in) { opacity: 1; transform: none; } }

/* HTML hidden attribute must always win over display rules
   (flex/grid/inline-flex classes were overriding it). */
[hidden] { display: none !important; }