/*
 * Ariade Pro - Accessibility settings panel.
 * Author: Shivaji Mitra, M/S. Anblik.
 * Classes on <html>: a11y-dyslexia, a11y-large, a11y-spacing, a11y-underline, a11y-guide, a11y-alttext,
 * a11y-simple, a11y-motion, a11y-contrast, a11y-dark, a11y-pausevideo (set by the panel, saved on the device).
 * Colours read the Ariade theme tokens first; the literal values are the Ariade defaults.
 */

.ariade-a11y-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- The "Aa" button (needs JavaScript, so it shows only when the head script ran) ---------- */
.ariade-a11y-btn{display:none}
html.ariade-a11y-js .ariade-a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.header-actions .ariade-a11y-btn{width:auto;min-width:50px;padding:0 10px;font:700 1.05rem/1 var(--display,"Barlow Semi Condensed",system-ui,sans-serif);letter-spacing:.02em;text-transform:none}
.ariade-a11y-btn svg{flex:none}
html:not(.ariade-a11y-js) .ariade-a11y-btn{display:none!important}
/* No Ariade top bar or header on the page: the buttons sit together in the bottom left corner */
.ariade-tools-float{position:fixed;left:16px;bottom:16px;z-index:99990;display:flex;align-items:center;gap:8px}
.ariade-tools-float:empty{display:none}
.ariade-a11y-btn--float,.ariade-listen-float__btn{min-width:52px;height:52px;padding:0 14px;border-radius:14px;border:2px solid #fff;background:var(--ink,#0E1B36);color:#fff;font:700 1.05rem/1 var(--display,"Barlow Semi Condensed",system-ui,sans-serif);box-shadow:0 10px 24px -8px rgba(14,27,54,.55);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ariade-a11y-btn--float:focus-visible,.ariade-listen-float__btn:focus-visible{outline:3px solid var(--ink,#0E1B36);outline-offset:3px}

/* ---------- Listen (since 1.2.0): Listen -> Pause -> Resume, Stop while reading ---------- */
.ariade-listen{display:inline-flex;align-items:center;gap:.4rem}
.ariade-listen [hidden]{display:none!important}
.ariade-listen svg{flex:none}
[data-ariade-listen]:not([data-state=playing]) .ariade-listen__ic--pause,[data-ariade-listen][data-state=playing] .ariade-listen__ic--speaker{display:none}
.header-actions .ariade-listen__txt,.ariade-tools-float .ariade-listen__txt{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header-actions [data-ariade-listen][data-state=playing],.header-actions [data-ariade-listen][data-state=paused]{border-color:var(--ink,#0E1B36)}

/* ---------- Buttons in the Ariade top bar (theme 1.7.128+), Shopify and BigCommerce style ---------- */
.ariade-topbar .ariade-a11y-btn__txt{font:700 .85rem/1 var(--display,"Barlow Semi Condensed",system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:760px){.ariade-topbar .ariade-a11y-btn__txt{display:none}.ariade-topbar .ariade-a11y-btn--tb{padding:.2rem .55rem}}
/* Narrow headers, and a desktop header that is short of room ("ariade-a11y-compact", set by the panel script):
   the eye icon only; the button keeps its name from the hidden text */
html.ariade-a11y-compact .header-actions .ariade-a11y-btn{padding:0;width:50px}
html.ariade-a11y-compact .header-actions .ariade-a11y-btn__txt{display:none}
@media (max-width:600px){
  .header-actions .ariade-a11y-btn{padding:0;width:50px}
  .header-actions .ariade-a11y-btn__txt{display:none}
}
/* The Ariade header switches to the menu button below 1081px. With the extra "Aa" button it needs 100px more,
   and with Larger text about a quarter more again, so it switches earlier instead of running off the screen
   (WCAG 1.4.4, 1.4.10). The panel script adds "ariade-a11y-tight" whenever the header still does not fit
   (a long menu, More text spacing, the dyslexia-friendly font). */
html.ariade-a11y-tight .nav-desktop,html.ariade-a11y-tight .header-actions .only-desktop{display:none}
html.ariade-a11y-tight .header-actions{margin-left:auto}
html.ariade-a11y-tight .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
@media (max-width:1180px){
  html.ariade-a11y-js .nav-desktop,html.ariade-a11y-js .header-actions .only-desktop{display:none}
  html.ariade-a11y-js .header-actions{margin-left:auto}
  html.ariade-a11y-js .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
}
@media (max-width:1640px){
  html.ariade-a11y-js.a11y-large .nav-desktop,html.ariade-a11y-js.a11y-large .header-actions .only-desktop{display:none}
  html.ariade-a11y-js.a11y-large .header-actions{margin-left:auto}
  html.ariade-a11y-js.a11y-large .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
}

/* ---------- The dialog ---------- */
html.ariade-a11y-open{overflow:hidden}
.ariade-a11y{padding:0;border:0;background:transparent;color:var(--ink,#0E1B36);margin:auto;width:min(460px,calc(100vw - 32px));max-width:none;max-height:100dvh}
.ariade-a11y::backdrop{background:rgba(14,27,54,.6)}
.ariade-a11y__panel{display:flex;flex-direction:column;gap:14px;background:#fff;color:var(--body,#2B3B57);border-radius:20px;padding:20px;max-height:calc(100dvh - 32px);overflow:auto;font-family:var(--body-font,"Geist",system-ui,-apple-system,sans-serif);font-size:1rem;line-height:1.5;text-align:left}
.ariade-a11y__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ariade-a11y__title{display:flex;align-items:center;gap:12px;margin:0;font:700 1.45rem/1.15 var(--display,"Barlow Semi Condensed",system-ui,sans-serif);color:var(--ink,#0E1B36);letter-spacing:.005em;text-transform:none}
.ariade-a11y__ic{flex:none;display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:#f3f0fb;border:1px solid #e4ddf6}
.ariade-a11y__ic svg{width:1.75rem;height:auto}
.ariade-a11y__x{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--line,#DCE4F0);border-radius:12px;background:#fff;color:var(--ink,#0E1B36);cursor:pointer}
.ariade-a11y__x:hover{border-color:var(--teal,#184FCB)}
.ariade-a11y__desc{margin:0;font-size:.92rem;color:#3c4a63}
.ariade-a11y__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ariade-a11y__list li{margin:0;padding:0}
.ariade-a11y__list li::before,.ariade-a11y__list li::marker{content:none}
.ariade-a11y__list label{display:flex;align-items:center;gap:12px;margin:0;padding:10px 4px;border-bottom:1px solid #e3e6f0;font-weight:600;font-size:1rem;color:var(--ink,#0E1B36);cursor:pointer}
.ariade-a11y__list input{flex:none;width:22px;height:22px;margin:0;accent-color:#2743d0;cursor:pointer}
.ariade-a11y__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ariade-a11y__btn,.ariade-a11y__statement{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:10px;border:2px solid var(--ink,#0E1B36);background:var(--ink,#0E1B36);color:#fff;font:700 .95rem/1.1 var(--display,"Barlow Semi Condensed",system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.ariade-a11y__btn--outline,.ariade-a11y__statement{background:#fff;color:var(--ink,#0E1B36)}
.ariade-a11y__btn--outline:hover,.ariade-a11y__statement:hover{background:var(--ink,#0E1B36);color:#fff}
.ariade-a11y__btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.ariade-a11y__btn--outline[aria-disabled=true]:hover{background:#fff;color:var(--ink,#0E1B36)}
.ariade-a11y__statement{display:flex;width:100%}
.ariade-a11y :focus-visible{outline:3px solid var(--ink,#0E1B36);outline-offset:2px}
.ariade-a11y__list input:focus-visible{outline-offset:3px}
@media (forced-colors:active){
  .ariade-a11y__panel{border:2px solid CanvasText}
  .ariade-a11y__btn,.ariade-a11y__statement,.ariade-a11y__x{border-color:ButtonText}
}

/* ---------- Dyslexia-friendly font, Larger text, More text spacing, Underline all links ---------- */
html.a11y-dyslexia body,html.a11y-dyslexia :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,select,textarea,label,summary,td,th,blockquote,figcaption){font-family:Verdana,Tahoma,sans-serif!important;letter-spacing:.03em!important;word-spacing:.12em}
html.a11y-dyslexia body{line-height:1.8}
html.a11y-large{font-size:125%}
/* WCAG 1.4.12 text spacing values */
html.a11y-spacing :is(p,li,dd,dt,td,th,label,a,span,button,summary,figcaption,blockquote,h1,h2,h3,h4,h5,h6,input,select,textarea){line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important}
html.a11y-spacing :is(main,footer) p{margin-block-end:2em}
html.a11y-underline a:not(.wp-element-button,.wp-block-button__link,.btn,.icon-btn,.brand,.ariade-a11y__statement){text-decoration:underline!important;text-underline-offset:.18em;text-decoration-thickness:max(1px,.08em)}

/* ---------- Reduce motion ---------- */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* ---------- Reading guide: a clear band at the reading position, everything above and below dimmed ---------- */
.ariade-a11y-guide{position:fixed;inset:0;z-index:2147480000;pointer-events:none}
.ariade-a11y-guide__top,.ariade-a11y-guide__bottom{position:absolute;left:0;right:0;background:rgba(14,27,54,.55)}
.ariade-a11y-guide__top{top:0;border-bottom:3px solid #f2b01e}
.ariade-a11y-guide__bottom{bottom:0;border-top:3px solid #f2b01e}
@media (forced-colors:active){.ariade-a11y-guide__top,.ariade-a11y-guide__bottom{background:Canvas;opacity:.7;border-color:Highlight}}

/* ---------- Show image descriptions ---------- */
.ariade-a11y-alt{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;padding:.35rem .6rem;border-radius:8px;background:rgba(14,27,54,.92);color:#fff;font:600 .82rem/1.35 var(--body-font,Arial),Arial,sans-serif;text-align:left;letter-spacing:normal;word-spacing:normal;pointer-events:none}
@media (forced-colors:active){.ariade-a11y-alt{background:Canvas;color:CanvasText;border:2px solid CanvasText}}

/* ---------- Simple mode: one narrower column, no decoration or moving parts, bigger buttons and text ---------- */
html.a11y-simple main{--wp--style--global--content-size:860px!important;--wp--style--global--wide-size:860px!important;--maxw:860px}
html.a11y-simple [data-ariade-1col]{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}
html.a11y-simple [data-ariade-1col]>*{grid-column:auto!important;grid-row:auto!important}
html.a11y-simple main .wp-block-columns{flex-direction:column!important;flex-wrap:nowrap!important}
html.a11y-simple main .wp-block-columns>.wp-block-column{flex-basis:auto!important;width:100%!important;max-width:100%!important}
html.a11y-simple main ul.products li.product{float:none!important;width:100%!important;margin-right:0!important}
html.a11y-simple :is(.wp-block-cover__video-background,video[autoplay][muted]:not([controls])){display:none!important}
html.a11y-simple main :is(.wp-element-button,.wp-block-button__link,button,input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:48px;font-size:1.05rem}
html.a11y-simple main :is(p,li){font-size:1.08rem;line-height:1.65}
html.a11y-simple *,html.a11y-simple *::before,html.a11y-simple *::after{transition:none!important;animation:none!important}
html.a11y-simple main *:hover{transform:none!important}

/* ---------- High contrast: black text and lines on white, dark bands black with white text, no tints or shadows ----------
   The panel script marks every element with its own background: data-ariade-hc="lt" (light) or "dk" (dark). */
html.a11y-contrast,html.a11y-contrast body{background:#fff!important;color:#000!important}
html.a11y-contrast body :where(*:not(svg *)){color:inherit!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important;border-color:currentColor!important}
html.a11y-contrast body :where(*:not(:focus-visible)){box-shadow:none!important}
html.a11y-contrast [data-ariade-hc=lt]{background:#fff!important;color:#000!important}
html.a11y-contrast [data-ariade-hc=dk]{background:#000!important;color:#fff!important}
html.a11y-contrast [data-ariade-hc=gt]{background:none!important}
html.a11y-contrast a:not(.wp-element-button,.wp-block-button__link,.btn,.icon-btn,.brand,.ariade-a11y__statement){text-decoration:underline!important;text-underline-offset:.18em}
html.a11y-contrast :focus-visible{outline:3px solid currentColor!important;outline-offset:3px!important}
html.a11y-contrast ::placeholder{color:#4a4a4a!important;opacity:1}
html.a11y-contrast .ariade-a11y::backdrop{background:rgba(0,0,0,.75)}
html.a11y-contrast .ariade-a11y-alt{background:#000;color:#fff;border:2px solid #fff}
html.a11y-contrast .ariade-a11y-guide__top,html.a11y-contrast .ariade-a11y-guide__bottom{background:rgba(0,0,0,.7)}

/* ---------- Dark mode: the page is inverted with a filter on <html> (the root element is the one place a filter does
   not move fixed or sticky parts), then photos, videos and large dark bands are turned back, so they show as made.
   Logos and SVG pictures stay inverted: dark artwork on a light header becomes light artwork on a dark header.
   Colour swatches (Ariade's own) also stay as they are, so "Red" still looks red.
   Add the class "ariade-a11y-keep" to any element to show it as designed, or "ariade-a11y-invert" to an image
   to invert it with the page. High contrast, when also on, wins. ---------- */
html.a11y-dark:not(.a11y-contrast){filter:invert(1) hue-rotate(180deg);background:#fff}
html.a11y-dark:not(.a11y-contrast) :is(img,video,iframe,canvas,embed,object):not(.brand-logo,.custom-logo,.wp-block-site-logo img,[src*=".svg"],.ariade-a11y-invert),
html.a11y-dark:not(.a11y-contrast) :is([data-ariade-keep],.ariade-a11y-keep,.ariade-swatch,.ariade-fsw){filter:invert(1) hue-rotate(180deg)}
html.a11y-dark:not(.a11y-contrast) :is([data-ariade-keep],.ariade-a11y-keep,.ariade-swatch,.ariade-fsw) :is(img,video,iframe,canvas,embed,object,[data-ariade-keep],.ariade-a11y-keep,.ariade-swatch,.ariade-fsw){filter:none}
html.a11y-dark:not(.a11y-contrast) body :where(*:not(:focus-visible)){box-shadow:none!important}
html.a11y-dark:not(.a11y-contrast) .ariade-a11y-guide{filter:invert(1) hue-rotate(180deg)}
@media (forced-colors:active){html.a11y-dark{filter:none!important}}
@media print{
  html.a11y-dark{filter:none!important}
  .ariade-a11y-btn,.ariade-a11y-guide,.ariade-a11y-alt{display:none!important}
}