/* Site-wide floating contact button (site-gaps 22). One enabled channel is a
   direct link; several are a no-JS <details> menu that opens upward. Theme
   variables only. It moves up when another fixed element holds the corner. */
.ck-contact-fab {
  --ck-contact-fab-bottom: 1rem;
  position: fixed;
  inset-inline-end: 1rem;
  bottom: calc(var(--ck-contact-fab-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 1035;
  max-width: calc(100vw - 2rem);
}

.ck-contact-fab__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--color-primary, var(--primary-color, #0d6efd));
  color: var(--text-inverse, var(--text-on-primary, #fff));
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ck-contact-fab__btn:hover {
  color: var(--text-inverse, var(--text-on-primary, #fff));
  filter: brightness(1.08);
  text-decoration: none;
}

.ck-contact-fab__btn:focus-visible {
  outline: 3px solid var(--text-primary, #212529);
  outline-offset: 2px;
}

.ck-contact-fab__menu {
  position: relative;
}

.ck-contact-fab__menu > summary {
  list-style: none;
}

.ck-contact-fab__menu > summary::-webkit-details-marker {
  display: none;
}

.ck-contact-fab__list {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: calc(100vw - 2rem);
}

.ck-contact-fab__list .ck-contact-fab__btn {
  white-space: nowrap;
}

/* The floating accessibility button (site-gaps 67, row 473) lives in this
   corner on every public page, so the FAB stacks above its 1rem slot. */
body:has(.accessibility-panel) .ck-contact-fab {
  --ck-contact-fab-bottom: 4.75rem;
}

/* Another fixed element holds the corner BELOW the a11y button (which stacks
   at 4.75rem there too): the FAB clears both. */
body:has(.ck-post-toc-region--floating-right) .ck-contact-fab,
body:has(.landing-edit-button) .ck-contact-fab {
  --ck-contact-fab-bottom: 7.5rem;
}

@media (max-width: 991.98px) {
  body:has(.ck-post-toc-ready) .ck-contact-fab {
    --ck-contact-fab-bottom: 7.5rem;
  }
}

/* Authenticated editors: the editor action bar stacks several buttons there
   (the a11y button sits at 10.5rem under the FAB). */
body:has(.editor-action-bar) .ck-contact-fab {
  --ck-contact-fab-bottom: 14rem;
}

@media print {
  .ck-contact-fab {
    display: none;
  }
}