/**
 * EPB Parallax
 * Sections with the parallax toggle enabled need overflow:hidden so the
 * shifted background doesn't bleed outside the element.
 */
.epb-parallax {
    overflow: hidden;
}

/**
 * EPB Studios Elementor Widgets CSS
 * Handwritten Correction Styles
 */

/* Import Google Fonts for handwritten style */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

/* CSS Variables for handwritten corrections */
:root {
    --body-font-size: 20px;
    --body-line-height: 2.5;
    --correction-font-size: 22px;
    --strikethrough-height: 1.4em;
    --arrow-height: 1.45em;
    --correction-color: #EE2E32;
}

/* ==================================================
   HANDWRITTEN CORRECTIONS - Base Styles
   ================================================== */

/* Base correction container */
.correction {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    overflow: visible;
    line-height: 1;
    pointer-events: none;
    cursor: default;
}

/* Original text wrapper (contains strikethrough overlay + text) */
.correction-original {
    position: relative;
    display: inline-block;
}

/* Strikethrough SVG overlay (positioned over original text)
   Now using embedded SVG instead of mask-image for better performance */
.correction-strikethrough {
    position: absolute;
    left: -5%;
    top: 50%;
    transform: translateY(-50%);
    width: 110%;
    height: var(--strikethrough-height);
    z-index: 10;
    pointer-events: none;
    color: var(--correction-color); /* SVG uses currentColor */
}

/* Embedded SVG styling for strikethrough */
.correction-strikethrough svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Arrow SVG (horizontal, to the right by default)
   Note: Width/height can be overridden by inline styles from get_arrow_html()
   Now using embedded SVG instead of mask-image for better performance */
.correction-arrow {
    display: inline-block;
    width: 4em;
    height: var(--arrow-height, 1.45em);
    flex-shrink: 0;
    margin-top: 0.5em;
    pointer-events: none;
    color: var(--correction-color); /* SVG uses currentColor */
    line-height: 0; /* Prevent extra spacing from inline-block */
}

/* Embedded SVG styling */
.correction-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top; /* Prevent baseline alignment issues */
}

/* Correction text (the handwritten correction above the original) */
.correction-text {
    position: absolute;
    left: calc(100% - 10px);
    bottom: calc(100% + 5px);
    font-family: 'Permanent Marker', cursive;
    font-size: var(--correction-font-size);
    line-height: var(--correction-font-size);
    white-space: nowrap;
    transform: rotate(0);
    font-weight: normal;
    color: var(--correction-color);
    display: flex;
    align-items: start;
    gap: 5px;
    pointer-events: none;
    z-index: 20;
}

/* ==================================================
   SIZE VARIANTS
   ================================================== */

/* Small - 16px, stroke-width 2 */
.correction-small {
    --correction-font-size: 16px;
    --strikethrough-height: 1.1em;
}

/* Large - 40px, stroke-width 6 */
.correction-large {
    --correction-font-size: 40px;
    --strikethrough-height: 1.7em;
}

/* Extra Large - 70px, stroke-width 12 */
.correction-xlarge {
    --correction-font-size: 70px;
    --strikethrough-height: 1.7em;
}


/* ==================================================
   STRIKETHROUGH STYLE VARIANTS
   ================================================== */

/* Alt1 strikethrough - thick, complex pattern */
.correction-alt1 {
    --strikethrough-height: 2em;
}

/* Cross strikethrough - X pattern */
.correction-cross {
    --strikethrough-height: 2em;
}

/* Zigzag strikethrough */
.correction-zigzag {
    --strikethrough-height: 2em;
}

/* Wavy strikethrough */
.correction-wavy {
    --strikethrough-height: 2em;
}

/* ==================================================
   ARROW POSITION VARIANTS
   ================================================== */

/* Default is upper-right diagonal (existing behavior) */

/* Arrow Above - vertical positioning, text above */
.correction-arrow-above .correction-text {
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    flex-direction: column-reverse;
    align-items: center;
}

.correction-arrow-above .correction-arrow {
    margin-top: 0;
    transform: rotate(180deg);
}

/* Arrow Below - vertical positioning, text below */
.correction-arrow-below .correction-text,
.correction-below .correction-text {
    left: 50%;
    top: calc(100% + 5px);
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
}

.correction-arrow-below .correction-arrow,
.correction-below .correction-arrow {
    margin-top: 0;
}

/* Arrow Right - horizontal positioning, text to the right */
.correction-arrow-right .correction-text {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
    align-items: center;
}

.correction-arrow-right .correction-arrow {
    transform: rotate(-90deg);
    margin-top: 0;
    margin-left: 5px;
}

/* Arrow Left - horizontal positioning, text to the left */
.correction-arrow-left .correction-text {
    right: calc(100% + 10px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row-reverse;
    align-items: center;
}

.correction-arrow-left .correction-arrow {
    transform: rotate(90deg);
    margin-top: 0;
    margin-right: 5px;
    margin-left: 0;
}

/* Arrow None - no arrow at all, just strikethrough */
.correction-arrow-none .correction-text {
    display: none;
}

/* Arrow Upper-Right Diagonal - default behavior (explicit) */
.correction-arrow-upper-right .correction-text {
    left: calc(100% - 10px);
    bottom: calc(100% + 5px);
    transform: rotate(0);
}

.correction-arrow-upper-right .correction-arrow {
    margin-top: 0.5em;
}

/* Arrow Upper-Left Diagonal - text to upper-left */
.correction-arrow-upper-left .correction-text {
    right: calc(100% - 10px);
    left: auto;
    bottom: calc(100% + 5px);
    flex-direction: row-reverse;
}

.correction-arrow-upper-left .correction-arrow {
    transform: scaleX(-1);
    margin-top: 0.5em;
    margin-left: 0;
}

/* Arrow Lower-Right Diagonal - text to lower-right */
.correction-arrow-lower-right .correction-text {
    left: calc(100% - 10px);
    top: calc(100% - 10px);
    bottom: auto;
    align-items: end; 
}

.correction-arrow-lower-right .correction-arrow {
    transform: scaleY(-1);
    margin-bottom: 0.5em;
}

/* Arrow Lower-Left Diagonal - text to lower-left */
.correction-arrow-lower-left .correction-text {
    right: calc(100% - 10px);
    left: auto;
    top: calc(100% - 10px);
    bottom: auto;
    flex-direction: row-reverse;
    align-items: end;
} 

.correction-arrow-lower-left .correction-arrow {
    transform: scaleX(-1) scaleY(-1);
    margin-bottom: 0.5em;
    margin-left: 0;
}

/* ==================================================
   SHOWCASE WIDGET SPECIFIC STYLES
   ================================================== */

.epb-correction-showcase {
    padding: 20px;
}

.epb-correction-showcase .showcase-section {
    margin-bottom: 40px;
}

.epb-correction-showcase .showcase-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid var(--correction-color);
    padding-bottom: 10px;
}

.epb-correction-showcase .correction-examples {
    font-size: 20px;
    line-height: 2.5;
}

.epb-correction-showcase .correction-examples p {
    margin: 30px 0;
}

/* ==================================================
   STRIKETHROUGH ELEMENT WIDGET
   ================================================== */

.epb-strikethrough-element {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 200px; /* Default, overridden by Elementor */
    height: 50px; /* Default, overridden by Elementor */
    min-width: 50px;
    min-height: 20px;
}

.epb-strikethrough-graphic {
    width: 100%;
    height: 100%;
    color: var(--correction-color, #EE2E32); /* Default color, overridden by Elementor */
}

.epb-strikethrough-graphic svg {
    width: 100%;
    height: 100%;
}

.epb-strikethrough-graphic svg path {
    stroke: currentColor;
}

/* Animation base - Only plays when .epb-animate-start is added by JavaScript */
.epb-strikethrough-animated.epb-animate-start svg path {
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-duration: var(--animation-duration, 6s);
    animation-delay: var(--animation-delay, 0s);
    /* iteration-count set by specific animation rules (forwards for single, infinite for loop) */
}

/* Loop animation - same as base, just allows retriggering via Intersection Observer */
/* No need for infinite - loop is handled by JavaScript retriggering when entering viewport */

/* Draw animation - reveals from left to right using stroke-dashoffset */
.epb-strikethrough-draw svg path {
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
}

/* Draw keyframes - 4 variations with offseted start/end (all take same time to draw) */
/* Animation 1: Draw 0-50%, stay 50-100% */
@keyframes epb-strikethrough-draw-1 {
    0% { stroke-dashoffset: var(--path-length); }
    20% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

/* Animation 2: Wait 0-10%, draw 10-60%, stay 60-100% */
@keyframes epb-strikethrough-draw-2 {
    0% { stroke-dashoffset: var(--path-length); }
    10% { stroke-dashoffset: var(--path-length); }
    30% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

/* Animation 3: Wait 0-20%, draw 20-70%, stay 70-100% */
@keyframes epb-strikethrough-draw-3 {
    0% { stroke-dashoffset: var(--path-length); }
    20% { stroke-dashoffset: var(--path-length); }
    40% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

/* Animation 4: Wait 0-30%, draw 30-80%, stay 80-100% */
@keyframes epb-strikethrough-draw-4 {
    0% { stroke-dashoffset: var(--path-length); }
    30% { stroke-dashoffset: var(--path-length); }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

@keyframes epb-strikethrough-opacity-loop {
    0% {
        opacity: 0;
    }
    1.5% {
        opacity: 1;
    }
    96% {
        opacity: 1;
    }
    97.5% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Non-loop: Reuse 4 animations across 10 paths */
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(1),
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(5),
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(9) {
    animation: epb-strikethrough-draw-1 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) 1 forwards;
}

.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(2),
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(6),
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(10) {
    animation: epb-strikethrough-draw-2 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) 1 forwards;
}

.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(3),
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(7) {
    animation: epb-strikethrough-draw-3 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) 1 forwards;
}

.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(4),
.epb-strikethrough-draw.epb-animate-start:not(.epb-strikethrough-loop) svg path:nth-of-type(8) {
    animation: epb-strikethrough-draw-4 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) 1 forwards;
}

/* Loop: Apply opacity animation on SVG, draw animation on paths */
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg {
    animation: epb-strikethrough-opacity-loop var(--animation-duration, 6s) linear infinite;
}

/* Loop: Reuse 4 animations across 10 paths */
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(1),
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(5),
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(9) {
    animation: epb-strikethrough-draw-1 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) infinite forwards;
}

.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(2),
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(6),
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(10) {
    animation: epb-strikethrough-draw-2 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) infinite forwards;
}

.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(3),
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(7) {
    animation: epb-strikethrough-draw-3 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) infinite forwards;
}

.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(4),
.epb-strikethrough-draw.epb-strikethrough-loop.epb-animate-start svg path:nth-of-type(8) {
    animation: epb-strikethrough-draw-4 var(--animation-duration, 6s) cubic-bezier(0.6, 0, 0.2, 1) infinite forwards;
}

/* Initial state for draw animation - hidden before animation starts */
.epb-strikethrough-draw:not(.epb-animate-start) svg {
    opacity: 0;
}

/* Fade animation */
@keyframes epb-strikethrough-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.epb-strikethrough-fade.epb-animate-start svg path {
    animation: epb-strikethrough-fade var(--animation-duration, 6s) var(--animation-delay, 0s) ease-in-out forwards;
}

/* Initial state for fade animation - hidden before animation starts */
.epb-strikethrough-fade:not(.epb-animate-start) svg path {
    opacity: 0;
}

/* Grow animation - scales from center */
@keyframes epb-strikethrough-grow {
    0% {
        transform: scale(0);
        transform-origin: center;
    }
    100% {
        transform: scale(1);
        transform-origin: center;
    }
}

.epb-strikethrough-grow.epb-animate-start svg path {
    animation: epb-strikethrough-grow var(--animation-duration, 6s) var(--animation-delay, 0s) ease-in-out forwards;
}

/* Initial state for grow animation - hidden before animation starts */
.epb-strikethrough-grow:not(.epb-animate-start) svg path {
    transform: scale(0);
    opacity: 0;
}

/* Slide animation - slides in from left */
@keyframes epb-strikethrough-slide {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.epb-strikethrough-slide.epb-animate-start svg path {
    animation: epb-strikethrough-slide var(--animation-duration, 6s) var(--animation-delay, 0s) ease-in-out forwards;
}

/* Initial state for slide animation - hidden before animation starts */
.epb-strikethrough-slide:not(.epb-animate-start) svg path {
    transform: translateX(-100%);
    opacity: 0;
}

/* ==================================================
   ARROW & TEXT ELEMENT WIDGET
   ================================================== */

.epb-arrow-text-element {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Width and height set by Elementor controls */
}

/* Use SSoT: correction structure with transparent original text */
.epb-arrow-text-element .correction {
    display: inline-block;
    color: transparent; /* Hide the   original text */
}

.epb-arrow-text-element .correction::before {
    display: none; /* No strikethrough for arrow-text widget */
}

.epb-arrow-text-element .correction-text {
    position: relative; /* Override absolute positioning */
    left: auto;
    bottom: auto;
    top: auto;
    right: auto;
    font-family: 'Permanent Marker', cursive;
    transform: none; /* Remove rotation */
    white-space: nowrap;
}

.epb-arrow-text-element .correction-arrow {
    /* Reset width/height so inline styles from PHP take effect */
    margin-top: 0; /* Remove default margin in this context */
}

/* Ensure the SVG inside uses correct dimensions */
.epb-arrow-text-element .correction-arrow svg {
    width: 100%;
    height: 100%;
}