/* Focus handling — accessible by default (WCAG 2.4.7 Focus Visible).
   The old rule killed EVERY focus indicator, including :focus-visible, so
   keyboard users had no idea where they were. We now suppress the ring only
   for mouse/touch focus (:focus:not(:focus-visible)) and render a clear ring
   for keyboard focus. Mouse users see nothing change; keyboard users get a
   visible target. */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
*:focus-visible {
    outline: 2px solid #cb3c6d !important;
    outline-offset: 2px;
    border-radius: 2px;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


.wls-epic-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-height: 50px !important;
    padding: 10px 14px 9px 14px !important;
    background-color: #2f2d2e !important;
    color: #ffffff !important;
    border: 1px solid #2f2d2e !important;
    border-radius: 4px !important;
    font-family: Arial, Helvetica, "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
    gap: 11px !important;
}
.wls-epic-btn:hover {
    background-color: #3a3839 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10) !important;
}
.wls-epic-btn:active {
    background-color: #262425 !important;
}

.wls-epic-btn img.epic-logo-img,
img.epic-logo-img {
    width: 24px !important;
    height: 27.4px !important;
    max-width: 24px !important;
    max-height: 27.4px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    object-fit: contain !important;
    object-position: center !important;
}
.wls-epic-btn span {
    display: inline-block !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ----------------------------------------------------------------------
 * Site navbar — single source of truth.
 * Previously duplicated in 8 page CSS files (event/events/index/legal/
 * organize/play/policy/staff). Kept here so every page that loads
 * base.css gets the same navbar styles, and so future changes happen
 * in one place. Overrides for specific pages can still live in
 * pages/<page>.css below this block.
 * --------------------------------------------------------------------*/
.wls-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: stretch;
    background-color: #101010;
    min-height: 52px;
    width: 100%;
}
.wls-navbar-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}
.wls-navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
.wls-navbar-brand img {
    width: 27px;
    height: 27px;
    filter: drop-shadow(0 0 6px rgba(203, 60, 109, 0.6));
    transition: filter 0.2s;
}
.wls-navbar-brand-title {
    margin-left: 0.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    background-image: linear-gradient(90deg, #ca5b5b, #cb3c6d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color 0.2s, background 0.2s;
}
.wls-navbar-brand:hover .wls-navbar-brand-title {
    background-image: none;
    color: #fff;
}
.wls-navbar-brand:hover img {
    filter: brightness(0) invert(1);
}
.wls-navbar-nav {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wls-navbar-nav li {
    display: flex;
}
.wls-navbar-nav a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #afafaf;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s;
}
.wls-navbar-nav a:hover,
.wls-navbar-nav a.active {
    color: #fff;
}
.wls-navbar-nav a::after {
    content: '';
    position: absolute;
    bottom: 0.1875rem;
    left: 0.5rem;
    right: 0.5rem;
    height: 0.25rem;
    background-image: linear-gradient(90deg, #ca5b5b, #cb3c6d);
    opacity: 0;
    transform: scaleX(0);
    transition: transform 0.2s, opacity 0.2s;
}
.wls-navbar-nav a.active::after {
    opacity: 1;
    transform: scaleX(1);
}
.wls-navbar-right {
    display: flex;
    align-items: stretch;
    margin-left: auto;
}
.wls-lang-btn {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: transparent;
    border: none;
    color: #afafaf;
    cursor: pointer;
    transition: background-color 0.15s;
}
.wls-lang-btn:hover {
    background-color: #212121;
}
.wls-lang-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #9d9d9d;
    transition: fill 0.15s;
}
.wls-lang-btn:hover svg {
    fill: #fff;
}