/* ============ SHARED: accessibility (IS 5568 / WCAG 2.0 AA) + cookie notice + policy pages ============
   loaded on every page after main.css. the a11y-* classes on <html> are set by js/common.js
   before first paint, from the visitor's saved accessibility-menu choices. */

/* ---------- skip link + focus ---------- */
.skip-link{
  position:fixed;top:.8rem;right:.8rem;z-index:10001;
  background:var(--bone);color:var(--black);padding:.75rem 1.3rem;
  font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.02em;
  transform:translateY(-220%);transition:transform .2s;
}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--bone);outline-offset:3px}
.inverted :focus-visible{outline-color:var(--black)}
.a11y-opt[aria-pressed="true"]:focus-visible{outline:3px solid var(--black);outline-offset:-6px}
/* sticky bar: the wide bone button takes a dark ring, the narrow dark one a bone ring (they swap by studio hours) */
.mobile-bar .mb-wa:focus-visible,html.studio-open .mobile-bar .mb-call:focus-visible{outline:3px solid var(--black);outline-offset:-6px}
.mobile-bar .mb-call:focus-visible,html.studio-open .mobile-bar .mb-wa:focus-visible{outline:3px solid var(--bone);outline-offset:-6px}
/* ---------- studio hours: js/common.js sets html.studio-open / html.studio-closed (Israel time) before first paint ----------
   .when-open shows only while the studio is open; .when-closed at every other time (and with JS off) */
html:not(.studio-open) .when-open,html.studio-open .when-closed{display:none!important}
/* gallery: invisible full-size button over each photo (js/main.js) */
.gitem-open{position:absolute;inset:0;width:100%;height:100%;z-index:2;background:none;border:none;padding:0;cursor:pointer}
.gitem-open:focus-visible{outline-offset:-4px}
/* programmatic focus targets (sections reached by in-page links) don't need a ring */
[tabindex="-1"]:focus{outline:none}

/* ---------- accessibility menu: side tab + slide-out panel ---------- */
.a11y{font-family:var(--sans);direction:rtl}
.a11y-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9050;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  width:58px;padding:.75rem 0 .65rem;
  background:var(--black);color:var(--bone);
  border:1px solid var(--bone);border-right:none;border-radius:12px 0 0 12px;
  cursor:pointer;font-family:var(--sans);
  box-shadow:0 6px 24px rgba(0,0,0,.55);
  transition:background .25s,color .25s,width .25s;
}
.a11y-tab:hover,.a11y-tab[aria-expanded="true"]{background:var(--bone);color:var(--black)}
.a11y-tab svg{width:28px;height:28px;display:block}
.a11y-tab-label{font-size:.78rem;font-weight:700;letter-spacing:.02em;line-height:1}

.a11y-panel{
  position:fixed;right:0;top:50%;z-index:9400;
  width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;
  background:#0a0a0a;color:var(--bone);
  border:1px solid var(--bone);border-right:none;border-radius:14px 0 0 14px;
  box-shadow:0 10px 50px rgba(0,0,0,.7);
  padding:1.1rem 1.1rem 1.2rem;
  transform:translate(105%,-50%);transition:transform .3s ease;
}
.a11y-panel.open{transform:translate(0,-50%)}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.a11y-head h2{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;display:flex;align-items:center;gap:.5rem}
.a11y-head h2 svg{width:24px;height:24px;flex:none}
.a11y-close{
  width:40px;height:40px;border-radius:50%;flex:none;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--bone);font-size:1rem;
}
.a11y-close:hover{border-color:var(--bone)}

.a11y-size{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin-bottom:.55rem;
}
.a11y-size-label{font-weight:600;font-size:1rem}
.a11y-size-ctl{display:flex;align-items:center;gap:.45rem;direction:ltr}
.a11y-size-ctl button{
  width:40px;height:40px;border-radius:8px;cursor:pointer;
  background:none;border:1px solid var(--bone-dim);color:var(--bone);
  font-family:var(--sans);font-size:1.05rem;font-weight:700;
}
.a11y-size-ctl button:hover:not(:disabled){background:var(--bone);color:var(--black)}
.a11y-size-ctl button:disabled{opacity:.35;cursor:default}
.a11y-size-ctl output{min-width:3.2rem;text-align:center;font-weight:600}

.a11y-opt{
  width:100%;display:flex;align-items:center;gap:.7rem;text-align:right;
  min-height:52px;padding:.55rem .7rem;margin-bottom:.55rem;cursor:pointer;
  background:none;color:var(--bone);border:1px solid var(--line);border-radius:10px;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  transition:border-color .2s,background .2s,color .2s;
}
.a11y-opt:hover{border-color:var(--bone)}
.a11y-opt-ic{width:22px;height:22px;flex:none}
.a11y-opt-text{flex:1;display:flex;flex-direction:column;line-height:1.3}
.a11y-opt-hint{font-size:.8rem;font-weight:400;opacity:.75}
/* switch indicator: ON = filled bone row, knob to the left */
.a11y-switch{
  width:38px;height:22px;border-radius:999px;flex:none;position:relative;
  border:1.5px solid currentColor;
}
.a11y-switch::after{
  content:"";position:absolute;top:2.5px;right:3px;width:14px;height:14px;border-radius:50%;
  background:currentColor;transition:right .2s;
}
.a11y-opt[aria-pressed="true"]{background:var(--bone);color:var(--black);border-color:var(--bone)}
.a11y-opt[aria-pressed="true"] .a11y-switch::after{right:17px}

.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.9rem;flex-wrap:wrap}
.a11y-reset{
  background:none;border:none;color:var(--bone-dim);cursor:pointer;
  font-family:var(--sans);font-size:.95rem;text-decoration:underline;text-underline-offset:.2em;padding:.4rem 0;
}
.a11y-reset:hover{color:var(--bone)}
.a11y-statement{font-size:.95rem;color:var(--bone);border-bottom:1px solid var(--bone-dim);padding-bottom:.1rem}

@media (max-width:820px){
  /* phones: tuck the tab under the top bar so it never sits on the hero title */
  .a11y-tab{width:48px;padding:.6rem 0 .5rem;top:calc(84px + env(safe-area-inset-top));transform:none}
  .a11y-tab svg{width:24px;height:24px}
  .a11y-tab-label{font-size:.7rem}
}

/* ---------- accessibility modes ---------- */
/* text size (browser zoom still works on top of this) */
html.a11y-text-1{font-size:115%}
html.a11y-text-2{font-size:130%}

/* high contrast: pure white on pure black, no dimmed text, no film grain */
html.a11y-contrast{--black:#000;--ink:#000;--bone:#fff;--bone-dim:#fff;--gray:#fff;--line:rgba(255,255,255,.6)}
html.a11y-contrast body{background:#000}
html.a11y-contrast .grain{display:none}
html.a11y-contrast .topbar nav a,
html.a11y-contrast .gallery-hint,
html.a11y-contrast .mb-sub,
html.a11y-contrast .cta-num,
html.a11y-contrast .a11y-opt-hint{opacity:1}
html.a11y-contrast .video-shade{background:rgba(0,0,0,.86)}
html.a11y-contrast .styles-list li{background:none;-webkit-text-fill-color:#fff;color:#fff}
html.a11y-contrast .gitem img{filter:none}

/* highlight links */
html.a11y-links a:not(.skip-link){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
html.a11y-links a.btn,html.a11y-links a.nav-cta,html.a11y-links a.mb-wa,html.a11y-links a.mb-call,
html.a11y-links a.menu-cta{outline:2px dashed currentColor;outline-offset:3px}

/* readable font: plain sans everywhere, no wide tracking */
html.a11y-font body *:not(svg):not(path){font-family:"Assistant",Arial,sans-serif!important;letter-spacing:normal!important}

/* stop animations: same static layout as the OS "reduce motion" setting
   (mirrors main.css's prefers-reduced-motion block; js/main.js treats .a11y-still as reduced motion,
   js/common.js pauses every video) */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important}
html.a11y-still .grain{display:none}
html.a11y-still .reveal{opacity:1;transform:none}
html.a11y-still .hero-mask{height:auto}
html.a11y-still .scrub-section{height:auto}
html.a11y-still .strip-section{height:auto}
html.a11y-still .pin{position:relative;height:100svh;display:flex;flex-direction:column;justify-content:center}
html.a11y-still .mask-canvas,html.a11y-still .scrub-canvas{display:none}
html.a11y-still .scrub-fallback{display:block}
html.a11y-still .stage{opacity:1;transform:none}
html.a11y-still .stage-line{position:relative;top:auto;right:auto;transform:none;margin:1.2rem auto;width:92%}
html.a11y-still .hero-copy-mobile{
  display:flex;position:relative;z-index:3;
  align-items:center;justify-content:center;text-align:center;padding:0 1.2rem;
}
html.a11y-still .hero-copy-mobile{visibility:visible}
html.a11y-still .hero-sub{position:relative;bottom:auto;right:auto;transform:none;text-align:center;margin-top:1.2rem;white-space:normal}
html.a11y-still .scroll-hint{display:none}
html.a11y-still .strip-pin{position:relative;height:auto;display:block;padding:4rem 0}
html.a11y-still .strip-track{
  overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;
  scrollbar-width:none;padding:0 1.4rem;
}
html.a11y-still .strip-track::-webkit-scrollbar{display:none}
html.a11y-still .styles-list li{background-position:100% 0}

/* ---------- cookie notice (informational, shown once) ---------- */
.cookie-note{
  position:fixed;left:1.2rem;bottom:1.2rem;z-index:8600;
  width:min(380px,calc(100vw - 2.4rem));
  display:flex;align-items:center;gap:1rem;
  background:#0a0a0a;color:var(--bone-dim);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;font-size:.9rem;line-height:1.55;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.cookie-note p{flex:1}
.cookie-note a{color:var(--bone);text-decoration:underline;text-underline-offset:.2em}
.cookie-note button{
  flex:none;background:var(--bone);color:var(--black);border:none;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.95rem;padding:.6rem 1rem;min-height:44px;
}
@media (max-width:820px){
  /* phones: a thin full-width strip resting on the sticky contact bar */
  .cookie-note{
    left:0;right:0;width:auto;bottom:calc(68px + env(safe-area-inset-bottom));
    border-radius:0;border-left:none;border-right:none;border-bottom:none;box-shadow:none;
    padding:.3rem .8rem;gap:.7rem;font-size:.78rem;line-height:1.4;background:rgba(10,10,10,.96);
  }
  .cookie-note button{font-size:.88rem;padding:.35rem .9rem;min-height:44px}
  .cookie-note a,.foot-links a{position:relative}
  .cookie-note a::after,.foot-links a::after{content:"";position:absolute;inset:-12px -4px}
}

/* ---------- footer policy links ---------- */
.foot-links{margin-top:.9rem;font-size:.9rem;letter-spacing:.04em}
.foot-links a{color:var(--bone-dim);border-bottom:1px solid var(--line);padding-bottom:.1rem}
.foot-links a:hover{color:var(--bone);border-color:var(--bone)}

/* ---------- policy pages (accessibility / privacy / terms) ---------- */
.legal-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);border-bottom:1px solid var(--line);
}
.legal-top .brand-mark{height:44px;width:auto;display:block}
.legal-back{font-size:1rem;color:var(--bone-dim);border-bottom:1px solid var(--line);padding-bottom:.1rem}
.legal-back:hover{color:var(--bone);border-color:var(--bone)}
.legal{max-width:780px;margin:0 auto;padding:clamp(3rem,8vh,5rem) 1.4rem clamp(3rem,8vh,5rem)}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.2}
.legal .updated{margin-top:.8rem;color:var(--bone-dim);font-size:.95rem}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,3vw,1.7rem);margin:2.6rem 0 .8rem}
.legal p,.legal li{font-size:1.08rem;line-height:1.9;color:var(--bone-dim)}
.legal p + p{margin-top:.8rem}
.legal ul{padding-right:1.3rem;margin-top:.6rem}
.legal li{margin-bottom:.35rem}
.legal strong{color:var(--bone);font-weight:600}
.legal a{color:var(--bone);text-decoration:underline;text-underline-offset:.2em}
.legal .contact-card{
  margin-top:1rem;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;
}
.legal .contact-card p{margin:0}
.legal-foot{
  border-top:1px solid var(--line);padding:2rem 1.5rem 2.6rem;text-align:center;
  color:var(--gray);font-size:.95rem;
}