.mc-a11y {
  position: fixed;
  bottom: clamp(16px, 2vw, 28px);
  left: clamp(16px, 2vw, 28px);
  z-index: 9500;
  font-family: var(--mc-font-body);
}

.mc-a11y__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--mc-charcoal);
  border-radius: 100px;
  background: var(--mc-white);
  box-shadow: 3px 3px 0 0 var(--mc-charcoal);
  color: var(--mc-charcoal);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mc-a11y__toggle svg {
  width: 26px;
  height: 26px;
  display: block;
}
.mc-a11y__toggle:hover, .mc-a11y__toggle:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--mc-charcoal);
}
.mc-a11y__toggle:focus-visible {
  outline: 3px solid var(--mc-red);
  outline-offset: 2px;
}

.mc-a11y__panel {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  box-sizing: border-box;
  width: min(392px, 100vw - 32px);
  padding: 20px;
  max-height: min(80vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--mc-charcoal);
  border-radius: 20px;
  background: var(--mc-cream);
  box-shadow: 5px 5px 0 0 var(--mc-charcoal);
  color: var(--mc-charcoal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.mc-a11y.is-open .mc-a11y__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.mc-a11y__title {
  margin: 0 0 4px;
  font-family: var(--mc-font-display);
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}

.mc-a11y__intro {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
  opacity: 0.75;
}

.mc-a11y__group {
  border-top: 1px solid rgba(26, 26, 24, 0.16);
  border-top-color: color-mix(in srgb, var(--mc-charcoal) 18%, transparent);
  margin-top: 14px;
}

.mc-a11y__group-title {
  margin: 12px 0 2px;
  font-family: var(--mc-font-display);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.6;
}

.mc-a11y__group > .mc-a11y__row:first-of-type {
  border-top: 0;
}

.mc-a11y__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(26, 26, 24, 0.16);
  border-top-color: color-mix(in srgb, var(--mc-charcoal) 18%, transparent);
}

.mc-a11y__row--stack {
  display: block;
}

.mc-a11y__label {
  flex: 1;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.mc-a11y__hint {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  opacity: 0.7;
}

.mc-a11y__hint[hidden] {
  display: none;
}

.mc-a11y__control {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 26px;
}

.mc-a11y__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  opacity: 0;
}

.mc-a11y__track {
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid var(--mc-charcoal);
  border-radius: 100px;
  background: var(--mc-white);
  transition: background 0.15s ease;
  pointer-events: none;
}
.mc-a11y__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: var(--mc-charcoal);
  transition: transform 0.15s ease;
}

.mc-a11y__input:checked + .mc-a11y__track {
  background: var(--mc-green);
}
.mc-a11y__input:checked + .mc-a11y__track::after {
  transform: translateX(20px);
}

.mc-a11y__input:focus-visible + .mc-a11y__track {
  outline: 3px solid var(--mc-red);
  outline-offset: 2px;
}

.mc-a11y__input:disabled + .mc-a11y__track {
  opacity: 0.55;
}

.mc-a11y__stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.mc-a11y__step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--mc-charcoal);
  border-radius: 100px;
  background: var(--mc-white);
  color: var(--mc-charcoal);
  font-family: var(--mc-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.mc-a11y__step:hover:not(:disabled) {
  background: var(--mc-charcoal);
  color: var(--mc-cream);
}
.mc-a11y__step:disabled {
  opacity: 0.35;
}

.mc-a11y__value {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mc-a11y__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.mc-a11y__choices > .mc-a11y__choice:first-child {
  grid-column: 1/-1;
}

.mc-a11y__choice {
  padding: 9px 12px;
  border: 1px solid var(--mc-charcoal);
  border-radius: 100px;
  background: var(--mc-white);
  color: var(--mc-charcoal);
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mc-a11y__choice:hover {
  background: var(--mc-cream);
  box-shadow: inset 0 0 0 1px var(--mc-charcoal);
}
.mc-a11y__choice[aria-pressed=true] {
  background: var(--mc-charcoal);
  border-color: var(--mc-charcoal);
  color: var(--mc-cream);
}

.mc-a11y__step:focus-visible,
.mc-a11y__choice:focus-visible,
.mc-a11y__reset:focus-visible {
  outline: 3px solid var(--mc-red);
  outline-offset: 2px;
}

.mc-a11y__reset {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mc-charcoal);
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: underline;
}

@media not all and (hover: hover) and (pointer: fine) {
  .mc-a11y__row--pointer {
    display: none;
  }
}
@media (max-width: 600px) {
  .mc-a11y {
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}
html[data-mc-contrast=more] {
  --mc-green: #1d6b39;
  --mc-burnt-orange: #9c4409;
  --mc-pink: #9c3560;
}

html[data-mc-colors=light] {
  --mc-charcoal: #14140f;
  --mc-cream: #ffffff;
  --mc-white: #ffffff;
  --mc-red: #8f1d17;
  --mc-green: #1d6b39;
  --mc-burnt-orange: #9c4409;
  --mc-pink: #9c3560;
  background: #ffffff;
}
html[data-mc-colors=light] body {
  background: #ffffff;
  color: #14140f;
}

html[data-mc-colors=dark] {
  --mc-charcoal: #f3ede6;
  --mc-cream: #16160f;
  --mc-white: #1f1f1a;
  --mc-red: #ff8b9d;
  --mc-green: #63d886;
  --mc-burnt-orange: #ffa561;
  --mc-pink: #ff9cc4;
  --mc-mustard: #ffc94d;
  color-scheme: dark;
  background: #16160f;
}
html[data-mc-colors=dark] body {
  background: #16160f;
  color: #f3ede6;
}

html[data-mc-colors=high] {
  --mc-charcoal: #ffffff;
  --mc-cream: #000000;
  --mc-white: #000000;
  --mc-red: #ff8fa3;
  --mc-green: #6ee787;
  --mc-burnt-orange: #ffb26b;
  --mc-pink: #ffa6cf;
  --mc-mustard: #ffd34d;
  color-scheme: dark;
  background: #000000;
}
html[data-mc-colors=high] body {
  background: #000000;
  color: #ffffff;
}

html[data-mc-colors=dark] :is([class*="--bg-mustard"]) {
  --mc-charcoal: #16160f;
}

html[data-mc-colors=high] :is([class*="--bg-mustard"]) {
  --mc-charcoal: #16160f;
}

html[data-mc-colors=mono] body > *:not(.mc-a11y):not(.mc-a11y-guide) {
  filter: grayscale(100%);
}

html[data-mc-zoom] body > *:not(.mc-a11y):not(.mc-a11y-guide) {
  zoom: var(--mc-a11y-zoom, 1);
}

html[data-mc-text] body {
  overflow-wrap: break-word;
}

html[data-mc-align=left] body > *:not(.mc-a11y):not(.mc-a11y-guide), html[data-mc-align=left] body > *:not(.mc-a11y):not(.mc-a11y-guide) :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dt, dd, td, th, address) {
  text-align: left !important;
}

html[data-mc-align=center] body > *:not(.mc-a11y):not(.mc-a11y-guide), html[data-mc-align=center] body > *:not(.mc-a11y):not(.mc-a11y-guide) :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dt, dd, td, th, address) {
  text-align: center !important;
}

html[data-mc-align=right] body > *:not(.mc-a11y):not(.mc-a11y-guide), html[data-mc-align=right] body > *:not(.mc-a11y):not(.mc-a11y-guide) :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dt, dd, td, th, address) {
  text-align: right !important;
}

html[data-mc-align=justify] body > *:not(.mc-a11y):not(.mc-a11y-guide), html[data-mc-align=justify] body > *:not(.mc-a11y):not(.mc-a11y-guide) :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dt, dd, td, th, address) {
  text-align: justify !important;
}

html[data-mc-images=hide] body > *:not(.mc-a11y):not(.mc-a11y-guide) img,
html[data-mc-images=hide] body > *:not(.mc-a11y):not(.mc-a11y-guide) picture,
html[data-mc-images=hide] body > *:not(.mc-a11y):not(.mc-a11y-guide) .wp-block-cover__image-background {
  display: none !important;
}
html[data-mc-images=hide] body > *:not(.mc-a11y):not(.mc-a11y-guide)[style*=background-image],
html[data-mc-images=hide] body > *:not(.mc-a11y):not(.mc-a11y-guide) [style*=background-image] {
  background-image: none !important;
}

.mc-a11y-guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  margin-top: -22px;
  z-index: 8900;
  display: none;
  pointer-events: none;
  border-top: 2px solid var(--mc-charcoal);
  border-bottom: 2px solid var(--mc-charcoal);
  background: rgba(245, 163, 0, 0.18);
  will-change: transform;
}

html[data-mc-guide=on] .mc-a11y-guide {
  display: block;
}

@media not all and (hover: hover) and (pointer: fine) {
  .mc-a11y-guide {
    display: none !important;
  }
}
html[data-mc-focus=always] :focus {
  outline: 3px solid var(--mc-charcoal) !important;
  outline-offset: 3px !important;
}

html[data-mc-links=underline] a[href]:not(.mc-btn):not(:has(img, picture, svg)) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

html[data-mc-motion=reduce] {
  scroll-behavior: auto !important;
}
html[data-mc-motion=reduce],
html[data-mc-motion=reduce] *,
html[data-mc-motion=reduce] *::before,
html[data-mc-motion=reduce] *::after {
  animation-delay: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-delay: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
html[data-mc-motion=reduce] .mc-a11y__panel {
  transition: none !important;
}
