/* Supplemental preferences; baseline fixes apply with every preference off. */
:root { --a11y-text-scale: 1; }
html[data-a11y-text="small"] { --a11y-text-scale: .9375; }
html[data-a11y-text="large"] { --a11y-text-scale: 1.1875; }
html[data-a11y-text] { font-size: calc(100% * var(--a11y-text-scale)); }

.accessibility-widget {
  --a11y-safe-bottom: env(safe-area-inset-bottom, 0px);
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  color: #12313a;
  font-size: 1rem;
}
.accessibility-widget button { font: inherit; cursor: pointer; touch-action: manipulation; }
.accessibility-launcher {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 8px;
  color: #fbf7ef;
  background: #123e38;
  border: 2px solid #c9a85d;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgb(18 49 58 / 18%);
}
.accessibility-launcher svg { width: 28px; height: 28px; }
.accessibility-launcher:hover { background: #0d5f50; }
.accessibility-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: var(--a11y-panel-height, calc(100dvh - 100px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 16px;
  border: 1px solid #b49a62;
  border-top: 3px solid #c9a85d;
  border-radius: 12px;
  background: #fbf7ef;
  box-shadow: 0 12px 40px rgb(18 49 58 / 18%);
}
.accessibility-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.accessibility-header h2 { margin: 0; font-size: 1.125rem; line-height: 1.4; color: #123e38; letter-spacing: normal; }
.accessibility-close { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #123e38; }
.accessibility-close svg { width: 20px; height: 20px; }
.accessibility-panel p { color: #415750; font-size: .8125rem; line-height: 1.5; margin: 0 0 12px; }
.accessibility-text-size { min-width: 0; border: 0; margin-bottom: 12px; }
.accessibility-text-size legend { font-size: .8125rem; font-weight: 700; margin-bottom: 6px; }
.accessibility-text-size > div { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 6px; }
.accessibility-text-size button { padding: 6px; min-height: 44px; min-width: 0; border: 1px solid #7e9087; background: #fffdf8; color: #12313a; font-size: .875rem; font-weight: 700; border-radius: 6px; }
.accessibility-text-size button[aria-pressed="true"] { border: 2px solid #123e38; background: #123e38; color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.accessibility-options { display: grid; gap: 4px; }
.accessibility-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #7e9087; border-radius: 6px; background: #fffdf8; color: #12313a; text-align: left; font-size: .875rem !important; line-height: 1.4; }
.accessibility-option[aria-pressed="true"] { background: #e5eee5; border-color: #0d5f50; }
.accessibility-state { flex-shrink: 0; color: #415750; font-size: .75rem; font-weight: 700; }
.accessibility-option[aria-pressed="true"] .accessibility-state { color: #0d5f50; }
.accessibility-panel .accessibility-motion-note { margin: 8px 0 0; font-size: .75rem; }
.accessibility-reset { display: block; width: 100%; min-height: 44px; margin-top: 12px; padding: 8px; border: 1px solid #7e9087; border-radius: 6px; color: #123e38; background: transparent; font-size: .8125rem !important; font-weight: 700 !important; }
.accessibility-panel button:hover { box-shadow: inset 0 0 0 1px #0d5f50; }
.accessibility-panel :is(button, fieldset) { scroll-margin-block: 12px; }

/* Keep enlargement responsive, including desktop navigation and fixed-size cards. */
html[data-a11y-text="large"] .nav { height: auto; min-height: 62px; flex-wrap: wrap; }
html[data-a11y-text="large"] .navlinks { gap: 1rem; }
html[data-a11y-text="large"] .nav-dropdown-item > a { height: auto; min-height: 44px; }
html[data-a11y-text="large"] :is(.contact-booking-btn, .care-plan-button) { height: auto; min-height: 48px; }
html[data-a11y-text="large"] .contact-details-list :is(p, a) { white-space: normal; }
@media (min-width: 768px) {
  html[data-a11y-text="large"] .nav { min-height: 96px; padding-block: 8px; gap: 8px; }
  html[data-a11y-text="large"] .navlinks { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

html.a11y-links a[href] { text-decoration: underline !important; text-underline-offset: .2em; }
html.a11y-focus body :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 4px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px #12313a, 0 0 0 11px #c9a85d !important;
}
html.a11y-spacing :is(main, .footer) :is(p, li, dd) { line-height: 1.85 !important; letter-spacing: .025em !important; word-spacing: .06em; }
html.a11y-spacing :is(main, .footer) p { margin-bottom: 1.5em !important; }
html.a11y-spacing .navlinks { letter-spacing: .02em; }

/* Grayscale is scoped away from body/html so fixed controls keep their viewport anchor. */
html.a11y-grayscale .float-call, html.a11y-grayscale body > :is(header, main, footer, .topbar, .service-booking-cta) { filter: grayscale(1); }

html.a11y-contrast {
  --color-dark: #102c35;
  --color-muted: #334d55;
  --color-primary-dark: #644509;
  --color-secondary: #064f40;
  --color-secondary-dark: #064f40;
  --color-border: #60766c;
}
html.a11y-contrast body { background: #fffdf8; color: #102c35; }
html.a11y-contrast main :is(section, article, .cta-box, .legal-card, .contact-card, .care-plan-card, .hormone-card-panel) { background-color: #fffdf8 !important; background-image: none !important; border-color: #60766c !important; }
html.a11y-contrast main :is(h1, h2, h3, h4, p, li, small, strong, span, a:not(.btn)) { color: #102c35 !important; }
html.a11y-contrast main :is(h2, h3) { color: #064f40 !important; }
html.a11y-contrast .hero-copy { background: #fffdf8; border-radius: 8px; padding: 1rem; }
html.a11y-contrast :is(.btn, .contact-booking-btn, .blog-filter, .hormone-copy-button) { color: #102c35 !important; background: #f3d48a !important; border: 2px solid #644509 !important; }
html.a11y-contrast :is(.btn, .contact-booking-btn, .blog-filter, .hormone-copy-button):is(:hover, :focus-visible) { background: #fff4d8 !important; text-decoration: underline; }
html.a11y-contrast .blog-filter[aria-pressed="true"] { background: #102c35 !important; color: #fff !important; text-decoration: underline; }
html.a11y-contrast .footer { background: #102c35; }
html.a11y-contrast .footer :is(p, a, h3, small, span) { color: #fff !important; }
html.a11y-contrast :is(.navlinks, .nav-dropdown-menu, .nav-submenu, .service-booking-cta) { background: #fffdf8; border-color: #60766c; }
html.a11y-contrast .accessibility-panel { border-color: #12313a; }

/* System motion preference always wins, including after Reset. */
html.a11y-motion, html.a11y-motion * { scroll-behavior: auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation: none !important; transition: none !important;
}
html.a11y-motion :is(.btn, .service-card, .review-card, .laser-hub-card):is(:hover, :focus-visible) { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html, html * { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is(.btn, .service-card, .review-card, .laser-hub-card):is(:hover, :focus-visible) { transform: none !important; }
}
@media (forced-colors: active) {
  .accessibility-launcher, .accessibility-panel, .accessibility-panel button { border: 2px solid ButtonText; }
  .accessibility-panel [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  body :is(a, button, summary):focus-visible { outline: 3px solid Highlight !important; }
}

.accessibility-widget--short { right: max(16px, env(safe-area-inset-right, 0px)); left: auto; }
html:has(.accessibility-widget--short) .float-call { right: calc(76px + env(safe-area-inset-right, 0px)); }
.accessibility-widget--short .accessibility-panel {
  position: fixed;
  top: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  right: auto;
  left: max(16px, env(safe-area-inset-left, 0px));
  width: min(320px, calc(100vw - 100px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: none;
  padding: 8px 12px;
}
html.a11y-motion main :is(a, button, article):hover { transform: none !important; }
html.a11y-motion .service-card:is(:hover, :focus-visible) img,
html.a11y-motion .hormone-card:not(.is-open) .hormone-card-chevron { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  main :is(a, button, article):hover,
  .service-card:is(:hover, :focus-visible) img,
  .hormone-card:not(.is-open) .hormone-card-chevron { transform: none !important; }
}