/* ==========================================================================
   base.css: reset, typography, brand name, utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;          /* no layout jump when a sheet locks scroll */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-tap-highlight-color: rgba(9, 9, 11, 0.08);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--color-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; color: var(--color-text); }
[hidden] { display: none !important; }

/* Long words and URLs wrap instead of overflowing */
p, li, h1, h2, h3, figcaption, blockquote, a, span { overflow-wrap: break-word; }
/* 16px minimum on fields stops iOS Safari zooming on focus */
input, select, textarea { font-size: max(16px, 1rem); }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 8px; }
@media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } }

/* ---------- Headings: big, tight, confident ---------- */
.hero__title, .section-title, .sheet__title, .impact__title, .social__title, .give__title {
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;          /* large type wants negative tracking */
  text-wrap: balance;
}
.section-title { font-size: var(--text-xl); max-width: 22ch; }
/* Two-tone headlines: the second half in grey (large text only, 3.4:1) */
.accent, .hero__accent { color: var(--color-text-accent); }

/* ---------- The organisation name ----------
   Cinzel Decorative 700, all caps via text-transform (the underlying text stays
   "Kehilat Bethlechem" for screen readers and search engines).
   Used for the name lockup, header fallback, footer and 404 only. In running
   text the name is set in the normal paragraph font. */
.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  overflow-wrap: normal;             /* never break inside a word */
  word-break: keep-all;
  hyphens: none;
}
.brand-name__word { white-space: nowrap; display: inline-block; }
.brand-name--lockup { font-size: var(--text-brand); line-height: 1.15; }
.brand-name--header { font-size: 0.9375rem; line-height: 1.1; }
.brand-name--footer { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.15; color: var(--color-on-inverse); letter-spacing: 0.04em; }
.brand-name--hero { font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem); line-height: 1.08; text-wrap: balance; }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.25em; }
.brand-mark { width: 100%; height: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.section { padding-block: var(--section-y); }
.section--tight { padding-top: 0; }
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: max(var(--space-3), env(safe-area-inset-top));
  left: var(--space-3);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }
main:focus { outline: none; }

/* ---------- Scroll reveal ----------
   Visible by default. Only when JS runs AND motion is allowed (main.js adds
   .js-reveal) do below-the-fold blocks start hidden and rise into place. */
.js-reveal .reveal:not(.is-revealed) { opacity: 0; transform: translateY(24px) scale(0.985); }
.js-reveal .reveal {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal:not(.is-revealed) { transform: none; }
}