/* base.css
   Loaded on EVERY page: font, tokens, reset, layout helpers and utilities.
   Keep this file free of page-specific or component-specific rules. */

@font-face {
  font-family: Sahel;
  src: url('/public/fonts/Sahel-VF.woff2') format('woff2'), url('/public/fonts/Sahel-VF.ttf') format('truetype');
  /* ⚠️ IMPORTANT: do NOT remove this line. ⚠️
     Remove it and all text on the site goes invisible for up to ~3 seconds
     on every page load, until this font file finishes downloading. (Try it:
     delete the line, throttle your network tab, reload /book — the page
     looks broken, text just doesn't show up.) swap shows text immediately in
     a fallback font instead, then swaps to Sahel once it arrives. */
  font-display: swap;
}

:root {
  --default-space: 0.5rem;
  --body-px: clamp(0.75rem, 4vw, 1.5rem);
}

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

html {
  font-family: Sahel;
}

body {
  margin: 0 auto;
  /* clamp() instead of a fixed 1rem: scales with viewport width rather
     than the user's font-size setting, so a large accessibility font size
     doesn't eat into the usable width on narrow screens. */
  padding: 0 var(--body-px);
  /* min-height: calc(100vh - 2rem); */
  /* min-width: 100vw; */
  /* overflow-x: hidden; */
}

button, input, select, optgroup, textarea {
  font-family: inherit;
}

img {
  display: block;
}



h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

.flow-content > * + * {
  margin-top: var(--custom-flow-space, var(--default-space));
}


.container {
  padding: 0 var(--default-space);
  max-width: var(--custom-max-width, 75rem);
  margin: 0 auto;
}

/* ------------------------------------------ */
/* ------------  Specific reset  ------------ */

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
}

main {
  direction: rtl;
}

/* -------------------------------------------------------- */
/* ----------  General styling & Utility classes ---------- */
.u-hide-visually {
  display: none;
}


.btn {
  display: inline-block;
}