/*
Theme Name: Hello Elementor Child
Description: Child theme for Hello Elementor used by MCLD Marketing.
Author: MCLD Marketing
Template: hello-elementor
Version: 1.1.0
Text Domain: hello-elementor-child
*/

/* ==========================================================
   MCLD VARIABLES
   ========================================================== */

:root {
    --mcld-primary: #D1059E;
    --mcld-secondary: #E1A5D2;
    --mcld-black: #000000;
    --mcld-white: #FFFFFF;
    --mcld-dark: rgba(0, 0, 0, 0.42);
    --mcld-dark-line: rgba(0, 0, 0, 0.22);
    --mcld-dark-soft: rgba(0, 0, 0, 0.14);

    --mcld-content-width: 1280px;
    --mcld-padding-tablet: 32px;
    --mcld-padding-mobile: 20px;
}

/* ==========================================================
   MCLD GLOBAL WRAPPER
   The rail follows the 1280 px content container. On wide
   screens it sits just outside the content instead of at the
   edge of the viewport.
   ========================================================== */

.mcld-section {
    --mcld-rail-inline: max(
        16px,
        calc((100% - var(--mcld-content-width)) / 2 - 150px)
    );

    position: relative !important;
    width: 100%;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
    background: var(--mcld-white);
}

/* ==========================================================
   MCLD CONTENT CONTAINER
   ========================================================== */

.mcld-container {
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mcld-content-width);
    margin-inline: auto;
}

.mcld-post-content {
    position: relative;
    z-index: 10;
    width: 100%;
    min-width: 0;
}

.mcld-post-content img,
.mcld-post-content video,
.mcld-post-content iframe {
    max-width: 100%;
}

/* ==========================================================
   MCLD DECORATIVE LAYER
   The class mcld-decor-layer belongs to the HTML widget that
   is a direct child of mcld-section.
   ========================================================== */

.mcld-section > .mcld-decor-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.mcld-decor-layer > .elementor-widget-container,
.mcld-graphics {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.mcld-graphics {
    overflow: hidden;
    pointer-events: none;
}

/* ==========================================================
   MCLD PRIMITIVES
   ========================================================== */

.mcld-shape,
.mcld-line,
.mcld-letter {
    position: absolute;
    display: block;
    box-sizing: border-box;
    pointer-events: none;
}

.mcld-letter {
    z-index: 3;
    font-family: "Montserrat", sans-serif;
    font-size: 54px;
    font-weight: 500;
    line-height: 1;
    color: var(--mcld-secondary);
    opacity: 0.76;
}

.mcld-line {
    z-index: 1;
    background: var(--mcld-dark-line);
}

/* ==========================================================
   MCLD COMPLEX MOTIF - TOP LEFT
   Magenta line + dark fine lines + light square + magenta block
   ========================================================== */

.mcld-shape-top-left {
    top: 4%;
    left: var(--mcld-rail-inline);
    z-index: 2;
    width: 138px;
    height: 132px;
    background:
        linear-gradient(var(--mcld-primary), var(--mcld-primary))
        114px 0 / 16px 30px no-repeat,
        linear-gradient(var(--mcld-secondary), var(--mcld-secondary))
        90px 30px / 24px 24px no-repeat,
        linear-gradient(var(--mcld-dark-line), var(--mcld-dark-line))
        90px 0 / 1px 124px no-repeat,
        linear-gradient(var(--mcld-primary), var(--mcld-primary))
        0 54px / 114px 5px no-repeat,
        linear-gradient(var(--mcld-dark-soft), var(--mcld-dark-soft))
        40px 84px / 74px 1px no-repeat;
}

/* ==========================================================
   MCLD LETTERS
   M / C / L / D only. Never add J.
   ========================================================== */

.mcld-letter-d {
    top: 10%;
    left: calc(var(--mcld-rail-inline) + 26px);
}

.mcld-letter-c {
    top: 43%;
    left: calc(var(--mcld-rail-inline) + 10px);
}

.mcld-letter-l {
    top: 14%;
    right: calc(var(--mcld-rail-inline) + 40px);
}

.mcld-letter-m {
    top: 27%;
    right: calc(var(--mcld-rail-inline) + 4px);
}

/* ==========================================================
   MCLD DARK LINES
   ========================================================== */

.mcld-line-dark-left {
    top: 2%;
    left: calc(var(--mcld-rail-inline) + 108px);
    width: 1px;
    height: 180px;
}

.mcld-line-dark-right {
    top: 5%;
    right: calc(var(--mcld-rail-inline) + 106px);
    width: 1px;
    height: 185px;
}

.mcld-line-dark-left-mid {
    top: 54%;
    left: calc(var(--mcld-rail-inline) + 14px);
    width: 92px;
    height: 1px;
    background: var(--mcld-dark-soft);
}

.mcld-line-dark-left-bottom {
    top: 70%;
    left: calc(var(--mcld-rail-inline) + 94px);
    width: 1px;
    height: 118px;
    background: var(--mcld-dark-soft);
}

.mcld-line-dark-right-mid {
    top: 51%;
    right: calc(var(--mcld-rail-inline) + 16px);
    width: 96px;
    height: 1px;
    background: var(--mcld-dark-soft);
}

.mcld-line-dark-right-bottom {
    top: 66%;
    right: calc(var(--mcld-rail-inline) + 86px);
    width: 1px;
    height: 124px;
    background: var(--mcld-dark-soft);
}

/* ==========================================================
   MCLD LEFT ACCENTS
   ========================================================== */

.mcld-shape-left-main-corner {
    top: 21%;
    left: calc(var(--mcld-rail-inline) - 2px);
    z-index: 2;
    width: 90px;
    height: 78px;
    border-left: 5px solid var(--mcld-primary);
    border-bottom: 1px solid var(--mcld-dark-line);
}

.mcld-shape-left-small-square {
    top: 33%;
    left: calc(var(--mcld-rail-inline) + 4px);
    z-index: 2;
    width: 17px;
    height: 17px;
    background: var(--mcld-dark);
}

.mcld-shape-left-accent-line {
    top: 62%;
    left: calc(var(--mcld-rail-inline) + 30px);
    z-index: 2;
    width: 72px;
    height: 4px;
    background: var(--mcld-primary);
}

.mcld-shape-left-bottom-corner {
    top: 77%;
    left: calc(var(--mcld-rail-inline) + 4px);
    z-index: 2;
    width: 76px;
    height: 54px;
    border-left: 4px solid var(--mcld-secondary);
    border-bottom: 4px solid var(--mcld-primary);
}

/* ==========================================================
   MCLD RIGHT ACCENTS
   ========================================================== */

.mcld-shape-right-top-corner {
    top: 13%;
    right: var(--mcld-rail-inline);
    z-index: 2;
    width: 92px;
    height: 72px;
    border-top: 1px solid var(--mcld-dark-line);
    border-right: 5px solid var(--mcld-primary);
}

.mcld-shape-right-vertical {
    top: 37%;
    right: calc(var(--mcld-rail-inline) + 2px);
    z-index: 2;
    width: 5px;
    height: 136px;
    background: var(--mcld-secondary);
}

.mcld-shape-right-small-square {
    top: 59%;
    right: calc(var(--mcld-rail-inline) + 26px);
    z-index: 2;
    width: 18px;
    height: 18px;
    background: var(--mcld-dark);
}

.mcld-shape-right-bottom-corner {
    top: 78%;
    right: var(--mcld-rail-inline);
    z-index: 2;
    width: 98px;
    height: 70px;
    border-top: 4px solid var(--mcld-primary);
    border-right: 4px solid var(--mcld-secondary);
}

/* ==========================================================
   MCLD COMPACT DESKTOP / SMALL LAPTOP
   ========================================================== */

@media (max-width: 1366px) {
    .mcld-shape,
    .mcld-line {
        opacity: 0.72;
    }

    .mcld-shape-top-left {
        transform: scale(0.58);
        transform-origin: left top;
    }

    .mcld-letter {
        font-size: 44px;
        opacity: 0.54;
    }

    .mcld-letter-d {
        top: 8%;
        left: calc(var(--mcld-rail-inline) + 12px);
    }

    .mcld-line-dark-left {
        left: calc(var(--mcld-rail-inline) + 62px);
    }

    .mcld-line-dark-right {
        right: calc(var(--mcld-rail-inline) + 62px);
    }
}

/* ==========================================================
   MCLD TABLET
   ========================================================== */

@media (max-width: 1024px) {
    .mcld-section {
        --mcld-rail-inline: 8px;
    }

    .mcld-container {
        max-width: 100%;
        padding-inline: var(--mcld-padding-tablet);
    }

    .mcld-shape,
    .mcld-line {
        transform: scale(0.64);
        opacity: 0.54;
    }

    .mcld-shape-top-left,
    .mcld-shape-left-main-corner,
    .mcld-shape-left-bottom-corner,
    .mcld-shape-left-accent-line,
    .mcld-shape-left-small-square,
    .mcld-line-dark-left,
    .mcld-line-dark-left-mid,
    .mcld-line-dark-left-bottom {
        transform-origin: left top;
    }

    .mcld-shape-right-top-corner,
    .mcld-shape-right-vertical,
    .mcld-shape-right-bottom-corner,
    .mcld-shape-right-small-square,
    .mcld-line-dark-right,
    .mcld-line-dark-right-mid,
    .mcld-line-dark-right-bottom {
        transform-origin: right top;
    }

    .mcld-letter {
        font-size: 38px;
        opacity: 0.42;
    }

    .mcld-shape-top-left,
    .mcld-letter-d,
    .mcld-line-dark-left-bottom,
    .mcld-line-dark-right-mid {
        display: none;
    }
}

/* ==========================================================
   MCLD MOBILE
   Keep the identity but protect headings, forms and buttons.
   ========================================================== */

@media (max-width: 767px) {
    .mcld-section {
        --mcld-rail-inline: 2px;
    }

    .mcld-container {
        padding-inline: var(--mcld-padding-mobile);
    }

    .mcld-shape,
    .mcld-line {
        transform: scale(0.44);
        opacity: 0.34;
    }

    .mcld-letter {
        font-size: 29px;
        opacity: 0.28;
    }

    .mcld-letter-c {
        top: 43%;
        left: 2px;
    }

    .mcld-letter-m {
        top: 20%;
        right: 2px;
    }

    .mcld-line-dark-left {
        top: 8%;
        left: 3px;
        height: 92px;
    }

    .mcld-line-dark-left-mid {
        top: 61%;
        left: 0;
        width: 58px;
    }

    .mcld-shape-left-accent-line {
        top: 66%;
        left: 0;
    }

    .mcld-shape-left-bottom-corner {
        top: 84%;
        left: 0;
    }

    .mcld-shape-right-vertical {
        top: 34%;
        right: 0;
    }

    .mcld-shape-right-small-square {
        top: 57%;
        right: 4px;
        background: var(--mcld-secondary);
    }

    .mcld-letter-d,
    .mcld-letter-l,
    .mcld-shape-top-left,
    .mcld-shape-left-main-corner,
    .mcld-shape-left-small-square,
    .mcld-shape-right-top-corner,
    .mcld-shape-right-bottom-corner,
    .mcld-line-dark-right,
    .mcld-line-dark-left-bottom,
    .mcld-line-dark-right-mid,
    .mcld-line-dark-right-bottom {
        display: none;
    }
}