/**
 * Card Carousel Widget
 * A reusable card carousel with preset skins.
 * @author : DMN Creative
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * Every skin is nothing more than a different set of these, so a new variation
 * is one block of custom properties rather than a new pile of rules. The
 * widget's Elementor style controls write to these same names, which is why an
 * editor override beats the skin without either fighting the other.
 * ------------------------------------------------------------------------ */
.dmn-cc {
    --cc-card-bg: transparent;
    --cc-card-border-color: var(--site-main-blue, #151542);
    --cc-card-border-width: 1px;
    --cc-card-radius: 20px;
    --cc-card-pad-y: 32px;
    --cc-card-pad-x: 28px;

    --cc-heading-color: var(--site-main-blue, #151542);
    --cc-body-color: var(--site-main-blue, #151542);
    --cc-link-color: var(--site-main-blue, #151542);

    /* Alternating cards. Defaults to the resting look, so the pattern is
       inert until a skin or a control sets these. */
    --cc-alt-card-bg: var(--cc-card-bg);
    --cc-alt-card-border-color: var(--cc-card-border-color);
    --cc-alt-heading-color: var(--cc-heading-color);
    --cc-alt-body-color: var(--cc-body-color);
    --cc-alt-link-color: var(--cc-link-color);

    /* Active slide. Defaults to the resting look so that switching the
       emphasis off needs no separate rules. */
    --cc-active-card-bg: var(--cc-card-bg);
    --cc-active-card-border-color: var(--cc-card-border-color);
    --cc-active-heading-color: var(--cc-heading-color);
    --cc-active-body-color: var(--cc-body-color);
    --cc-active-link-color: var(--cc-link-color);

    --cc-arrow-size: 34px;
    --cc-arrow-icon: 16px;
    --cc-arrow-radius: 6px;
    --cc-arrow-bg: var(--site-main-blue, #151542);
    --cc-arrow-color: var(--site-main-white, #ffffff);
    --cc-arrow-border-color: transparent;
    --cc-arrow-disabled-opacity: 0.25;

    --cc-dot-size: 8px;
    --cc-dot-color: var(--site-main-blue, #151542);
    --cc-dot-opacity: 0.3;
    --cc-dot-active-opacity: 1;

    --cc-nav-gap: 12px;
    --cc-nav-space: 28px;

    position: relative;
}

/* ---------------------------------------------------------------------------
 * Track
 * ------------------------------------------------------------------------ */

/* .swiper clips with overflow:hidden, and the card fills the track exactly, so
   the card's outline sits precisely ON that clip edge. Whenever the track's
   height lands on a fractional pixel - which it routinely does, measured
   heights here are things like 257.36 and 332.88 - the outermost device-pixel
   row is rounded away, taking the entire straight top or bottom run of the
   outline with it. The corner arcs survive because they only touch that row
   tangentially, which is exactly the symptom: sides and all four corners
   present, one flat run missing, and it swaps between the top and the bottom
   edge from one load to the next.
   Two defences, deliberately both:
   1. Clip horizontally only, so there is no vertical clip edge to land on.
      overflow-x:clip is what permits overflow-y:visible - overflow-x:hidden
      would silently force overflow-y to auto and add a scrollbar.
   2. For anything without overflow:clip, a 1px vertical gutter inside the clip
      box, cancelled by an equal negative margin so the outer layout is
      unchanged. Vertical padding does not affect Swiper's width maths, which
      reads clientWidth. */
.dmn-cc__viewport {
    width: 100%;
}

.dmn-cc .dmn-cc__viewport {
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: -1px;
    margin-bottom: -1px;
    overflow-x: clip;
    overflow-y: visible;
}

/* EQUAL-HEIGHT CARDS.
   Three links in the chain, and all three are needed:
   1. the track stretches its slides to the tallest one,
   2. each slide sizes to content rather than to Swiper's default height:100%,
   3. the card fills its slide instead of sitting inside it.
   Swiper's own stylesheet sets ".swiper-slide { height: 100% }" at plain
   single-class specificity, which ties with ours - so which one wins is
   decided by whichever stylesheet the theme enqueues last. Today that happens
   to be this one, but that is enqueue order, not a rule. Qualifying these with
   the wrapper and viewport classes settles it for good, and keeps it settled
   if Swiper is ever loaded later or bumped to another version. */
.dmn-cc .dmn-cc__viewport > .swiper-wrapper {
    align-items: stretch;
}

.dmn-cc .dmn-cc__viewport .dmn-cc__slide {
    height: auto;
    align-self: stretch;
    display: flex;
}

/* Two things this rule deliberately does NOT do.
   No height:100%. The slide is a flex container and the card is its only item,
   so the card already fills the slide's stretched height. A percentage height
   on top resolves against a height derived from this very content, the card
   measures short, and .swiper's overflow:hidden crops the bottom and the CTA.
   No border. The outline is an inset box-shadow instead, with the border width
   folded into the padding so the content box is identical either way. This was
   first tried as a fix for the disappearing edge and did NOT fix it - the edge
   dropped just the same, which is what proved the cause was the clip on the
   viewport above and not the paint primitive. It is kept because it is
   equivalent visually (verified pixel-for-pixel) and one fewer box model to
   reason about, not because it solves anything. */
.dmn-cc .dmn-cc__viewport .dmn-cc__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: calc(var(--cc-card-pad-y) + var(--cc-card-border-width))
             calc(var(--cc-card-pad-x) + var(--cc-card-border-width));
    background: var(--cc-card-bg);
    border: 0;
    border-radius: var(--cc-card-radius);
    box-shadow: inset 0 0 0 var(--cc-card-border-width) var(--cc-card-border-color);
    /* The fill and the ink both change on the active slide; transitioning them
       keeps that from snapping as the carousel moves. */
    transition: background-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
}

/* ---------------------------------------------------------------------------
 * Card contents
 * The body is a WYSIWYG field, so anything an editor pastes has to inherit the
 * skin. Styling the tags rather than a wrapper class is what makes that true
 * for pasted markup as well as typed text.
 * ------------------------------------------------------------------------ */
.dmn-cc__heading {
    margin: 0;
    font-family: var(--site-headings-font, sans-serif), sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cc-heading-color);
}

.dmn-cc__body {
    margin-top: 16px;
    font-family: var(--site-body-font, sans-serif), sans-serif;
    line-height: 1.6;
    color: var(--cc-body-color);
}

.dmn-cc__body > :first-child {
    margin-top: 0;
}

.dmn-cc__body > :last-child {
    margin-bottom: 0;
}

.dmn-cc__body p {
    margin: 0 0 1em;
    color: inherit;
}

.dmn-cc__body strong,
.dmn-cc__body b {
    font-weight: 700;
    color: inherit;
}

.dmn-cc__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Pushed to the bottom so the CTA sits on one line across a row of cards of
   differing copy length, the way the design shows it. */
.dmn-cc__link {
    margin-top: auto;
    padding-top: 20px;
    align-self: flex-start;
    font-family: var(--site-body-font, sans-serif), sans-serif;
    font-weight: 700;
    color: var(--cc-link-color);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dmn-cc__link:hover,
.dmn-cc__link:focus {
    color: var(--cc-link-color);
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Alternating cards
 * A fixed pattern, not a state: every second card takes the alternate colours
 * and keeps them wherever the carousel happens to be scrolled to. The class is
 * written into the markup rather than picked with :nth-child(), because
 * Swiper's loop mode injects cloned slides at both ends - that shifts every
 * nth-child index and would make the pattern jump as you page through. A class
 * travels with the clone.
 * Qualified through .dmn-cc__viewport to reach (0,3,0): the base card rule is
 * three classes too, so a two-class selector would quietly lose to it.
 * ------------------------------------------------------------------------ */
.dmn-cc--alternate .dmn-cc__viewport .dmn-cc__card--alt {
    background: var(--cc-alt-card-bg);
    box-shadow: inset 0 0 0 var(--cc-card-border-width) var(--cc-alt-card-border-color);
}

.dmn-cc--alternate .dmn-cc__card--alt .dmn-cc__heading {
    color: var(--cc-alt-heading-color);
}

.dmn-cc--alternate .dmn-cc__card--alt .dmn-cc__body {
    color: var(--cc-alt-body-color);
}

.dmn-cc--alternate .dmn-cc__card--alt .dmn-cc__link {
    color: var(--cc-alt-link-color);
}

/* ---------------------------------------------------------------------------
 * Active slide emphasis
 * Only applied when the widget asks for it, so the same skin can be used flat.
 * ------------------------------------------------------------------------ */
.dmn-cc--emphasis .dmn-cc__viewport .swiper-slide-active .dmn-cc__card {
    background: var(--cc-active-card-bg);
    box-shadow: inset 0 0 0 var(--cc-card-border-width) var(--cc-active-card-border-color);
}

.dmn-cc--emphasis .swiper-slide-active .dmn-cc__heading {
    color: var(--cc-active-heading-color);
}

.dmn-cc--emphasis .swiper-slide-active .dmn-cc__body {
    color: var(--cc-active-body-color);
}

.dmn-cc--emphasis .swiper-slide-active .dmn-cc__link {
    color: var(--cc-active-link-color);
}

/* ---------------------------------------------------------------------------
 * Navigation
 * Three layouts, because the four designs use three different arrangements:
 * arrows alone, arrows either side of the dots, and dots stacked above arrows.
 * ------------------------------------------------------------------------ */
.dmn-cc__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cc-nav-gap);
    margin-top: var(--cc-nav-space);
}

.dmn-cc--nav-stacked .dmn-cc__nav {
    flex-direction: column;
    gap: 16px;
}

.dmn-cc--nav-stacked .dmn-cc__arrows {
    display: flex;
    align-items: center;
    gap: var(--cc-nav-gap);
}

.dmn-cc--nav-start .dmn-cc__nav {
    justify-content: flex-start;
}

.dmn-cc--nav-end .dmn-cc__nav {
    justify-content: flex-end;
}

/* These are <button> elements, so three different stylesheets get a say before
   this one does, and all three outrank a plain single class:
     Elementor Kit  .elementor-kit-N button   { padding: 16px 25px 15px 25px }  (0,1,1)
     OceanWP        body button               { border-color: #ffffff }         (0,1,1)
     OceanWP        button                    { border: 1px solid }             (0,0,1)
   Combined with Elementor's own ".elementor * { box-sizing: border-box }", that
   50px of horizontal padding inside a 34px button leaves the icon a content box
   of zero width - which is why the arrows rendered as solid blocks with no
   chevron in them, 34px tall but 52px wide. Scoping through .dmn-cc__nav takes
   these rules to (0,3,0) so the widget owns its own buttons outright, and every
   geometry value carries a fallback so a cleared Elementor control cannot
   collapse the button either. */
.dmn-cc .dmn-cc__nav .dmn-cc__arrow {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cc-arrow-size, 34px);
    height: var(--cc-arrow-size, 34px);
    min-width: var(--cc-arrow-size, 34px);
    margin: 0;
    padding: 0;
    background: var(--cc-arrow-bg);
    border: 1px solid var(--cc-arrow-border-color);
    border-radius: var(--cc-arrow-radius, 6px);
    color: var(--cc-arrow-color);
    font: inherit;
    line-height: 0;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 200ms ease, background-color 200ms ease;
}

/* Sized in pixels rather than as a percentage. A percentage resolves against
   the button's content box, which is precisely the thing a stray padding rule
   collapses - the same failure as above, one level down. This also matches how
   the site's existing carousel arrows are sized in style.css. */
.dmn-cc .dmn-cc__nav .dmn-cc__arrow svg {
    display: block;
    flex: 0 0 auto;
    width: var(--cc-arrow-icon, 16px);
    height: var(--cc-arrow-icon, 16px);
}

.dmn-cc .dmn-cc__nav .dmn-cc__arrow:hover {
    opacity: 0.85;
}

/* Swiper's own class - it is added to the button when there is nowhere left to
   go, which is the greyed-out prev button in the first design. */
.dmn-cc .dmn-cc__nav .dmn-cc__arrow.swiper-button-disabled {
    opacity: var(--cc-arrow-disabled-opacity);
    cursor: default;
}

.dmn-cc .dmn-cc__nav .dmn-cc__arrow:focus-visible {
    outline: 2px solid var(--cc-arrow-bg);
    outline-offset: 2px;
}

.dmn-cc__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
}

/* Swiper writes its own bullet markup into this element, so the bullets are
   restyled rather than replaced. */
.dmn-cc__dots .swiper-pagination-bullet {
    width: var(--cc-dot-size);
    height: var(--cc-dot-size);
    margin: 0;
    background: var(--cc-dot-color);
    opacity: var(--cc-dot-opacity);
    transition: opacity 200ms ease;
}

.dmn-cc__dots .swiper-pagination-bullet-active {
    opacity: var(--cc-dot-active-opacity);
}

/* Swiper stamps ".swiper-pagination-bullets swiper-pagination-horizontal" onto
   whatever element it is handed - note it does NOT add ".swiper-pagination"
   itself, so matching on that never fires. Its rule for that pair sets
   width:100% and absolute positioning at the bottom of the container. Ours is
   a flex sibling of the arrows in normal flow, and left stretched it pushes
   the two arrows out to the section edges. Three classes so this beats
   Swiper's two regardless of which stylesheet the theme loads first. */
.dmn-cc .dmn-cc__nav .dmn-cc__dots {
    position: static;
    width: auto;
    left: auto;
    transform: none;
}

/* ---------------------------------------------------------------------------
 * SKIN: Light outline
 * White page, white card, navy hairline. Used on the retail / manufacturing
 * "what your business gains" rows.
 * ------------------------------------------------------------------------ */
.dmn-cc--skin-light {
    --cc-card-bg: var(--site-main-white, #ffffff);
    --cc-card-border-color: var(--site-main-blue, #151542);
    --cc-heading-color: var(--site-main-blue, #151542);
    --cc-body-color: var(--site-main-blue, #151542);
    --cc-link-color: var(--site-main-blue, #151542);
    --cc-arrow-bg: var(--site-main-blue, #151542);
    --cc-arrow-color: var(--site-main-white, #ffffff);
    --cc-dot-color: var(--site-main-blue, #151542);
}

/* ---------------------------------------------------------------------------
 * SKIN: Dark outline
 * Navy page, transparent card, white hairline. The manufacturing "connected
 * solution" row.
 * ------------------------------------------------------------------------ */
.dmn-cc--skin-dark {
    --cc-card-bg: transparent;
    --cc-card-border-color: var(--site-main-white, #ffffff);
    --cc-heading-color: var(--site-main-white, #ffffff);
    --cc-body-color: var(--site-main-white, #ffffff);
    --cc-link-color: var(--site-main-white, #ffffff);
    --cc-arrow-bg: transparent;
    --cc-arrow-border-color: transparent;
    --cc-arrow-color: var(--site-main-white, #ffffff);
    --cc-dot-color: var(--site-main-white, #ffffff);
}

/* ---------------------------------------------------------------------------
 * SKIN: Orange outline
 * Navy page, orange hairline, and the centre card's heading turns orange.
 * The "why businesses choose Just Dynamics" row.
 * ------------------------------------------------------------------------ */
.dmn-cc--skin-orange {
    --cc-card-bg: transparent;
    --cc-card-border-color: var(--site-main-orange, #F26924);
    --cc-heading-color: var(--site-main-white, #ffffff);
    --cc-body-color: var(--site-main-white, #ffffff);
    --cc-link-color: var(--site-main-white, #ffffff);
    --cc-active-heading-color: var(--site-main-orange, #F26924);
    --cc-arrow-bg: var(--site-main-orange, #F26924);
    --cc-arrow-color: var(--site-main-white, #ffffff);
    --cc-dot-color: var(--site-main-white, #ffffff);
}

/* ---------------------------------------------------------------------------
 * SKIN: Numbered steps
 * White page, navy hairline, and every second card filled solid navy with its
 * ink inverted - white, navy, white, navy all the way along. The "assurances
 * through our process" row. Switch on "Alternate card colours" in the Layout
 * section to get the pattern. The fill is deliberately NOT tied to the active
 * slide, so it stays put as the carousel is paged.
 * ------------------------------------------------------------------------ */
.dmn-cc--skin-steps {
    --cc-card-bg: var(--site-main-white, #ffffff);
    --cc-card-border-color: var(--site-main-blue, #151542);
    --cc-heading-color: var(--site-main-blue, #151542);
    --cc-body-color: var(--site-main-blue, #151542);
    --cc-link-color: var(--site-main-blue, #151542);
    --cc-alt-card-bg: var(--site-main-blue, #151542);
    --cc-alt-card-border-color: var(--site-main-blue, #151542);
    --cc-alt-heading-color: var(--site-main-white, #ffffff);
    --cc-alt-body-color: var(--site-main-white, #ffffff);
    --cc-alt-link-color: var(--site-main-white, #ffffff);
    --cc-arrow-bg: var(--site-main-blue, #151542);
    --cc-arrow-color: var(--site-main-white, #ffffff);
    --cc-dot-color: var(--site-main-blue, #151542);
}

/* ---------------------------------------------------------------------------
 * Editor
 * Elementor renders the widget before Swiper has measured anything; without
 * this the slides stack full width for a beat on every panel change.
 * ------------------------------------------------------------------------ */
.elementor-editor-active .dmn-cc__viewport:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.elementor-editor-active .dmn-cc__viewport:not(.swiper-initialized) .dmn-cc__slide {
    flex: 1 1 0;
    min-width: 0;
}