/**
 * Custom styles for AQL Slider Wrapper
 */

/* Wrapper styles */
.aql-slider-wrapper {
    position: relative;
    margin: 0;
    width: 100%;
    --aql-dot-size: 10px; /* Custom variable for dot size */
    --aql-arrow-size: 32px; /* Custom variable for arrow size */
    --aql-arrow-space: calc(var(--aql-arrow-size, 32px) * 1.2); /* Custom variable for arrow padding */
}

/* Hide slider until initialized */
.aql-slider-wrapper:not(.aql-slider-initialized) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.aql-slider-wrapper.aql-slider-initialized {
    opacity: 1;
    visibility: visible;
}

.aql-slider-wrapper.aql-slider-active {
    /* Additional styles when slider is active - placeholder for future enhancements */
    position: relative;
}

/* Slide styles */
.aql-slide {
    box-sizing: border-box;
}

/* Ensure proper spacing for slides */
.aql-slider-wrapper .wp-block-post-template {
    margin: 0;
    padding: 0;
}

.aql-slider-wrapper .wp-block-post-template > * {
    margin: 0;
}

/* Override default list item margins within slides */
.aql-slider-wrapper .entry-content ul li,
.aql-slider-wrapper .entry-content ol li,
.aql-slider-wrapper .wp-block-post-content ul li,
.aql-slider-wrapper .wp-block-post-content ol li {
    margin-bottom: 0 !important;
}

/* Override any other content margins within slides */
.aql-slider-wrapper .aql-slide * {
    margin-bottom: 0 !important;
}

/* Ensure proper spacing for slide content */
.aql-slider-wrapper .aql-slide > *:last-child {
    margin-bottom: 0 !important;
}
.entry-content .slick-slide li, 
.wp-block-post-content .slick-slide li {
    margin-bottom: 0 !important;
}
.aql-slider-wrapper .slick-slide {
    height: auto;
    box-sizing: border-box;
}

.aql-slider-wrapper .slick-slide > div {
    height: 100%;
}

/* Navigation dots */
.aql-slider-wrapper .slick-dots {
    margin-top: 0;
    text-align: center;
    line-height: 0;
}

/* Dots position: inside container - position within slider */
.aql-slider-wrapper[data-dots-position="inside"] .slick-dots {
    position: absolute;
    bottom: var(--aql-dot-size, 10px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin: 0;
    z-index: 10;
}

/* Dots position: below slider - position below the slider container */
.aql-slider-wrapper[data-dots-position="below"] .slick-dots {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: var(--aql-dot-size, 10px);
    margin-bottom: 0;
}

/* Add margin-bottom to the wrapper when dots are below to prevent overlap with next block */
.aql-slider-wrapper[data-dots-position="below"] {
    margin-bottom: 2em;
}

.aql-slider-wrapper .slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.aql-slider-wrapper .slick-dots li button {
    width: var(--aql-dot-size, 10px);
    height: var(--aql-dot-size, 10px);
    border-radius: 50%;
    border: none;
    background: var(--aql-dots-color, #ccc);
    text-indent: -9999px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0; /* Ensure no font icons are displayed */
    line-height: var(--aql-dot-size, 10px);
    overflow: hidden;
    padding: 0 !important;
}

.aql-slider-wrapper .slick-dots li.slick-active button {
    background: var(--aql-dots-hover-color, #007cba);
}

.aql-slider-wrapper .slick-dots li button:hover {
    background: var(--aql-dots-hover-color, #007cba);
}

/* Ensure dots are pure CSS circles with no content */
.aql-slider-wrapper .slick-dots li button:before,
.aql-slider-wrapper .slick-dots li button:after {
    display: none !important;
}

/* Navigation arrows */
.aql-slider-wrapper .slick-prev,
.aql-slider-wrapper .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--aql-arrow-size, 32px);
    height: var(--aql-arrow-size, 32px);
    border: none;
    background: var(--aql-arrow-background, rgba(0, 0, 0, 0.7));
    color: var(--aql-arrow-color, #ffffff);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrows position: outside container (default) */
.aql-slider-wrapper[data-arrows-position="outside"] .slick-prev {
    left: calc(var(--aql-arrow-space, 48px) * -1);
}

.aql-slider-wrapper[data-arrows-position="outside"] .slick-next {
    right: calc(var(--aql-arrow-space, 48px) * -1);
}

/* Constrain wrapper width when arrows are outside */
.aql-slider-wrapper[data-arrows-position="outside"] {
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
}

/* Arrows position: inside container */
.aql-slider-wrapper[data-arrows-position="inside"] {
    padding: 0; /* Add padding to accommodate arrows */
}

.aql-slider-wrapper[data-arrows-position="inside"] .slick-prev {
    left: calc(var(--aql-arrow-space, 48px) * 0.2);
}

.aql-slider-wrapper[data-arrows-position="inside"] .slick-next {
    right: calc(var(--aql-arrow-space, 48px) * 0.2);
}
.aql-slider-wrapper .slick-prev:hover,
.aql-slider-wrapper .slick-next:hover {
    background: rgba(0, 0, 0, 0.9);
}


.aql-slider-wrapper .slick-prev:before {
    content: '';
    display: block;
    width: calc(var(--aql-arrow-size, 32px) / 2);
    height: calc(var(--aql-arrow-size, 32px) / 2);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath d='M207.9,281.2l12.7-12.7c3-3,3-7.9,0-10.9l-115.7-115.9L220.5,25.8c3-3,3-7.9,0-10.9l-12.7-12.7c-3-3-7.9-3-10.9,0L62.9,136.3c-3,3-3,7.9,0,10.9l134.1,134c3,3,7.9,3,10.9,0Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath d='M207.9,281.2l12.7-12.7c3-3,3-7.9,0-10.9l-115.7-115.9L220.5,25.8c3-3,3-7.9,0-10.9l-12.7-12.7c-3-3-7.9-3-10.9,0L62.9,136.3c-3,3-3,7.9,0,10.9l134.1,134c3,3,7.9,3,10.9,0Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    margin: 0 auto;
}

.aql-slider-wrapper .slick-next:before {
    content: '';
    display: block;
    width: calc(var(--aql-arrow-size, 32px) / 2);
    height: calc(var(--aql-arrow-size, 32px) / 2);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath d='M75.6,2.3l-12.7,12.7c-3,3-3,7.9,0,10.9l115.7,115.9-115.7,115.9c-3,3-3,7.9,0,10.9l12.7,12.7c3,3,7.9,3,10.9,0l134-134.1c3-3,3-7.9,0-10.9L86.5,2.3c-3-3-7.9-3-10.9,0Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 283.5'%3E%3Cpath d='M75.6,2.3l-12.7,12.7c-3,3-3,7.9,0,10.9l115.7,115.9-115.7,115.9c-3,3-3,7.9,0,10.9l12.7,12.7c3,3,7.9,3,10.9,0l134-134.1c3-3,3-7.9,0-10.9L86.5,2.3c-3-3-7.9-3-10.9,0Z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    margin: 0 auto;
}

/* Editor notice styles */
.aql-slider-editor-notice {
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    margin: 10px 0;
}

.aql-slider-editor-notice p {
    margin: 5px 0;
}

.aql-slider-editor-notice p:first-child {
    font-size: 16px;
    margin-bottom: 10px;
}

.aql-slider-editor-notice em {
    color: #646970;
    font-size: 14px;
}

/* Override Slick font icons with our custom styles */
.aql-slider-wrapper .slick-prev .slick-prev-icon,
.aql-slider-wrapper .slick-next .slick-next-icon {
    display: none !important;
}

/* Ensure our custom arrow styles take precedence */
.aql-slider-wrapper .slick-prev,
.aql-slider-wrapper .slick-next {
    font-family: inherit !important;
    background: var(--aql-arrow-background, rgba(0, 0, 0, 0.7)) !important;
    color: var(--aql-arrow-color, #ffffff) !important;
    border-radius: 50% !important;
    width: var(--aql-arrow-size, 32px) !important;
    height: var(--aql-arrow-size, 32px) !important;
    line-height: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Override dot font icons with CSS circles */
.aql-slider-wrapper .slick-dots li button .slick-dot-icon {
    display: none !important;
}

/* Ensure our custom dot styles take precedence */
.aql-slider-wrapper .slick-dots li button {
    background: var(--aql-dots-color, #ccc) !important;
    border-radius: 50% !important;
    width: var(--aql-dot-size, 10px) !important;
    height: var(--aql-dot-size, 10px) !important;
    border: none !important;
    font-family: inherit !important;
    font-size: 0 !important;
    line-height: var(--aql-dot-size, 10px) !important;
}

.aql-slider-wrapper .slick-dots li.slick-active button {
    background: var(--aql-dots-hover-color, #007cba) !important;
}

.aql-slider-wrapper .slick-dots li button:hover {
    background: var(--aql-dots-hover-color, #007cba) !important;
}

/* Override autoplay toggle button font icons */
.aql-slider-wrapper .slick-autoplay-toggle-button .slick-pause-icon:before,
.aql-slider-wrapper .slick-autoplay-toggle-button .slick-play-icon:before {
    content: '' !important;
    display: none !important;
}

/* Custom autoplay toggle button styling */
.aql-slider-wrapper .slick-autoplay-toggle-button {
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border-radius: 50% !important;
    width: calc(var(--aql-arrow-size, 32px) - 2px) !important;
    height: calc(var(--aql-arrow-size, 32px) - 2px) !important;
    font-family: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.aql-slider-wrapper .slick-autoplay-toggle-button .slick-pause-icon,
.aql-slider-wrapper .slick-autoplay-toggle-button .slick-play-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.aql-slider-wrapper .slick-autoplay-toggle-button .slick-pause-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6V4zm8 0h4v16h-4V4z' fill='white'/%3E%3C/svg%3E");
}

.aql-slider-wrapper .slick-autoplay-toggle-button .slick-play-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E");
}

/* Hide autoplay controls when disabled */
.aql-slider-wrapper[data-show-autoplay-controls="false"] .slick-autoplay-toggle-button {
    display: none !important;
}

/* Accessibility improvements */
.aql-slider-wrapper .slick-prev:focus,
.aql-slider-wrapper .slick-next:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.aql-slider-wrapper .slick-dots li button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Equal height functionality */
.aql-slider-wrapper[data-equal-height="true"] .slick-track {
    display: flex;
    align-items: stretch;
}

.aql-slider-wrapper[data-equal-height="true"] .slick-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

.aql-slider-wrapper[data-equal-height="true"] .slick-slide > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure content within slides stretches to fill available height */
.aql-slider-wrapper[data-equal-height="true"] .slick-slide .wp-block-post,
.aql-slider-wrapper[data-equal-height="true"] .slick-slide .wp-block-query-loop,
.aql-slider-wrapper[data-equal-height="true"] .slick-slide .wp-block-post-template {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.aql-slider-wrapper[data-equal-height="true"] .slick-slide .wp-block-post .wp-block-post-content,
.aql-slider-wrapper[data-equal-height="true"] .slick-slide .wp-block-post .entry-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .aql-slider-wrapper .slick-slide {
        transition: none;
    }
    
    .aql-slider-wrapper .slick-prev,
    .aql-slider-wrapper .slick-next {
        transition: none;
    }
    
    .aql-slider-wrapper .slick-dots li button {
        transition: none;
    }
}