/**
 * public/assets/css/app.css
 * Package: 04 - UI/UX
 *
 * Base resets + layout primitives. Mobile-first: every rule below targets
 * the `base` breakpoint (0px) with @media (min-width: ...) only adding or
 * overriding upward, never a max-width query that strips down for mobile
 * (SCREENS_AND_STATES.md §1, Constitution §3).
 *
 * RTL is handled structurally via CSS logical properties throughout this
 * whole stylesheet family (margin-inline-*, padding-inline-*,
 * inset-inline-*, text-align: start/end) — never physical left/right and
 * never a parallel .rtl.css override file (RTL_AND_ACCESSIBILITY.md §1/§5).
 */

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-latin);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--font-arabic);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  line-height: var(--leading-heading);
  font-weight: 600;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }

a { color: var(--color-primary); }

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

/* Numerals always LTR even inside Arabic text, per standard Arabic
   typography convention (RTL_AND_ACCESSIBILITY.md §1). */
.numeral { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* Mixed-language spans (e.g. an English brand name inside Arabic copy)
   bidi-isolate so punctuation doesn't reorder incorrectly. */
.bdi { unicode-bidi: isolate; }

/* Visible focus ring on every interactive element — never outline:none
   without a replacement (RTL_AND_ACCESSIBILITY.md §3 Accessibility). */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion platform-wide (SCREENS_AND_STATES.md §4). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Layout primitives */
.container {
  width: 100%;
  max-width: 1536px; /* 2xl content cap, SCREENS_AND_STATES.md §1 */
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.stack > * + * { margin-block-start: var(--space-4); }
.stack-sm > * + * { margin-block-start: var(--space-2); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr); /* product grid: 2 columns mobile */
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); } /* 3-4 desktop, SCREENS_AND_STATES.md §3.2 */
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

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

/* Breakpoint reference (SCREENS_AND_STATES.md §1), used by every module's
   own CSS going forward — do not invent new breakpoint values per module.
   base: 0   sm: 480   md: 768   lg: 1024   xl: 1280   2xl: 1536
*/