/**
Theme Name: Tinglaos
Author: Moio
Author URI: https://moio.io/
Description: Tinglaos
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tinglaos
Template: astra
*/

/* Typography */
@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/Manrope-VariableFont_wght.woff2");
    font-weight: 100 / 900;
    font-display: swap;
}

:root {
    --font-title: "Manrope", sans-serif;
    --font-text: 'Manrope', sans-serif;
    --font-size: 18px;

    --header-height: 130px;
}

html,
body {
    font-family: var(--font-text);
}

h1,
h2,
h3,
h4,
h5,
p {
    font-family: var(--font-title) !important;
}



/* ---------------------------------
   DEFAULT OVERRIDES
----------------------------------*/

/* p {
    margin-bottom: 0 !important;
} */

/* .entry-title {
    display: none !important;
} */


/* ---------------------------------
   DEFAULT STYLES
----------------------------------*/
.deco-pretitle .elementor-heading-title {

    letter-spacing: 1px;

    &::before {
        content: "/";
        color: var(--ast-global-color-1);
        margin-right: 8px;
        font-weight: inherit;
        display: inline-block;
    }

}

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


/* ---------------------------------
   Header
----------------------------------*/

.site-header {
    @media screen and (width > 921px) {
        --header-height: 130px;
    }

    @media screen and (width <=921px) {
        --header-height: auto;
    }

    --header-background: #104c63;


    height: var(--header-height);

    .ast-primary-header-bar {
        height: var(--header-height);
        background-color: var(--header-background);

        .site-header-primary-section-left {
            height: var(--header-height);

            .ast-builder-layout-element {
                height: 100%;

                .site-branding {
                    padding: 0 !important;

                    .ast-logo-svg-icon svg {
                        height: 40px;
                        width: fit-content;
                    }
                }
            }

        }

        .site-header-primary-section-right {
            height: var(--header-height);

            .main-header-menu {
                li {
                    a {
                        color: #fff;
                        line-height: 1em;
                        position: relative;
                        &:after {
                            content: "";
                            position: absolute;
                            left: 16px;
                            bottom: 0px;
                            width: calc(100% - 25px);
                            height: 1px;
                            background-color: white;
                            transform: scaleX(0);        
                            transform-origin: left;     
                            transition: transform 0.3s ease; 
                        }

                        &:hover:after {
                            transform: scaleX(1); 
                        }
                    }

                    &.current_page_item a {
                        position: relative;

                        &:after {
                            transform: scaleX(1);
                        }
                    }

                    &:hover a::after {
                        content: "";
                        position: absolute;
                        left: 16px;
                        bottom: 0px;
                        width: calc(100% - 25px);
                        height: 1px;
                        background-color: white;
                    }
                }
            }

            .header-social-inner-wrap {
                svg path {
                    fill: #fff;
                }
            }

        }

        &::after {
            position: absolute;
            content: "";
            top: 0;
            left: 50%;
            top: 0;
            transform: translate(-50%) rotate(180deg);
            width: 700px;
            height: var(--header-height);
            background-image: url("https://tinglaos.com/wp-content/uploads/2026/02/BackgroundHeader.webp");
            background-repeat: no-repeat;
            background-position: center -290px;
            background-size: cover;
            pointer-events: none;
            z-index: 0;
        }

        >* {
            position: relative;
            z-index: 1;
        }
    }

}

/* Menu */
#ast-mobile-popup {

    .ast-mobile-popup-header {
        position: absolute;
        right: 0;
    }

    .widget_media_image {
        img {
            width: 200px;
            margin: 20px 0 20px 15px;
        }
    }
}

.ast-theme-transparent-header {

    .site-header {
        .ast-primary-header-bar {
            background-color: transparent;

            &::after {
                content: none;
            }
        }
    }

}


/* ---------------------------------
   CONTENT
----------------------------------*/

/* 
--------------  Home  -----------------
*/


.hero-tinglaos{
    position: relative;
    .hero__background{
        position: absolute;
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0;
        background-size: cover;
        background-position: 30% center;
        background-repeat: no-repeat;
        z-index: 0; 
        background-size: clamp(700px, 51vw, 800px);
    }

}

.elementor-element[data-e-type="container"]:has(.hero_default--deco) {
    overflow: hidden;
    .hero_default--deco {
        left: 50% !important;
        top: -90px;
        width: 1000px;
        transform: rotate(-180deg) translateX(50%);
        transform-origin: center;
    }
    elementor-element-6494510{
        margin-top: auto;
    }
}

.grid-info {
	> div{
		position: 	relative;
		.elementor-element.elementor-widget-button{
			margin-top: auto;
			> a{
				border: none;
				border-style: none;
				padding: 0px;
				outline: none;
				&:hover{
					background-color: #fff;
					color: var(--e-global-color-primary);
				}
				&:focus{
					background-color: #fff;
					color: var(--e-global-color-primary);
					outline: none;
				}
				&:focus-visible{
					background-color: #fff;
					color: var(--e-global-color-primary);
					outline: none;
				}
			}

			
			.elementor-button-content-wrapper{
				&::after{
					content:"";
					padding-right: 10px;
					background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.016 2.144L12.384 2.112L0 14.496L1.6 16.096L13.984 3.712L13.952 14.08H16.096V0H2.016V2.144Z' fill='%23f0d6ca'%3E%3C/path%3E%3C/svg%3E");
					background-size: contain;
					background-repeat: no-repeat;
					background-position: right;
					
				}
				
			}
		}
	}
}

/* 
--------------  About  -----------------
*/

.proyectos-destacados {
    .proyectos-destacados__card {
        counter-increment: destacados-counter;
        > .e-con-inner::before {
            color: #fff;
            content: counter(destacados-counter, decimal-leading-zero);
        }
        img{
            aspect-ratio: 1 / 1;
            object-fit: cover;
            display: block;
        }
        h2 a {
            text-decoration: none;
        }
        @media screen and (width >= 768px) {
            padding: clamp(40px, 3vw, 80px) clamp(40px, 3vw, 80px) !important;
        }
         @media screen and (width < 768px) {
            padding: clamp(40px, 3vw, 60px) 20px !important; 
        }
    }
}

/* Archive Proyecto */
body.post-type-archive-proyecto {
    .page-title.ast-archive-title {
        text-transform: uppercase;
        font-weight: 400;
        letter-spacing: 0.22em;
        &::before {
            content: '/';
            padding-right: 0.5em;
        }
    }

    .projects_custom-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        article {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        .projects__custom--project {
            position: relative;
            aspect-ratio: 4 / 5;
            width: 100%;
            display: flex;
            align-items: end;
            padding: 3rem;
            overflow: hidden;
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: var(--ast-global-color-5);
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 1;
                transform: translateY(100%);

                transition: transform 0.3s ease-in-out;
            }
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: var(--ast-global-color-0);
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 0.6;
                mix-blend-mode: multiply;
            }
            > img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            > .projects__custom--info {
                position: relative;
                z-index: 2;
                h2 {
                    margin: 0;
                    font-weight: 400;
                }
                h2, .tags_list {
                    color: #fff;
                }
            }
        }
        a:hover {
            .projects__custom--project {
                &::after {
                    transform: translateY(0);
                }
                > .projects__custom--info {
                    h2, .tags_list {
                        color: var(--ast-global-color-0);
                    }
                }
            }
        }
    }
}

/* Single proyecto */
body.single-proyecto {
    /* Single Hero */
    .ast-single-entry-banner {
        height: 400px;
        padding: 0;
        overflow: hidden;
        position: relative;
        img {
            position: absolute;
            left: 0;
            top: 0;
            object-fit: cover;
        }
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, .4);
        }
        > .ast-container {
            max-width: 100% !important;
            padding: 0;
        }
    }

    .proyect_main-info {
        text-align: center;
        h2 {
            margin-bottom: 0;
            font-size: 2.5rem;
            font-weight: 500;
        }
        .project_subtitle {
            font-size: 1.5rem;
        }
        .project_date {
            text-transform: uppercase;
            margin-bottom: 1em !important;
        }
    }

    .ast-post-social-sharing {display: none;}

    .ast-article-single {
        padding-block: 40px 60px;
        p {
            margin-bottom: 1em;
        }
    }

    .single-proyect__slider {
        ul.slides {
            li {
                position: relative;
                aspect-ratio: 4 / 3;
                img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }

    .proyect-single__footer {
        border-top: 1px solid var(--ast-global-color-0);
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        margin-top: 6rem;
        > div {
            text-align: center;
            /* display: grid;
            gap: 0.5rem; */
            p.title {
                font-size: 1.5rem;
                line-height: 1;
                padding-bottom: 1rem;
                text-transform: uppercase;
            }
        }
    }

    .social-share-buttons {
        .share-icons {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 1rem;
            svg {
                height: 1.2rem;
                width: auto;
                path {
                    fill: var(--ast-global-color-0);
                }
            }
        }
    }
}

/* Archive entradas */
body.archive {
    .site-content {
        position: relative;
        padding-top: var(--header-height) !important;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--header-height);
            background-image: url(https://moio.cc/tinglaos/wp-content/uploads/2026/03/tinglaos_header-drop.webp);
            background-repeat: no-repeat;
            background-position: center 40%;
            background-size: cover;
            z-index: 1;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .ast-archive-description {
            padding-inline: 0;
            h1.page-title {

            }
        }
    }
    [class*="ast-blog-layout"] .ast-article-inner {
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        h2.entry-title {
            font-size: 2rem;
        }
    }
}


/* Single entrada */
body.single-post {
    /* Single Hero */
    .ast-single-entry-banner {
        height: 400px;
        padding: 0;
        overflow: hidden;
        position: relative;
        img {
            position: absolute;
            left: 0;
            top: 0;
            object-fit: cover;
        }
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, .4);
        }
        > .ast-container {
            max-width: 100% !important;
            padding: 0;
        }
    }

    .proyect_main-info {
        text-align: center;
        h2 {
            margin-bottom: 0;
            font-size: 2.5rem;
            font-weight: 500;
	    a {
               	text-decoration: none;
                color: inherit;
            }
        }
        .project_subtitle {
            font-size: 1.5rem;
        }
        .project_date {
            text-transform: uppercase;
            margin-bottom: 1em !important;
        }
    }

    .ast-post-social-sharing {display: none;}

    .ast-article-single {
        padding-block: 10px 60px;
        p {
            margin-bottom: 1em;
        }
    }

    .post-single__footer {
        border-top: 1px solid var(--ast-global-color-0);
        /* display: flex;
        justify-content: space-between; */
        padding-top: 3rem;
        margin-top: 6rem;
        > div {
            /* text-align: center; */
            p.title {
                font-size: 1.5rem;
                line-height: 1;
                /* padding-bottom: 1rem; */
                text-transform: uppercase;
                margin: 0 !important;
            }
        }
    }

    .social-share-buttons {
        display: flex;
        justify-content: space-between;
        .share-icons {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 1rem;
            svg {
                height: 1.2rem;
                width: auto;
                path {
                    fill: var(--ast-global-color-0);
                }
            }
        }
    }
}


/* Gfrom */

.gform_wrapper[class*="gform-theme"] {
    .gfield {
        input,
        textarea {
            border-radius: 20px !important;
            border: 0 none !important;
            box-shadow: none !important;
            background: #f1f1f1;
        }
    }
    input[type="submit"] {
        border-radius: 20px !important;
        background: transparent !important;
        color: var(--ast-global-color-0) !important;
        border: 1px solid var(--ast-global-color-0) !important;
        text-transform: uppercase !important;
        padding: 1em 4em !important;
        &:hover {
            background: var(--ast-global-color-0) !important;
            color: #fff !important;
            /* border: 1px solid var(--ast-global-color-0) !important; */
        }
    }
}




/* ---------------------------------
   FOOTER
----------------------------------*/

footer {
    .ast-builder-grid-row-container-inner {
        padding-inline: 20px;
    }
    h2 {
        color: var(--ast-global-color-4);
        text-transform: uppercase;
        font-weight: 400;
        font-size: 1.3rem;
        margin-bottom: 1.5em;
    }
    address {
        font-style: normal;
        > p{
            margin-bottom: 0px;
        }
    }
    a {
        color: #fff;
        &:hover {
            color: var(--ast-global-color-5);
        }
    }


    .widget {margin-bottom: 0;}

    .site-primary-footer-wrap {

        img {
            max-width: 200px;
            width: 100%;
        }
        .ast-builder-grid-row {
            grid-template-columns: 1fr !important;
            gap: 2rem 3rem !important;
        }
        
        @media screen and (width >= 560px) {
            .ast-builder-grid-row {
                grid-template-columns: 1fr 1fr !important;
            }
        }
        @media screen and (width >= 960px) {
            .ast-builder-grid-row {
                grid-template-columns: repeat(4, 1fr) !important;
            }
        }
        /* .ast-builder-footer-grid-columns {
            grid-template-columns: 1fr !important;
        } */
    }
    
}

.boxes__wrapper  {
    .square {
        align-items: center;
        justify-content: center;
        p {
            margin: 0 !important;
        }
        > div:not(:first-child) {
            /* height: 0; */
            /* overflow: hidden; */
            opacity: 0;
            display: grid !important;
            grid-template-rows: 0fr;
            
            transform: translateY(150%);
            transition: all 0.2s ease-in-out;
            > p {
                overflow: hidden;
            }
        }
        &:hover {
            > div:not(:first-child) {
                grid-template-rows: 1fr;
                height: auto;
                opacity: 1;
    
                transform: translateY(0);
            }
        }
    }
}

.boxes-flip__wrapper {
    container-type: inline-size;

    > .elementor-widget-ucaddon_flip_box {
        container-type: inline-size;
            
        .ue-flip-box {

            aspect-ratio: 1 / 1;
            min-height: 400px;
            height: auto !important;
            max-width: 400px;
            margin-inline: auto !important;

            .ue-flip-box__title {margin: 0 !important;}
            
            /* Front */
            .ue-flip-box__panel--front {
                .ue-flip-box__title {
                    font-size: clamp(2rem, 13cqi, 3.2rem);
                    text-align: left;
                    /* max-width: min-content; */
                    font-weight: 300;
                    line-height: 1.2;
                }
                
            }
            .ue-flip-box__panel--back {
                .ue-flip-box__title {
                    font-size: calc(1.3rem, 5.6cqi, 1.8rem);
                    text-transform: uppercase;
                    font-weight: 500;
                    &::after {
                        content: '';
                        display: block;
                        height: 1px;
                        background: currentColor;
                        width: 80px;
                        margin-left: calc(50% - 40px);
                        margin-top: 0.8em;
                        margin-bottom: 0.6em;
                    }

                    .ue-flip-box__description {
                        hyphenate-limit-chars: 7;
                        hyphens: auto;
                        text-align: justify;
                        text-wrap: pretty;
                    }
                }
            }
        }
    }


    @container (width <= 768px) {
        > .elementor-widget-ucaddon_flip_box {
            
        }
    }
}


/* Complianz */
body.cmplz-document {
    /* background: var(--ast-global-color-0); */
    #content {
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--header-height);
            background-image: url("https://tinglaos.com/wp-content/uploads/2026/02/BackgroundHeader.webp");
            background-repeat: no-repeat;
            background-position: center center;
            background-color: var(--ast-global-color-0);
            background-size: 860px;
            pointer-events: none;
            z-index: 0;
        }
    }
    #cmplz-document {
        max-width: 100%;
        padding-top: 160px;
        /* * {color: #fff;
        } */
    }
}