/* ============================================================
   DJFUZE — accessibility module (styles)
   Built to stay visually connected to the site's own palette
   (warm gold + near-black) in every mode — no generic
   black-and-white / grayscale "overlay" look.
   Depends on the CSS variables defined in style.css (:root).
   ============================================================ */

/* ---------- floating trigger button ---------- */
.a11y-btn{
  position:fixed;left:18px;bottom:88px;z-index:2000;
  background:rgba(10,8,5,0.95);border:1px solid var(--line);color:var(--gold-lt);
  border-radius:var(--r-md);padding:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:44px;min-height:44px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.a11y-btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;}
.a11y-btn span{font-size:.66rem;}
.a11y-btn:hover,.a11y-btn:focus-visible{border-color:var(--gold);box-shadow:0 0 28px rgba(217,164,65,0.25);}
.a11y-btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;}

/* ---------- panel ---------- */
.a11y-panel{
  position:fixed;left:68px;bottom:88px;transform:translateX(-8px);z-index:1999;
  width:min(310px, calc(100vw - 88px));max-height:min(500px, calc(100vh - 120px));overflow-y:auto;
  background:rgba(10,8,5,0.98);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.3rem;display:flex;flex-direction:column;gap:.15rem;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}
.a11y-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
[dir="rtl"] .a11y-panel{left:68px;}
.a11y-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.a11y-panel-title{font-family:'Suez One',serif;font-size:1.05rem;color:var(--ink);}
.a11y-panel-close{
  background:none;border:1px solid var(--line-soft);border-radius:8px;color:var(--ink-soft);
  width:32px;height:32px;min-width:32px;min-height:32px;cursor:pointer;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;
}
.a11y-panel-close:hover,.a11y-panel-close:focus-visible{border-color:var(--gold);color:var(--gold-lt);}

.a11y-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.62rem 0;border-top:1px solid var(--line-soft);
}
.a11y-row:first-of-type{border-top:none;}
.a11y-label{font-size:.8rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:.15rem;}
.a11y-label small{font-size:.68rem;color:var(--ink-dim);font-weight:400;}
.a11y-controls{display:flex;gap:.4rem;flex-shrink:0;}

.a11y-chip{
  background:rgba(255,255,255,0.03);border:1px solid var(--line-soft);border-radius:8px;
  color:var(--ink);font-size:.78rem;cursor:pointer;
  min-width:40px;min-height:40px;padding:.4rem .55rem;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.a11y-chip:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(217,164,65,0.08);}
.a11y-chip:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;}
.a11y-chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-lt);background:rgba(217,164,65,0.14);}

.a11y-toggle{
  background:rgba(255,255,255,0.03);border:1px solid var(--line-soft);border-radius:var(--r-pill);
  min-width:52px;min-height:30px;width:52px;height:30px;position:relative;cursor:pointer;flex-shrink:0;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.a11y-toggle::after{
  content:'';position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;
  background:var(--ink-dim);transition:inset-inline-start .2s var(--ease),background .2s var(--ease);
}
.a11y-toggle[aria-pressed="true"]{border-color:var(--gold);background:rgba(217,164,65,0.14);}
.a11y-toggle[aria-pressed="true"]::after{inset-inline-start:27px;background:var(--gold-lt);}
.a11y-toggle:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;}

.a11y-reset{
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line-soft);
  text-align:center;font-size:.8rem;color:var(--gold-lt);cursor:pointer;
  min-height:40px;display:flex;align-items:center;justify-content:center;gap:.4rem;
  border-radius:8px;transition:background .2s;
}
.a11y-reset:hover,.a11y-reset:focus-visible{background:rgba(217,164,65,0.08);}

.a11y-statement-link{
  display:block;text-align:center;font-size:.72rem;color:var(--ink-dim);
  margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--line-soft);
}
.a11y-statement-link:hover{color:var(--gold-lt);}

/* visually-hidden live region for announcements */
.a11y-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Feature: font size (stepped, own custom property) ---------- */
html{ font-size: calc(100% * var(--a11y-fs, 1)); }

/* ---------- Feature: text spacing (independent of font size) ---------- */
body{
  letter-spacing: calc(var(--a11y-ls, 0) * 1px);
  word-spacing: calc(var(--a11y-ws, 0) * 1px);
}
body.a11y-line-spacing{ line-height: var(--a11y-lh, 1.6) !important; }
body.a11y-line-spacing p,
body.a11y-line-spacing li{ line-height: var(--a11y-lh, 1.6) !important; }

/* ---------- Feature: readable / dyslexia-friendly font ---------- */
body.a11y-readable-font,
body.a11y-readable-font *{
  font-family: Verdana, "Segoe UI", Arial, "Atkinson Hyperlegible", sans-serif !important;
  letter-spacing: calc(var(--a11y-ls, 0.3) * 1px);
}
body.a11y-readable-font .disp{ font-family: Verdana, "Segoe UI", Arial, sans-serif !important; }

/* ---------- Feature: link & interactive-element highlighting ---------- */
body.a11y-highlight-links a{ text-decoration: underline !important; text-underline-offset: 3px; }
body.a11y-highlight-links button,
body.a11y-highlight-links [role="button"],
body.a11y-highlight-links input,
body.a11y-highlight-links select,
body.a11y-highlight-links textarea{
  outline: 2px solid var(--gold) !important; outline-offset: 2px;
}

/* ---------- Feature: reduce motion (real kill-switch, kept brand-true) ---------- */
body.reduce-motion *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.reduce-motion .scroll-reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
body.reduce-motion .hero-canvas-wrap,
body.reduce-motion .contact-canvas{ display:none; }
html.reduce-motion{ scroll-behavior: auto !important; }
/* the glowing background texture (vignette + twinkling sparks) */
body.reduce-motion::before,
body.reduce-motion::after{ opacity:0 !important; }
body.reduce-motion .site-wave-bg{ display:none !important; }
/* glowing buttons and controls — flatten every colored box-shadow "halo" */
body.reduce-motion .btn-gold,
body.reduce-motion .btn-wa,
body.reduce-motion .wa-float,
body.reduce-motion .c-box,
body.reduce-motion .ar-submit,
body.reduce-motion .login-box button,
body.reduce-motion .gf-btn.active,
body.reduce-motion .a11y-btn,
body.reduce-motion .hero-logo-mark{
  box-shadow:none !important; filter:none !important;
}

/* ---------- Feature: high contrast (genuinely redesigned, not a filter) ---------- */
body.high-contrast{
  --bg:#000; --bg-soft:#000; --sur:#0a0a0a; --sur2:#111; --sur3:#161616;
  --line: rgba(255,214,102,0.55); --line-soft: rgba(255,255,255,0.35);
  --gold:#ffd766; --gold-lt:#ffe9a8; --gold-pale:#fff4d6; --gold-dk:#c99a2e;
  --magenta:#ff6fa0; --ink:#ffffff; --ink-soft:#f2eee2; --ink-dim:#cfc9ba;
  background: var(--bg) !important;
}
body.high-contrast::before{ opacity:0; }
body.high-contrast .value-card,body.high-contrast .svc-card,body.high-contrast .test-card,
body.high-contrast .contact-modal-box,body.high-contrast .a11y-panel{
  border-color: var(--line) !important; background: #0a0a0a !important;
}
body.high-contrast a{ text-decoration: underline; }
body.high-contrast img,body.high-contrast video{ filter: contrast(1.05); }

/* ---------- Feature: simplified / clean view ---------- */
body.a11y-simplified .hero-canvas-wrap,
body.a11y-simplified .contact-canvas,
body.a11y-simplified .spark,
body.a11y-simplified::before{ display:none !important; opacity:0 !important; }
body.a11y-simplified{ background: var(--bg); }
body.a11y-simplified .tease-item video{ display:none; }

/* ---------- Feature: enlarged cursor ---------- */
body.a11y-large-cursor,
body.a11y-large-cursor *{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path d='M4 2l14 8-6 2 4 7-3 1-4-7-4 5V2z' fill='%23ffd766' stroke='%23171310' stroke-width='1.3'/></svg>") 4 4, auto !important;
}
body.a11y-large-cursor a,
body.a11y-large-cursor button,
body.a11y-large-cursor [role="button"],
body.a11y-large-cursor input,
body.a11y-large-cursor select,
body.a11y-large-cursor textarea{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='%23ffd766' stroke='%23171310' stroke-width='1.3'/></svg>") 12 12, pointer !important;
}

/* ---------- Feature: reading guide ---------- */
.a11y-reading-guide-bar{
  position:fixed;left:0;right:0;height:36px;pointer-events:none;z-index:1998;
  background:rgba(217,164,65,0.14);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
  display:none;
}
body.a11y-reading-guide .a11y-reading-guide-bar{display:block;}

/* ---------- Feature: highlight headings ---------- */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4{
  outline: 2px dashed var(--gold);
  outline-offset: 4px;
  background: rgba(217,164,65,0.08);
  border-radius: 6px;
}

/* ---------- per-media pause control (gallery/tease preview videos) ---------- */
.a11y-media-pause{
  position:absolute;bottom:8px;inset-inline-end:8px;z-index:5;
  background:rgba(10,8,5,0.85);border:1px solid var(--line);border-radius:50%;
  width:32px;height:32px;min-width:32px;min-height:32px;color:var(--gold-lt);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.a11y-media-pause:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px;}
.a11y-media-pause svg{width:14px;height:14px;fill:currentColor;}

/* ---------- responsive / mobile ---------- */
@media (max-width: 640px){
  .a11y-btn{left:10px;bottom:78px;padding:10px;}
  .a11y-panel{left:10px;bottom:78px;width:calc(100vw - 20px);max-height:min(60vh, 480px);}
}

/* ---------- accessibility statement page ---------- */
.a11y-statement{max-width:760px;margin:0 auto;padding:3rem 28px 5rem;}
.a11y-statement h1{font-family:'Suez One',serif;font-size:clamp(1.8rem,4.5vw,2.6rem);color:var(--ink);margin-bottom:1.6rem;}
.a11y-statement h2{font-family:'Suez One',serif;font-size:1.25rem;color:var(--gold-lt);margin:2rem 0 .7rem;}
.a11y-statement p,.a11y-statement li{color:var(--ink-soft);line-height:1.85;font-size:.98rem;}
.a11y-statement ul{padding-inline-start:1.3rem;display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem;}
.a11y-statement a{color:var(--gold-lt);text-decoration:underline;}
.a11y-statement .a11y-updated{color:var(--ink-dim);font-size:.82rem;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line-soft);}

/* respect OS-level reduced motion as a sensible default (site JS still allows explicit override) */
@media (prefers-reduced-motion: reduce){
  body:not(.a11y-motion-override) *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}