/* ═══════════════════════════════════════════════════════
   SHIRA OVITZ ARC DESIGN — SHARED STYLES
   Edit here to change: colors, nav, footer, a11y, WA button
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:         #f0eeea;
  --accent:     #4a3828;
  --text-dark:  #3a2e22;
  --text-mid:   #5a4e40;
  --text-muted: #7a6a55;
  --border:     rgba(74,56,40,0.12);
}

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

body { background:var(--bg); font-family:'Montserrat','Assistant',sans-serif; }

/* ── NAV (light, always-on — all pages except index hero) ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 48px;
  background:rgba(240,238,234,0.92);
  backdrop-filter:blur(8px);
}
nav a {
  text-decoration:none; color:#6b5e4e;
  font-size:10px; letter-spacing:0.20em; text-transform:uppercase;
  opacity:0.7; transition:opacity 0.3s;
}
nav a:hover, nav a.active { opacity:1; }
nav a.active { border-bottom:0.7px solid currentColor; padding-bottom:2px; }
.nav-links { display:flex; gap:36px; }
/* Logo stays left; nav-links + lang button group to the right */
.nav-brand { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500; margin-right:auto; }
#lang-toggle-btn { margin-left:32px; }
.nav-logo {
  width:120px; height:auto; display:block;
  mix-blend-mode:multiply;
}

/* ── HAMBURGER ── */
.nav-toggle {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:4px; z-index:200;
}
.nav-toggle span {
  display:block; width:22px; height:1px;
  background:var(--accent);
  transition:transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(3px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform:translateY(-3px) rotate(-45deg); }

/* ── MOBILE NAV ── */
@media (max-width:767px) {
  nav { padding:20px 24px; backdrop-filter:none !important; }
  .nav-toggle { display:flex; margin-left:18px; }
  #lang-toggle-btn { margin-left:0; }
  .nav-links {
    display:none; position:fixed; inset:0;
    background:var(--bg);
    flex-direction:column; align-items:center; justify-content:center;
    gap:40px; z-index:9000; padding:0;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:18px; letter-spacing:0.20em; color:var(--text-dark); opacity:0.80; }
  .nav-links a.active { opacity:1; }
  /* hamburger stays on top of the overlay */
  .nav-toggle { z-index:9100; }
  #lang-toggle-btn { z-index:9100; position:relative; }
  .nav-logo { width:80px; }
}

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position:fixed; bottom:32px; right:32px; z-index:500;
  width:50px; height:50px; border-radius:50%;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 4px 20px rgba(74,56,40,0.30);
  transition:transform 0.3s, box-shadow 0.3s;
}
.wa-float:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(74,56,40,0.40); }
.wa-float svg { width:22px; height:22px; fill:var(--bg); }
@media (max-width:767px) { .wa-float { bottom:20px; right:20px; width:44px; height:44px; } }

/* ── SCROLL TO TOP ── */
.scroll-top-wrap {
  text-align:center; padding:40px 0 8px; position:relative; z-index:1;
  background:var(--bg);
}
.scroll-top-btn {
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer;
  color:#7a6a55; opacity:0.6; transition:opacity 0.2s;
}
.scroll-top-btn:hover { opacity:1; }
.scroll-top-btn svg { width:20px; height:20px; stroke:#4a3828; fill:none; stroke-width:1.5; }
.scroll-top-btn span { font-family:'Montserrat','Assistant',sans-serif; font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:#7a6a55; }

/* ── MINI FOOTER (inner pages) ── */
.page-footer-mini {
  position:relative; z-index:2; background:var(--bg);
  text-align:center; padding:64px 48px 24px;
  border-top:0.5px solid rgba(74,56,40,0.10); margin-top:0;
}
.page-footer-mini a {
  font-size:8px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-muted); opacity:0.55; text-decoration:none;
}
.page-footer-mini .sep { color:rgba(74,56,40,0.2); margin:0 12px; }
.page-footer-mini .copy { font-size:8px; letter-spacing:0.12em; color:var(--text-muted); opacity:0.45; }

/* ── ACCESSIBILITY WIDGET ── */
.a11y-btn {
  position:fixed; bottom:90px; right:32px; z-index:500;
  width:44px; height:44px; border-radius:50%;
  background:var(--bg); border:0.7px solid rgba(74,56,40,0.35);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 12px rgba(74,56,40,0.15);
  transition:transform 0.3s, box-shadow 0.3s;
}
.a11y-btn:hover { transform:scale(1.08); box-shadow:0 4px 18px rgba(74,56,40,0.25); }
.a11y-btn svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.a11y-panel {
  position:fixed; bottom:144px; right:32px; z-index:500;
  background:var(--bg); border:0.7px solid rgba(74,56,40,0.18);
  border-radius:12px; padding:20px 18px;
  box-shadow:0 8px 32px rgba(74,56,40,0.15);
  display:none; flex-direction:column; gap:10px; min-width:190px;
}
.a11y-panel.open { display:flex; }
.a11y-title {
  font-size:8px; letter-spacing:0.20em; text-transform:uppercase;
  color:var(--text-muted); opacity:0.60; margin-bottom:4px;
}
.a11y-option {
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; letter-spacing:0.06em; color:var(--accent); opacity:0.80;
}
.a11y-controls { display:flex; gap:6px; align-items:center; }
.a11y-ctrl {
  width:26px; height:26px; border-radius:50%;
  border:0.7px solid rgba(74,56,40,0.30);
  background:none; cursor:pointer; font-size:13px;
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.a11y-ctrl:hover { background:rgba(74,56,40,0.08); }
.a11y-toggle {
  width:36px; height:20px; border-radius:10px;
  background:rgba(74,56,40,0.15); border:none; cursor:pointer;
  position:relative; transition:background 0.3s;
}
.a11y-toggle.on { background:rgba(74,56,40,0.55); }
.a11y-toggle::after {
  content:''; position:absolute; top:3px; left:3px;
  width:14px; height:14px; border-radius:50%; background:var(--bg);
  transition:transform 0.3s;
}
.a11y-toggle.on::after { transform:translateX(16px); }
@media (max-width:767px) {
  .a11y-btn { bottom:76px; right:20px; width:40px; height:40px; }
  .a11y-panel { right:20px; bottom:128px; }
}

/* ── CHECKBOX — custom style to match site background ── */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important; height: 15px !important;
  flex-shrink: 0;
  border: 0.7px solid rgba(74,56,40,0.40) !important;
  border-radius: 2px !important;
  background: var(--bg) !important;
  cursor: pointer;
  position: relative;
  padding: 0 !important;
  transition: background 0.2s, border-color 0.2s;
}
input[type="checkbox"]:checked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%23f0eeea' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px !important;
}

/* ── LANGUAGE TOGGLE BUTTON ── */
.lang-btn {
  font-family:'Montserrat','Assistant',sans-serif;
  font-size:9px; letter-spacing:0.16em;
  background:none;
  border:0.7px solid rgba(74,56,40,0.30);
  padding:5px 11px; border-radius:30px;
  color:#6b5e4e; cursor:pointer;
  opacity:0.7; transition:opacity 0.3s, color 0.4s, border-color 0.4s;
  white-space:nowrap;
}
.lang-btn:hover { opacity:1; }

/* Translated long-form paragraphs are centered — reads cleanly in both
   English and Hebrew, and avoids the awkward RTL-right look inside an LTR layout */
.i18n-para { text-align:center; }
body.lang-he .i18n-para { direction:rtl; }

/* ── SCROLL PARALLAX ──
   Floating cards drift over the fixed/sticky hero behind them.
   Uses the independent `translate` property so it composes with any
   existing `transform`-based reveal animation instead of overriding it. */
.js-parallax { translate: 0 var(--py, 0px); will-change: translate; }
body.reduce-motion .js-parallax { translate: none; }

/* ── GLOBAL OVERRIDES ── */
body.high-contrast { background:#fff !important; color:#000 !important; filter:contrast(1.4); }
body.reduce-motion * { animation:none !important; transition:none !important; }