/**
 * Front Page Styles
 * Contains skip link, focus management, and accessibility styles
 */

/* Skip Link Styles */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 4px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 6px;
}

/* Essential Layout Styles */
.hero-image-bg {
    background-size: cover;
    background-position: center;
}

.hero-logo {
    padding-bottom: 32px;
}

.featured-events-header {
    align-items: center;
}

.featured-events-title {
    position: relative;
    z-index: 2;
}

.featured-events-title h2 {
    color: #fff !important;
}

.featured-events-navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.featured-events-nav-prev {
    margin-right: 35px;
}

.featured-events-content {
    padding-top: 24px;
    padding-bottom: 24px;
}

.swiper-feature-events {
    overflow: hidden;
}

.featured-events-footer {
    padding-top: 24px;
}

.featured-events-view-all {
    text-align: center;
}

.featured-events-view-all a {
    color: #fff;
    text-decoration: none;
}

.event-blur-bg {
    background-size: cover;
    background-position: center;
}

.event-thumbnail {
    max-height: 290px;
}

.secondary-videos-section {
    padding-top: 32px;
}

.news-section-header {
    padding-bottom: 32px;
}

.news-section-title {
    padding-bottom: 30px;
}

.news-article-link {
    color: #fff !important;
    text-decoration: none;
}

.news-article-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

.news-section-footer {
    padding-bottom: 32px;
}

.news-section-divider {
    color: #fff;
}

.news-view-all {
    text-align: center;
}

.news-view-all a {
    color: #fff;
    text-decoration: none;
}

.news-article-title {
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    text-decoration: none;
}

.news-article-date {
    margin-top: 30px;
    width: 50%;
    margin-left: 0px;
}

.membership-section {
    padding-top: 24px;
}

.membership-button {
    text-align: center;
}

.membership-description {
    color: #000;
}

.membership-learn-more {
    text-align: center;
}

/* Hero Section Styles */
.hero-image-bg {
    background-size: cover;
    background-position: center;
}

/* Dynamic background image for hero section */
.hero-image-bg[data-bg-image] {
    background-image: var(--bg-image);
}

.hero-logo {
    padding-bottom: 32px;
}

/* Featured Events Section Styles */
.featured-events-header {
    align-items: center;
}

.featured-events-title {
    position: relative;
    z-index: 2;
}

.featured-events-title h2 {
    color: #fff !important;
}

.featured-events-navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.featured-events-content {
    padding-top: 24px;
    padding-bottom: 24px;
}

.swiper-feature-events {
    overflow: hidden;
}

.event-blur-bg {
    background-size: cover;
    background-position: center;
}

/* Dynamic background image for event blur backgrounds */
.event-blur-bg[data-bg-image] {
    background-image: var(--bg-image);
}

.event-thumbnail {
    max-height: 290px;
}

/* Video Section Styles */
.video-section-padding {
    padding-top: 24px;
}

.video-container-wrapper {
    padding-bottom: 32px;
}

.video-date-row {
    padding-top: 10px;
    padding-bottom: 10px;
}

.video-title-row {
    padding-bottom: 32px;
    padding-left: 0px;
}

.video-divider {
    color: #fff;
}

.secondary-videos-section {
    padding-top: 32px;
}

.video-link {
    color: #fff !important;
    text-decoration: none;
}

.video-date {
    margin-top: 30px;
    width: 50%;
    margin-left: 0px;
}

.video-title {
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 25px !important;
    text-decoration: none;
}

.video-title-heading {
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    text-decoration: none;
}

/* News Section Styles */
.news-section-header {
    padding-bottom: 32px;
}

.news-section-title {
    padding-bottom: 30px;
}

.news-article-link {
    color: #fff !important;
    text-decoration: none;
}

.news-article-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

.news-section-footer {
    padding-bottom: 32px;
}

.news-section-divider {
    color: #fff;
}

.news-view-all {
    text-align: center;
}

.news-view-all a {
    color: #fff;
    text-decoration: none;
}

.news-article-title {
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    text-decoration: none;
}

.news-article-date {
    margin-top: 30px;
    width: 50%;
    margin-left: 0px;
}

.news-blurred-bg {
    background-size: cover;
    background-position: center;
    filter: blur(10px);
}

/* Dynamic background image for news articles */
.news-blurred-bg[data-bg-image] {
    background-image: var(--bg-image);
}

/* Membership Section Styles */
.membership-section {
    padding-top: 24px;
}

.membership-button {
    text-align: center;
}

.membership-description {
    color: #000;
}

.membership-learn-more {
    text-align: center;
}

/* Focus Management Styles */
/* Focus styles for better keyboard navigation */
a:focus,
button:focus,
[tabindex]:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Focus styles for interactive elements */
.btn:focus,
.swiper-button-prev:focus,
.swiper-button-next:focus,
.swiper-scrollbar:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #007cba;
}
.swiper-button-prev:hover, .swiper-button-next:hover{
    background-color: #BBBBBB !important;
}
/* Focus styles for video containers */
.video-container:focus-within {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Focus styles for featured event slides */
.featured-event-slide:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Focus styles for partner spotlight items */
.fade-in:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Focus styles for news articles */
.no-wrap-row:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Focus styles for member sections */
.r-4:focus,
.r-3:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Ensure focus is visible on all interactive elements */
[tabindex]:focus {
    outline: 2px solid #007cba !important;
    outline-offset: 2px !important;
}

/* Hide focus outline for mouse users but show for keyboard users */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

.js-focus-visible .focus-visible {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Enhanced Swiper Navigation Button Styles */
.swiper-button-prev,
.swiper-button-next {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.swiper-button-prev {
    margin-right: 35px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.swiper-button-prev:focus,
.swiper-button-next:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Enhanced Scrollbar Styles */
.swiper-scrollbar {
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.swiper-scrollbar:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.swiper-scrollbar:focus {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Enhanced Interactive Element Styles */
.video-container,
.featured-event-slide,
.fade-in,
.no-wrap-row,
.r-4,
.r-3 {
    transition: outline 0.2s ease;
}

/* Skip Link Animation */
@keyframes skipLinkSlideIn {
    from {
        top: -40px;
    }
    to {
        top: 6px;
    }
}

.skip-link:focus {
    animation: skipLinkSlideIn 0.3s ease forwards;
}

/* Focus Ring Animation */
@keyframes focusRing {
    0% {
        outline-offset: 0px;
    }
    100% {
        outline-offset: 2px;
    }
}

[tabindex]:focus {
    animation: focusRing 0.2s ease forwards;
}