/* ═══════════════════════════════════════════════════════
   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;
  /* nowrap: a wrapped nav grows past the clearance the project page's sticky
     bar reserves for it and swallows that bar (it did exactly that on iPad
     portrait). The tablet block below shrinks the parts so they still fit. */
  flex-wrap:nowrap;
  padding:26px 48px;
  background:rgba(240,238,234,0.92);
  -webkit-backdrop-filter:blur(8px); 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); }

/* ── TABLET NAV (768–1023px — iPad portrait) ──
   The desktop nav needed 729px of an 820px viewport: 91px of slack, and any
   font that renders a shade wider tipped it into a second line. Tighten the
   gaps and the logo so it fits comfortably (and reclaims vertical space). */
@media (min-width:768px) and (max-width:1023px) {
  nav { padding:18px 28px; }
  .nav-links { gap:20px; }
  #lang-toggle-btn { margin-left:18px; }
  .nav-logo { width:92px; }
}

/* ── 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 ──
   Left edge (site-wide): the bottom-right corner belongs to the home page's
   scroll prompt and step dots, and these buttons were sitting on top of them. */
.wa-float {
  position:fixed; bottom:32px; left: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; left: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; left: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; left: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; left:20px; width:40px; height:40px; }
  .a11y-panel { left: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;
  text-transform:uppercase;
  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; }

/* Anti-flash: when a visitor is browsing in Hebrew, the <head> script adds
   .lang-loading so the English source text stays hidden until shared.js swaps
   it to Hebrew — no English→Hebrew flip between pages. English-default
   visitors never get this class, so it has zero effect on the default view. */
html.lang-loading [data-i18n],
html.lang-loading [data-i18n-html] { visibility:hidden; }

/* 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; }
/* Hebrew titles need RTL too, so end-of-sentence punctuation stays at the end */
body.lang-he .contact-title,
body.lang-he #contact h2[data-i18n="contactpage.title"] { 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; }

/* ── TECH BAND — opaque, static, full-width divider (home + about) ── */
.tech-band {
  position:relative; z-index:1;
  width:100%; margin:24px 0;
  background:#ece7de;
  padding:100px 24px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.tech-band-inner { max-width:720px; margin:0 auto; }
.tech-band-label {
  font-size:8.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:#7a6a55; opacity:0.60; margin-bottom:24px;
}
.tech-band-title {
  font-family:'Montserrat','Assistant',sans-serif; font-size:28px; font-weight:300;
  color:#3a2e22; margin-bottom:36px; line-height:1.3; letter-spacing:0.04em;
}
.tech-band-body {
  font-size:13.5px; line-height:1.95; color:#5a4e40; letter-spacing:0.025em; opacity:0.85;
  text-align:center;
}
.tech-band-body strong { color:#3a2e22; font-weight:500; opacity:1; }
.tech-band-body p + p { margin-top:22px; }
@media (max-width:768px) {
  .tech-band { padding:64px 16px; }
}

/* ── SELECT PLACEHOLDER STATE ──
   Until a project type is chosen the select reads like the other
   placeholders (muted), not like filled-in text (dark). */
select[name="type"].is-empty { color:rgba(122,106,85,0.75) !important; }
select[name="type"] option { color:#3a2e22; }

/* ── CTA BUTTON (shared: home, about, services, projects) ── */
.cta-btn {
  display:inline-block; font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:#4a3828; text-decoration:none;
  border:0.7px solid rgba(74,56,40,0.50); padding:13px 36px; border-radius:30px; transition:background 0.35s;
}
.cta-btn:hover { background:rgba(74,56,40,0.08); }
.tech-band .cta-btn { margin-top:40px; }
.projects-cta { text-align:center; margin-top:22px; }
.gallery-cta { text-align:center; margin:52px 0 12px; }
.gallery-cta-text { font-size:14px; color:#5a4e40; opacity:0.85; margin-bottom:20px; }

/* ── CARD DECK — pinned scroll section (home + about) ──
   Each item sits in its own card; the next cards wait as a small stack
   behind and above, and scrolling brings them forward to the front. */
.drum-section { position:relative; z-index:1; background:#f0eeea; height:340vh; }
.drum-sticky {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; overflow:hidden;
}
.drum-label {
  font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:#7a6a55; opacity:0.60; margin-bottom:20px;
}
.drum-title {
  font-family:'Montserrat','Assistant',sans-serif; font-size:28px; font-weight:300;
  color:#3a2e22; letter-spacing:0.04em; line-height:1.3; margin-bottom:52px;
}
/* the window shows the middle card in full, plus a slice of the previous
   card above and the next card below — scrolling rolls them vertically */
.drum-window {
  position:relative; width:100%; max-width:680px;
  height:430px;                    /* card (250) + two visible slices */
  overflow:hidden;
  --card-h:250px;
}
.drum-panel {
  position:absolute; left:0; right:0;
  top:50%; height:var(--card-h); margin-top:calc(var(--card-h) / -2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#eee9e1;
  box-shadow:0 10px 28px rgba(58,46,34,0.10);
  padding:34px 34px;
  will-change:transform, opacity;
  opacity:0;
}
/* soft fade at the window's top and bottom edges */
.drum-window::before, .drum-window::after {
  content:''; position:absolute; left:0; right:0; height:56px; z-index:5; pointer-events:none;
}
.drum-window::before { top:0; background:linear-gradient(to bottom, #f0eeea, rgba(240,238,234,0)); }
.drum-window::after  { bottom:0; background:linear-gradient(to top, #f0eeea, rgba(240,238,234,0)); }
.drum-name {
  font-family:'Montserrat','Assistant',sans-serif;
  font-size:21px; font-weight:300; color:#3a2e22;
  letter-spacing:0.06em; margin-bottom:16px; line-height:1.35;
}
.drum-desc { font-size:13px; line-height:1.9; color:#5a4e40; opacity:0.85; max-width:480px; }
.drum-dots { display:flex; gap:9px; margin-top:48px; }
.drum-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(74,56,40,0.20); transition:background 0.3s;
}
.drum-dot.is-active { background:rgba(74,56,40,0.75); }
/* reduce-motion / no-JS fallback: plain stacked cards */
body.reduce-motion .drum-section { height:auto; }
body.reduce-motion .drum-sticky { position:static; height:auto; padding:90px 24px; overflow:visible; }
body.reduce-motion .drum-window { height:auto; overflow:visible; }
body.reduce-motion .drum-window::before, body.reduce-motion .drum-window::after { display:none; }
body.reduce-motion .drum-panel { position:static; height:auto; margin-top:0; opacity:1 !important; transform:none !important; margin-bottom:20px; }
body.reduce-motion .drum-dots { display:none; }
body.lang-he .drum-name { letter-spacing:0.03em; }
@media (max-width:767px) {
  .drum-section { height:300vh; }
  .drum-title { font-size:22px; margin-bottom:36px; }
  .drum-name { font-size:17px; }
  .drum-window { height:460px; --card-h:280px; }
}

/* ── CONTACT CARD ROW — a row of icon+label+value "windows", used on
      contact.html's .contact-bar and reused for the homepage's contact block ── */
.contact-bar { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.contact-card { display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; transition:opacity 0.3s; padding:0 16px; min-width:0; }
.contact-card:hover { opacity:0.65; }
.card-icon { width:44px; height:44px; border:0.7px solid rgba(74,56,40,0.22); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color 0.3s, background 0.3s; }
.contact-card:hover .card-icon { border-color:rgba(74,56,40,0.55); background:rgba(74,56,40,0.05); }
.card-icon svg { width:16px; height:16px; stroke:rgba(74,56,40,0.65); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.card-label { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.60; }
@media (max-width:767px) {
  .contact-bar { grid-template-columns:repeat(2, 1fr); gap:40px 0; }
  .contact-card { padding:0 8px; }
}

/* ── HEBREW TYPE FIXES ──
   The English micro-type (uppercase + wide tracking at 7.5-9.5px) reads
   fine in Latin caps, but Hebrew has no capitals — the same sizes look
   tiny and the wide tracking breaks Hebrew words apart. These rules bump
   ONLY the translated micro-text, only in Hebrew mode. */
body.lang-he #about .principle-name { font-size:13px; letter-spacing:0.04em; }
body.lang-he .hero-btn,
body.lang-he .see-more,
body.lang-he .cta-btn,
body.lang-he .submit-btn { font-size:11px; letter-spacing:0.10em; }
body.lang-he .submit-note { font-size:10px; }
body.lang-he .success-msg { font-size:11px; }
body.lang-he .field-error { font-size:10px; }
body.lang-he .why-name { font-size:11.5px; letter-spacing:0.08em; }
body.lang-he .form-group label { font-size:10px; letter-spacing:0.10em; }
body.lang-he .card-label { font-size:10px; letter-spacing:0.10em; }
/* the home-page form is inline-styled — needs !important to override */
body.lang-he #contact label[data-i18n] { font-size:10px !important; letter-spacing:0.10em !important; }
body.lang-he #contact button[data-i18n="contact.btn.send"] { font-size:11px !important; letter-spacing:0.10em !important; }
body.lang-he #contact span[data-i18n="contact.reply"] { font-size:10px !important; }
body.lang-he #contact p[data-i18n="contact.success"] { font-size:11px !important; }
body.lang-he label[for="privacy"],
body.lang-he label[for="privacy-idx"] { font-size:10.5px !important; }

/* ── GLOBAL OVERRIDES ── */
/* NOTE: no `filter` here on purpose. A filter on <body> makes body the
   containing block for every position:fixed descendant, which un-pins the
   hero canvas, the nav, the WhatsApp float and the accessibility panel
   itself. Contrast is raised with explicit colours instead. */
body.high-contrast { background:#fff !important; color:#000 !important; }
body.high-contrast p,
body.high-contrast span,
body.high-contrast li,
body.high-contrast label,
body.high-contrast h1, body.high-contrast h2, body.high-contrast h3 { color:#000 !important; opacity:1 !important; }
body.high-contrast a { color:#00309e !important; opacity:1 !important; }
body.high-contrast .section,
body.high-contrast .contact-panel,
body.high-contrast .about-block { background:#fff !important; }
body.reduce-motion * { animation:none !important; transition:none !important; }