/**
 * Accessibility Fixes - Contrast & Touch Targets
 * Addresses PageSpeed Insights accessibility issues
 */

/* Fix low contrast blog badge */
.blog-external-badge {
    background-color: #0A4D68; /* darker teal for strong contrast */
    color: #ffffff;
}

/* Fix footer text contrast */
.site-footer {
    color: #e6e6e6; /* slightly lighter for better contrast on dark background */
}

.site-footer p {
    color: #e6e6e6;
}

.site-footer a {
    color: #ffffff;
}

.site-footer a:hover {
    color: #8fd7ff;
    text-decoration: underline;
}

/* Touch target fix (scoped): before/after carousel dots */
.before-after-carousel .carousel-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.before-after-carousel .carousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(10, 77, 104, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease, width 0.2s ease;
}

.before-after-carousel .carousel-dot.is-active::before {
    background: rgba(10, 77, 104, 0.75);
    width: 18px; /* mimic the original "pill" active state */
}

.before-after-carousel .carousel-dot:focus-visible {
    outline: 3px solid rgba(10, 77, 104, 0.6);
    outline-offset: 2px;
    border-radius: 9999px;
}