/* ==========================================================================
   Section Heading Widget — Frontend Styles
   ========================================================================== */

.section-heading {
    position: relative;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   Heading Title
   ------------------------------------------------------------------------- */
.section-heading-title {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    transition: color 0.3s ease;
}

.section-heading a {
    color: inherit;
    text-decoration: none;
}
.section-heading a:hover {
    color: inherit;
}

/* -------------------------------------------------------------------------
   Watermark
   ------------------------------------------------------------------------- */
.section-heading-watermark {
    position: absolute;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
    z-index: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    transform: translate(var(--shw-offset-x, 0), var(--shw-offset-y, 0)) rotate(var(--shw-rotate, 0deg));
}

/* Horizontal positions */
.section-heading-watermark--h-left {
    left: 0;
}
.section-heading-watermark--h-center {
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%) translateY(var(--shw-offset-y, 0)) rotate(var(--shw-rotate, 0deg));
}
.section-heading-watermark--h-right {
    right: 0;
}

/* Vertical positions */
.section-heading-watermark--v-top {
    top: 0;
}
.section-heading-watermark--v-middle {
    top: 50%;
	width:100%;
}
.section-heading-watermark--v-bottom {
    bottom: 0;
}

/* Combined center horizontal + vertical middle */
.section-heading-watermark--h-center.section-heading-watermark--v-middle {
    transform: translate(-50%, -50%) translate(var(--shw-offset-x, 0), var(--shw-offset-y, 0)) rotate(var(--shw-rotate, 0deg));
}
.section-heading-watermark--h-center.section-heading-watermark--v-top {
    transform: translateX(-50%) translate(var(--shw-offset-x, 0), var(--shw-offset-y, 0)) rotate(var(--shw-rotate, 0deg));
}
.section-heading-watermark--h-center.section-heading-watermark--v-bottom {
    transform: translateX(-50%) translate(var(--shw-offset-x, 0), var(--shw-offset-y, 0)) rotate(var(--shw-rotate, 0deg));
}

/* Left/Right + vertical middle */
.section-heading-watermark--h-left.section-heading-watermark--v-middle,
.section-heading-watermark--h-right.section-heading-watermark--v-middle {
    transform: translateY(-50%) translate(var(--shw-offset-x, 0), var(--shw-offset-y, 0)) rotate(var(--shw-rotate, 0deg));
}

/* -------------------------------------------------------------------------
   Subtitle
   ------------------------------------------------------------------------- */
.section-heading-subtitle {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
   Separator
   ------------------------------------------------------------------------- */
.section-heading-separator {
    display: block;
    position: relative;
    z-index: 1;
    border: 0;
    border-top-style: var(--shw-sep-style, solid);
}

/* Alignment inheritance for separator */
.section-heading[style*="text-align: center"] .section-heading-separator,
.section-heading .section-heading-separator {
    /* Inherits alignment from parent text-align via margin */
}

/* Center aligned */
[style*="text-align: center"] .section-heading-separator {
    margin-left: auto;
    margin-right: auto;
}

/* Right aligned */
[style*="text-align: right"] .section-heading-separator {
    margin-left: auto;
    margin-right: 0;
}

/* Left aligned (default) */
[style*="text-align: left"] .section-heading-separator {
    margin-left: 0;
    margin-right: auto;
}

/* -------------------------------------------------------------------------
   Entrance Animations (triggered via IntersectionObserver in JS)
   ------------------------------------------------------------------------- */
.section-heading[data-shw-animation] {
    opacity: 0;
}
.section-heading.shw-animated {
    opacity: 1;
}

/* Fade In Up */
@keyframes shwFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade In Down */
@keyframes shwFadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade In Left */
@keyframes shwFadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Fade In Right */
@keyframes shwFadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Zoom In */
@keyframes shwZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* Slide In Up */
@keyframes shwSlideInUp {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}