/* Arabic type — self-hosted "NotoNaskhArabic" (no CDN), matching the Booktime
   design system's exact family name AND its coverage. Booktime declares the same
   face with no unicode-range, so every character the font ships — Arabic letters,
   space, Western digits, comma/period/colon, «» — renders in Naskh there.

   We deliberately do NOT restrict this face with a unicode-range. An earlier
   version did, limiting it to Arabic letters only; that pushed spaces, digits and
   punctuation out to the OS font (Segoe UI on Windows, Helvetica on macOS), which
   is what made Arabic pages look different from Booktime and different per browser.

   Noto Naskh Arabic 2.001 ships no Latin letters at all (neither does Booktime's
   1.06), so Latin words on an Arabic page fall through to the next family
   regardless. --font-arabic ends at `sans-serif` — Booktime's exact stack
   (`NotoNaskhArabic, sans-serif`), so those few Latin words resolve to the
   platform sans the same way they do on the sister site. */
@font-face {
  font-family: "NotoNaskhArabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NotoNaskhArabic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "NotoNaskhArabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NotoNaskhArabic-Bold.woff2") format("woff2");
}

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

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-width: thin;
}

::selection { background: var(--color-pink-soft); }
::-moz-selection { background: var(--color-pink-soft); }

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-md);
  color: var(--color-body);
  background: var(--color-bg);
  line-height: var(--line-height-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  /* Site-wide rule: a hyperlink never splits across two lines. It wraps as a
     single unit (moves to the next line whole) instead of breaking mid-link. */
  white-space: nowrap;
}

/* Links underline on hover but KEEP their own colour (no colour change). */
a:hover { text-decoration: underline; }

/* Telephone numbers must read left-to-right even inside RTL (Arabic) text. A phone
   like "+44 (0) 7778002355" has no strong-LTR letters — only +, digits, spaces and
   parens — so the bidi algorithm would otherwise reorder it to "7778002355 (0) 44+".
   An LTR isolate pins the visual order regardless of page direction. */
a[href^="tel:"] { unicode-bidi: isolate; direction: ltr; }

/* No hover underline on buttons/brand or the navigation menus. Menus (header nav,
   utilities, language dropdown) use a colour change as their hover affordance
   instead; .book-detail__download is the button-styled download pill. */
.btn:hover,
.site-logo:hover,
.site-nav__donate:hover,
.account-btn:hover,
.book-detail__download:hover,
.site-nav__menu a:hover,
.footer-social__item:hover,
.utility-link:hover,
.utility-btn:hover,
.language-menu a:hover { text-decoration: none; }

ul,
ol { list-style: none; }

button,
input,
select,
textarea { font: inherit; }

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

h1, h2, h3, h4 {
  color: var(--color-heading);
  /* Inherit the locale font (body): Noto Sans on LTR, Noto Naskh Arabic on RTL. */
  font-family: inherit;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

p { line-height: var(--line-height-normal); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-orange), white 15%);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}