@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "degular";
    src: url("../fonts/degular-display.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --text: #000000;
    --hero-text: #ffffff;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "degular", "DM Sans", Arial, sans-serif;
}

h1, .h1{
    font-size: 100px;
    line-height: 1.3;
}

h2, .h2{
    font-size: 48px;
    line-height: 1.3;
    @media screen and (max-width:768px){
        font-size:24px;
    }
}

h3, .h3{
    font-size: 36px;
    line-height: 1.3;
}

p{
    font-size: 24px;
    line-height: 1.3;
    @media screen and (max-width:768px){
        font-size:20px;
    }
}

/* Navigation */
.site-header {
    transition: background-color 0.3s ease;
    background-color: transparent;
    min-height:50px;

    .menu-item > a {
        font-size: 24px;
        color: var(--hero-text);
        position: relative;
        display: inline-block;
        text-decoration: none;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100%;
            height: 2px;
            /* currentColor forces the line to match the 'color' of the 'a' tag */
            background-color: currentColor; 
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 0.3s ease;
            /* Ensure it sits above the background */
            z-index: 1; 
        }

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

    .current-menu-item > a::after,
    .current_page_item > a::after {
        transform: scaleX(1);
    }

    /* Internal & Scrolled States */
    &.site-header--internal,
    &.scrolled {
        background-color: white !important;
        
        .menu-item > a {
            color: #000000 !important;
            
            /* Explicitly ensuring the pseudo-element is visible */
            &::after {
                background-color: #000000; 
            }
        }
    }
}

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    background-color: #111111;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    align-items: center;
    .hero__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.30);
    }
    .hero__content {
        position: relative;
        z-index: 1;
        color: var(--hero-text);
        text-align: center;
        h1 {
            margin: 0;
            font-size: clamp(2rem, 6vw, 4.5rem);
        }
    }
    .hero__logo {
        margin: 0;
        .hero__logo-img,
        img {
            width: min(922px, 90vw);
            max-width: 90%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    }
}

/* About */
.about {
    padding: 5rem 0 0;
    @media screen and (max-width: 576px){
        padding: 3rem 0 0;
    }
}

/* Services */
.services-list{
    .services-list__text{
        font-size: 48px;
        a{
            color: var(--text);
            text-decoration: none;
            cursor: pointer;
        }
        a:hover{
            text-decoration: underline;
        }
    }
}

/* Contact Page */
.contact-form-wrapper {
    label {
        display: block;
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 8px;
        color: #000;
        letter-spacing: -0.01em;
    }

    .wpcf7-text, 
    .wpcf7-textarea {
        width: 100%;
        background-color: #F6F6F6; 
        border: none !important;
        border-radius: 4px;
        padding: 16px 20px;
        font-size: 1rem;
        color: #000;
        margin-bottom: 20px;
        outline: none;
        transition: background-color 0.3s ease;

        &::placeholder {
            color: #C6C6C6; 
            font-weight: 300;
        }

        &:focus {
            background-color: #f0f0f0;
        }
    }

    .wpcf7-textarea {
        height: 180px;
    }

    .wpcf7-submit {
        display: block;
        margin-left: auto;
        background-color: transparent;
        color: #000;
        border: 1px solid #000 !important;
        padding: 12px 45px;
        font-size: 1rem;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 10px;

        &:hover {
            background-color: #000;
            color: #fff;
        }
    }

    .wpcf7-spinner {
        position: absolute;
    }

}

.map-fixed-height {
    position: relative;
    width: 100%;
    height: 626px;
    overflow: hidden;
}
.map-fixed-height iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 626px !important; 
    border: 0;
}

/* footer */
footer{
    a{
        color: var(--text)
    }
}