/* =========================================================
   Accessibility Widget - Hindi
   Add this file after your main website CSS.
   ========================================================= */

:root{
  --a11y-primary:#27177d;
  --a11y-border:#cfcfd5;
  --a11y-panel-bg:#ffffff;
  --a11y-text:#242424;
  --a11y-shadow:0 5px 18px rgba(0,0,0,.24);
}

/* Root is intentionally isolated from page accessibility effects */
#a11y-root,
#a11y-root *{
  box-sizing:border-box;
}

#a11y-root{
  position:fixed;
  top:18px;
  right:24px;
  z-index:999999;
  font-family:"Noto Sans Devanagari","Mangal","Nirmala UI",Arial,sans-serif;
  font-size:14px;
  line-height:1.35;
  color:var(--a11y-text);
}

/* Small toolbar button */
.a11y-trigger{
  width:40px;
  height:36px;
  border:0;
  border-left:1px solid #ddd;
  background:#f4f1ff;
  color:var(--a11y-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:2px;
}
.a11y-trigger:hover,
.a11y-trigger:focus-visible{
  background:#e9e3ff;
  outline:2px solid var(--a11y-primary);
  outline-offset:2px;
}
.a11y-trigger svg{
  width:26px;
  height:26px;
}

/* Popup */
.a11y-panel{
  position:absolute;
  top:42px;
  right:0;
  width:442px;
  max-width:calc(100vw - 20px);
  max-height:calc(100vh - 75px);
  overflow:auto;
  padding:13px 14px 15px;
  background:var(--a11y-panel-bg);
  border:1px solid #d5d5d5;
  border-radius:7px;
  box-shadow:var(--a11y-shadow);
}
.a11y-panel[hidden]{
  display:none !important;
}

.a11y-title{
  margin:0 0 8px;
  text-align:center;
  font-size:17px;
  font-weight:500;
  color:#4a3c39;
}

.a11y-reset{
  position:absolute;
  right:22px;
  top:7px;
  height:28px;
  padding:2px 9px;
  background:#fff;
  border:1px solid #555;
  color:#333;
  font:inherit;
  cursor:pointer;
}
.a11y-reset:hover{
  background:#f5f5f5;
}

.a11y-section-title{
  margin:12px 1px 6px;
  font-size:14px;
  font-weight:500;
  color:#3d3432;
}

.a11y-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.a11y-grid.two{
  grid-template-columns:repeat(3, 1fr);
}

.a11y-option{
  position:relative;
  min-height:82px;
  padding:11px 7px 8px;
  border:1px solid var(--a11y-border);
  border-radius:7px;
  background:#fff;
  color:var(--a11y-text);
  cursor:pointer;
  text-align:center;
  font-family:inherit;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.a11y-option:hover,
.a11y-option:focus-visible{
  border-color:#8377b8;
  background:#faf9ff;
  outline:none;
  box-shadow:0 0 0 2px rgba(39,23,125,.10);
}
.a11y-option.is-active{
  border-color:#8070c8;
  background:#f8f6ff;
}
.a11y-option.is-active::after{
  content:"✓";
  position:absolute;
  top:-3px;
  right:-3px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#069b25;
  color:white;
  font-size:12px;
  font-weight:700;
}

.a11y-icon{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--a11y-primary);
  font-size:29px;
  font-weight:500;
  line-height:1;
  margin-bottom:3px;
}
.a11y-icon svg{
  width:30px;
  height:30px;
  stroke:currentColor;
}
.a11y-label{
  display:block;
  font-size:13px;
  line-height:1.25;
  color:#212121;
}

/* Mobile */
@media (max-width:520px){
  #a11y-root{
    right:10px;
  }
  .a11y-panel{
    width:min(442px, calc(100vw - 20px));
    right:0;
  }
  .a11y-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* =========================================================
   Accessibility effects applied to the WEBSITE ONLY.
   If you already have a wrapper, use id="site-content".
   ========================================================= */

#site-content{
  --a11y-contrast:1;
  --a11y-gray:0;
  --a11y-invert:0;
  --a11y-saturate:1;
  --a11y-letter:normal;
  --a11y-line:normal;
  filter:
    contrast(var(--a11y-contrast))
    grayscale(var(--a11y-gray))
    invert(var(--a11y-invert))
    saturate(var(--a11y-saturate));
  letter-spacing:var(--a11y-letter);
  line-height:var(--a11y-line);
}

/* High contrast */
#site-content.a11y-high-contrast{
  --a11y-contrast:1.65;
}

/* Normal / soft contrast */
#site-content.a11y-normal-contrast{
  --a11y-contrast:.82;
}

/* Invert */
#site-content.a11y-invert{
  --a11y-invert:1;
}

/* Saturation */
#site-content.a11y-saturate{
  --a11y-saturate:1.8;
}

/* Highlight links */
#site-content.a11y-highlight-links a{
  background:#ffef43 !important;
  color:#000 !important;
  text-decoration:underline !important;
  outline:2px solid #000 !important;
  outline-offset:2px;
}

/* Letter spacing */
#site-content.a11y-letter-spacing,
#site-content.a11y-letter-spacing *{
  letter-spacing:.08em !important;
}

/* Line height */
#site-content.a11y-line-height,
#site-content.a11y-line-height *{
  line-height:1.8 !important;
}

/* Hide images */
#site-content.a11y-hide-images img,
#site-content.a11y-hide-images picture,
#site-content.a11y-hide-images svg:not(.keep-visible),
#site-content.a11y-hide-images video{
  visibility:hidden !important;
}

/* Bigger cursor (inline SVG so no extra image file is required) */
#site-content.a11y-big-cursor,
#site-content.a11y-big-cursor *{
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M4 2 L4 34 L12 27 L18 40 L24 37 L18 25 L29 24 Z' fill='white' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E")
    4 2, auto !important;
}

/* Font scaling class names are set by JS */
#site-content.a11y-font-up{
  font-size:112.5%;
}
#site-content.a11y-font-down{
  font-size:87.5%;
}

/* Helps common text elements even on sites using px sizes */
#site-content.a11y-font-up p,
#site-content.a11y-font-up li,
#site-content.a11y-font-up a,
#site-content.a11y-font-up span,
#site-content.a11y-font-up label,
#site-content.a11y-font-up input,
#site-content.a11y-font-up select,
#site-content.a11y-font-up textarea,
#site-content.a11y-font-up button{
  font-size:1.125em;
}
#site-content.a11y-font-down p,
#site-content.a11y-font-down li,
#site-content.a11y-font-down a,
#site-content.a11y-font-down span,
#site-content.a11y-font-down label,
#site-content.a11y-font-down input,
#site-content.a11y-font-down select,
#site-content.a11y-font-down textarea,
#site-content.a11y-font-down button{
  font-size:.90em;
}