/* accessibility.css — site-wide accessibility helpers */

/* 1) Screen reader utilities + skip link */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;padding:.5rem 1rem;background:#fff;border:2px solid #000;z-index:10000}

/* 2) Clear, theme-neutral focus indicator */
:focus-visible{outline:2px solid #1c6ed7;outline-offset:2px}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{border-radius:4px}

/* 3) Minimum hit area (won’t affect layout if inline-block) */
a.button, button, .btn, [role="button"]{min-height:44px;min-width:44px}

/* 4) Contrast helpers (opt-in for hero/image text) */
.has-contrast-overlay{position:relative}
.has-contrast-overlay::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.33);pointer-events:none}
.has-contrast-overlay > .overlay-content{position:relative}
.overlay-on-image{background:rgba(0,0,0,.45);color:#fff;padding:.5rem .75rem;border-radius:.375rem}

/* 5) Forms: labels, errors, focus */
input, select, textarea{border:1px solid #888}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid #1c6ed7;outline-offset:2px}
.form-error{color:#b00020}
.form-hint{display:block;font-size:.9em;color:#555}

/* 6) Navigation helpers */
[hidden]{display:none !important}

/* 7) Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* 8) High contrast mode tweaks (Windows/forced-colors) */
@media (forced-colors: active){
  :focus-visible{outline:2px solid CanvasText}
  .overlay-on-image{background:transparent}
}

/* Keep Services menu link visually identical to your theme */
.services-toggle[role="button"] {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* Respect your existing hover/active styles; only ensure visible keyboard focus */
.services-toggle[role="button"]:focus-visible {
  outline: 2px solid #1c6ed7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Paragraph rhythm in main content */
main p { 
  margin: 0 0 1rem;           /* bottom space */
  line-height: 1.6;           /* better readability */
}

/* Extra safety: if consecutive paragraphs, give a bit more air */
main p + p { 
  margin-top: 0.25rem; 
}

/* Specific sections on this page */
.webdesign-page .caption p,
.process-section .process-block p {
  margin-bottom: 1rem;
}

/* === Carousel dots (restore old look) === */
.owl-carousel .owl-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

.owl-carousel .owl-dot {
  /* bigger hit area for touch + keyboard focus */
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.owl-carousel .owl-dot span {
  width: 18px;                /* dot size */
  height: 18px;
  background: #ffffff;        /* high contrast on dark bg */
  border-radius: 6px;         /* rounded square (inactive) */
  opacity: 0.55;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: border-radius .2s ease, opacity .2s ease, transform .2s ease;
}

/* Active = circle */
.owl-carousel .owl-dot.active span {
  border-radius: 50%;
  opacity: 1;
  transform: scale(1.05);
}

/* Hover/focus states for a11y */
.owl-carousel .owl-dot:focus-visible span,
.owl-carousel .owl-dot:hover span {
  opacity: 0.85;
}

.owl-carousel .owl-dot:focus-visible {
  outline: 3px solid #f5a425;   /* brand-ish focus ring */
  outline-offset: 2px;
}

/* Testimonials: restore rounded-square → circle dots */
.testimonials .owl-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

/* Kill Owl's built-in dot visuals */
.testimonials .owl-dot {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.testimonials .owl-dot span::before,
.testimonials .owl-dot span::after {
  content: none !important;
}

/* Your dot */
.testimonials .owl-dot span {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background: #fff !important;          /* dot color */
  border-radius: 6px !important;         /* rounded square (inactive) */
  opacity: .55 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  transition: border-radius .2s ease, opacity .2s ease, transform .2s ease;
}

/* Active = circle */
.testimonials .owl-dot.active span {
  border-radius: 50% !important;
  opacity: 1 !important;
  transform: scale(1.05);
}

/* Hover/focus states */
.testimonials .owl-dot:hover span,
.testimonials .owl-dot:focus-visible span {
  opacity: .85 !important;
}
.testimonials .owl-dot:focus-visible {
  outline: 3px solid #f5a425 !important;
  outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}