/**
 * Feature Slider - ADA 2.2 WCAG Compliant Styles
 * Layout options controlled via admin ADA Options tab
 * 
 * @package Blade Child Theme
 * @since 1.0.3
 */

/* =============================================================================
   DEFAULT: Preserve parent theme layout (centered/stacked)
   Only apply custom layouts when explicitly set via ADA Options
   ============================================================================= */

/* =============================================================================
   LAYOUT: Image Left (Text Right) - Applied via .grve-ada-image-left class
   ============================================================================= */

/* Grid layout for image-left slides */
.grve-ada-image-left .grve-content .grve-container {
    display: grid !important;
    grid-template-columns: minmax(280px, 45%) 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 20px 40px;
    align-items: start;
    align-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Image container - LEFT column, spans all rows */
.grve-ada-image-left .grve-content .grve-graphic {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    max-width: 500px;
    margin-bottom: 0;
    align-self: center;
}

.grve-ada-image-left .grve-content .grve-graphic img {
    max-height: none !important;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Text elements - RIGHT column, stacked vertically, LEFT-aligned */
.grve-ada-image-left .grve-content .grve-subheading {
    grid-column: 2;
    grid-row: 1;
    text-align: left !important;
}

.grve-ada-image-left .grve-content .grve-title {
    grid-column: 2;
    grid-row: 2;
    text-align: left !important;
}

.grve-ada-image-left .grve-content .grve-description {
    grid-column: 2;
    grid-row: 3;
    text-align: left !important;
}

.grve-ada-image-left .grve-content .grve-button-wrapper {
    grid-column: 2;
    grid-row: 4;
    text-align: left !important;
    justify-self: start;
}

/* Buttons align left */
.grve-ada-image-left .grve-content .grve-button-wrapper .grve-btn {
    margin-right: 15px;
    margin-left: 0;
}

/* Override centered alignment from parent theme */
.grve-ada-image-left .grve-content.grve-align-center-center,
.grve-ada-image-left .grve-content.grve-align-center-top,
.grve-ada-image-left .grve-content.grve-align-center-bottom {
    text-align: left;
}

/* =============================================================================
   LAYOUT: Image Right (Text Left) - Applied via .grve-ada-image-right class
   ============================================================================= */

/* Grid layout for image-right slides */
.grve-ada-image-right .grve-content .grve-container {
    display: grid !important;
    grid-template-columns: 1fr minmax(280px, 45%);
    grid-template-rows: auto auto auto auto;
    gap: 20px 40px;
    align-items: start;
    align-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Image container - RIGHT column, spans all rows */
.grve-ada-image-right .grve-content .grve-graphic {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 100%;
    max-width: 500px;
    margin-bottom: 0;
    align-self: center;
}

.grve-ada-image-right .grve-content .grve-graphic img {
    max-height: none !important;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Text elements - LEFT column, stacked vertically, LEFT-aligned */
.grve-ada-image-right .grve-content .grve-subheading {
    grid-column: 1;
    grid-row: 1;
    text-align: left !important;
}

.grve-ada-image-right .grve-content .grve-title {
    grid-column: 1;
    grid-row: 2;
    text-align: left !important;
}

.grve-ada-image-right .grve-content .grve-description {
    grid-column: 1;
    grid-row: 3;
    text-align: left !important;
}

.grve-ada-image-right .grve-content .grve-button-wrapper {
    grid-column: 1;
    grid-row: 4;
    text-align: left !important;
    justify-self: start;
}

/* Buttons align left */
.grve-ada-image-right .grve-content .grve-button-wrapper .grve-btn {
    margin-right: 15px;
    margin-left: 0;
}

/* Override centered alignment from parent theme */
.grve-ada-image-right .grve-content.grve-align-center-center,
.grve-ada-image-right .grve-content.grve-align-center-top,
.grve-ada-image-right .grve-content.grve-align-center-bottom {
    text-align: left;
}

/* =============================================================================
   NO IMAGE FALLBACK - When content image is not set (for grid layouts)
   ============================================================================= */

/* When NO image exists in left/right layouts, use single column */
.grve-ada-image-left .grve-content .grve-container:not(:has(.grve-graphic)),
.grve-ada-image-right .grve-content .grve-container:not(:has(.grve-graphic)) {
    grid-template-columns: 1fr;
}

.grve-ada-image-left .grve-content .grve-container:not(:has(.grve-graphic)) .grve-subheading,
.grve-ada-image-left .grve-content .grve-container:not(:has(.grve-graphic)) .grve-title,
.grve-ada-image-left .grve-content .grve-container:not(:has(.grve-graphic)) .grve-description,
.grve-ada-image-left .grve-content .grve-container:not(:has(.grve-graphic)) .grve-button-wrapper,
.grve-ada-image-right .grve-content .grve-container:not(:has(.grve-graphic)) .grve-subheading,
.grve-ada-image-right .grve-content .grve-container:not(:has(.grve-graphic)) .grve-title,
.grve-ada-image-right .grve-content .grve-container:not(:has(.grve-graphic)) .grve-description,
.grve-ada-image-right .grve-content .grve-container:not(:has(.grve-graphic)) .grve-button-wrapper {
    grid-column: 1;
    text-align: left !important;
}

/* =============================================================================
   RESPONSIVE: Stack on mobile (below 768px)
   ============================================================================= */

@media screen and (max-width: 767px) {
    /* Single column stack on mobile for both left and right layouts */
    .grve-ada-image-left .grve-content .grve-container,
    .grve-ada-image-right .grve-content .grve-container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        text-align: center;
        padding: 30px 15px;
        gap: 20px;
    }

    /* Image centered on top for mobile */
    .grve-ada-image-left .grve-content .grve-graphic,
    .grve-ada-image-right .grve-content .grve-graphic {
        grid-column: 1;
        grid-row: auto;
        width: 80%;
        max-width: 350px;
        margin: 0 auto 20px auto;
        justify-self: center;
    }

    /* Text elements stacked below, centered */
    .grve-ada-image-left .grve-content .grve-subheading,
    .grve-ada-image-left .grve-content .grve-title,
    .grve-ada-image-left .grve-content .grve-description,
    .grve-ada-image-left .grve-content .grve-button-wrapper,
    .grve-ada-image-right .grve-content .grve-subheading,
    .grve-ada-image-right .grve-content .grve-title,
    .grve-ada-image-right .grve-content .grve-description,
    .grve-ada-image-right .grve-content .grve-button-wrapper {
        grid-column: 1;
        text-align: center !important;
        justify-self: center;
    }

    .grve-ada-image-left .grve-content .grve-button-wrapper .grve-btn,
    .grve-ada-image-right .grve-content .grve-button-wrapper .grve-btn {
        margin-left: 8px;
        margin-right: 8px;
    }
}

/* =============================================================================
   ADA 2.2 WCAG COMPLIANCE STYLES
   ============================================================================= */

/* ---- Focus Indicators (WCAG 2.4.7 Focus Visible) ---- */
#grve-feature-section a:focus,
#grve-feature-section button:focus,
#grve-feature-section [role="button"]:focus,
#grve-feature-section .grve-carousel-navigation .grve-nav-arrow:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

/* High contrast mode focus */
@media (prefers-contrast: more) {
    #grve-feature-section a:focus,
    #grve-feature-section button:focus,
    #grve-feature-section [role="button"]:focus,
    #grve-feature-section .grve-carousel-navigation .grve-nav-arrow:focus {
        outline: 4px solid #000;
        outline-offset: 2px;
    }
}

/* ---- Skip Links for Keyboard Navigation ---- */
.grve-slider-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 0 4px 0;
}

.grve-slider-skip-link:focus {
    left: 0;
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* ---- Navigation Arrows Enhanced for Screen Readers ---- */
#grve-feature-section .grve-carousel-navigation .grve-nav-arrow {
    position: relative;
    min-width: 44px; /* WCAG 2.5.5 Target Size */
    min-height: 44px;
}

/* Visually hidden but accessible text for screen readers */
#grve-feature-section .grve-nav-arrow .grve-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;
}

/* ---- Pause/Play Button for Auto-Advancing Sliders (WCAG 2.2.2) ---- */
/* Controls Wrapper - Contains all ADA control buttons */
#grve-feature-section .grve-ada-controls-wrapper,
.grve-ada-controls-wrapper {
    position: absolute !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Control wrapper positioning options - default to bottom-left like LA County design */
#grve-feature-section .grve-ada-controls-wrapper,
.grve-ada-controls-wrapper {
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
}

#grve-feature-section .grve-ada-controls-wrapper.grve-ada-position-bottom-right,
.grve-ada-controls-wrapper.grve-ada-position-bottom-right {
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
}

#grve-feature-section .grve-ada-controls-wrapper.grve-ada-position-bottom-left,
.grve-ada-controls-wrapper.grve-ada-position-bottom-left {
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
}

#grve-feature-section .grve-ada-controls-wrapper.grve-ada-position-top-right,
.grve-ada-controls-wrapper.grve-ada-position-top-right {
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
}

#grve-feature-section .grve-ada-controls-wrapper.grve-ada-position-top-left,
.grve-ada-controls-wrapper.grve-ada-position-top-left {
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
}

#grve-feature-section .grve-ada-controls-wrapper.grve-ada-position-bottom-center,
.grve-ada-controls-wrapper.grve-ada-position-bottom-center {
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
}

#grve-feature-section .grve-ada-controls-wrapper.grve-ada-position-top-center,
.grve-ada-controls-wrapper.grve-ada-position-top-center {
    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
}

/* Base button styles - Orange LA County style */
#grve-feature-section .grve-ada-controls-wrapper button,
.grve-ada-controls-wrapper button,
#grve-feature-section .grve-slider-pause-btn,
#grve-feature-section .grve-slider-stop-btn,
#grve-feature-section .grve-slider-hide-animation-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #F5A623 !important; /* Orange */
    border: none !important;
    border-radius: 0 !important; /* Square corners */
    color: #fff !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

#grve-feature-section .grve-ada-controls-wrapper button:hover,
.grve-ada-controls-wrapper button:hover,
#grve-feature-section .grve-slider-pause-btn:hover,
#grve-feature-section .grve-slider-stop-btn:hover {
    background: #E09000 !important; /* Darker orange on hover */
    transform: scale(1.05) !important;
}

#grve-feature-section .grve-ada-controls-wrapper button:focus,
.grve-ada-controls-wrapper button:focus,
#grve-feature-section .grve-slider-pause-btn:focus,
#grve-feature-section .grve-slider-stop-btn:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    background: #E09000 !important;
}

#grve-feature-section .grve-ada-controls-wrapper button:active,
.grve-ada-controls-wrapper button:active {
    transform: scale(0.98) !important;
}

#grve-feature-section .grve-ada-controls-wrapper button.grve-active,
.grve-ada-controls-wrapper button.grve-active {
    background: #3498DB !important; /* Blue when active/pressed */
}

#grve-feature-section .grve-ada-controls-wrapper button.grve-disabled,
.grve-ada-controls-wrapper button.grve-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Icon styling */
#grve-feature-section .grve-ada-controls-wrapper button .grve-pause-icon,
#grve-feature-section .grve-ada-controls-wrapper button .grve-play-icon,
#grve-feature-section .grve-ada-controls-wrapper button .grve-stop-icon,
#grve-feature-section .grve-ada-controls-wrapper button .grve-hide-icon,
.grve-ada-controls-wrapper button .grve-pause-icon,
.grve-ada-controls-wrapper button .grve-play-icon,
.grve-ada-controls-wrapper button .grve-stop-icon,
.grve-ada-controls-wrapper button .grve-hide-icon {
    font-size: 16px !important;
    line-height: 1 !important;
    color: #fff !important;
    font-style: normal !important;
    font-weight: bold !important;
}

/* Screen reader only text */
#grve-feature-section .grve-ada-controls-wrapper button .grve-sr-only,
.grve-ada-controls-wrapper button .grve-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;
}

/* Legacy pause button (standalone, for backward compatibility) */
#grve-feature-section .grve-slider-pause-btn,
.grve-slider-pause-btn {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 9999 !important;
}

/* When inside controls wrapper, remove absolute positioning */
#grve-feature-section .grve-ada-controls-wrapper .grve-slider-pause-btn,
.grve-ada-controls-wrapper .grve-slider-pause-btn {
    position: static !important;
}

/* ---- Stop Button Icon ---- */
#grve-feature-section .grve-slider-stop-btn .grve-stop-icon,
.grve-slider-stop-btn .grve-stop-icon {
    font-size: 14px !important;
    color: #fff !important;
}

/* ---- Hide Animation Button Icon ---- */
#grve-feature-section .grve-slider-hide-animation-btn .grve-hide-icon,
.grve-slider-hide-animation-btn .grve-hide-icon {
    font-size: 18px !important;
    color: #fff !important;
}

/* ---- Slide Indicator Dots (Enhanced for ADA) ---- */
.grve-slider-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.grve-slider-pagination-dot {
    width: 16px;
    height: 16px;
    min-width: 44px; /* Touch target size */
    min-height: 44px;
    padding: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grve-slider-pagination-dot::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #fff;
    transition: all 0.2s ease;
}

.grve-slider-pagination-dot[aria-current="true"]::before,
.grve-slider-pagination-dot.active::before {
    background: #fff;
    transform: scale(1.2);
}

.grve-slider-pagination-dot:focus {
    outline: none;
}

.grve-slider-pagination-dot:focus::before {
    outline: 3px solid #005fcc;
    outline-offset: 4px;
}

/* ---- Live Region for Slide Announcements ---- */
.grve-slider-live-region {
    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 Support (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion: reduce) {
    #grve-feature-section *,
    #grve-feature-section *::before,
    #grve-feature-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- High Contrast Mode Support ---- */
@media (prefers-contrast: more) {
    #grve-feature-section .grve-title,
    #grve-feature-section .grve-subheading,
    #grve-feature-section .grve-description {
        text-shadow: none;
    }

    #grve-feature-section .grve-btn {
        border: 3px solid currentColor;
    }

    .grve-slider-pause-btn {
        border: 3px solid #fff;
    }
}

/* ---- Minimum Color Contrast Enforcement ---- */
/* Ensure text has sufficient contrast on dark backgrounds */
#grve-feature-section .grve-content .grve-title.grve-text-light,
#grve-feature-section .grve-content .grve-subheading.grve-text-light,
#grve-feature-section .grve-content .grve-description.grve-text-light {
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---- Touch Target Size (WCAG 2.5.5) ---- */
#grve-feature-section .grve-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
}

/* ---- Keyboard Focus Trap Prevention ---- */
#grve-feature-section [tabindex="-1"]:focus {
    outline: none;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Screen Reader Only - Visually hidden but accessible */
.grve-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;
}

/* Show on focus for skip links */
.grve-sr-only-focusable:focus,
.grve-sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}
/* =============================================================================
   VIDEO BACKGROUND STYLES
   ============================================================================= */

.grve-ada-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1 !important; /* Above background image but below overlay */
}

.grve-ada-video-bg video,
.grve-ada-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
    border: none;
}

/* YouTube iframe needs specific sizing */
.grve-ada-video-bg iframe {
    width: 100vw;
    height: 56.25vw; /* 16:9 aspect ratio */
    min-height: 100%;
    min-width: 177.77vh; /* 16:9 aspect ratio */
}

/* Hide ALL parent theme background elements when video is enabled */
.grve-has-video-bg .grve-background-wrapper,
.grve-has-video-bg .grve-bg-image,
.grve-has-video-bg .grve-bg-overlay,
.grve-has-video-bg .grve-pattern {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Remove background color from slider item when video is active */
.grve-has-video-bg.grve-slider-item,
.grve-has-video-bg .grve-slider-item-wrapper {
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure content stays above video */
.grve-has-video-bg .grve-content {
    position: relative;
    z-index: 10 !important;
}

/* Ensure navigation stays above video */
.grve-has-video-bg ~ .grve-carousel-navigation,
#grve-feature-section .grve-carousel-navigation {
    z-index: 20 !important;
}

/* =============================================================================
   NO ANIMATIONS MODE (User-toggled)
   ============================================================================= */

.grve-no-animations #grve-feature-slider,
.grve-no-animations .grve-slider-item {
    animation: none !important;
    transition: none !important;
}

.grve-no-animations .grve-ada-video-bg video,
.grve-no-animations .grve-ada-video-bg iframe {
    display: none;
}

/* =============================================================================
   SLIDER PAUSED STATE (CSS-based fallback for pause/stop)
   Forces all animations to pause when .grve-slider-paused is added
   ============================================================================= */

#grve-feature-section.grve-slider-paused *,
#grve-feature-slider.grve-slider-paused *,
.grve-slider-paused #grve-feature-slider *,
.grve-slider-paused .grve-slider-item * {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
}

/* Pause Slick slider autoplay via CSS */
#grve-feature-section.grve-slider-paused .slick-slider,
#grve-feature-slider.grve-slider-paused.slick-slider {
    animation-play-state: paused !important;
}

/* Pause any transform-based sliding */
#grve-feature-section.grve-slider-paused .slick-track,
#grve-feature-slider.grve-slider-paused .slick-track,
#grve-feature-section.grve-slider-paused .grve-slider-wrapper,
#grve-feature-slider.grve-slider-paused .grve-slider-wrapper {
    transition: none !important;
    animation: none !important;
}

/* Pause videos when slider is paused */
#grve-feature-section.grve-slider-paused video,
.grve-slider-paused video {
    /* Videos need JS to pause, but we can hide them visually */
}

/* =============================================================================
   CONTENT WIDTH VARIATIONS (data attribute based)
   ============================================================================= */

/* Content width variations based on data attribute */
.grve-ada-image-left[data-content-width="50"] .grve-content .grve-container,
.grve-ada-image-right[data-content-width="50"] .grve-content .grve-container {
    grid-template-columns: 50% 50% !important;
}

.grve-ada-image-left[data-content-width="60"] .grve-content .grve-container {
    grid-template-columns: 40% 60% !important;
}

.grve-ada-image-right[data-content-width="60"] .grve-content .grve-container {
    grid-template-columns: 60% 40% !important;
}

.grve-ada-image-left[data-content-width="65"] .grve-content .grve-container {
    grid-template-columns: 35% 65% !important;
}

.grve-ada-image-right[data-content-width="65"] .grve-content .grve-container {
    grid-template-columns: 65% 35% !important;
}

/* Controls wrapper on mobile */
@media screen and (max-width: 767px) {
    .grve-ada-controls-wrapper {
        bottom: 10px !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
    }
}