/**
 * CDSWerx Interactive Links Widget
 *
 * Adapted from Qi Interactive Links CSS.
 * BEM naming: .cdswerx-interactive-links__*
 *
 * @package CDSWerx_Widget_Library
 * @since   2.13.0
 */

/* ═══════════════════════════════════════════════════════════════
   BASE / SHARED
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    vertical-align: top;
    visibility: hidden;
}

.cdswerx-interactive-links.cdswerx--init {
    visibility: visible;
}

.cdswerx-interactive-links.cdswerx-interactive-links--full-height {
    height: 100vh;
}

.admin-bar .cdswerx-interactive-links.cdswerx-interactive-links--full-height {
    height: calc(100vh - 32px);
}


/* ── Items container ── */

.cdswerx-interactive-links__items {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}


/* ── Single item (anchor) ── */

.cdswerx-interactive-links__item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: auto;
    color: #111;
    margin: 0.6em 0;
    text-decoration: none;
}


/* ── Title ── */

.cdswerx-interactive-links__title {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 39px;
    line-height: 1.19048em;
    transition: color 0.2s ease-out;
    z-index: 2;
}

@media only screen and (max-width: 680px) {
    .cdswerx-interactive-links__title {
        font-size: 36px;
    }
}


/* ── Inner title (underline pseudo-element host) ── */

.cdswerx-interactive-links__inner-title {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.cdswerx-interactive-links__inner-title:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.cdswerx-interactive-links__inner-title:hover:after {
    width: 100%;
}

/* Underline position */
.cdswerx-hover--underline .cdswerx-interactive-links__inner-title:after {
    bottom: 0;
}

/* Line-through position */
.cdswerx-hover--line-through .cdswerx-interactive-links__inner-title:after {
    top: 50%;
    transform: translateY(-50%);
}

/* Active item → show underline */
.cdswerx-interactive-links .cdswerx--active.cdswerx-interactive-links__item .cdswerx-interactive-links__inner-title:after {
    width: 100%;
}


/* ── Text ── */

.cdswerx-interactive-links__text {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0s 0.45s;
}

.cdswerx-interactive-links__image.cdswerx-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cdswerx-interactive-links__image.cdswerx-background img {
    display: none;
}

.cdswerx-interactive-links__image.cdswerx--active {
    opacity: 1;
    z-index: 5;
    transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT: STANDARD
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links.cdswerx-interactive-links--standard {
    justify-content: center;
    text-align: center;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
    width: 40%;
    justify-content: center;
}

/* Images on top — unset z-index so images layer above titles */
.cdswerx-standard-images-on-top--yes .cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
    z-index: unset;
}

/* Standard image positioning */
.cdswerx-interactive-links--standard .cdswerx-interactive-links__image {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease-out;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__image.cdswerx-position--left {
    left: 0;
    width: 30%;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__image.cdswerx-position--right {
    left: auto;
    right: 0;
    width: 30%;
}

.cdswerx-interactive-links--standard .cdswerx-interactive-links__image img {
    position: relative;
}

/* Standard: Hide images responsive */
@media only screen and (max-width: 768px) {
    .cdswerx-standard-hide-under--768 .cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
        display: none;
    }
}

@media only screen and (max-width: 680px) {
    .cdswerx-standard-hide-under--680 .cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--680 .cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .cdswerx-standard-hide-under--480 .cdswerx-interactive-links--standard .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--480 .cdswerx-interactive-links--standard .cdswerx-interactive-links__items {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT: INLINE  (side-by-side columns like Split, horizontal text wrap)
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links.cdswerx-interactive-links--inline {
    align-items: stretch;
    text-align: left;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
    position: relative;
    flex: 1;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
    width: 40%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    margin: 0 -20px;
    padding: 60px 5%;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__item {
    position: relative;
    flex: 1;
    flex-grow: 0;
    margin: 0 !important;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__title {
    white-space: nowrap;
    padding: 0 20px;
}

/* Separator character (set via control selector) */
.cdswerx-interactive-links--inline .cdswerx-interactive-links__title:before {
    position: absolute;
    right: 0;
    transform: translateX(50%);
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__text {
    padding: 0 20px;
}

/* Inline image (flex column display like Split) */
.cdswerx-interactive-links--inline .cdswerx-interactive-links__image:not(.cdswerx-background) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdswerx-interactive-links--inline .cdswerx-interactive-links__image:not(.cdswerx-background) img {
    max-height: 100%;
    object-fit: contain;
}

/* Inline: Hide images responsive */
@media only screen and (max-width: 680px) {
    .cdswerx-inline-hide-under--680 .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-inline-hide-under--680 .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .cdswerx-inline-hide-under--480 .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-inline-hide-under--480 .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        width: 100%;
    }
}

/* Inline: Responsive stacking */
@media only screen and (max-width: 768px) {
    .cdswerx-inline-stack--yes .cdswerx-interactive-links--inline {
        flex-direction: column !important;
    }
    .cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        width: 100%;
        padding: 40px 5%;
    }
    .cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        flex: none;
        width: 100%;
        min-height: 250px;
    }
    /* Image above content on mobile */
    .cdswerx-inline-mobile-image--above.cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        order: -1;
    }
    /* Image below content on mobile */
    .cdswerx-inline-mobile-image--below.cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__images {
        order: 1;
    }
    .cdswerx-inline-mobile-image--below.cdswerx-inline-stack--yes .cdswerx-interactive-links--inline .cdswerx-interactive-links__items {
        order: -1;
    }
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT: BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links--background .cdswerx-interactive-links__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cdswerx-interactive-links--background .cdswerx-interactive-links__items {
    width: 40%;
    justify-content: center;
    align-items: flex-start;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT: SPLIT
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links.cdswerx-interactive-links--split {
    align-items: stretch;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__images {
    position: relative;
    flex: 1;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__items {
    width: 40%;
    justify-content: center;
    align-items: flex-start;
    padding: 150px 10%;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__image:not(.cdswerx-background) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdswerx-interactive-links--split .cdswerx-interactive-links__image:not(.cdswerx-background) img {
    max-height: 100%;
    object-fit: contain;
}

/* Split: Hide images responsive */
@media only screen and (max-width: 680px) {
    .cdswerx-split-hide-under--680 .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--680 .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .cdswerx-split-hide-under--480 .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        display: none;
    }
    .cdswerx-split-hide-under--480 .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        width: 100%;
    }
}

/* Split: Responsive stacking */
@media only screen and (max-width: 768px) {
    .cdswerx-split-stack--yes .cdswerx-interactive-links--split {
        flex-direction: column !important;
    }
    .cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        width: 100%;
        padding: 40px 5%;
    }
    .cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        flex: none;
        width: 100%;
        min-height: 250px;
    }
    /* Image above content on mobile */
    .cdswerx-split-mobile-image--above.cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        order: -1;
    }
    /* Image below content on mobile */
    .cdswerx-split-mobile-image--below.cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__images {
        order: 1;
    }
    .cdswerx-split-mobile-image--below.cdswerx-split-stack--yes .cdswerx-interactive-links--split .cdswerx-interactive-links__items {
        order: -1;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SUBTITLE
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__subtitle {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.2s ease-out;
}

.cdswerx-interactive-links__subtitle--above {
    /* sits above title — spacing controlled by style controls */
}

.cdswerx-interactive-links__subtitle--below {
    /* sits below title — spacing controlled by style controls */
}


/* ═══════════════════════════════════════════════════════════════
   TITLE LINK
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__title-link {
    text-decoration: none;
    color: inherit;
}

.cdswerx-interactive-links__title-link:hover {
    text-decoration: none;
    color: inherit;
}


/* ═══════════════════════════════════════════════════════════════
   TEXT (WYSIWYG)
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__text {
    display: block;
}

.cdswerx-interactive-links__text p:last-child {
    margin-bottom: 0;
}


/* ── Marker overrides ── */

/* Base reset — remove browser default padding/margin so lists align with paragraph text.
   Users can override via the List Margin / List Padding Elementor controls. */
.cdswerx-interactive-links__text ul,
.cdswerx-interactive-links__text ol {
    margin: 0;
    padding: 0;
}

/* None mode — hide markers, keep ul/li tags */
.cdswerx-interactive-links__text--marker-none ul,
.cdswerx-interactive-links__text--marker-none ol {
    list-style: none;
}

.cdswerx-interactive-links__text--marker-numbers ul,
.cdswerx-interactive-links__text--marker-numbers ol {
    list-style-type: decimal;
}

.cdswerx-interactive-links__text--marker-icon ul,
.cdswerx-interactive-links__text--marker-icon ol {
    list-style: none;
    padding-left: 0;
}

.cdswerx-interactive-links__text--marker-icon li {
    display: flex;
    align-items: flex-start;
}

.cdswerx-interactive-links__list-marker {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.5em;
    line-height: inherit;
}

.cdswerx-interactive-links__list-marker svg {
    vertical-align: middle;
}
/* List Style Position — Inside: markers sit inside the content box, flush with text */
.cdswerx-interactive-links__text--list-inside ul,
.cdswerx-interactive-links__text--list-inside ol {
    list-style-position: inside;
    margin-left: 0 !important;
}

/* List Hover Underline — animated underline on li a hover */
.cdswerx-interactive-links__text--list-underline li a {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.55s cubic-bezier(0.32, 0.32, 0.15, 1.17);
    text-decoration: none;
}

.cdswerx-interactive-links__text--list-underline li a:hover {
    background-size: 100% 100%;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════════════════════ */

.cdswerx-interactive-links__button {
    display: inline-block;
    margin-top: 15px;
}

.cdswerx-interactive-links__button a {
    text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════
   CURSOR
   ═══════════════════════════════════════════════════════════════ */

/* All items get pointer for hover image interaction */
.cdswerx-interactive-links__item {
    cursor: pointer;
}