/* ==========================================================================
   NEW BEM ARCHITECTURE - Section Content styles
   ========================================================================== */

/* Base Component */
.cdswerx-section,
.cdswerx-section-widget {
    position: relative;
}

/* Content Container */
.cdswerx-section__content {
    /* Content container styles */
}

/* Elements */
.cdswerx-section__title,
.cdswerx-section-title .cdswerx-section-m-title {
    margin: 0;
    display: block;
}

.cdswerx-section__subtitle,
.cdswerx-section-title .cdswerx-section-m-subtitle {
    display: flex;
    align-items: center;
    margin: 0;
}

.cdswerx-section__icon,
.cdswerx-section-title .cdswerx-section-m-icon-holder {
    display: inline-block;
    line-height: 1em;
    font-size: var(--cds-subtitle-icon-size, 1em);
    flex-shrink: 0;
}

.cdswerx-section__icon svg,
.cdswerx-section-title .cdswerx-section-m-icon-holder svg {
    width: var(--cds-subtitle-icon-size, 1em);
    height: var(--cds-subtitle-icon-size, 1em);
    fill: currentColor;
    stroke: currentColor;
}

.cdswerx-section__description,
.cdswerx-section-description.cdswerx-section-m-description-text {
    margin: 0;
    padding: 0;
}

/* Element Modifiers */
.cdswerx-section__subtitle--above,
.cdswerx-section-subtitle--above {
    margin-bottom: 0.5em;
}

.cdswerx-section__subtitle--below,
.cdswerx-section-subtitle--below {
    margin-top: 0.5em;
}

/* Highlight Elements */
.cdswerx-section__highlight--colored,
.cdswerx-section-e-colored {
    /* Color styles will be controlled by Elementor controls */
}

.cdswerx-section__highlight--decorated,
.cdswerx-section-e-decorated {
    /* Decoration styles */
}

/* Component Modifiers - Icon Positioning */
.cdswerx-section--icon-left .cdswerx-section__subtitle,
.cdswerx-section-subtitle-icon-left.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

.cdswerx-section--icon-right .cdswerx-section__subtitle,
.cdswerx-section-subtitle-icon-right.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.cdswerx-section--icon-left .cdswerx-section__icon,
.cdswerx-section-subtitle-icon-left .cdswerx-section-m-icon-holder {
    margin-right: 0;
}

.cdswerx-section--icon-right .cdswerx-section__icon,
.cdswerx-section-subtitle-icon-right .cdswerx-section-m-icon-holder {
    margin-left: 0;
}

/* Component Modifiers - Layout */
.cdswerx-section--boxed-subtitle .cdswerx-section__subtitle,
.cdswerx-section-widget.cdswerx-section-subtitle-layout--boxed .cdswerx-section-m-subtitle {
    background-color: #f4f4f4;
    border-radius: 4px;
    padding: 1em;
    display: inline-flex;
    width: auto;
}

.cdswerx-section--outlined-subtitle .cdswerx-section__subtitle,
.cdswerx-section-widget.cdswerx-section-subtitle-layout--outlined .cdswerx-section-m-subtitle {
    border: 2px solid #111;
    border-radius: 4px;
    padding: 1em;
    display: inline-flex;
    width: auto;
}

/* Component Modifiers - Title Decoration */
.cdswerx-section--title-italic .cdswerx-section__highlight--decorated,
.cdswerx-section-title-decoration-italic .cdswerx-section-e-decorated {
    font-style: italic;
}

.cdswerx-section--title-bold .cdswerx-section__highlight--decorated,
.cdswerx-section-title-decoration-bold .cdswerx-section-e-decorated {
    font-weight: 700;
}

.cdswerx-section--title-underline .cdswerx-section__highlight--decorated {
    text-decoration: underline;
}

/* Title Link Styles */
.cdswerx-section__title-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: color .25s ease-in-out;
}

.cdswerx-section__title-link:hover {
    text-decoration: none;
}

/* ==========================================================================
   LEGACY ARCHITECTURE - Section Content styles (Maintain compatibility)
   ========================================================================== */
.cdswerx-section-widget {
    position: relative
}

/* Enhanced spacing controls support */
.cdswerx-section-description.cdswerx-section-m-description-text {
    margin: 0; /* Reset to allow spacing controls to work */
    padding: 0;
}

.cdswerx-section-widget h1 a,
.cdswerx-section-widget h2 a,
.cdswerx-section-widget h3 a,
.cdswerx-section-widget h4 a,
.cdswerx-section-widget h5 a,
.cdswerx-section-widget h6 a{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;  
}



.cdswerx-section-title .cdswerx-section-m-title {
    margin: 0;
    display: block;
}

.cdswerx-section-title .cdswerx-section-m-subtitle {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Spacing for subtitle above title */
.cdswerx-section-subtitle--above {
    margin-bottom: 0.5em;
}

/* Spacing for subtitle below title */  
.cdswerx-section-subtitle--below {
    margin-top: 0.5em;
}

.cdswerx-section-subtitle-icon-left.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

.cdswerx-section-subtitle-icon-right.cdswerx-section-widget .cdswerx-section-m-subtitle {
    flex-direction: row-reverse;
    justify-content: flex-start;
}



.cdswerx-section-title .cdswerx-section-m-icon-holder {
    display: inline-block;
    line-height: 1em;
    font-size: var(--cds-subtitle-icon-size, 1em); /* Use CSS variable with fallback */
    flex-shrink: 0; /* Ensure icons respect margin spacing */
}

.cdswerx-section-title .cdswerx-section-m-icon-holder svg {
    width: var(--cds-subtitle-icon-size, 1em); /* Use CSS variable with fallback */
    height: var(--cds-subtitle-icon-size, 1em); /* Use CSS variable with fallback */
    fill: currentColor;
    stroke: currentColor
}

/* Enhanced support for subtitle icon spacing controls */
.cdswerx-section-subtitle-icon-left .cdswerx-section-m-icon-holder {
    margin-right: 0; /* Will be overridden by spacing control */
}

.cdswerx-section-subtitle-icon-right .cdswerx-section-m-icon-holder {
    margin-left: 0; /* Will be overridden by spacing control */
}

.cdswerx-section-title>.cdswerx-section-m-text {
    margin: .5em 0 0;
    padding: 0;
}

.cdswerx-section-button {
    margin-top: .65em
}

.cdswerx-section-title.cdswerx-section-decoration--underline .cdswerx-section-e-decorated {
    text-decoration: underline
}

.cdswerx-section-title.cdswerx-section-decoration--italic .cdswerx-section-e-decorated {
    font-style: italic
}

.cdswerx-section-title.cdswerx-section-decoration--bold .cdswerx-section-e-decorated {
    font-weight: 700
}

.cdswerx-section-title.cdswerx-section-link--underline-draw .cdswerx-section-e-link {
    position: relative;
    text-decoration: none;
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 87%
}

.cdswerx-section-title.cdswerx-section-link--underline-draw .cdswerx-section-e-link:hover {
    color: currentColor;
    text-decoration: none;
    animation: cdswerx-section-animate-underline-multiline 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards
}

.cdswerx-section-title.cdswerx-section-link--underline-draw .cdswerx-section-e-link:focus {
    color: currentColor
}

.cdswerx-section-title.cdswerx-section-text-link--underline>.cdswerx-section-m-text a {
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%
}

.cdswerx-section-title.cdswerx-section-text-link--underline>.cdswerx-section-m-text a:hover {
    text-decoration: none;
    background-size: 100% 100%
}

.cdswerx-section-title.cdswerx-section-text-link--underline-thick>.cdswerx-section-m-text a {
    width: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%
}

.cdswerx-section-title.cdswerx-section-text-link--underline-thick>.cdswerx-section-m-text a:hover {
    text-decoration: none;
    background-size: 100% 100%
}

@keyframes cdswerx-section-animate-underline-multiline-thick {
    0% {
        background-size: 100% 93%;
        background-position-x: right
    }

    38% {
        background-size: 0 93%;
        background-position-x: right
    }

    39% {
        background-size: 0 93%;
        background-position-x: left
    }

    100% {
        background-size: 100% 93%;
        background-position-x: left
    }
}

.cdswerx-section-title.cdswerx-section-text-link--underline-initial>.cdswerx-section-m-text a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 93%
}

.cdswerx-section-title.cdswerx-section-text-link--underline-initial>.cdswerx-section-m-text a:hover {
    text-decoration: none;
    animation: cdswerx-section-animate-underline-multiline-thick 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards
}

@media only screen and (max-width:1024px) {
    .cdswerx-section-title.cdswerx-section-title-break--disabled .cdswerx-section-m-title br {
        display: none
    }
    /* Add support for the new disable breaks class */
    .cdswerx-section-disable-title-breaks .cdswerx-section-m-title br {
        display: none
    }
}

/* Title decoration styles */
.cdswerx-section-title-decoration-underline .cdswerx-section-e-decorated {
    text-decoration: underline;
}

.cdswerx-section-title-decoration-italic .cdswerx-section-e-decorated {
    font-style: italic;
}

.cdswerx-section-title-decoration-bold .cdswerx-section-e-decorated {
    font-weight: 700;
}

/* Title link underline draw styles */
.cdswerx-section-title-link-underline-draw .cdswerx-section-e-link {
    position: relative;
    text-decoration: none;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 87%;
}

.cdswerx-section-title-link-underline-draw .cdswerx-section-e-link:hover {
    color: currentColor;
    text-decoration: none;
    animation: cdswerx-section-animate-underline-multiline 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards;
}

.cdswerx-section-title-link-underline-draw .cdswerx-section-e-link:focus {
    color: currentColor;
}

/* Text link underline styles */
.cdswerx-section-text-link-underline .cdswerx-section-description a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%;
    text-decoration: none;
}

.cdswerx-section-text-link-underline .cdswerx-section-description a:hover {
    background-size: 100% 100%;
}

.cdswerx-section-text-link-underline-thick .cdswerx-section-description a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    transition: .9s cubic-bezier(.32, .32, .15, 1.17);
    background-size: 0 100%;
    text-decoration: none;
}

.cdswerx-section-text-link-underline-thick .cdswerx-section-description a:hover {
    background-size: 100% 100%;
}

.cdswerx-section-text-link-underline-initial .cdswerx-section-description a {
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - .07em), currentColor .07em);
    background-size: 100% 93%;
    text-decoration: none;
}

.cdswerx-section-text-link-underline-initial .cdswerx-section-description a:hover {
    animation: cdswerx-section-animate-underline-multiline-thick 1.1s cubic-bezier(.32, .32, .15, 1.17) forwards;
}

/* ==========================================================================
   Section Title Link Styles (Based on Button Widget Patterns)
   ========================================================================== */

/* Title link base styles */
.cdswerx-section-title-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: color .25s ease-in-out;
}

.cdswerx-section-title-link:hover {
    text-decoration: none;
}

/* Title link underline styles */
.cdswerx-section-title-link.cdswerx-section-text-underline .cdswerx-section-m-title {
    position: relative;
}

.cdswerx-section-title-link.cdswerx-section-text-underline .cdswerx-section-m-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51, .5, .07, .99);
    backface-visibility: hidden;
}

/* Hover effect - shrink underline by default */
.cdswerx-section-title-link.cdswerx-section-text-underline:not(.cdswerx-section-title-link-underline-draw):hover .cdswerx-section-m-title:after {
    width: 0;
}

/* Underline position alignment */
.cdswerx-section-title-link.cdswerx-section-text-underline.cdswerx-section-underline--center .cdswerx-section-m-title:after {
    left: 50%;
    transform: translateX(-50%);
}

.cdswerx-section-title-link.cdswerx-section-text-underline.cdswerx-section-underline--right .cdswerx-section-m-title:after {
    left: auto;
    right: 0;
}

/* Draw animation styles */
.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw .cdswerx-section-m-title {
    overflow: hidden;
}

.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw.cdswerx-section-underline--left:hover .cdswerx-section-m-title:after {
    animation: cdswerx-section-animate-underline-from-left .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw.cdswerx-section-underline--right:hover .cdswerx-section-m-title:after {
    animation: cdswerx-section-animate-underline-from-right .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

.cdswerx-section-title-link.cdswerx-section-title-link-underline-draw.cdswerx-section-underline--center:hover .cdswerx-section-m-title:after {
    animation: cdswerx-section-animate-underline-from-left .7s cubic-bezier(.45, .29, 0, .82) forwards;
}

/* ==========================================================================
   Animation Keyframes
   ========================================================================== */
@keyframes cdswerx-section-animate-underline-from-left {
    0% {
        transform: scaleX(1);
        transform-origin: right;
    }
    37% {
        transform: scaleX(0);
        transform-origin: right;
    }
    38% {
        transform: scaleX(0);
        transform-origin: left;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes cdswerx-section-animate-underline-from-right {
    0% {
        transform: scaleX(1);
        transform-origin: left;
    }
    37% {
        transform: scaleX(0);
        transform-origin: left;
    }
    38% {
        transform: scaleX(0);
        transform-origin: right;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right;
    }
}

/* ==========================================================================
   Legacy Styles (Keep for backward compatibility)
   ========================================================================== */

/* Animation keyframes */
@keyframes cdswerx-section-animate-underline-multiline {
    0% {
        background-size: 100% 87%;
        background-position-x: right;
    }
    38% {
        background-size: 0 87%;
        background-position-x: right;
    }
    39% {
        background-size: 0 87%;
        background-position-x: left;
    }
    100% {
        background-size: 100% 87%;
        background-position-x: left;
    }
}

/* ==========================================================================
   Section Widget Styles
   ========================================================================== */

/* Layout-specific Background and Border Styles with Default Padding */
.cdswerx-section-widget.cdswerx-section-subtitle-layout--boxed .cdswerx-section-m-subtitle {
    background-color: #f4f4f4;
    border-radius: 4px;
    padding: 1em; /* Default padding for boxed layout */
    display: inline-flex; /* Only take up content width */
    width: auto; /* Ensure width is not forced to 100% */
}

.cdswerx-section-widget.cdswerx-section-subtitle-layout--outlined .cdswerx-section-m-subtitle {
    border: 2px solid #111;
    border-radius: 4px;
    padding: 1em; /* Default padding for outlined layout */
    display: inline-flex; /* Only take up content width */
    width: auto; /* Ensure width is not forced to 100% */
}

/* Icon Spacing Controls - Target the container with icon position classes */
.cdswerx-section-widget.cdswerx-section-subtitle-icon-left .cdswerx-section-m-icon-holder {
    margin-right: 0; /* Will be overridden by spacing control */
}

.cdswerx-section-widget.cdswerx-section-subtitle-icon-right .cdswerx-section-m-icon-holder {
    margin-left: 0; /* Will be overridden by spacing control */
}

/* Left icon positioning */
.cdswerx-section-widget.cdswerx-section-subtitle-icon-left .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

/* Right icon positioning - keep subtitle left-aligned */
.cdswerx-section-widget.cdswerx-section-subtitle-icon-right .cdswerx-section-m-subtitle {
    flex-direction: row;
    justify-content: flex-start;
}

/* ==========================================================================
   Description List Marker Modes
   Applied via list_marker_view control (Default / None / Numbers / Bullets / Icon).
   Bullets mode uses native CSS list-style-type (value set by Elementor selector).
   Icon mode removes native markers and injects a PHP span instead.
   ========================================================================== */

/* 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-section__description ul,
.cdswerx-section__description ol {
    margin: 0;
    padding: 0;
}

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

/* Numbers mode — force decimal counters on both ul and ol */
.cdswerx-section__description--marker-numbers ul,
.cdswerx-section__description--marker-numbers ol {
    list-style-type: decimal;
    padding-left: 1.5em;
}

/* Bullets mode — uses native CSS list-style-type (value set by Elementor selector) */
.cdswerx-section__description--marker-bullets ul,
.cdswerx-section__description--marker-bullets ol {
    padding-left: 1.5em;
}

/* Icon mode — remove native markers, inject span */
.cdswerx-section__description--icon-marker ul,
.cdswerx-section__description--icon-marker ol {
    list-style: none;
    padding-left: 0;
}

.cdswerx-section__description--icon-marker li {
    display: flex;
    align-items: baseline;
}

/* Injected marker span (icon mode) */
.cdswerx-section__list-marker {
    flex-shrink: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.cdswerx-section__list-marker svg {
    fill: currentColor;
    width: 1em;
    height: 1em;
}

/* List Style Position — Inside: markers sit inside the content box, flush with text */
.cdswerx-section__description--list-inside ul,
.cdswerx-section__description--list-inside ol {
    list-style-position: inside;
    margin-left: 0 !important;
}

/* List Hover Underline — animated underline on li a hover */
.cdswerx-section__description--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-section__description--list-underline li a:hover {
    background-size: 100% 100%;
}