/* ==========================================================================
   1. GLOBAL STYLES & RESET
   ========================================================================== */

:root {
    /* Brand Colors */
    --color-primary: #1d4bc5;
    --color-accent: #b0cc78;
    --color-text: #1d4bc5;
    
    /* Animation Timings */
    --transition-main: 0.75s cubic-bezier(0, 0.5, 0, 1);
    --transition-fade: 0.75s ease-in-out;
}

body {
    padding-left: 1em;
    padding-right: 1em;
    font-family: 'Monsterrat', sans-serif;
    color: var(--color-text);
}

.elementor-kit-8 a {
    color: var(--color-primary);
}

/* ==========================================================================
   2. PAGE LAYOUT (Structural Containers)
   ========================================================================== */
header#site-header, 
main#content,
footer#site-footer {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.horizontal-line {
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    margin-top: 0em;
    margin-bottom: 0em;
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
header#site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    margin-bottom: 2em;
}

.site-branding {
    text-align: center;
}

h1#landing-page-title {
    text-align: left;
    font-weight: 400;
    font-size: 1.2em;
}

.site-navigation {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.site-navigation nav ul.menu {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1em;
    font-size: 20px;
}
.site-navigation nav ul.menu a {
    text-decoration: none;
    padding: 0;
    transition: all 0.2s ease;
}

.site-navigation nav ul.menu li.current-menu-item {
    /* font-weight: 700; */
}

.site-navigation nav ul.menu li:not(.current-menu-item) a:hover {
    /* font-weight: 600; */
}

/* Language Switcher */
li.lang-item {
    text-align: right;
}

li.lang-item::marker {
    content: '';
}

.site-navigation__right {
    display: flex;
    gap: 1em;
}

li.lang-item a {
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

li.lang-item a::after, 
li.menu-item a::after{
    content: '';
    width: 0.5em;
    height: 1px;
    background-color: #1d4bc5;
    position: absolute;
    bottom: -0.2em;
    left: 50%;
    transform: translateX(-50%) translateY(-0.2em);
    opacity: 0;
    transition: all 0.3s ease;
}

li.lang-item.current-lang a,
li.lang-item:not(.current-lang) a:hover {
    /* font-weight: 600; */
}

li.lang-item.current-lang a::after,
li.lang-item:not(.current-lang) a:hover::after,
li.menu-item.current-menu-item a::after,
li.menu-item:not(.current-menu-item) a:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0em);
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
footer#site-footer {
    display: flex;
    flex-direction: column;
    padding-top: 0em;
    margin-top: 0em;
    margin-bottom: 3em;
}

.footer-contact-info {
    display: flex;
    justify-content: space-between;
    padding-top: 0em;
    margin-top: 0em;
}

.footer-contact-info a {
    text-decoration: none;
}

.footer-contact-info__item {
    display: flex;
    gap: 0.5em;
}

.footer-icon img {
    width: 1em;
}

.footer-contact-info__item.footer-contact-info__phone .footer-icon img,
.footer-contact-info__item.footer-contact-info__address .footer-icon img {
    margin-top: 3px;
}

/* ==========================================================================
   5. ANIMATIONS (Locomotive & Custom Viewport Logic)
   ========================================================================== */

/* Shutter/Fade-in Initial State */
.menu-item, 
.project-grid-item, 
.header-item, 
.lang-item, 
.footer-item, 
[data-viewportcheck], 
.elementor-widget-text-editor p,
.elementor-icon-box-icon,
.elementor-icon-box-content,
.elementor-widget-image img,
.project-filter-btn,
.splide,
#landing-page-title,
.elementor-heading-title {
    transform: translateY(1em);
    opacity: 0;
    transition: transform var(--transition-main), opacity var(--transition-fade);
    will-change: transform, opacity;
}

/* In-View Active State */
.menu-item.is-inview, 
.project-grid-item.is-inview, 
.header-item.is-inview, 
.lang-item.is-inview, 
.footer-item.is-inview, 
[data-viewportcheck].is-inview, 
.project-text p.is-inview, 
.elementor-widget-text-editor p.is-inview,
.elementor-icon-box-icon.is-inview,
.elementor-icon-box-content.is-inview,
.elementor-widget-image img.is-inview,
.project-filter-btn.is-inview,
.splide.is-inview,
#landing-page-title.is-inview,
.elementor-heading-title.is-inview {
    transform: translateY(0em);
    opacity: 1;
}

/* Line Animation */
.horizontal-line {
    transform: scaleX(0);
    transition: transform var(--transition-main), opacity var(--transition-fade);
    will-change: transform, opacity;
}

.horizontal-line.is-inview {
    transform: scaleX(1);
}

/* Project Image Shutter Logic */
.project-grid-item.is-inview {
    transition: opacity 0.75s ease-in-out;
}

.project-grid-item__tempimage {
    transition: opacity 0.75s ease-in-out;
    opacity: 1;
}

.project-grid-item.is-inview .project-grid-item__tempimage {
    opacity: 0;
    pointer-events: none;
}

/* Helper Utilities */
a.footer-item, span.footer-item { display: inline-block; }
.is-fading-out { opacity: 0 !important; }

/* ==========================================================================
   6. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet/Small Desktop */
@media only screen and (max-width: 700px) {
    .footer-contact-info__item {
        flex-direction: column;
        gap: 0;
    }
}

/* Mobile Devices */
@media only screen and (max-width: 575px) {
    header#site-header, footer#site-footer {
        padding-inline-end: 0px;
        padding-inline-start: 0px;
    }
    .site-navigation,
    .footer-contact-info {
        flex-direction: column;
        gap: 1em;
        align-items: center;
        text-align: center;
    }
    li.lang-item {
        text-align: center;
    }
}

/* ==========================================================================
   7. ELEMENTOR EDITOR OVERRIDES
   ========================================================================== */
body.elementor-editor-active .project-grid,
body.elementor-editor-active .project-grid-item,
body.elementor-editor-active .menu-item, 
body.elementor-editor-active .header-item, 
body.elementor-editor-active .lang-item, 
body.elementor-editor-active .footer-item, 
body.elementor-editor-active [data-viewportcheck], 
body.elementor-editor-active .project-text p, 
body.elementor-editor-active .elementor-widget-text-editor p, 
body.elementor-editor-active .elementor-widget-image img,
body.elementor-editor-active .elementor-icon-box-icon,
body.elementor-editor-active .elementor-icon-box-content,
body.elementor-editor-active .horizontal-line,
body.elementor-editor-active .is-fading-out,
body.elementor-editor-active .project-filter-btn,
body.elementor-editor-active .elementor-heading-title {
    opacity: 1 !important;
    transform: translateY(0em) scaleX(1) !important;
}