/* Manhali Modern: fonts, reset, typography, bidi helpers. */

@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Bold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("../fonts/thmanyahserifdisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Thmanyah Serif Display"; src: url("../fonts/thmanyahserifdisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[lang="en"] { --font-sans: var(--font-latin), var(--font-ar), system-ui, sans-serif; --font-display: var(--font-latin), var(--font-sans); }

body {
  min-block-size: 100dvh;
  background: var(--canvas);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[lang="en"] body { line-height: 1.5; }

img, svg, video { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3, h4) { font-weight: var(--weight-bold); line-height: 1.3; text-wrap: balance; }
html[lang="en"] :where(h1, h2, h3) { letter-spacing: -0.015em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: separate; border-spacing: 0; }
::selection { background: var(--primary-soft-hover); color: var(--foreground); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Typography roles */
.display { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.25; }
.page-title { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.3; }
.section-title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.card-title { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.4; }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.muted { color: var(--muted-foreground); }
.strong { font-weight: var(--weight-medium); }
.bold { font-weight: var(--weight-bold); }
.num, .tabular { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Currency: Thmanyah draws "ر.س" as the official Saudi riyal sign (U+20C1 shape).
   Keep the label in the Arabic face even inside .num so every weight shows the sign. */
.cur, [data-en="SAR"] { font-family: var(--font-sans); font-variant-numeric: normal; }

/* Bidi helpers */
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* Layout utilities (small, intentional set) */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 4px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-inline-size: 0; }
.stack { display: flex; flex-direction: column; gap: var(--section-gap); }
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.table-wrap, td, th { position: relative; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

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