/*
Theme Name: Hello Elementor Child
Theme URI: https://groundeddigital.com/
Description: Basic child theme for the Hello Elementor theme.
Author: Grounded Digital
Author URI: https://groundeddigital.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Put your custom CSS below this line */

:root {
    --x-padding:    150px;
    --f-padding:    112px;
    --h-padding:    56px;
    --q-padding:    28px;
    --s-padding:    14px;
    --t-padding:    14px;
    --min-padding:  7px;
    
    --layout-mobile-small:        380px;
    --layout-mobile:              480px;
    --layout-mobile-large:        667px;
    --layout-tablet:              767px;
    --layout-tablet-large:        992px;
    --layout-tablet-landscape:    1024px;
    --layout-desktop:             1200px;
    --layout-desktop-large:       1439px;
    --layout-desktop-larger:      1680px;
    --layout-desktop-hd:          1920px;

    --color-purple:			#5E366E;
    --color-dark-purple: 	#240F2B;
    --color-text:			#45556C;
    --color-accent:			#F3EFF5;
    --color-black:			#000000;
    --color-white:			#FFFFFF;
    --color-light-purple:	#E8DFED;
    --color-mid-purple:		#8E6F8F;
    --color-light-grey:		#F8FAFC;
	--color-black-10:		#0000001A;
	--color-headings:		#000000;
	--color-mid-grey:		#CAD5E2;

	--std-padding:	112px;
    --dropdown-spacing: 105px;

}

@media (max-width: 1023px) {
    :root {
        --std-padding: 56px;
    }
}

@media (max-width: 767px) {
    :root {
        --std-padding: 28px;
    }
}

/* parent establishes positioning context */
.mos-logo-wrap { position: relative; 
    
    margin-top:14px; 

	@media (max-width: 767px) {
    
            margin-top:-14px 

    
    }
}


/* stack both logos on top of each other */
.mos-logo-wrap .mos-logo-pos,
.mos-logo-wrap .mos-logo-rev{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transition: opacity .25s ease, visibility .25s ease;
}

/* default: show pos */
.mos-logo-wrap .mos-logo-pos{ opacity: 1; visibility: visible; }
.mos-logo-wrap .mos-logo-rev{ opacity: 0; visibility: hidden; }

/* menu-rev: show rev */
body.menu-rev .mos-logo-wrap .mos-logo-pos{ opacity: 0; visibility: hidden; }
body.menu-rev .mos-logo-wrap .mos-logo-rev{ opacity: 1; visibility: visible; }


.mos-header {
	padding: 0 var(--f-padding);
    background-color: #FFFFFF!important;
    border-bottom: 2px solid #E2E8F0;
	padding: 0 var(--std-padding);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}


.mos-header{
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.mos-header.sticky-header{
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
  will-change: transform;
}

.mos-menu a.elementor-item {
    color: #240F2B;
    fill: #240F2B;
}

.mos-menu a.elementor-item:hover {
    color: #8E6F8F!important;
}

.mos-menu a.elementor-item.elementor-item-active {
    color: #8E6F8F!important;
}
.mos-menu .elementor-element.elementor-element-2807197c .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    margin-top:120px!important;
}
.menu-rev {
    
    .mos-header {
        background-color: #ffffff00!important;
        border-bottom: none;

        .elementor-element.elementor-element-2807197c div.elementor-menu-toggle, .elementor-element.elementor-element-2807197c div.elementor-menu-toggle svg {
            color:white;
            fill:white;
        }
    }

}

.menu-rev .mos-menu a.elementor-item {
    color: 	var(--color-white);
    fill: 	var(--color-white);
}
.menu-rev .mos-menu a.elementor-item:hover {
    color: 	var(--color-mid-purple)!important;
}
.menu-rev .mos-menu a.elementor-item.elementor-item-active {
    color: 	var(--color-mid-purple)!important;
}

.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	top: -43px!important;
	padding:34px 0;
	
	@media (max-width: 767px) {

		ul>li>a {
			font-size: 18px!important;
			padding:0;
			font-weight: 400;
			padding: .5em 28px;
			letter-spacing: 0;
		}
	}
}

.home {

	padding-top: 0;

}
*:not(input):not(textarea) {
  caret-color: transparent;
}
a:focus {
  outline: none;
}

/* Or for a more comprehensive approach, though use with caution */
a:active, a:focus {
  outline: 0;
  border: none;
}

/*** Typography */
p, li {
    font-size:18px;
    margin-top:0;	
}

body {
		font-family: 'helvetica-neue-lt-pro', sans-serif;
        color: var(--color-text);
		padding-top:90px;
}
body.no-menu-transition .mos-header,
body.no-menu-transition .mos-header * ,
body.no-menu-transition .mos-logo-pos,
body.no-menu-transition .mos-logo-rev,
body.no-menu-transition .mos-menu a.elementor-item,
body.no-menu-transition .mos-menu a.elementor-item * {
  transition: none !important;
}

p, .p2, .p3, li {

    max-width: 600px;
    line-height: 1.5em;

    &.full-width {
        max-width: none;
    }
}

.full-width p {
    max-width: none;
}

.p2 p, .p2, .p2 li, .blog-content p, .blog-content li {
   font-size:15px;
   line-height:1.5em;
}

.p3 p, .p3, .p3 li {
    font-size:14px;
    line-height:1.5em;
    margin-bottom: 7px;
}

.pr {
    font-size: 18px;
}

h2,h3,h4,h5,h6,.blog-content h1,
.elementor-widget-heading .elementor-heading-title
{
    margin-top:0;
    line-height: 1.1em;
    text-wrap: balance;
	color: var(--color-headings);
}
.uael-offcanvas-content h4 {

	color: var(--color-purple);
	margin-bottom:21px;

}
ul {    
	margin-top:.5em;
	margin-bottom:1.5em;
	padding-left: 28px;
	font-size: inherit;
}


.timeline-container::before { 

	/*** Vertical line thorugh year circles */
    
	content: "";
    position: absolute;
    left: 32px;           
    top: 32px;            
    width: 0;
    border-left: 1px solid #5E366E;
    pointer-events: none;
    height: calc(100% - 64px);

    @media (max-width: 767px) {
        top: 0;            
        height: 90%;
    }

}

.footer-links .elementor-widget-heading .elementor-heading-title {
	padding: 0 0 1.1em 0;	
	color: var(--color-mid-grey);
}

.footer-links .elementor-widget-heading .elementor-heading-title:hover {
	color: var(--color-mid-purple);
}

.sub-footer .elementor-widget a {
    color: var(--color-white);
    text-decoration: underline;
}
.sub-footer .elementor-widget a:hover {
    color: var(--color-mid-purple);
}

footer .p3 p {
	text-wrap: pretty;
}



.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title,
.elementor-widget-heading .blog-content h1.elementor-heading-title {
    margin-top: -.1em;
    margin-bottom: -.1em;
}

h1 {
    font-weight: 500;
    font-size:12px;
}
h2, .blog-content h1 {
    font-size:50px;
}
h3 {
    font-size:40px;
}
h4, .blog-content h2 {
    font-size:34px;
}
h5, .blog-content h3 {
    font-size:30px;
}
h6 {
    font-size:26px;
}

.text-white,
.text-white h6,
.text-white h5,
.text-white h4,
.text-white h3,
.text-white h2,
.text-white h1,
.text-white p
{
	color: var(--color-white);
}

.no-wrap {
	text-wrap: none;
}

.boxed-head, .publications-tags span {

    padding: 4px 14px;
    color: var(--color-light-purple);
    border-radius: 8px;
    border: 1px solid;
    background: var(--color-light-purple);
    width:inline;
    line-height: 1em;
    font-size:12px;
    
    &.boxed-head-rev {
        background: none;
        border:1px solid inset var(--color-white);
        color: var(--color-white);
    }

}

.mos-form-container .gform-theme--framework .gform_validation_errors .gform_submission_error {

    padding: 4px 14px;
    color: var(--color-dark-purple);
    fill: var(--color-dark-purple);
    border-radius: 8px;
    border: 1px solid var(--color-light-purple);
    background: var(--color-light-purple);
    width:inline;
    line-height: 1em;
    font-size:12px;

    
}
.mos-form-container .gform-theme--framework .gform_validation_errors .gform_submission_error:focus {
    border:none;
}

.mos-form-container .gform_wrapper .gform_validation_errors:focus {
    outline: none !important;
    box-shadow: none !important;
}
.mos-form-container .gform-icon {
    color:var(--color-dark-purple)!important;
    border-color: var(--color-dark-purple)!important;
}



.publications-tags span {
    border-color: var(--color-black-10);
	color: var(--color-black);
	background-color: var(--color-white);
	margin-right: var(--min-padding);
	text-transform: lowercase;
}

.boxed-head .elementor-heading-title {
	color: var(--color-purple);
}



.x-padding-top 	{	padding-top: calc(var(--f-padding) * 1.5);}
.x-padding-right {	padding-right: calc(var(--f-padding) * 1.5);}
.x-padding-bottom {	padding-bottom: calc(var(--f-padding) * 1.5);}
.x-padding-left {	padding-left: calc(var(--f-padding) * 1.5);}

.f-padding-top {	padding-top: var(--f-padding);}
.f-padding-right {	padding-right: var(--f-padding);}
.f-padding-bottom {	padding-bottom: var(--f-padding);}
.f-padding-left {	padding-left: var(--f-padding);}

.h-padding-top {	padding-top: var(--h-padding);}
.h-padding-right {	padding-right: var(--h-padding);}
.h-padding-bottom {	padding-bottom: var(--h-padding);}
.h-padding-left {	padding-left: var(--h-padding);}

.q-padding-top {	padding-top: var(--q-padding);}
.q-padding-right {	padding-right: var(--q-padding);}
.q-padding-bottom {	padding-bottom: var(--q-padding);}
.q-padding-left {	padding-left: var(--q-padding);}

.s-padding-top {	padding-top: var(--s-padding);}
.s-padding-right {	padding-right: var(--s-padding);}
.s-padding-bottom {	padding-bottom: var(--s-padding);}
.s-padding-left {	padding-left: var(--s-padding);}

.t-padding-top {	padding-top: var(--t-padding);}
.t-padding-right {	padding-right: var(--t-padding);}
.t-padding-bottom {	padding-bottom: var(--t-padding);}
.t-padding-left {	padding-left: var(--t-padding);}




.cta {
    padding-top: calc(var(--q-padding) * 3);
    padding-bottom: calc(var(--q-padding) * 3);
}

@media (max-width: 767px) {

    .p3 p, .p3, .p3 li {
        font-size: 12px;
    }
    .pr {
        font-size: 16px;
    }

    .creds .elementor-image-box-wrapper {
        display: flex;
        column-gap: 20px;
        grid-row-gap: 20px;
    }

    .text-btn::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: calc(100% - 20px);
      height: 1px;              
      background-color: var(--color-white);
      transform: scaleX(1);
      transform-origin: left;
    }
}

.std-container, .hero-container {  

    min-height:calc(100vw * .56);

}

@media (min-aspect-ratio: 16/9) {
  
    .hero-container {
        min-height: 90vh;
        height: 90vh;
        max-height: 90vh;
    }

}

.std-padding {

	padding: var(--f-padding);

	@media (max-width: 1023px) {
		padding: var(--f-padding) var(--h-padding);
	}

	@media (max-width: 767px) {
		padding: var(--h-padding) var(--q-padding);
	}

}

.content-hero>div {
    
    padding: var(--f-padding);

    @media (max-width: 1023px) {
		padding: var(--f-padding) var(--h-padding) var(--h-padding) var(--h-padding);
    }
    @media (max-width: 767px) {
		padding: var(--h-padding) var(--q-padding) var(--q-padding) var(--q-padding);
    }


}

.ratio-wide {
    aspect-ratio: 16/10;
    width: 100%;
}

.ratio-square {
    aspect-ratio: 1/1;
}

.ratio-vertical {
    aspect-ratio: 9/16
}

@media (min-width: 1920px) {

   .hero-container {
        min-height: 95vh;
        height: 95vh;
        max-height: 95vh;
    }

}

.elementor-menu-toggle {
    z-index: 10000;
}

.elementor-widget-button .elementor-button {
    border: solid 1px;
    background-color: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: -.015em;
    padding: 10px 25px;

}

.full-width .elementor-button {
    width:100%;
}

.btn-a a.elementor-button-link, .btn-a {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-purple);
    fill: var(--color-purple);
	border-radius: 8px;
}

.btn-a a.elementor-button-link:hover, .btn-a:hover {
    background-color: var(--color-mid-purple);
    border-color: var(--color-mid-purple);
    color: var(--color-white);
    fill: var(--color-white);
	
}

.btn-b a.elementor-button-link, .btn-b {
    border-color: var(--color-white);
    color: var(--color-white);
    fill: var(--color-white);
	border-radius: 8px;
}

.btn-b a.elementor-button-link:hover, .btn-b:hover {
    background-color: var(--color-white);
    color: var(--color-purple);
    fill: var(var(--color-purple));
}

.btn-c a.elementor-button-link, .btn-c {
    
    background-color: #5E366E;
    border-color: #5E366E;
    color: #FFF;
    fill: #FFF;
	border-radius: 8px;

}

.menu-rev .mos-header .btn-c a.elementor-button-link,
.menu-rev .mos-header .btn-c {
        background-color: transparent;
        border-color: var(--color-white);
}
.menu-rev .mos-header .btn-c a.elementor-button-link:hover,
.menu-rev .mos-header .btn-c:hover {
        background-color: var(--color-white);
        border-color: var(--color-white);
        color: var(--color-purple);
        fill: var(--color-purple);
}


.btn-c a.elementor-button-link:hover, .btn-c:hover {
    background-color: #8E6F8F;
    border-color: #8E6F8F;
    color: #FFF;
    fill: #FFF;
}

.btn-d a.elementor-button-link, .btn-d {
    background: #FFF;
    border-color: #5E366E;
    color: #5E366E;
    fill: #5E366E;
	border-radius: 8px;
}

.btn-d a.elementor-button-link:hover, .btn-d:hover {
    background-color: #5E366E;
    border-color: #5E366E;
    color: #FFF;
    fill: #FFF;
}

@media (max-width: var(--layout-mobile)) {

    .btn-a,.btn-b,.btn-c,.btn-d {
        width:100%;
    }
    
}


.text-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 20px);
    height: 1px;              /* thickness of the underline */
    background-color: #fff; /* underline color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.text-btn:hover::after {
    transform: scaleX(1);
}

.grid-containers {
    padding: var(--q-padding);
}

.heading-text {
    width:auto;
}

/*** ACCORDION - align icon right */

.mos-accordion .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
    justify-content: space-between;
}

/*** BLOG */

.blog-content {

    p {
        margin-top: 1.5em;
    }

    h2, h3, h4, h5, h6 {
        margin-top: .75em;
        text-wrap: pretty;
    }
        
    .elementor-post-navigation .elementor-post-navigation__link {
        text-overflow:unset;
        width: calc(50% - var(--q-padding));
        white-space: unset;
        text-wrap: balance;
        align-content: center;
    }
    
    .header-image {
        
        img {
            aspect-ratio: 16/9;
            object-fit: cover;
            min-height: 100%;
            object-position: center center;
        }

    }
    
    .post-content {
        
        .elementor-widget-theme-post-content {

            h2, h3, h4, h5, h6 {
                text-transform: none;
                font-weight: 400;
                letter-spacing: 0;
            }        

            .wp-block-embed.is-type-video {

                iframe {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 16/9;
                }

            }


            .wp-block-gallery {

                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 14px;

                @media (max-width: 767px) {

                    grid-template-columns: repeat(2, 1fr);

                }

                figure {
                    
                    margin:0;
                    overflow: hidden;
                    aspect-ratio: 1/1;


                    img {
                        width:100%;
                        height:100%;
                    }
                    
                }
            }
            
            .wp-block-columns {

                display: flex;

                    @media (max-width: 992px) {

                        flex-direction:column;
                        align-items: center;
                        
                    }


                .wp-block-column {

                    width: 50%;
                    overflow: hidden;
                    
                    @media (max-width: 992px) {

                        width:100%;

                    }


                    figure.wp-block-image {

                        margin: 0;
                        height: 100%;
                        display:flex;
                        justify-content: center;

                        img {
                            width:100%;
                            max-height: 100%;
                            height:auto;
                        }

                    }

                }
                
                .wp-block-column:nth-child(odd) {

                    padding: var(--f-padding) var(--h-padding) var(--f-padding) 0;

                    @media (max-width: 1200px) {

                        padding-right:  var(--q-padding);
                        padding-left:   var(--q-padding);

                    }

                    @media (max-width: 992px) {

                        padding: var(--q-padding) 0 0 ;
                        max-width: 600px;

                    }

                    &:has(> figure) {
                        padding:0;
                    }
                    
                }

                .wp-block-column:nth-child(even) {

                    padding: var(--f-padding) 0 var(--f-padding) var(--h-padding);

                    @media (max-width: 1200px) {

                        padding-right:  var(--q-padding);
                        padding-left:   var(--q-padding)

                    }

                    @media (max-width: 992px) {

                        padding: var(--q-padding) 0 0 ;
                        max-width: 600px;

                    }

                    &:has(> figure) {
                        padding:0;

                        @media (max-width: 992px) {
                            order: -1;
                        }
                        
                    }
                }
            }

            >figure.wp-block-image, 
            >.wp-block-columns, 
            >.wp-block-embed, 
            >.wp-block-gallery {

                width: 1200px;
                padding: var(--f-padding) 0;
                margin:0;

                img {
                    margin:0;
                    max-width: 100%;
                    height: auto;
                    object-fit: cover;
                    overflow: hidden;
                    width:100%;
                }

                >.wp-block-column {
                    align-content: center;                
                }

            }

            > *:not(figure.wp-block-image):not(.wp-block-columns):not(.wp-block-embed):not(.wp-block-gallery) {
            
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;

            }

            blockquote {

                margin: var(--f-padding) 0 var(--f-padding) 0;

                p {
                    text-indent:-.4em;
                    font-size: 30px;
                    line-height: 1.1em;
                }
                
                p:last-child {
                    font-weight: 400;
                    text-indent: 0;
                    font-size:18px;
                }
            }
        }        
    }
}

.mos-blog-card {
    
    .mos-blog-card-img  { 

        img {
            border-radius:16px 16px 0 0;
            aspect-ratio: 16/9;
            object-fit: cover;
            min-height: 100%;
            object-position: center center;
        }

    }
    
    .elementor-icon-list-items.elementor-inline-items {

        justify-content: space-between;

        li:nth-of-type(3) {     
            display: none;     
        }
    }
}

.mos-blog-featured {

    .mos-blog-card {

        .elementor-icon-list-items.elementor-inline-items {

            justify-content: start;

            li:nth-of-type(3) {
                display: inline-block;
                justify-self:end;
            }
        
        }
    }
}

/*** Team */

.mos-team-card {
    
    .mos-team-card-img { 

        img {
            border-radius:16px 16px 0 0;
            aspect-ratio: 1/1;
            object-fit: cover;
            min-height: 100%;
            object-position: center center;
        }

    }

}

.inline-flex {
    display: inline-flex;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
    margin-bottom:0;
}

/*** Off canvas form container */

@media (max-width: 767px) {
    .uael-offcanvas {
        width: 90%!important;
    }
}

/*** Gravity Forms Styling */

/* ---------------------------------------
   FIELD LABELS
---------------------------------------- */
body .gform_wrapper .gfield_label,
body .gform_wrapper .gfield_label span {
    font-size: 14px;
    line-height: 1em;
    color: #5E366E;
	margin-bottom: 3px;
}

/* ---------------------------------------
   INPUT FIELDS (text, email, tel, textarea, select)
---------------------------------------- */
body .gform_wrapper .gfield input[type="text"],
body .gform_wrapper .gfield input[type="email"],
body .gform_wrapper .gfield input[type="tel"],
body .gform_wrapper .gfield input[type="number"],
body .gform_wrapper .gfield textarea,
body .gform_wrapper .gfield select {
    border: 1px solid #5E366E;
    border-radius: 8px;
    background: #FFF;
    color: var(--color-text);
    padding: 6px;
	height:33px;
}
body .gform_wrapper .gfield input[type="number"] {
	margin-top:3px;
}

/* Placeholder Text */
body .gform_wrapper .gfield input::placeholder,
body .gform_wrapper .gfield textarea::placeholder {
    color: #8E6F8F;
}

/* ---------------------------------------
   CHECKBOXES & RADIO FIELDS
---------------------------------------- */

/* Checkbox/radio box styling */
body .gform_wrapper .gfield_checkbox input[type="checkbox"],
body .gform_wrapper .gfield_radio input[type="radio"] {
    border: 1px solid #5E366E !important;
    border-radius: 3px;
    background: #FFF;
    width: 18px;
    height: 18px;
}

/* Label text next to checkbox */
body .gform_wrapper .gfield_checkbox label,
body .gform_wrapper .gfield_radio label {
    color: #5E366E;
	font-size: 12px;
	line-height: 1.2em;
	letter-spacing: -.015em;

}

/* ---------------------------------------
   SUBMIT BUTTON
---------------------------------------- */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"],
body .gform_wrapper .gform_page_footer input[type="submit"], .gform_button {
    background: #5E366E!important;
    color: #FFF;
    border: 1px solid #5E366E!important;
    border-radius: 8px!important;
    padding: 12px 24px!important;
    font-weight: 600!important;
    cursor: pointer!important;
	margin-top: 14px!important;
}

/* Hover state */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_button:hover {
    background: #8E6F8F!important;
    border-color: #8E6F8F!important;
}

/* ---------------------------------------
   FIELD SPACING (1.5em between fields)
---------------------------------------- */
body .gform_wrapper .gfield {
    margin-bottom: -1.75em!important;
}

.gform_required_legend {display: none;}

.gform-theme--framework .gform_validation_errors {
	padding: 0!important;
	border: none!important;
}
