/*
Accessibility utilities for keyboard focus and navigation
--------------------------------------------------------

What this file does:
- Defines a consistent, high-contrast focus ring using the CI violet (#681d49).
- Uses :focus-visible where supported to show focus only for keyboard interactions,
  with a safe :focus fallback for older browsers.
- Improves Slick slider keyboard UX by making focused slides clearly visible and
  ensuring navigation affordances are obvious.
- Keeps dropdown navigation usable by keyboard via focus-visible/focus-within rules.
- Provides a Skip to content pattern so keyboard users can bypass repetitive nav.

Load order: Enqueued after main.css to override any outline suppression.
*/
:root {
    --focus-ring-color: #681d49;
    --focus-ring-offset: 2px;
    --focus-ring-width: 3px;
}

/* Base: show clear outlines for keyboard focusable controls */
/* Use :focus-visible where supported; fall back to :focus for older browsers */

/* Links, buttons, inputs, summary, and any element with positive tabindex */
a[href],
button,
[role="button"],
input,
select,
textarea,
summary {
    /* Reset to allow outlines to appear even if base CSS disabled them */
    outline: none; /* remove any default to avoid double rings; we re-add on focus states below */
}

/*
Focus-visible (modern browsers)
- Shows focus outlines primarily for keyboard interactions.
- Prevents showing a focus ring on mouse clicks (when the UA supports :focus-visible).
- Uses CSS custom properties to make color/width easy to adjust.
*/
a[href]:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    transition: none;
}

input:focus-visible {
    /*Make inputs a little bit more obvious*/
    background-color: #f1edeb;
}

/* ------------------- Specific focus styles ------------------- */

a.select-partner:focus-visible {
    outline: var(--focus-ring-width) solid white;
}

/* ------------------- Slick slider specific styles ------------------- */

/* Slick slider: highlight the focused/active slide container so keyboard users can
   perceive which slide currently has focus or contains a focused element. */
.slick-slide:focus-visible,
.slick-slide:focus-within {
    background-color: #f1edeb;
    position: relative;
}

/* Slick slider: use an overlay border on focused links inside slides, so the
   focus ring remains visible even when the link is smaller than the slide or
   the slide has complex backgrounds. */
.slick-slide a:focus-visible::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: var(--focus-ring-width) solid var(--focus-ring-color);
    pointer-events: none;
    box-sizing: border-box;
}

/* Slick arrows: enlarge and slightly increase opacity when focused so keyboard
   users get a strong focus affordance on the small arrow targets. */
.slick-arrow:focus-visible {
    transform: scale(1.5);
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.slick-arrow.slick-prev:focus-visible {
    transform: scale(1.5) rotate(180deg);
}


/* Navigation dropdowns: keep submenus open when the trigger link is focused
   via keyboard, so users can tab into the submenu. */
.navigation .main-nav li.menu-item-has-children a:focus-visible + .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.navigation .main-nav li.menu-item-has-children .sub-menu:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

/* ------------------- Skip to content ------------------- */

/* Skip to content link
   Why: Lets keyboard and screen reader users bypass repeated nav to reach main content.
   Behavior: Hidden off-canvas until focused; on focus it slides into view and is
   outlined. This keeps it accessible without visual clutter for mouse users. */
.skip-link {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #000000;
    padding: 8px 12px;
    z-index: 1000;
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-link:focus,
.skip-link:active {
    top: 0;
    outline: 2px solid #000;
}