/* =========================================================
   המרכז לשירותים חברתיים אילת — Stylesheet
   Design tokens
   ========================================================= */
:root {
  /* Color */
  --color-bg: #FAF6EF;           /* warm sand */
  --color-bg-alt: #F1EADB;       /* deeper sand, section alternation */
  --color-ink: #22303A;          /* charcoal text */
  --color-ink-soft: #4B5A63;     /* secondary text */
  --color-primary: #1B4B5A;      /* deep teal-blue */
  --color-primary-dark: #10333E;
  --color-accent: #D98E2B;       /* desert-sun gold */
  --color-accent-soft: #E8A94C;
  --color-purple: #6B5B95;       /* logo purple, used sparingly */
  --color-line: #D9CFBB;         /* hairline / horizon rule */
  --color-white: #FFFFFF;

  /* Type */
  --font-display: "Frank Ruhl Libre", "Times New Roman", serif;
  --font-body: "Heebo", "Segoe UI", sans-serif;

  /* Layout */
  --max-width: 1120px;
  --radius: 4px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  color: var(--color-primary-dark);
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-2); max-width: 62ch; }
p.wide { max-width: none; }

a { color: var(--color-primary); }
a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul { padding-inline-start: 1.1em; }

/* Focus visibility — never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: auto;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 0.9em 1.4em;
  z-index: 1000;
  border-radius: var(--radius);
}
.skip-link:focus {
  inset-inline-start: var(--space-2);
  top: var(--space-2);
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

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

/* =========================================================
   Horizon rule — recurring section-transition motif
   ========================================================= */
.horizon {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 239, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.6em;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
  text-decoration: none;
  color: var(--color-primary-dark);
}
.brand img { width: 52px; height: 52px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.brand-tagline { font-size: 0.8rem; color: var(--color-ink-soft); }

.main-nav { display: flex; align-items: center; gap: var(--space-3); }
.main-nav ul {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  padding: 0; margin: 0;
}
.main-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.98rem;
  padding: 0.3em 0.1em;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a:focus-visible { border-bottom-color: var(--color-accent); }

.lang-switch {
  font-size: 0.88rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.35em 0.8em;
  text-decoration: none;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.lang-switch:hover { background: var(--color-white); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-primary-dark);
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) var(--space-3) var(--space-3);
    gap: var(--space-2);
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; gap: var(--space-2); }
  .lang-switch { align-self: flex-start; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding-block: var(--space-6) var(--space-5);
  position: relative;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-5);
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  font-size: 1rem;
  margin-bottom: var(--space-1);
}
.hero h1 { margin-bottom: var(--space-2); }
.hero p.lede {
  font-size: 1.18rem;
  color: var(--color-ink-soft);
  max-width: 46ch;
}
.hero-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

.hero-figure {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3) var(--space-3);
}
.hero-figure img {
  width: 100%;
  max-width: 300px;
  height: auto;
}
.hero-figure figcaption {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  width: 100%;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-figure { max-width: 320px; margin-inline: auto; order: -1; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.6em;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-dark); }
.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.btn-outline:hover, .btn-outline:focus-visible { background: rgba(27,75,90,0.08); }

/* =========================================================
   Generic section
   ========================================================= */
.section { padding-block: var(--space-6); }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 60ch; margin-bottom: var(--space-4); }
.section-head p { color: var(--color-ink-soft); }

/* =========================================================
   About
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-5);
  align-items: start;
}
.about-photo img {
  border-radius: var(--radius);
  width: 100%;
}
.about-photo { position: sticky; top: 6.5rem; }

.credentials {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  list-style: none;
  padding-inline-start: 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.credentials li { margin-bottom: 0.4em; padding-inline-start: 1.1em; position: relative; }
.credentials li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent);
}

.about-body h3 {
  margin-top: var(--space-4);
  color: var(--color-primary);
}
.about-body h3:first-child { margin-top: 0; }

.certificates-figure {
  margin-top: var(--space-4);
  border: 1px solid var(--color-line);
  background: var(--color-white);
  padding: var(--space-1);
  border-radius: var(--radius);
}
.certificates-figure figcaption {
  padding: var(--space-2) var(--space-1) var(--space-1);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 280px; margin-inline: auto; }
}

/* =========================================================
   Services
   ========================================================= */
.services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.service-item {
  border-bottom: 1px solid var(--color-line);
}
.service-item:nth-child(odd) { padding-inline-end: var(--space-4); }
.service-item:nth-child(even) { padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--color-line); }
.service-item h3 { margin: 0; font-size: 1.1rem; }

.service-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  cursor: pointer;
  text-align: start;
}
.service-toggle:hover,
.service-toggle:focus-visible { color: var(--color-primary); }

.service-toggle-icon {
  position: relative;
  width: 1em;
  height: 1em;
  flex: none;
}
.service-toggle-icon::before,
.service-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-accent);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.service-toggle-icon::before { width: 0.85em; height: 2px; }
.service-toggle-icon::after {
  width: 2px;
  height: 0.85em;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.service-toggle[aria-expanded="true"] .service-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.service-panel-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.service-item.is-open .service-panel-wrapper {
  grid-template-rows: 1fr;
}
.service-panel-inner { overflow: hidden; }
.service-panel { padding-bottom: var(--space-3); }
.service-panel p {
  color: var(--color-ink-soft);
  font-size: 0.97rem;
  margin: 0;
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  .service-panel-wrapper { transition: none; }
}
html[data-a11y-motion="reduce"] .service-panel-wrapper {
  transition: none;
}

@media (max-width: 760px) {
  .services-list { grid-template-columns: 1fr; }
  .service-item:nth-child(odd),
  .service-item:nth-child(even) {
    padding-inline: 0;
    border-inline-start: none;
  }
}

.online-note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-white);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.online-note h3 { margin-bottom: 0.3em; }

/* =========================================================
   Emergency stay — quieter callout
   ========================================================= */
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-white);
}
.callout-icon {
  width: 2.6rem; height: 2.6rem;
  flex: none;
  color: var(--color-primary);
}
.callout h3 { margin-bottom: 0.3em; }
.callout p { color: var(--color-ink-soft); margin-bottom: 0; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.contact-info dl {
  margin: var(--space-3) 0 0;
  display: grid;
  gap: var(--space-2);
}
.contact-info dt {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.15em;
}
.contact-info dd {
  margin: 0;
  font-size: 1.15rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary-dark);
}
.contact-info a { text-decoration: none; }
.contact-info a:hover, .contact-info a:focus-visible { text-decoration: underline; }

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.field { margin-bottom: var(--space-2); }
.field label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.35em;
  color: var(--color-ink-soft);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.7em 0.8em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}
.field-note { font-size: 0.85rem; color: var(--color-ink-soft); margin-top: var(--space-2); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer a { color: var(--color-ink-soft); }

/* =========================================================
   Services ticker — moving strip of headline services
   ========================================================= */
.services-ticker {
  background: var(--color-primary-dark);
  overflow: hidden;
  padding-block: 0.85em;
}
/* The track holds the item list repeated many times over (in the HTML,
   not via JS) split into two back-to-back, byte-for-byte identical
   halves. Animating between translateX(0) and translateX(50%) then
   always loops perfectly, because shifting by exactly half of an A+A
   track is visually indistinguishable from the start — true at any
   pixel width, so there is nothing to measure and nothing that can
   race against a font swap or a text-size change.
   The shift is POSITIVE (rightward), not negative, because in this
   RTL page the track's own box anchors flush against the right edge
   and its overflow content extends to the left — so the spare content
   that needs to scroll into view lives on the left, and only a
   rightward shift sweeps through it. A negative (leftward) shift here
   would immediately run past the right edge into empty space, since
   there is no overflow content sitting to the right to begin with.
   Each half is built long enough (6 repeats of the 3-service list) to
   stay wider than any realistic screen even at the largest
   accessibility text size, so the strip is never left showing empty
   background either. */
/* The shift is POSITIVE (rightward) for RTL and NEGATIVE (leftward)
   for LTR — driven by --ticker-shift, set per direction below — because
   each writing direction anchors the track's overflow on the opposite
   physical side (RTL keeps its spare content to the left; LTR keeps it
   to the right), and only sweeping toward that side keeps the strip
   full throughout the animation. */
:root { --ticker-shift: -50%; }
html[dir="rtl"] { --ticker-shift: 50%; }
.services-ticker-track {
  display: flex;
  width: max-content;
  animation: services-ticker-scroll 130s linear infinite;
}
.services-ticker:hover .services-ticker-track,
.services-ticker:focus-within .services-ticker-track {
  animation-play-state: paused;
}
.services-ticker-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
  padding-inline-end: 2.4em;
}
.services-ticker-item::before {
  content: "◆";
  color: var(--color-accent);
  font-size: 0.55em;
  margin-inline-end: 1em;
}
@keyframes services-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--ticker-shift)); }
}
html[data-a11y-motion="reduce"] .services-ticker-track {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .services-ticker-track { animation: none; }
}

/* =========================================================
   Language-direction niceties
   ========================================================= */
[dir="rtl"] em { font-style: normal; }
[dir="rtl"] .callout-icon { transform: scaleX(-1); }

/* =========================================================
   Accessibility widget
   ========================================================= */
.a11y-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(16, 51, 62, 0.35);
}
.a11y-toggle:hover,
.a11y-toggle:focus-visible { background: var(--color-primary-dark); }
.a11y-toggle svg { width: 28px; height: 28px; }

.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  z-index: 200;
  width: 280px;
  max-width: calc(100vw - 40px);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(16, 51, 62, 0.22);
  padding: var(--space-2) var(--space-2) var(--space-3);
  display: none;
}
.a11y-panel.is-open { display: block; }
.a11y-panel h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: var(--space-2);
  color: var(--color-primary-dark);
}
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.55em 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.92rem;
}
.a11y-row:last-of-type { border-bottom: none; }
.a11y-btns { display: flex; gap: 0.4em; }
.a11y-btns button,
.a11y-toggle-switch {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 0.3em 0.75em;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--color-ink);
  font-family: var(--font-body);
}
.a11y-btns button:hover,
.a11y-toggle-switch:hover { background: var(--color-bg-alt); }
.a11y-toggle-switch[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.a11y-reset {
  margin-top: var(--space-2);
  width: 100%;
  text-align: center;
  justify-content: center;
}
.a11y-statement-link {
  display: block;
  text-align: center;
  margin-top: var(--space-2);
  font-size: 0.85rem;
}

/* Font-size scaling (applied to <html>, chosen in the widget) */
html[data-a11y-fontsize="1"] { font-size: 112.5%; }
html[data-a11y-fontsize="2"] { font-size: 125%; }
html[data-a11y-fontsize="3"] { font-size: 137.5%; }

/* Highlight links */
html[data-a11y-underline="on"] a:not(.btn):not(.a11y-toggle-switch) {
  background: #FFF1BE;
  text-decoration-thickness: 2px;
  border-radius: 2px;
}

/* Reduced motion (manual override, in addition to the OS-level media query) */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* High-contrast theme */
html[data-a11y-contrast="high"] body { background: #000; color: #fff; }
html[data-a11y-contrast="high"] .site-header,
html[data-a11y-contrast="high"] .section-alt,
html[data-a11y-contrast="high"] .contact-form,
html[data-a11y-contrast="high"] .callout,
html[data-a11y-contrast="high"] .certificates-figure,
html[data-a11y-contrast="high"] .online-note,
html[data-a11y-contrast="high"] .a11y-panel {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
html[data-a11y-contrast="high"] h1,
html[data-a11y-contrast="high"] h2,
html[data-a11y-contrast="high"] h3,
html[data-a11y-contrast="high"] .brand-name,
html[data-a11y-contrast="high"] .contact-info dd,
html[data-a11y-contrast="high"] .service-toggle,
html[data-a11y-contrast="high"] .hero-eyebrow { color: #FFD866 !important; }
html[data-a11y-contrast="high"] a { color: #7FD1FF !important; }
html[data-a11y-contrast="high"] p,
html[data-a11y-contrast="high"] li,
html[data-a11y-contrast="high"] .credentials,
html[data-a11y-contrast="high"] .brand-tagline,
html[data-a11y-contrast="high"] .contact-info dt,
html[data-a11y-contrast="high"] .field label,
html[data-a11y-contrast="high"] .field-note,
html[data-a11y-contrast="high"] .site-footer { color: #fff !important; }
html[data-a11y-contrast="high"] .btn-primary { background: #FFD866 !important; color: #000 !important; }
html[data-a11y-contrast="high"] .btn-outline,
html[data-a11y-contrast="high"] .a11y-btns button,
html[data-a11y-contrast="high"] .a11y-toggle-switch { border-color: #fff !important; color: #fff !important; background: #000 !important; }
html[data-a11y-contrast="high"] .horizon,
html[data-a11y-contrast="high"] .service-item,
html[data-a11y-contrast="high"] .credentials,
html[data-a11y-contrast="high"] .field input,
html[data-a11y-contrast="high"] .field textarea { border-color: #fff !important; background: #000 !important; color: #fff !important; }