/* ==========================================================================
   Accessibility Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip Link - Hidden until focused
   -------------------------------------------------------------------------- */
.skip-link {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 16px 32px;
    background: white;
    color: black;
    font-family: "Lexend";
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: none;
}

/* --------------------------------------------------------------------------
   Focus Styles - Visible focus indicators for keyboard navigation
   -------------------------------------------------------------------------- */

/* Base focus style - visible ring */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Links */
a:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Buttons */
button:focus-visible,
.button:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Navbar logo */
.navbar-logo:focus-visible {
    outline: 2px solid white;
    outline-offset: 8px;
}

/* Navbar toggle */
.navbar-toggle:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Nav menu links */
.nav-menu .nav-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 8px;
}

.nav-menu .nav-link:focus-visible .nav-link-text {
    transform: translateX(15px);
    letter-spacing: 2px;
}

.nav-menu .nav-link:focus-visible .nav-link-index {
    opacity: 1;
}

/* Nav menu social links */
.nav-menu-right .nav-socials a:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Project cards */
.project-showcase__link:focus-visible,
.work-card__link:focus-visible {
    outline: none;
}

.project-showcase__link:focus-visible .project-showcase__visual,
.work-card__link:focus-visible .work-card__visual {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Footer links */
.footer-socials .social-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
    border-radius: 4px;
}

.footer-legal-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Buttons with custom styles */
.work-showcase__more-btn:focus-visible,
.work-cta__btn:focus-visible,
.gallery-load-more:focus-visible {
    outline: 2px solid white;
    outline-offset: 6px;
}

/* Cookie consent buttons */
.cookie-consent-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

.cookie-consent-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Contact page links */
.contact-page .hero-email:focus-visible {
    outline: 2px solid white;
    outline-offset: 8px;
}

.contact-page .detail-value:focus-visible,
.contact-page .social-links a:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Process page button */
.our-process .button:focus-visible,
.our-process .closing-cta__btn:focus-visible,
.what-we-do .button:focus-visible {
    outline: 2px solid white;
    outline-offset: 6px;
}

/* Single project elements */
.project-cta:focus-visible {
    outline: 2px solid white;
    outline-offset: 6px;
}

.nav-all-projects:focus-visible,
.nav-link:focus-visible:not(.nav-link--disabled) {
    outline: 2px solid white;
    outline-offset: 6px;
}

/* Gallery items */
.gallery-item__inner:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Lightbox */
.lightbox__close:focus-visible {
    outline: 2px solid white;
    outline-offset: 4px;
}

/* Privacy policy links */
.privacy-page a:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* 404 page */
.error-404 .button:focus-visible {
    outline: 2px solid white;
    outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Screen Reader Only - Hidden visually but accessible
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Reduced Motion - Respect user preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   High Contrast Mode Support
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    :focus-visible {
        outline-width: 3px;
    }

    .nav-menu .nav-link:focus-visible,
    .project-showcase__link:focus-visible .project-showcase__visual,
    .work-card__link:focus-visible .work-card__visual {
        outline-width: 3px;
    }
}