/* BEX — placement and theming for the accessibility toolbar (Accessibility.js).

   The library ships almost no styling of its own, so the site's Elementor kit
   wins: `.elementor-kit-11 button { color: #FFF }` painted every label white on
   a white panel, leaving the menu unreadable. Everything below is scoped to the
   widget and carries !important for that reason.

   The panel is pinned under the icon at the top left, clear of the WhatsApp
   button and the cookie banner in the bottom right. */

/* ---------- the launcher ---------- */
body{
  --_access-icon-top: 20px;
  --_access-icon-left: 20px;
  --_access-icon-right: auto;
  --_access-icon-bottom: auto;
  --_access-icon-bg: #2b00db;
  --_access-icon-color: #ffffff;
  --_access-icon-z-index: 9998;
  --_access-icon-width: 48px;
  --_access-icon-height: 48px;
  --_access-icon-border-radius: 8px;
}
._access-icon{ box-shadow:0 2px 10px rgba(0,0,0,.25) !important }
._access-icon:hover{ background:#1a0090 !important }
._access-icon:focus-visible{ outline:3px solid #F7CB51 !important; outline-offset:3px !important }

/* ---------- the panel ---------- */
._access-menu{
  top:80px !important; left:20px !important; right:auto !important;
  width:300px !important; max-width:calc(100vw - 40px) !important;
  max-height:calc(100vh - 100px) !important; overflow-y:auto !important;
  direction:rtl !important; text-align:right !important;
  background:#ffffff !important;
  border:1px solid #d9d9e3 !important; border-radius:10px !important;
  box-shadow:0 8px 28px rgba(0,0,0,.18) !important;
  font-family:"Heebo",Arial,sans-serif !important;
  z-index:9999 !important;
}

/* header: title between the close and reset controls */
._access-menu ._menu-header,
._access-menu > header,
._access-menu h3{
  color:#000A60 !important; font-family:"Heebo",Arial,sans-serif !important;
  font-size:18px !important; font-weight:700 !important;
}
._access-menu ._menu-btn{
  background:none !important; border:0 !important; color:#000A60 !important;
  cursor:pointer !important; padding:6px !important; border-radius:6px !important;
}
._access-menu ._menu-btn:hover{ background:#f0f0f5 !important }
._access-menu ._menu-btn:focus-visible{ outline:3px solid #F7CB51 !important; outline-offset:2px !important }

/* ---------- the options ---------- */
._access-menu ul{ margin:0 !important; padding:6px !important; list-style:none !important }
._access-menu ul li{ margin:0 !important; padding:0 !important; background:none !important }

/* the site's kit paints every <button> white — undo it here */
._access-menu ul li button,
.elementor-kit-11 ._access-menu ul li button{
  display:flex !important; align-items:center !important; gap:10px !important;
  width:100% !important; box-sizing:border-box !important;
  padding:11px 12px !important; margin:2px 0 !important;
  background:transparent !important;
  color:#1A1A1A !important;                 /* 16.1:1 on white */
  font-family:"Heebo",Arial,sans-serif !important;
  font-size:16px !important; font-weight:400 !important; line-height:1.4 !important;
  text-align:right !important; direction:rtl !important;
  border:0 !important; border-radius:8px !important;
  cursor:pointer !important; opacity:1 !important;
  text-decoration:none !important; text-transform:none !important;
  letter-spacing:normal !important; box-shadow:none !important;
}
._access-menu ul li button:hover,
.elementor-kit-11 ._access-menu ul li button:hover{
  background:#f0f0f5 !important; color:#000A60 !important;
}
._access-menu ul li button:focus-visible{
  outline:3px solid #F7CB51 !important; outline-offset:-2px !important;
}
/* an option that is currently on */
._access-menu ul li button[aria-pressed="true"],
.elementor-kit-11 ._access-menu ul li button[aria-pressed="true"]{
  background:#000A60 !important; color:#ffffff !important; font-weight:600 !important;
}

/* the icon glyphs are decoration; keep them from being read or resized */
._access-menu .material-icons{
  font-size:20px !important; line-height:1 !important; flex:0 0 auto !important;
  color:inherit !important;
}

/* ---------- small screens ---------- */
@media (max-width:767px){
  body{ --_access-icon-top:12px; --_access-icon-left:12px;
        --_access-icon-width:44px; --_access-icon-height:44px }
  ._access-menu{
    top:66px !important; left:12px !important;
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 86px) !important;
  }
  ._access-menu ul li button{ padding:13px 12px !important; font-size:17px !important }
}

/* the reading guide must sit above the page but below the panel and launcher */
#access_read_guide_bar{ z-index:9997 !important }

/* ---------- opening and closing ---------- */
/* The library owns showing and hiding the panel. Overriding visibility and
   opacity here only fought its own transition and left the panel unfocusable
   once open, so nothing below touches either. The real problem that was trying
   to solve — a dozen invisible controls sitting in the tab order while the
   panel is shut — is handled in init.js with inert. Only the launcher animates. */
._access-icon{ transition: background-color .15s ease, transform .15s ease }
._access-icon:hover{ transform: scale(1.06) }

@media (prefers-reduced-motion: reduce){
  ._access-icon{ transition:none !important }
  ._access-icon:hover{ transform:none }
}
body._access-animations-off ._access-icon{ transition:none !important }

/* ---------- comfortable reading ----------
   Applied only while the visitor has asked for it. The first step of each is
   the value WCAG 1.4.12 (Text Spacing) asks a page to survive: line height 1.5
   and letter spacing 0.12em. Neither can go below the site's own setting, so
   the text can never end up tighter than it started. */
#content[data-a11y-line="1"],
#content[data-a11y-line="1"] p,
#content[data-a11y-line="1"] li,
#content[data-a11y-line="1"] h1,
#content[data-a11y-line="1"] h2,
#content[data-a11y-line="1"] h3,
#content[data-a11y-line="1"] h4,
#content[data-a11y-line="1"] h5,
#content[data-a11y-line="1"] h6,
#content[data-a11y-line="1"] span,
#content[data-a11y-line="1"] a,
#content[data-a11y-line="1"] div{
  line-height: var(--bex-a11y-line) !important;
}
#content[data-a11y-space="1"],
#content[data-a11y-space="1"] p,
#content[data-a11y-space="1"] li,
#content[data-a11y-space="1"] h1,
#content[data-a11y-space="1"] h2,
#content[data-a11y-space="1"] h3,
#content[data-a11y-space="1"] h4,
#content[data-a11y-space="1"] span,
#content[data-a11y-space="1"] a{
  letter-spacing: var(--bex-a11y-space) !important;
}