/**
 * Block styles for AssuredTech theme
 * Contains styles for custom block variations and enhancements
 */

/* Mobile responsive styles */
@media (max-width: 839px) {
    /* Column reverse for columns block */
    .wp-block-columns.is-style-reverse-mobile {
        flex-direction: column-reverse;
    }
    
    /* Row reverse for group block used as row */
    .wp-block-group.is-style-reverse-mobile {
        flex-direction: row-reverse;
    }
}

.wp-block-list.is-style-custom-list-arrows {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-custom-list-arrows > li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 2rem;
}

.wp-block-list.is-style-custom-list-arrows > li:last-child {
    margin-bottom: 0;
}

.wp-block-list.is-style-custom-list-arrows > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 6px;
    height: 16px;
    background-image: url('../icons/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Custom List Check Style */
.is-style-custom-list-check,
.is-style-custom-list-check ul,
.is-style-custom-list-check ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.is-style-custom-list-check > li,
.is-style-custom-list-check ul > li,
.is-style-custom-list-check ol > li {
    position: relative;
    padding: 24px;
    padding-left: 3.5em;
    margin-bottom: 24px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.is-style-custom-list-check > li:last-child,
.is-style-custom-list-check ul > li:last-child,
.is-style-custom-list-check ol > li:last-child {
    margin-bottom: 0;
}

.is-style-custom-list-check > li::before,
.is-style-custom-list-check ul > li::before,
.is-style-custom-list-check ol > li::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../icons/list-check.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Custom List Check Style with no bg*/
.is-style-custom-list-check-no-bg,
.is-style-custom-list-check-no-bg ul,
.is-style-custom-list-check-no-bg ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.is-style-custom-list-check-no-bg > li,
.is-style-custom-list-check-no-bg ul > li,
.is-style-custom-list-check-no-bg ol > li {
    position: relative;
    padding-left: 3em;
    margin-bottom: 2.5rem;
}

.is-style-custom-list-check-no-bg > li:last-child,
.is-style-custom-list-check-no-bg ul > li:last-child,
.is-style-custom-list-check-no-bg ol > li:last-child {
    margin-bottom: 0;
}

.is-style-custom-list-check-no-bg > li::before,
.is-style-custom-list-check-no-bg ul > li::before,
.is-style-custom-list-check-no-bg ol > li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../icons/list-check.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Default Button Style Base */
.wp-block-button .wp-block-button__link {
    border: 3px solid transparent;
    box-sizing: border-box;
    padding: 0.75em 1.5em;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

@media (max-width: 839px) {
    header .wp-block-button .wp-block-button__link {
        padding: 0.25em 1em !important;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
}

/* Global Default Button Hover/Focus Styles */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
    border-color: #ffffff;
}

/* Custom White Button Style */
.wp-block-button.is-style-white-button-style .wp-block-button__link {
    background-color: #ffffff;
    color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-white-button-style .wp-block-button__link:hover,
.wp-block-button.is-style-white-button-style .wp-block-button__link:focus {
    border-color: var(--wp--preset--color--secondary);
}

/* Filter Button Style */
.wp-block-button.is-style-filter-button .wp-block-button__link {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.wp-block-button.is-style-filter-button .wp-block-button__link:hover,
.wp-block-button.is-style-filter-button .wp-block-button__link:focus,
.wp-block-button.is-style-filter-button .wp-block-button__link.is-active {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--primary);
}

/* Rounded corners image style */
.is-style-rounded-corners img {
    border-radius: 10px;
}

/* Ensure the parent figure also has overflow hidden to respect the border-radius */
.wp-block-image.is-style-rounded-corners {
    overflow: hidden;
}

/* Background for SVG style */
.wp-block-image.is-style-background-for-svg {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-image.is-style-background-for-svg img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Custom navigation arrows style */
.wp-block-navigation.is-style-custom-nav-arrows {
    /* Display as block to enable vertical layout */
    display: block;
}

/* Make container vertical */
.wp-block-navigation.is-style-custom-nav-arrows .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.wp-block-navigation.is-style-custom-nav-arrows .wp-block-navigation-item__content {
    position: relative;
    padding-left: 1.5em;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.wp-block-navigation.is-style-custom-nav-arrows .wp-block-navigation-item__content:before {
    content: "";
    position: absolute;
    left: 0;
/*     top: 0.25em; */
    width: 6px;
    height: 16px;
    background-image: url('../icons/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Optional hover effect - slightly enlarge the arrow */
.wp-block-navigation.is-style-custom-nav-arrows .wp-block-navigation-item:hover .wp-block-navigation-item__content:before {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Sticky blocks that respect header height */
.wp-block-group.is-style-sticky-below-header {
    position: sticky;
    top: 105px; /* Same as header height */
    z-index: 999; /* Below header but above content */
}

/* Cover block with secondary color overlay */
.wp-block-cover.is-style-secondary-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--wp--preset--color--secondary);
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
}

.wp-block-cover.is-style-secondary-overlay .wp-block-cover__background {
    z-index: 2;
}

.wp-block-cover.is-style-secondary-overlay .wp-block-cover__inner-container {
    position: relative;
    z-index: 3;
}

.wp-block-cover.is-style-secondary-overlay .wp-block-cover__inner-container * {
    position: relative;
    z-index: 10;
}

/* Cover block with gradient overlay */
.wp-block-cover.is-style-gradient-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, 
        #2D445C 18%, 
        rgba(45, 68, 92, 0) 50%, 
        #2D445C 86%);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.wp-block-cover.is-style-gradient-overlay .wp-block-cover__background {
    z-index: 2;
}

.wp-block-cover.is-style-gradient-overlay .wp-block-cover__inner-container {
    position: relative;
    z-index: 3;
}

.wp-block-cover.is-style-gradient-overlay .wp-block-cover__inner-container * {
    position: relative;
    z-index: 10;
}

/* editor only z-index */
body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__background, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__gradient-background, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)) .wp-block-cover__inner-container, body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-block-cover__background+.wp-block-cover__inner-container)).has-background-dim:not(.has-background-gradient):before {
    z-index: 10;
}
.statement-overlay {
    position: relative;
    color: #fff;
}

.statement-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* 0.5 = 50% transparency */
    z-index: 0;
}

.statement-overlay > * {
    position: relative;
    z-index: 1;
}