/* =========================================================================
   kobysheftel.soulwaves.org — warm-personal editorial
   Hebrew/RTL, accessibility-first, no framework
   ========================================================================= */

:root {
  --cream:        #f7f2ea;   /* page background */
  --cream-deep:   #efe6d6;   /* card / portrait surround */
  --ink:          #2b2723;   /* primary text (contrast ≥ 12:1 on cream) */
  --ink-soft:     #5a544c;   /* secondary text (contrast ≥ 5:1 on cream) */
  --rule:         #d8cdba;   /* hairlines */
  --accent:       #7a4a2b;   /* warm sienna — single accent */
  --accent-deep:  #5a341c;   /* hover / focus */
  --accent-faint: #efe2d4;
  --focus:        #1f6feb;   /* visible focus ring color */
  --max-w:        72rem;     /* page max width */
  --gap:          1.25rem;
}

/* ============================================================
   Accessibility modes (toggled by widget, persist in localStorage)
   ============================================================ */

/* High-contrast: black text on white, yellow highlights */
body.a11y-contrast {
  --cream:        #ffffff;
  --cream-deep:   #ffffff;
  --ink:          #000000;
  --ink-soft:     #000000;
  --rule:         #000000;
  --accent:       #000000;
  --accent-deep:  #000000;
  --accent-faint: #ffff00;
}

/* Negative (inverted) contrast */
body.a11y-negative {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
body.a11y-negative img,
body.a11y-negative video,
body.a11y-negative svg,
body.a11y-negative iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* Grayscale */
body.a11y-grayscale {
  filter: grayscale(100%);
}
body.a11y-grayscale.a11y-negative {
  filter: invert(1) hue-rotate(180deg) grayscale(100%);
}

/* Light background mode */
body.a11y-light {
  --cream:        #ffffff;
  --cream-deep:   #f5f5f5;
  --ink:          #111111;
  --ink-soft:     #333333;
  --rule:         #cccccc;
  --accent:       #003366;
  --accent-deep:  #001a33;
  --accent-faint: #e6f0ff;
}

/* Readable font — force a single, simple sans-serif on all text */
body.a11y-readable,
body.a11y-readable * {
  font-family: "Arial", "Heebo", sans-serif !important;
  letter-spacing: 0.02em !important;
}
body.a11y-readable h1,
body.a11y-readable h2,
body.a11y-readable h3,
body.a11y-readable .hero-title,
body.a11y-readable .site-mark {
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Big cursor (SVG data URL, fallback to system) */
body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M4 2 L4 30 L11 23 L15 36 L20 34 L16 21 L26 21 Z' fill='%23000' stroke='%23fff' stroke-width='2'/></svg>") 0 0, auto !important;
}
body.a11y-big-cursor a,
body.a11y-big-cursor button,
body.a11y-big-cursor [role="button"],
body.a11y-big-cursor input[type="button"],
body.a11y-big-cursor input[type="submit"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M12 4 L12 18 L9 16 L9 22 L12 22 L12 36 L17 36 L17 22 L23 22 L23 36 L28 36 L28 22 L31 22 L31 16 L28 18 L28 10 L25 7 L22 10 L22 13 L19 13 L19 4 Z' fill='%23000' stroke='%23fff' stroke-width='1.5'/></svg>") 6 2, pointer !important;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Heebo", "Assistant", "Rubik", "Arial", sans-serif;
  font-size: 1.0625rem;            /* ~17px — generous, AA-friendly */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.a11y-stop-anim *,
body.a11y-stop-anim *::before,
body.a11y-stop-anim *::after {
  animation: none !important;
  transition: none !important;
}

body.a11y-highlight-links a {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  background: var(--accent-faint);
}

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

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- focus ring (NEVER outline:none) ---------- */

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- skip link (a11y) ---------- */

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -3rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.625rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- header ---------- */

.site-header {
  padding-block: 1.5rem;
  border-block-end: 1px solid var(--rule);
  background: var(--cream);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-mark {
  font-family: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: 0.01em;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-block: 0.25rem;
  border-block-end: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent-deep);
  border-block-end-color: var(--accent-deep);
}

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 6vw, 4rem);
  max-width: 52rem;
}
.eyebrow {
  font-family: "Frank Ruhl Libre", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent-deep);
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}
.hero-title {
  font-family: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  line-height: 1.25;
  margin: 0 0 1.5rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hero-lede {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 0 0 2rem;
}
.hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-primary {
  background: var(--accent);
  color: #fffaf2;
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}

/* ---------- rule ---------- */

.rule {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

/* ---------- about + portrait ---------- */

.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: 1rem;
}
.about-text h2 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin: 0 0 1rem;
}
.about-text p {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1.0625rem;
}
.about-text p:last-child { margin-bottom: 0; }

.portrait {
  margin: 0;
  background: var(--cream-deep);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
  box-shadow: 0 4px 24px rgba(43, 39, 35, 0.06);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait-cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(43, 39, 35, 0.7), transparent);
  color: #fffaf2;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 0.9375rem;
  margin: 0;
}
.portrait--missing {
  display: grid;
  place-items: center;
}
.portrait--missing::before {
  content: "תמונת קובי תיווסף כאן";
  color: var(--ink-soft);
  font-family: "Frank Ruhl Libre", serif;
  font-style: italic;
  font-size: 1rem;
  padding: 2rem;
  text-align: center;
}
.portrait--missing .portrait-cap { display: none; }

@media (max-width: 720px) {
  .about { grid-template-columns: 1fr; }
  .portrait { max-width: 22rem; margin-inline: auto; }
}

/* ---------- offer ---------- */

.offer h2,
.contributions h2,
.contact h2 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin: 0 0 1.5rem;
}
.section-lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin: 0 0 2rem;
  max-width: 36rem;
}

.offer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2rem;
}
.offer-list li {
  padding: 0;
  border-inline-start: 2px solid var(--rule);
  padding-inline-start: 1.25rem;
  transition: border-color 0.25s;
}
.offer-list li:hover { border-inline-start-color: var(--accent); }
.offer-list h3 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  font-size: 1.1875rem;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.offer-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9875rem;
  line-height: 1.65;
}

/* ---------- contributions ---------- */

.contrib-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: contrib;
  display: grid;
  gap: 1.5rem;
}
.contrib-list li {
  counter-increment: contrib;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  background: var(--cream-deep);
  border-radius: 10px;
  position: relative;
}
/* RTL: counter sits on the right (inline-start) */
.contrib-list li::before {
  content: counter(contrib, decimal);
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 1.25rem;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.contrib-list h3 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  font-size: 1.1875rem;
  margin: 0 0 0.4rem;
}
.contrib-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9875rem;
  line-height: 1.7;
}

/* in RTL, "right padding" for the number = inline-start padding */
.contrib-list li { padding-inline-start: 4rem; padding-inline-end: 1.5rem; }

/* ---------- contact ---------- */

.contact { padding-block-end: 1rem; }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-block: 1.5rem 1.5rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--cream-deep);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  border: 1.5px solid transparent;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.contact-card:hover,
.contact-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.contact-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--accent);
  margin-block-end: 0.5rem;
}
.contact-card-label {
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.contact-card-value {
  font-family: "Frank Ruhl Libre", serif;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  unicode-bidi: plaintext; /* keeps "052-3281250" readable in RTL */
}
.contact-note {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

/* ---------- footer ---------- */

.site-footer {
  margin-block-start: clamp(3rem, 7vw, 5rem);
  padding-block: 2rem;
  border-block-start: 1px solid var(--rule);
  background: var(--cream);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.footer-inner p { margin: 0; }
.footer-inner a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.footer-inner a:hover,
.footer-inner a:focus-visible { color: var(--accent-deep); }

/* ---------- accessibility widget ---------- */

.a11y-toggle {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #fffaf2;
  font-size: 1.625rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(43, 39, 35, 0.25);
  z-index: 900;
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.2s;
}
.a11y-toggle:hover,
.a11y-toggle:focus-visible { background: var(--accent-deep); transform: scale(1.05); }

.a11y-panel {
  position: fixed;
  inset-block-end: 5rem;
  inset-inline-start: 1.25rem;
  width: 20rem;
  max-width: calc(100vw - 2.5rem);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 8px 30px rgba(43, 39, 35, 0.18);
  z-index: 901;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 {
  margin: 0 0 0.75rem;
  font-family: "Frank Ruhl Libre", serif;
  font-size: 1.125rem;
  font-weight: 500;
}
.a11y-options {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.a11y-options li.full { grid-column: 1 / -1; }
.a11y-options button {
  width: 100%;
  text-align: start;
  padding: 0.55rem 0.65rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.a11y-options button:hover,
.a11y-options button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-faint);
}
.a11y-options button.is-active,
.a11y-options button[aria-pressed="true"] {
  background: var(--accent);
  color: #fffaf2;
  border-color: var(--accent);
}
.a11y-statement-link {
  margin: 0;
  font-size: 0.875rem;
}
.a11y-statement-link a { color: var(--accent-deep); }

/* ---------- accessibility statement page ---------- */

.statement {
  padding-block: clamp(2rem, 6vw, 4rem);
  max-width: 44rem;
}
.statement h1 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 1rem;
}
.statement h2 {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 1.75rem 0 0.5rem;
}
.statement p, .statement li { font-size: 1.0625rem; color: var(--ink); }
.statement ul { padding-inline-start: 1.25rem; }
.statement .meta {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-block-end: 1.5rem;
}