/* Layout primitives modelled on Elementor's flex container ("e-con"), the
   building block of the staging WordPress site. Page CSS sets the same
   variables the staging Elementor CSS sets, so layouts port value-for-value
   and behave identically at every width. Breakpoints match Elementor's:
   tablet <= 1024px, mobile <= 767px. Desktop widths go inside
   @media (min-width: 768px), as in Elementor, so phones fall back to 100%. */

.ec {
    --width: 100%;
    --min-height: initial;
    --dir: column;
    --wrap: initial;
    /* Phones wrap rows unless a container opts out (Elementor's
       --flex-wrap-mobile); declared here so it doesn't inherit. */
    --wrap-mobile: wrap;
    --justify: initial;
    --align: initial;
    --align-content: initial;
    --row-gap: 20px;
    --col-gap: 20px;
    --pt: 10px;
    --pr: 10px;
    --pb: 10px;
    --pl: 10px;
    --mt: 0px;
    --mr: 0px;
    --mb: 0px;
    --ml: 0px;
    --grow: 0;
    --shrink: 1;
    --self: initial;
    position: relative;
    display: flex;
    flex-direction: var(--dir);
    flex-wrap: var(--wrap);
    justify-content: var(--justify);
    align-items: var(--align);
    align-content: var(--align-content);
    align-self: var(--self);
    flex: var(--grow) var(--shrink) auto;
    gap: var(--row-gap) var(--col-gap);
    width: var(--width);
    min-width: 0;
    min-height: var(--min-height);
    padding: var(--pt) var(--pr) var(--pb) var(--pl);
    margin: var(--mt) var(--mr) var(--mb) var(--ml);
}

/* Top-level sections centre themselves and never exceed the viewport. */
.ec-top {
    --ml: auto;
    --mr: auto;
    max-width: min(100%, var(--width));
}

/* Boxed container: content limited to the kit's 1140px (1024/767 on smaller
   screens), like Elementor's e-con-boxed > e-con-inner. */
.ec-boxed > .ec-inner {
    display: flex;
    flex-direction: var(--dir);
    flex-wrap: var(--wrap);
    justify-content: var(--justify);
    align-items: var(--align);
    gap: var(--row-gap) var(--col-gap);
    width: 100%;
    max-width: min(100%, var(--container-max));
    margin: 0 auto;
}

.ec-row { --dir: row; }
.ec-flush { --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; }
.ec-nogap { --row-gap: 0px; --col-gap: 0px; }

/* Brand-coloured overlay over a background photo (Elementor background
   overlay). The photo is an <img class="ec-bg">. */
.ec-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.ec-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--overlay-color);
    opacity: var(--overlay-opacity, 1);
}

.ec-overlay > :not(.ec-bg) {
    position: relative;
    z-index: 2;
}

/* Widgets: Elementor's heading and text-editor defaults. */
.hd {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.te p {
    margin: 0 0 0.9rem;
}

.te-tight p {
    margin-bottom: 0;
}

/* Divider widget: a rule inside a flex row; the page sets its width,
   thickness and offsets. */
.divider {
    display: flex;
}

.divider span {
    display: block;
}

@media (max-width: 767px) {
    .ec {
        --width: 100%;
        --wrap: var(--wrap-mobile, wrap);
    }

    .hide-mobile { display: none !important; }

    /* The kit's phone heading line-heights beat the widget's line-height: 1. */
    h2.hd, h3.hd { line-height: 1.2em; }
    h4.hd, h5.hd, h6.hd { line-height: 1.3em; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hide-tablet { display: none !important; }
}

/* Photo crops (Elementor background-position presets). */
.fit-contain { object-fit: contain !important; }
.pos-top { object-position: center top !important; }
.pos-bottom { object-position: 50% 100% !important; }
.pos-left { object-position: 0 50% !important; }
.pos-right { object-position: 100% 50% !important; }

/* Entrance animations (Elementor "motion effects", animate.css keyframes):
   elements are hidden until main.js sees them enter the viewport. Only
   applies when JS runs (html.js) and motion isn't reduced. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal:not(.is-visible) {
        visibility: hidden;
    }

    .reveal.is-visible {
        animation-name: var(--reveal-name, fadeIn);
        animation-duration: var(--reveal-duration, 1.25s);
        animation-delay: var(--reveal-delay, 0s);
        animation-fill-mode: both;
    }
}

.reveal-slow { --reveal-duration: 2s; }
.reveal-up { --reveal-name: fadeInUp; }
.reveal-left { --reveal-name: fadeInLeft; }
.reveal-right { --reveal-name: fadeInRight; }
.reveal-delay { --reveal-delay: 0.5s; }

@media (max-width: 1024px) {
    .reveal-left-tablet { --reveal-name: fadeInLeft; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

/* Slide-ins start off-screen; don't let them cause a horizontal scrollbar. */
main {
    overflow-x: clip;
}