/*
 * Epion — global accessibility baseline.
 * Loaded after the legacy theme styles so the changes stay isolated and reversible.
 */

:root {
    --epion-a11y-focus: #004596;
    --epion-a11y-blue-hover: #0057b8;
    --epion-a11y-muted: #5f6368;
}

/* Visible keyboard focus without changing mouse/touch appearance. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--epion-a11y-focus) !important;
    outline-offset: 3px !important;
}

/*
 * iOS/Safari can keep :focus-visible on the hamburger after a touch tap.
 * Hide that touch-only rectangle while preserving keyboard focus on devices
 * that actually have a keyboard/fine pointer.
 */
@media (hover: none) and (pointer: coarse) {
    .mobile-menu-button a:focus,
    .mobile-menu-button a:focus-visible {
        outline: none !important;
        outline-offset: 0 !important;
    }
}

/* The legacy button rule removes outlines completely. Restore them for keyboard users. */
._button:focus-visible,
.epion-home-button:focus-visible,
.epion-home-mobile-cta__button:focus-visible,
.epion-home-sticky__button:focus-visible {
    outline: 3px solid var(--epion-a11y-focus) !important;
    outline-offset: 3px !important;
}

/*
 * Keep CTA typography consistent and improve Cyrillic legibility.
 * Only explicit action controls are targeted; body copy, navigation and headings
 * keep their existing typography.
 */
._button,
.epion-home-button,
.epion-home-mobile-cta__button,
.epion-home-sticky__button,
.epion-home-doctor-card__book,
.service-etalon-button,
.service-etalon-mobile-cta__button,
.service-etalon-sticky__button,
.epion-inner__button {
    font-family: "Apercu Pro", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/*
 * Text-style CTA links keep a slightly lighter weight than filled buttons.
 * This includes “Переглянути вартість / Посмотреть стоимость” and similar
 * action links, without changing ordinary links inside page copy.
 */
.epion-home-text-link,
.service-etalon-link,
.epion-doctors-hero__anchor {
    font-family: "Apercu Pro", Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Legacy hover blue (#0075ff) is slightly too light for white text. */
._button:hover,
.faq-block.active .faq-title {
    background-color: var(--epion-a11y-blue-hover);
}

.make-appointment:hover:before {
    background: var(--epion-a11y-blue-hover);
}

.contacts-page_phones a:hover,
.prices-row a:hover {
    color: var(--epion-a11y-blue-hover);
}

.slider-btn:hover svg path {
    fill: var(--epion-a11y-blue-hover);
}

/* Muted legacy text was below WCAG AA contrast on white. */
.breadcrumbs,
.breadcrumbs a,
.certificates-page .gallery-item,
.our-work .gallery-item {
    color: var(--epion-a11y-muted);
}

.breadcrumbs-text {
    color: var(--epion-a11y-muted);
}

/* Make form focus state visible even where legacy CSS removes borders/outlines. */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible {
    border-color: var(--epion-a11y-focus) !important;
}

/* Icon-only controls should remain comfortably clickable without changing layout. */
.popup_cross[role="button"] {
    min-width: 32px;
    min-height: 32px;
    margin-top: -8px;
    margin-right: -8px;
}

/* Respect the user's operating-system motion preference. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Homepage blue #0876e8 is just below WCAG AA for normal white text (4.41:1).
 * Use the existing darker Epion blue without changing the component layout.
 */
.epion-home,
.epion-home-sticky,
.epion-home-mobile-cta {
    --home-blue: #0668cb;
    --home-blue-dark: #0057b8;
}

/* Legacy copyright uses opacity: .3, which makes the text too faint on #1a1a1a. */
.footer .copyrights {
    color: #a6a6a6;
    opacity: 1;
}