/* Dr. Yakir Clinic - site-a11y.css: accessibility fixes over the original design (IS 5568 / WCAG 2.1 AA).
   Loaded on every page after style.css and the native adaptation CSS. Colour changes are the smallest that
   reach the required contrast; everything else keeps the original look. No child combinators here
   (build/native.py remaps those from css/site-*.css into css/native.css). */

/* ---------- Text only for screen readers (link context added by js/site-a11y.js) ---------- */
.dyk-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Focus ring: 3:1 against the background it is drawn on ----------
   The original glow ring (#57c4ff) is right on the dark sections; on light ones js/site-a11y.js marks the
   focused element .dyk-fl and the ring turns brand blue (6.2:1 on white). */
:focus-visible.dyk-fl { outline-color: var(--brand, #05669e) !important; }

/* FAQ questions (nested accordion): the item clips anything outside, so the ring is drawn inside */
body .dyk-faq .e-n-accordion-item .e-n-accordion-item-title:focus-visible {
  outline: 3px solid var(--brand, #05669e) !important;
  outline-offset: -3px;
  border-radius: var(--radius-sm, 14px);
}
body .dyk-faq .e-n-accordion-item .e-n-accordion-item-title:focus:not(:focus-visible) { outline: none; }

/* testimonials carousel: arrows, dots and the pause button sit on the light section */
body .dyk-testi .elementor-swiper-button:focus-visible,
body .dyk-testi .swiper-pagination-bullet:focus-visible,
body .dyk-testi .dyk-testi-pause:focus-visible { outline: 3px solid var(--brand, #05669e); outline-offset: 3px; }

/* Elementor lightbox (dark): its buttons get the original glow ring */
body .elementor-lightbox .dialog-lightbox-close-button:focus-visible,
body .elementor-lightbox .elementor-swiper-button:focus-visible { outline: 3px solid var(--brand-glow, #57c4ff); outline-offset: 3px; }

/* ---------- Heading levels changed for a correct outline, same look as the original level ---------- */
/* footer column titles: h4 -> h2 (style.css .site-footer h4). The colour follows the theme's text-on-section
   token (near-white on the dark design, ink on the light theme); css/site-theme.css may set it exactly. */
.site-footer h2 { color: var(--text-inverse, #fff); font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; margin-bottom: 16px; }
/* article call to action: h3 -> h2 (style.css .article-cta h3), without the article body's h2 bar */
.article-cta h2,
.article-content .article-cta h2 { color: var(--text-inverse, #fff); font-size: 1.5rem; margin: 0 0 .5em; padding: 0; border: 0; }

/* ---------- Colour contrast ---------- */
/* white text on the blue gradient: its light end (#2e9fd8, 2.97:1) is darkened to #1a7bb6 (4.6:1) */
body .btn-primary,
body .step-num,
body .elementor-gallery-title.elementor-item-active,
body .gfilter[aria-pressed="true"],
body .page-numbers.current,
body .dyk-mag-pill[aria-current="page"] { --brand-light: #1a7bb6; }

/* the shimmer sweep over the blue buttons lightened the area under their white text to about 3:1 as it
   passed; the blue buttons keep a still gradient (the gold ones keep the sweep: it raises their dark text's contrast) */
body .btn-primary::after,
body .dyk-hdr .header-cta .elementor-widget-button .elementor-button::after { animation: none; opacity: 0; }

/* gold text on white: #a87f2f (3.7:1) to #8a6a2a (5:1) */
body .doctor-card .doc-title,
body .doctor-card .doc-title .elementor-heading-title,
body .dyk-tr-doc span { color: #8a6a2a; }

/* star ratings are images with a name (role=img): graphics need 3:1, the light gold had 2.35:1 */
body .testi-card .stars,
body .testi-card .stars .elementor-heading-title { color: #a87f2f; }

/* the home "about" section carries .on-dark but has the light background: its kicker was glow on white (1.95:1) */
body .section.why.on-dark .section-kicker,
body .section.why.on-dark .section-kicker .elementor-heading-title { color: var(--brand, #05669e); }

/* article category pills over the cover photos: a darker glass so white text reads on any photo */
body .mag-tag { background: rgba(7, 21, 34, .62); }

/* ---------- Testimonials: pause / play the automatic rotation (js/native-components.js) ---------- */
body .dyk-testi .dyk-testi-pause {
  order: 4;
  flex: none;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  margin-inline-start: 4px;
  padding: 0;
  border: 1px solid #d4e2ee;
  border-radius: 50%;
  background: var(--white, #fff);
  color: var(--brand, #05669e);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft, none);
  transition: background var(--transition, .35s ease);
}
body .dyk-testi .dyk-testi-pause:hover { background: #f0f7fc; color: var(--brand, #05669e); }
body .dyk-testi .dyk-testi-pause svg { width: 14px; height: 14px; display: block; fill: currentColor; }
body .dyk-testi .dyk-testi-pause .dyk-play,
body .dyk-testi .dyk-testi-pause[aria-pressed="true"] .dyk-pause { display: none; }
body .dyk-testi .dyk-testi-pause[aria-pressed="true"] .dyk-play { display: block; }

/* the marquee also stops while a keyboard user is inside its section */
body .marquee:focus-within .marquee-track { animation-play-state: paused; }

/* ---------- Windows high contrast: keep the custom controls visible ---------- */
@media (forced-colors: active) {
  .dyk-testi .dyk-testi-pause, .dyk-testi .elementor-swiper-button { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight !important; }
}