/* Shared by every page: reset, language switching, focus and motion. Page looks live in their own files (home.css, menu.css). */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
}

a {
  color: inherit;
}

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

/* Both languages are in the HTML; show only the active one */
html[lang="ar"] .en,
html[lang="en"] .ar {
  display: none !important;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Page width with safe-area padding for notched phones */
.w {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Numbers stay left-to-right inside Arabic text */
.num {
  font-variant-numeric: lining-nums tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* "Free preview by Wajha" strip. Removed when the client pays. */
.ribbon {
  background: var(--ribbon-bg);
  color: var(--ribbon-text);
  font-size: 0.82rem;
  text-align: center;
  padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
}

.ribbon a {
  font-weight: 700;
}