/* KS Hero Slider - Frontend Styles */

/* ========================================================================
   Variables & Base
   ======================================================================== */
:root {
    --kshs-max-height: 600px;
    --kshs-split-fade-width: 80px;
    --kshs-content-width: 50%;
}

.kshs-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.kshs-slider-wrapper *,
.kshs-slider-wrapper *::before,
.kshs-slider-wrapper *::after {
    box-sizing: border-box;
}

/* CRITICAL: Swiper needs explicit height for proper initialization */
.kshs-swiper {
    width: 100%;
    height: var(--kshs-max-height);
    overflow: hidden;
}

.kshs-full-height .kshs-swiper {
    height: 100vh;
}

/* Ensure slides fill the swiper */
.kshs-swiper .swiper-slide {
    height: auto;
    overflow: hidden;
}

/* ========================================================================
   Split Content Layout
   ======================================================================== */
.kshs-layout-split_content .kshs-split {
    display: flex;
    align-items: stretch;
    height: var(--kshs-max-height);
    position: relative;
}

.kshs-full-height .kshs-split {
    height: 100vh;
}

.kshs-split .kshs-content-side {
    width: var(--kshs-content-width, 50%);
    display: flex;
    align-items: safe center;
    padding: 40px 60px;
    background: var(--kshs-slide-bg, #ffffff);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Fallback for browsers without safe center */
@supports not (align-items: safe center) {
    .kshs-split .kshs-content-side {
        align-items: flex-start;
        padding-top: auto;
    }
    .kshs-split .kshs-content-side .kshs-content-inner {
        margin-top: auto;
        margin-bottom: auto;
    }
}

.kshs-split .kshs-image-side {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

/* Fade/blend between content and image in split layout.
   v2.6.1: moved from .kshs-content-side::after (right edge, OVER the text)
   to .kshs-image-side::before (left edge of the image). The old placement
   painted the solid end of the gradient on top of the last ~80px of the
   content column, visually clipping long text lines. */
.kshs-split .kshs-image-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: var(--kshs-split-fade-width, 80px);
    height: 100%;
    background: linear-gradient(
        to right,
        var(--kshs-slide-bg, #ffffff) 0%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
}

/* When no fade is wanted */
.kshs-split-no-fade .kshs-image-side::before {
    display: none;
}

/* All images must fit their container */
.kshs-slide-image,
.kshs-hero-bg img,
.kshs-split .kshs-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kshs-picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Reverse order for right-aligned content */
.kshs-slide-position-right .kshs-split {
    flex-direction: row-reverse;
}

/* When reversed, fade sits on the image's right edge instead */
.kshs-slide-position-right .kshs-image-side::before {
    left: auto;
    right: -1px;
    background: linear-gradient(
        to left,
        var(--kshs-slide-bg, #ffffff) 0%,
        transparent 100%
    );
}

/* ========================================================================
   Full Width Hero / Full Page / Boxed shared styles
   ======================================================================== */
.kshs-hero,
.kshs-fullpage,
.kshs-boxed {
    position: relative;
    height: var(--kshs-max-height);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.kshs-full-height .kshs-hero,
.kshs-full-height .kshs-fullpage {
    height: 100vh;
}

.kshs-hero-bg,
.kshs-hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.kshs-hero-bg .kshs-picture,
.kshs-hero-bg img {
    width: 100%;
    height: 100%;
    display: block;
}

.kshs-hero-bg img {
    object-fit: cover;
}

.kshs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.kshs-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 40px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.kshs-hero-content .kshs-content-inner {
    max-width: 600px;
}

/* Content alignment */
.kshs-align-left .kshs-content-inner { margin-right: auto; }
.kshs-align-center { text-align: center; }
.kshs-align-center .kshs-content-inner { margin: 0 auto; }
.kshs-align-right .kshs-content-inner { margin-left: auto; }

/* ========================================================================
   Full Page Layout - override swiper height
   ======================================================================== */
.kshs-layout-fullpage .kshs-swiper {
    height: 100vh;
}

/* ========================================================================
   Boxed Layout
   ======================================================================== */
.kshs-layout-boxed {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 12px;
}

.kshs-layout-boxed .kshs-boxed {
    border-radius: 12px;
}

.kshs-layout-boxed .kshs-swiper {
    border-radius: 12px;
}

/* ========================================================================
   Typography CSS Custom Properties
   ======================================================================== */
.kshs-slide {
    font-family: var(--kshs-font-family, inherit);
}

.kshs-title {
    font-size: var(--kshs-title-size, 50px);
    font-weight: var(--kshs-title-weight, 800);
    color: var(--kshs-title-color, inherit);
}

.kshs-subtitle {
    font-size: var(--kshs-subtitle-size, 14px);
    text-transform: var(--kshs-subtitle-transform, uppercase);
    color: var(--kshs-subtitle-color, inherit);
}

.kshs-description {
    font-size: var(--kshs-desc-size, 18px);
    color: var(--kshs-desc-color, inherit);
}

/* Vertical alignment */
.kshs-content-side {
    align-items: var(--kshs-valign, safe center);
}

.kshs-hero-content,
.kshs-fullpage .kshs-hero-content {
    align-items: var(--kshs-valign, center);
}

/* ========================================================================
   Ken Burns Effect
   ======================================================================== */
.kshs-kenburns img {
    animation: kshs-kenburns 20s ease-in-out infinite alternate;
    transform-origin: center center;
}

.swiper-slide-active .kshs-kenburns img {
    animation: kshs-kenburns 20s ease-in-out infinite alternate;
}

@keyframes kshs-kenburns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}

/* ========================================================================
   Video Background
   ======================================================================== */
.kshs-hero-video-bg {
    z-index: 1;
    overflow: hidden;
}

.kshs-video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh; /* 16:9 ratio */
    min-width: 100%;
    height: 100vh;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;
}

.kshs-video-mp4 {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Split layout also supports video bg */
.kshs-split .kshs-image-side .kshs-hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================================================
   Content Elements
   ======================================================================== */
.kshs-content-inner {
    color: var(--kshs-slide-text, #2d3436);
}

/* ========================================================================
   v2.6.0: Free-positioned campaign badges
   Layer covers the whole slide; each badge is absolutely positioned via
   inline left/top percentages (set in admin via drag-and-drop preview).
   New shapes: add to this CSS + the whitelist in KSHS_Slider::sanitize_badges().
   ======================================================================== */
.kshs-cbadges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
}

.kshs-cbadge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.kshs-cbadge-pill {
    padding: 0.45em 1.1em;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kshs-cbadge-circle {
    width: 4.6em;
    height: 4.6em;
    border-radius: 50%;
    text-align: center;
    white-space: normal;
    padding: 0.3em;
}

.kshs-cbadge-tag {
    padding: 0.45em 0.9em;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kshs-cbadge-starburst {
    width: 5.6em;
    height: 5.6em;
    clip-path: polygon(50% 0%, 59% 12%, 72% 7%, 75% 21%, 89% 22%, 85% 36%, 98% 42%, 88% 50%, 98% 58%, 85% 64%, 89% 78%, 75% 79%, 72% 93%, 59% 88%, 50% 100%, 41% 88%, 28% 93%, 25% 79%, 11% 78%, 15% 64%, 2% 58%, 12% 50%, 2% 42%, 15% 36%, 11% 22%, 25% 21%, 28% 7%, 41% 12%);
    text-align: center;
    white-space: normal;
    padding: 1.1em;
    box-shadow: none;
}

.kshs-cbadge-image {
    height: auto;
    box-shadow: none;
}

.kshs-subtitle {
    /* font-size now driven by --kshs-subtitle-size (set by admin per slide) — see Typography section above */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin: 0 0 8px;
}

.kshs-title {
    /* font-size now driven by --kshs-title-size (set by admin per slide) — see Typography section above */
    /* font-weight now driven by --kshs-title-weight (set by admin per slide) — see Typography section above */
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.5px;
}

.kshs-description {
    /* font-size now driven by --kshs-desc-size (set by admin per slide) — see Typography section above */
    line-height: 1.6;
    opacity: 0.85;
    margin: 0 0 24px;
}

.kshs-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kshs-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.kshs-button-primary {
    background: var(--kshs-btn-bg, #e17055);
    color: var(--kshs-btn-text, #fff);
}
/* v2.6.2: Chrome drops var()-based colors on :visited links (history-sniffing
   protection) and falls back to the cascade (theme's black link color). The
   actual text color therefore lives on an inner span, which is exempt from
   :visited restrictions. The static :visited rules below are a defensive
   baseline for the <a> itself (only static colors are honored there). */
.kshs-button-primary .kshs-button-label {
    color: var(--kshs-btn-text, #fff);
}
.kshs-button-primary:visited {
    color: #fff;
}
.kshs-button-primary:hover {
    background: var(--kshs-btn-bg, #d35e45);
    color: var(--kshs-btn-text, #fff);
    filter: brightness(0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(225, 112, 85, 0.4);
}

.kshs-button-secondary {
    /* v2.6.0: fully decoupled from the slide TEKSTFARVE. The button used to
       inherit color/currentColor, so changing the slide text color silently
       recolored this button too. Button colors are now ONLY driven by the
       dedicated button color fields (with fixed fallbacks). */
    background: var(--kshs-btn2-bg, transparent);
    color: var(--kshs-btn2-text, #1a1a1a);
    border: 2px solid var(--kshs-btn2-text, #1a1a1a);
}
/* v2.6.2: see the :visited note on the primary button. Known limitation:
   the border color on a VISITED secondary link falls back to the static
   color below (border cannot move to the span). */
.kshs-button-secondary .kshs-button-label {
    color: var(--kshs-btn2-text, #1a1a1a);
}
.kshs-button-secondary:visited {
    color: #1a1a1a;
    border-color: #1a1a1a;
}
/* When button 2 has a custom bg, remove border */
.kshs-slide[style*="--kshs-btn2-bg"] .kshs-button-secondary {
    border-color: var(--kshs-btn2-bg);
}
.kshs-button-secondary:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================================================
   Navigation - Arrows
   v2.6.1: arrows are hidden by default and revealed when the slider is
   hovered (or receives keyboard focus). On touch devices users swipe.
   ======================================================================== */
.kshs-slider-wrapper .swiper-button-prev,
.kshs-slider-wrapper .swiper-button-next {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

.kshs-slider-wrapper:hover .swiper-button-prev,
.kshs-slider-wrapper:hover .swiper-button-next,
.kshs-slider-wrapper:focus-within .swiper-button-prev,
.kshs-slider-wrapper:focus-within .swiper-button-next {
    opacity: 1;
    visibility: visible;
}

/* Keep Swiper's dimmed look for disabled arrows even while hovered */
.kshs-slider-wrapper:hover .swiper-button-disabled,
.kshs-slider-wrapper:focus-within .swiper-button-disabled {
    opacity: 0.35;
}

.kshs-slider-wrapper .swiper-button-prev:hover,
.kshs-slider-wrapper .swiper-button-next:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.kshs-slider-wrapper .swiper-button-prev::after,
.kshs-slider-wrapper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 900;
    color: #2d3436;
}

/* Pagination dots */
.kshs-slider-wrapper .swiper-pagination {
    bottom: 16px !important;
}

.kshs-slider-wrapper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    opacity: 0.4;
    background: #2d3436;
    transition: all 0.2s ease;
}

.kshs-slider-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #e17055;
    width: 24px;
    border-radius: 5px;
}

/* ========================================================================
   Shape Divider
   ======================================================================== */
.kshs-shape-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    line-height: 0;
    pointer-events: none;
}

.kshs-shape-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ========================================================================
   Responsive
   ======================================================================== */
/* Hide entire slider on mobile */
@media (max-width: 768px) {
    .kshs-hide-on-mobile {
        display: none !important;
    }

    /* v2.6.3: collapse the now-orphaned whitespace left behind when the slider
       is hidden on mobile.

       When the hero slider sits as the first block on a page (e.g. the
       offshoreudstyr/billigkrangrej front page), it is typically followed in
       the editor by a spacer block and a separator that were meant to sit
       BELOW the hero. With the hero hidden via .kshs-hide-on-mobile, those two
       blocks become empty vertical space at the very top of the page (~80px of
       blank area between the logo header and the first real section).

       We target ONLY the spacer + separator that immediately follow the column
       block wrapping the hidden slider, so the next real section (e.g. a logo
       slider) and every other separator on the page are left untouched.

       :has() is used to scope to the exact column that contains a hidden hero;
       it is widely supported in current browsers. If a browser lacks :has()
       the rule is simply ignored and the original (harmless) whitespace remains. */
    .wp-block-columns:has(> .wp-block-column .kshs-hide-on-mobile) + .wp-block-spacer {
        display: none !important;
    }
    .wp-block-columns:has(> .wp-block-column .kshs-hide-on-mobile) + .wp-block-spacer + .wp-block-separator {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .kshs-layout-split_content .kshs-split {
        flex-direction: column !important;
        height: auto;
    }

    .kshs-layout-split_content .kshs-swiper {
        height: auto;
    }

    .kshs-split .kshs-content-side {
        width: 100%;
        padding: 24px 20px;
        order: 2;
    }

    /* Hide the fade overlay on mobile (stacked layout) */
    .kshs-split .kshs-image-side::before {
        display: none;
    }

    .kshs-split .kshs-image-side {
        width: 100%;
        height: 250px;
        order: 1;
    }

    .kshs-hero-content {
        padding: 24px 20px;
    }

    /* Mobile typography overrides via CSS custom properties */
    .kshs-title {
        font-size: var(--kshs-title-size-mobile, clamp(20px, 6vw, 32px));
    }

    .kshs-subtitle {
        font-size: var(--kshs-subtitle-size-mobile, 11px);
    }

    .kshs-description {
        font-size: var(--kshs-desc-size-mobile, 14px);
    }

    .kshs-button {
        padding: 10px 20px;
        font-size: 13px;
    }

    .kshs-slider-wrapper .swiper-button-prev,
    .kshs-slider-wrapper .swiper-button-next {
        width: 36px;
        height: 36px;
    }

    .kshs-slider-wrapper .swiper-button-prev::after,
    .kshs-slider-wrapper .swiper-button-next::after {
        font-size: 13px;
    }

    /* Mobile element visibility */
    .kshs-mobile-hide-badges .kshs-badges,
    .kshs-mobile-hide-badges .kshs-cbadges { display: none !important; }
    .kshs-mobile-hide-subtitle .kshs-subtitle { display: none !important; }
    .kshs-mobile-hide-description .kshs-description { display: none !important; }
    .kshs-mobile-hide-buttons .kshs-buttons { display: none !important; }

    /* Mobile content position overrides */
    .kshs-mobile-position-left .kshs-hero-content { text-align: left; }
    .kshs-mobile-position-left .kshs-content-inner { margin-left: 0; margin-right: auto; }
    .kshs-mobile-position-center .kshs-hero-content { text-align: center; }
    .kshs-mobile-position-center .kshs-content-inner { margin: 0 auto; }
    .kshs-mobile-position-right .kshs-hero-content { text-align: right; }
    .kshs-mobile-position-right .kshs-content-inner { margin-left: auto; margin-right: 0; }
}

@media (max-width: 480px) {
    .kshs-split .kshs-content-side {
        padding: 20px 16px;
    }

    .kshs-split .kshs-image-side {
        height: 200px;
    }

    .kshs-buttons {
        flex-direction: column;
    }

    .kshs-button {
        text-align: center;
        justify-content: center;
    }
}

/* ========================================================================
   Ken Burns Effect
   ======================================================================== */
.kshs-kenburns {
    transform: scale(1);
    transition: none;
}

.kshs-kenburns.kshs-kenburns-active {
    animation: kshs-kenburns-zoom 12s ease-in-out forwards;
}

@keyframes kshs-kenburns-zoom {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.15) translate(-1%, -1%);
    }
}

/* ========================================================================
   Content Entry Animations
   ======================================================================== */

/* Hidden by default until animated */
.kshs-badges,
.kshs-subtitle,
.kshs-title,
.kshs-description,
.kshs-buttons {
    opacity: 0;
}

/* When animated, become visible */
.kshs-animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* No animation - just show immediately */
.kshs-anim-none {
    opacity: 1 !important;
    animation: none !important;
}

/* fadeIn */
.kshs-anim-fadeIn {
    animation-name: kshs-fadeIn;
}
@keyframes kshs-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* fadeInUp */
.kshs-anim-fadeInUp {
    animation-name: kshs-fadeInUp;
}
@keyframes kshs-fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* fadeInDown */
.kshs-anim-fadeInDown {
    animation-name: kshs-fadeInDown;
}
@keyframes kshs-fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* fadeInLeft */
.kshs-anim-fadeInLeft {
    animation-name: kshs-fadeInLeft;
}
@keyframes kshs-fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* fadeInRight */
.kshs-anim-fadeInRight {
    animation-name: kshs-fadeInRight;
}
@keyframes kshs-fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* slideInUp */
.kshs-anim-slideInUp {
    animation-name: kshs-slideInUp;
}
@keyframes kshs-slideInUp {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

/* zoomIn */
.kshs-anim-zoomIn {
    animation-name: kshs-zoomIn;
}
@keyframes kshs-zoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* bounceIn */
.kshs-anim-bounceIn {
    animation-name: kshs-bounceIn;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes kshs-bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}