/**
 * Website Themes Template Styles
 *
 * Specific styles for the Website Themes template page
 */

/* Example mobile device styling */
.example-mobile {
    background: url(https://s.wildapricot.net/StaticImages/v136/Content/Preview/phone.png) center center no-repeat;
    background-size: 100%;
    padding: 31px 17px 37px 9px;
    box-sizing: border-box;
    position: absolute;
    right: -5px;
    bottom: -20px;
    width: 126px;
    height: 218px;
}

/* Image hover effect */
#examples a img:hover {
    filter: brightness(90%);
    transition: filter 0.3s ease;
}

/* Carousel indicators styling */
.carousel-indicators {
    position: relative;
    margin: 0;
    justify-content: flex-start;
}

.carousel-indicators a {
    text-indent: 0;
    cursor: pointer;
    border: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.carousel-indicators a.active {
    opacity: 1;
}

/* Modal styling */
.modal-dialog.modal-xl {
    max-width: 90%;
}

@media (min-width: 1200px) {
    .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}

/* Accessibility enhancements */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000000;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}