/* Joomla's accessibility button and panel (System - Additional Accessibility Features), in the
   site's colours. The library writes the button's colour and position inline, hence !important there;
   it injects its own stylesheet after this one, so the rest outranks it with a leading body. */

/* Mirrors the theme's WhatsApp button in the other corner: same size, offset, shadow and stacking,
   so the cookie bar sits over both alike. */
._access-icon {
  background-color: var(--dc-brand) !important;
  color: var(--dc-on-brand) !important;
  border: 0 !important;
  border-radius: 50% !important;
  inline-size: 56px !important;
  block-size: 56px !important;
  line-height: 56px !important;
  font-size: 32px !important;
  text-align: center;
  inset-inline-start: 1.25rem !important;
  bottom: 1.25rem !important;
  z-index: 1040 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

._access-icon:hover {
  background-color: var(--dc-brand-hover) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}

._access-icon:focus-visible {
  outline: 3px solid var(--dc-focus);
  outline-offset: 3px;
}

body ._access-menu {
  font-family: var(--dc-font-body) !important;
  background-color: var(--dc-body-bg);
  color: var(--dc-ink);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

body ._access-menu h3 {
  font-family: var(--dc-font-display) !important;
  font-size: var(--dc-step-2) !important;
  color: var(--dc-ink);
}

body ._access-menu ._menu-reset-btn { color: var(--dc-brand-text); }

body ._access-menu ul li {
  border-color: var(--dc-border);
  color: var(--dc-ink);
}

body ._access-menu ul li:hover {
  background-color: var(--dc-surface);
  color: var(--dc-ink);
}

body ._access-menu ul li:hover:before { color: var(--dc-brand-text); }

body ._access-menu ul li svg path,
body ._access-menu ul li:hover svg path { fill: var(--dc-brand-text); }

body ._access-menu ul li.active,
body ._access-menu ul li.active:hover {
  background-color: var(--dc-brand);
  color: var(--dc-on-brand);
}

body ._access-menu ul li.active:before { color: var(--dc-on-brand); }
body ._access-menu ul li.active svg path { fill: var(--dc-on-brand); }