/* ════════════════════════════════════════════════════════════
   VARIABLES — reset, custom properties, base typography
   ════════════════════════════════════════════════════════════ */

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

:root {
  --our-darker-green: #2b6548; /* Darker than --our-background */
  --our-background: #166c49;
  /* Palette — warm stone and olive, evoking the Carmel hillside */
  --navy:      #2c4a2e;   /* deep olive green */
  --navy-lt:   #3d6640;   /* lighter olive */
  --red:       #8b4513;   /* terracotta / saddle brown */
  --red-lt:    #a0522d;   /* lighter terracotta */
  --sky:       #f0ede6;   /* warm stone */
  --cream:     #faf8f4;   /* warm cream */
  --white:     #ffffff;
  --text:      #0f1510;
  --text-md:   #1e2820;
  --text-lt:   #3d4f3e;
  --border:    #ddd8cc;
  --border-dk: #c4bdb0;
  --olive:     #6b7c3a;   /* accent olive */
  --header-top: 116px;
  --header-nav: 34px;
  --content-width: 860px;
  --header-width-max: 860px;
  --overall-max-width: 1290px;  /* max width for header, hero, and page body */
  --hamburger-breakpoint: 880px;   /* also update responsive.css @media if changed */
  --header-logo-width: 220px;        /* logo width below 900px */
  --header-logo-width-large: 280px;  /* logo width above 900px */
  --header-gap: 2.5rem;
  --header-search-max: 220px;
  --header-search-transition: 1.0s;
  --pill-font-size-en: 0.80rem;
  --pill-font-size-he: 0.80rem;
  --pill-font-size-large-en: 1.1rem;
  --pill-font-size-large-he: 1.1rem;
  --nav-hover-bg:   var(--our-background);
  --nav-hover-text: white;
  --header-search-bg-closed: var(--search-bg);
  --header-search-bg: var(--search-bg);
  --doc-card-height: 260px;
  --doc-content-padding-x: 2.5rem;              /* horizontal padding inside .document-content */
  --doc-content-bg: var(--white);               /* background color of .document-content */
  --doc-content-border-width: 8px;              /* bevel border width around .page-body-inner */
}

html {
  scroll-behavior: smooth;
}

/* ── Anchor scroll offset ─────────────────────────────────────────────────────
 * The sticky header covers anchor targets when the browser scrolls to #id links.
 * scroll-margin-top compensates by leaving that much space above the target.
 * Desktop: --header-top (116px) + --header-nav (34px) = 150px
 * Mobile:  --header-top (84px, overridden in responsive.css; no nav bar visible)
 * If you change --header-top or --header-nav above, update these values too.
 * ──────────────────────────────────────────────────────────────────────────── */

[id] {
  scroll-margin-top: 150px;
}

@media (max-width: 880px) {
  [id] {
    scroll-margin-top: 84px;
  }
}

/* ─── BILINGUAL FONT SYSTEM ─── */
/* Body font: Montserrat for both languages.
   Display font: Frank Ruhl Libre (Hebrew) or Lora (English) for headings. */

body {
    /* background: var(--cream); */
  background: var(--white);
  color: var(--text);
  font-family: "Noto Sans Hebrew", Arial, sans-serif;  /* Hebrew default */
  font-weight: 400;
  line-height: 1.65;

  &.lang-en {
    direction: ltr;
    font-family: 'Montserrat', sans-serif;
  }
}

/* Default display font — Hebrew */
.member-name, .footer-name,
h1, h2,
.section-title, .issue-title, .news-headline,
.page-title {
  font-family: 'Frank Ruhl Libre', serif;

  body.lang-en & {
    font-family: 'Lora', serif;
  }
}

/* Document highlight colours (used in migrated document HTML) */
.marked {
  padding: 0 2px;
  border-radius: 2px;

  &.marked-yellow  { background: #fff59d; color: #333; }
  &.marked-green   { background: #c8e6c9; color: #1b5e20; }
  &.marked-cyan    { background: #b2ebf2; color: #006064; }
  &.marked-magenta { background: #f8bbd0; color: #880e4f; }
  &.marked-red     { background: #ffcdd2; color: #b71c1c; }
  &.marked-blue    { background: #bbdefb; color: #0d47a1; }
}