/*============================
SKIP LINK
============================*/
#primary {
    scroll-margin-top: 100px;
}

.my-site-main {
    width: 100%;
}

.my-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    background: #ffffff;
    color: #27579a;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transition: top 0.2s ease;
}

.my-skip-link:focus,
.my-skip-link:focus-visible {
    top: 12px;
    outline: 2px solid #66cef5;
    outline-offset: 2px;
}

/* =========================
   GLOBAL ACCESSIBLE FOCUS STYLES
========================= */

:root {
    --my-focus-color: #66cef5;
    --my-focus-color-dark: #00aeef;
    --my-focus-bg: rgba(102, 206, 245, 0.18);
    --my-focus-outline: 2px solid var(--my-focus-color);
    --my-focus-shadow: 0 0 0 4px var(--my-focus-bg);
    --my-focus-radius: 6px;
}

/* Remove inconsistent browser focus only where focus-visible is supported */
:focus {
    outline: none;
}

:focus-visible {
    outline: var(--my-focus-outline);
    outline-offset: 3px;
    box-shadow: var(--my-focus-shadow);
    border-radius: var(--my-focus-radius);
}

/* =========================
   LINKS
========================= */

a:focus-visible {
    text-decoration: none;
}

/* Navigation links */
.my-header__nav a:focus-visible,
.my-header__mobile-nav a:focus-visible,
.my-footer a:focus-visible {
    color: #0f6c7b;
}

/* =========================
   BUTTONS
========================= */

button:focus-visible,
.wp-block-button__link:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: var(--my-focus-outline);
    outline-offset: 3px;
    box-shadow: var(--my-focus-shadow);
}

/* Prevent weird double focus styles */
button:focus,
.wp-block-button__link:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: none;
}

/* =========================
   FORM FIELDS
========================= */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--my-focus-outline);
    outline-offset: 2px;
    box-shadow: var(--my-focus-shadow);
    border-color: var(--my-focus-color-dark);
}

/* Optional cleaner field transition */
input,
textarea,
select,
button,
a,
.wp-block-button__link {
    transition:
        outline-offset 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}

/* =========================
   CUSTOM HEADER TOGGLE
========================= */

.my-header__toggle:focus-visible {
    background: transparent !important;
    outline: var(--my-focus-outline);
    outline-offset: 3px;
    box-shadow: var(--my-focus-shadow);
    border-radius: 8px;
}

/* =========================
   CARD LINKS / IMAGE LINKS
========================= */

.my-service-card a:focus-visible,
.my-post-card a:focus-visible,
.my-testimonial-card a:focus-visible {
    outline: var(--my-focus-outline);
    outline-offset: 4px;
    box-shadow: var(--my-focus-shadow);
    border-radius: 12px;
}

/* If the whole card is clickable */
.my-service-card:focus-within,
.my-post-card:focus-within,
.my-testimonial-card:focus-within {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.08),
        var(--my-focus-shadow);
}

/* =========================
   SKIP LINK
========================= */

.my-skip-link:focus-visible {
    top: 12px;
    outline: var(--my-focus-outline);
    outline-offset: 2px;
    box-shadow: var(--my-focus-shadow);
}

/* =========================
   WORDPRESS / GUTENBERG COMMON ELEMENTS
========================= */

.wp-block-search__button:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-post-title a:focus-visible,
.wp-block-page-list a:focus-visible,
.wp-block-categories a:focus-visible {
    outline: var(--my-focus-outline);
    outline-offset: 3px;
    box-shadow: var(--my-focus-shadow);
    border-radius: 6px;
}

/* =========================
   ACCESSIBILITY: REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}