/* Rashid Alnaqbi General Trading - the company site.
   Quiet and editorial: an achromatic page, one typeface at one weight, and
   hierarchy carried by size and whitespace alone. The only colour is the cream
   strip at the top that points to the product. Sections are ruled rows, their
   label in a narrow start column, like the fields of a trade licence.
   IBM Plex Sans Arabic carries both scripts. */

@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --ground: #ffffff;
  --surface: #ffffff;
  --vellum: #f3f3f3;
  --line: #e5e7eb;
  --line-strong: #dbdbdb;
  --ink: #171717;
  --ink-2: #5e5e5e;
  --ink-3: #6f6f6f;
  --accent: #171717;
  --accent-hover: #000000;
  --on-accent: #ffffff;
  --notice: #ffe9bf;
  --on-notice: #171717;
  --stage: #0e130f;
  --elevate: rgb(207 207 207 / .01) 0 132px 53px 0, rgb(207 207 207 / .05) 0 74px 44px 0, rgb(207 207 207 / .09) 0 33px 33px 0, rgb(207 207 207 / .1) 0 8px 18px 0;

  --sans: "Plex", "Segoe UI", system-ui, Tahoma, sans-serif;

  --fs-caption: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-sub: 1.125rem;
  --fs-h3: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h1-page: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  --fs-display: clamp(2.6rem, 1.2rem + 5vw, 4.5rem);

  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 5rem;
  --s6: clamp(4.5rem, 3rem + 6vw, 8rem);

  --r-sm: 8px;
  --r: 20px;
  --r-lg: 24px;
  --pill: 9999px;
  --wrap: 1200px;
  /* A light page on every device, even one set to dark mode, and "only" asks
     browsers with a forced dark mode to leave it alone. */
  color-scheme: only light;
}
/* Dark, only when the visitor picks it with the header switch (theme.js). */
:root[data-theme="dark"] {
  --ground: #0f0f10; --surface: #161617; --vellum: #1d1d1f; --line: #2a2a2d; --line-strong: #3a3a3e;
  --ink: #f2f2f2; --ink-2: #b4b4b4; --ink-3: #9a9a9a;
  --accent: #f2f2f2; --accent-hover: #ffffff; --on-accent: #111111;
  --elevate: 0 1px 0 rgb(255 255 255 / .04), 0 24px 60px -30px rgb(0 0 0 / .8);
  color-scheme: dark only;
}
[hidden] { display: none !important; }

/* The light/dark switch: a moon in light mode, a sun in dark mode. */
.theme-toggle {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--pill); background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .15s ease;
}
.theme-toggle:hover { background: var(--vellum); }
.theme-toggle:active { background: var(--line); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  background: var(--ground); color: var(--ink);
  font: 400 var(--fs-md)/1.5 var(--sans);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body, body:lang(ar) { line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 400; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.skip { position: absolute; inset-inline-start: var(--s2); top: -4rem; background: var(--surface); color: var(--ink); padding: var(--s1) var(--s2); border-radius: var(--r-sm); z-index: 10; }
.skip:focus { top: var(--s2); }

/* ------------------------------------------------------------ cream strip */
.notice { background: var(--notice); color: var(--on-notice); font-size: var(--fs-sm); }
.notice-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s1) var(--s2); padding-block: .45rem; }
.notice .btn { background: #171717; color: #ffffff; padding: .3rem .85rem; font-size: var(--fs-caption); }
.notice .btn:hover { background: #000000; color: #ffffff; }

/* ------------------------------------------------------------------ header */
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding-block: 1.1rem; }
.wordmark { color: var(--ink); text-decoration: none; font-size: var(--fs-sub); }
.wordmark:hover { color: var(--ink); }
.wordmark-kind { color: var(--ink-3); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--s1) 1.25rem; list-style: none; padding: 0; }
.nav a { color: var(--ink); text-decoration: none; font-size: var(--fs-sm); padding-block: .25rem; }
.nav ul a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.nav .lang { border: 1px solid var(--line-strong); border-radius: var(--pill); padding: .3rem .9rem; }
.nav .lang:hover { background: var(--vellum); text-decoration: none; }
.nav .lang:active { background: var(--line); }

/* -------------------------------------------------------------------- hero */
.hero { padding-block: var(--s6) var(--s5); text-align: center; }
.hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.02em; max-width: 14ch; margin-inline: auto; }
:lang(ar) .hero h1, .hero h1:lang(ar) { letter-spacing: 0; line-height: 1.3; }
.hero-alt { color: var(--ink-3); font-size: var(--fs-sub); margin-block-start: var(--s2); }
.claim { font-size: var(--fs-sub); margin-block-start: var(--s4); }
.lede { color: var(--ink-3); margin: var(--s1) auto 0; max-width: 52ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s3); margin-block-start: var(--s4); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: var(--on-accent); text-decoration: none; font-size: var(--fs-sm);
  padding: .6rem 1.15rem; border-radius: var(--pill); border: 0;
  transition: background-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.text-link { font-size: var(--fs-sm); }

/* ------------------------------------------------------------ ruled rows */
.row { border-block-start: 1px solid var(--line); padding-block: var(--s5); scroll-margin-top: var(--s2); }
.row-grid { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--s3) var(--s4); }
.row h2 { font-size: var(--fs-sm); color: var(--ink-3); padding-block-start: .2rem; }
.row h3 { font-size: var(--fs-h3); margin-block: var(--s4) var(--s2); }
.row-body > h3:first-child { margin-block-start: 0; }
.prose { display: grid; gap: var(--s2); max-width: 60ch; font-size: var(--fs-sub); line-height: 1.55; }
.prose p { color: var(--ink-3); }
.prose p:first-child { color: var(--ink); }
.after { margin-block-start: var(--s3); color: var(--ink-3); }

/* ---------------------------------------------------------------- products */
/* The product card is the one object on the page with visible elevation. */
.product-list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.product {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s4); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: var(--elevate);
}
.product-kind { color: var(--ink-3); font-size: var(--fs-sm); }
.product h3 { display: flex; align-items: center; gap: .75rem; margin-block: var(--s1) var(--s2); }
.product h3 img { border-radius: 10px; }
.product-body > p:not(.product-kind) { color: var(--ink-2); margin-block-end: var(--s3); }
.product-shot { background: var(--stage); border-radius: 14px; padding: 6px; }
.product-shot img { border-radius: 9px; }

/* ------------------------------------------------------------------ record */
.record { border-block-start: 1px solid var(--line); max-width: 46rem; }
.record > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s1) var(--s3); padding-block: 1rem; border-block-end: 1px solid var(--line); }
.record dt { font-size: var(--fs-sm); color: var(--ink-3); padding-block-start: .1em; }
.record dd { overflow-wrap: anywhere; font-size: var(--fs-sub); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- legal page */
.page-head { padding-block: var(--s6) var(--s5); }
.page-head h1 { font-size: var(--fs-h1-page); letter-spacing: -.02em; }
:lang(ar) .page-head h1 { letter-spacing: 0; line-height: 1.3; }
.page-head .lede { margin: var(--s2) 0 0; font-size: var(--fs-sub); }
.updated { color: var(--ink-3); font-size: var(--fs-sm); margin-block-start: var(--s2); }

/* ------------------------------------------------------------------ footer */
.foot { border-block-start: 1px solid var(--line); padding-block: var(--s4); color: var(--ink-3); font-size: var(--fs-sm); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); }
.foot ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; padding: 0; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }

/* --------------------------------------------------------------------- 404 */
.missing { display: grid; gap: var(--s5); padding-block: var(--s6); }
.missing h1 { font-size: var(--fs-h3); }
.missing p { color: var(--ink-3); margin-block: var(--s1) var(--s3); }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 860px) {
  .row-grid { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; padding: var(--s3); gap: var(--s3); }
}
@media (max-width: 560px) {
  .record > div { grid-template-columns: 1fr; gap: .15rem; }
  .top-row { padding-block: var(--s2) var(--s1); }
}