/*
Theme Name: Twenty Twenty-Five Child
Theme URI: http://example.com/twentytwentyfive-child/
Description: My custom child theme for Twenty Twenty-Five.
Author: Your Name
Author URI: http://example.com
Template: twentytwentyfive
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: twentytwentyfive-child
*/


/******************* STYLE RESETS *******************/

/*** GLOBEL ***/
html {
    scroll-behavior: smooth;
}

ul {
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none!important;
}



/*** NAVIGATION ***/
.wp-block-navigation li {
    font-size: 1.7rem;
}

.wp-block-navigation-submenu li {
    font-size: 1.1rem;
}

#modal-1-content > ul > li.wp-block-navigation-item.has-child.open-on-click.wp-block-navigation-submenu.has-large-font-size > ul{

}


.wp-block-navigation__submenu-container {
    border: 1px solid #656565;

}


.wp-block-navigation__submenu-container a {

}

.wp-block-navigation__submenu-container a:hover {

}


.wp-block-navigation :focus {
    outline: none;
}


/*** CONTACT FORM ***/
    /* Define a primary color variable for easy changes */
    :root {
        --primary-teal: #007c7c; /* From your website's buttons */
        --text-dark: #FBFAF3;
        --text-light: #FBFAF3;
        --border-light: #646464;
        --bg-light: #222222;
        --bg-white: #343434;
    }
    

    /* 1. Form Container and Layout - Matches section cards */
    .contact-form {
        max-width: 510px; /* Limits the form width on large screens */
        margin: 40px auto; /* Centers the form on the page, adds top/bottom spacing */
        padding: 35px; /* Slightly more padding */
        background-color: var(--bg-white); /* White background like your cards */
        border-radius: 8px; /* Moderately rounded corners */
        border: 1px solid #646464;
        font-family: "Manrope", sans-serif;
    }

    /* 2. Labels and Text */
    .contact-form label {
        display: block; /* Makes each label take up its own line */
        margin-top: 18px; 
        margin-bottom: 8px; 
        font-weight: 600; 
        color: var(--text-dark); 
        font-size: 15px;
        letter-spacing: 0.3px;
    }

    /* 3. Input Fields (Name, Email, Question) */
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%; /* Make inputs span the full width of the container */
        padding: 14px 15px; 
        margin-bottom: 22px; 
        border: 1px solid var(--border-light); /* Light grey border */
        border-radius: 5px; 
        box-sizing: border-box; /* Crucial: padding won't increase total width */
        transition: border-color 0.3s, box-shadow 0.3s; 
        font-size: 16px;
        color: var(--text-dark);
        background-color: var(--bg-light); /* Slight off-white background for inputs */
    }

    /* Placeholder Text Color */
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
        color: #999; 
        opacity: 1; 
    }


    /* Focus State (when the user clicks/tabs into the field) */
    .contact-form input[type="text"]:focus,
    .contact-form input[type="email"]:focus,
    .contact-form textarea:focus {
        border-color: var(--primary-teal); /* Teal border on focus */
        outline: none; 
        box-shadow: 0 0 0 3px rgba(17, 160, 168, 0.2); /* Subtle teal glow */
        background-color: var(--bg-white); /* White background when focused */
    }

    /* 4. Submit Button - Matches your website's buttons */
    .contact-form button[type="submit"] {
        font-family: "Fira Code", monospace;
        display: block; 
        width: 50%; 
        padding: 20px 20px; 
        background-color: var(--primary-teal); 
        color: white; 
        border: none;
        border-radius: 999px; 
        cursor: pointer;
        font-size: 19px; 
        font-weight: 600;
        letter-spacing: 0.8px; 
        text-transform: uppercase; 
        transition: background-color 0.3s, transform 0.1s; 
        margin-top: 30px; 
        margin: auto; /* Centers the form on the page, adds top/bottom spacing */
    }

    /* Button Hover and Active States */
    .contact-form button[type="submit"]:hover {
        background-color: #0d8a90; /* Slightly darker teal on hover */
    }

    .contact-form button[type="submit"]:active {
        transform: translateY(1px); /* Little press effect */
    }

    /* Remove extra line breaks from original HTML if they were included */
    .contact-form br {
        display: none;
    }


/*** EXTRA STYLES ***/
    /* Font Awesome */
    .service-icon {
    padding-bottom: 1rem;
    }


/******************* SMALL SCREENS *******************/
@media (max-width: 780px) {

    /*** MOBILE MENU ***/



        /* Mobile Burger Menu Burger*/
        .wp-block-navigation__responsive-container-close svg,
        .wp-block-navigation__responsive-container-open svg {
            width: 60px;
            height: 60px;
            border: 2px solid black;
            border-radius: 10px;

}






/* 1. Define the Keyframe Animation (Same as before) */
@keyframes grow-on-screen {
    0% {
        /* Start smaller and slightly faded */
        transform: scale(0.1); 
        opacity: 0.1; 
    }
    100% {
        /* Grow larger than original size and fully visible */
        transform: scale(1.1); 
        opacity: 1; 
    }



}




    .mobile-reverse-order {
        flex-direction: column-reverse;
    }