/* ============================================================
   COLNAGO USA — accessibility panel
   A single control, bottom left, that adjusts the whole site.
   Preferences persist per browser.
   ============================================================ */

.a11y-btn{
  position:fixed;left:22px;bottom:22px;z-index:400;
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:var(--acc,#18ADE0);color:#04161D;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.5);transition:transform .3s,box-shadow .3s;
}
.a11y-btn:hover{transform:scale(1.06);box-shadow:0 10px 34px rgba(0,0,0,.6)}
.a11y-btn svg{width:28px;height:28px;display:block}

.a11y-panel{
  position:fixed;left:22px;bottom:88px;z-index:401;width:320px;max-width:calc(100vw - 44px);
  max-height:min(74vh,620px);overflow:auto;
  background:#0E1113;border:1px solid rgba(255,255,255,.16);
  color:#EDF1F3;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
}
.a11y-panel[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.a11y-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.12);
}
.a11y-head h2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.2}
.a11y-head p{margin:4px 0 0;font-size:11px;color:#7F8A90;letter-spacing:.04em}
.a11y-close{background:none;border:0;color:#7F8A90;cursor:pointer;font-size:22px;line-height:1;padding:4px 6px}
.a11y-close:hover{color:#EDF1F3}

.a11y-group{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.a11y-group:last-of-type{border-bottom:0}
.a11y-group>h3{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#7F8A90;
  margin:0 0 10px;font-weight:500;
}
.a11y-seg{display:flex;gap:6px}
.a11y-seg button{
  flex:1;background:transparent;border:1px solid rgba(255,255,255,.16);color:#7F8A90;
  padding:9px 4px;cursor:pointer;font-size:12px;transition:.25s;
}
.a11y-seg button:hover{color:#EDF1F3;border-color:rgba(255,255,255,.3)}
.a11y-seg button[aria-pressed="true"]{background:#18ADE0;border-color:#18ADE0;color:#04161D;font-weight:600}

.a11y-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;color:inherit;cursor:pointer;padding:9px 0;text-align:left;font-size:13.5px;
}
.a11y-toggle:hover{color:#18ADE0}
.a11y-sw{
  flex:none;width:38px;height:21px;border-radius:11px;background:rgba(255,255,255,.16);
  position:relative;transition:background .25s;
}
.a11y-sw::after{
  content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;
  background:#EDF1F3;transition:transform .25s;
}
.a11y-toggle[aria-pressed="true"] .a11y-sw{background:#18ADE0}
.a11y-toggle[aria-pressed="true"] .a11y-sw::after{transform:translateX(17px);background:#04161D}

.a11y-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:8px}
.a11y-foot button{
  flex:1;background:transparent;border:1px solid rgba(255,255,255,.16);color:#EDF1F3;
  padding:10px;cursor:pointer;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;transition:.25s;
}
.a11y-foot button:hover{border-color:#18ADE0;color:#18ADE0}

/* ---------- what the settings actually do ---------- */

/* text size — zoom the page content, not the panel itself */
html[data-a11y-scale="1"] .a11y-zoom{zoom:1.12}
html[data-a11y-scale="2"] .a11y-zoom{zoom:1.25}
html[data-a11y-scale="3"] .a11y-zoom{zoom:1.4}

/* higher contrast — the site is token-driven, so raise the tokens */
html.a11y-contrast{
  --fg:#FFFFFF; --dim:#E4EAEE; --dimmer:#C3CCD2;
  --line:rgba(255,255,255,.34); --line-2:rgba(255,255,255,.5);
  --bg:#000000; --bg-2:#07090A; --bg-3:#0D1012; --acc:#5FD0F5;
  --ink:#000; --muted:#333; --paper:#fff;
}
html.a11y-contrast .a11y-zoom img{filter:contrast(1.08)}

/* legible type */
html.a11y-font{
  --sans:Verdana,'DejaVu Sans',Tahoma,sans-serif;
  --mono:'Courier New',monospace;
  --serif:Georgia,serif;
}
html.a11y-font .a11y-zoom *{letter-spacing:normal !important;font-family:var(--sans) !important}
html.a11y-font .a11y-zoom{line-height:1.75}

/* underline links so they are not colour-only */
html.a11y-links .a11y-zoom a{text-decoration:underline;text-underline-offset:3px}

/* stop movement */
html.a11y-motion .a11y-zoom *,
html.a11y-motion .a11y-zoom *::before,
html.a11y-motion .a11y-zoom *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important;
}
html.a11y-motion .a11y-zoom video{display:none}

/* mute the photography so text carries the page */
html.a11y-grayscale .a11y-zoom img,
html.a11y-grayscale .a11y-zoom video{filter:grayscale(1) contrast(1.05)}

/* bigger hit targets and a visible focus ring everywhere */
html.a11y-focus .a11y-zoom :focus{outline:3px solid #FFD400 !important;outline-offset:3px !important}
html.a11y-focus .a11y-zoom a,
html.a11y-focus .a11y-zoom button{min-height:44px}

/* hide the decorative film grain, which sits over everything */
html.a11y-contrast body::after,
html.a11y-plain body::after{display:none !important}

@media (max-width:640px){
  .a11y-btn{left:14px;bottom:14px;width:48px;height:48px}
  .a11y-panel{left:14px;bottom:72px;width:calc(100vw - 28px)}
}
@media print{.a11y-btn,.a11y-panel{display:none}}