/*
Theme Name: my-twenty-twenty-four
Theme URI: 
Author: Markus Petroff
Author URI: 
Description: My adaption of twenty-twenty-four
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: my-twenty-twenty-four
Tags: 
*/

html {
    scroll-behavior: smooth;

}

/* Sticky Header */

#site-header {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 -8px 27px rgba(0,0,0,0.8);
    z-index: 1000;
    transition: top 0.5s ease, opacity 0.7s ease;

}




/*media break point */
/* Set your custom breakpoint, e.g., 820px */
@media (max-width: 1350px) {
    /* Ensure the body or container has no unintended margins or paddings */
    body, .container {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    /* Hide the regular navigation */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }

    /* Show the burger menu icon */
    .wp-block-navigation__responsive-container-open {
        display: block !important;
        position: relative; /* Ensure it stays in place */
        left: 0; /* Aligns it to the left */
    }

    /* Optional: Add padding or margin adjustments if needed */
    .wp-block-navigation__responsive-container {
        padding-left: 0; /* Remove any extra padding causing the shift */
        padding-right: 0;
    }
}

/* Ensure the regular navigation is shown and the burger menu is hidden above the breakpoint */
@media (min-width: 1351px) {
    /* Show the regular navigation */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: flex; /* or block depending on your theme layout */
    }

    /* Hide the burger menu icon */
    .wp-block-navigation__responsive-container-open {
        display: none;
    }
}


/*----------------------------------------------
/* Style css for contact form 7 - contact us */

/* General Form Container Styling */
.wpcf7 form {
    background-color: #333333; /* Dark grey background */
    color: #ededed; /* Light grey text */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #444444; /* Slightly lighter grey for borders */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Input Fields Styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    background-color: #444444; /* Slightly lighter grey input background */
    color: #ededed; /* Light grey text color */
    border: 1px solid #555555; /* Border color matching the theme */
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 textarea::placeholder {
    color: #b0b0b0; /* Lighter grey for placeholders */
}

/* Input Focus State */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
    background-color: #555555; /* Darker grey on focus */
    border-color: #666666; /* Slightly darker border on focus */
    outline: none; /* Remove default outline */
}

/* Submit Button Styling */
.wpcf7 input[type="submit"] {
    background-color: #545454; /* Button color matching the website theme */
    color: #ededed; /* Button text color */
    border: none;
    padding: 12px 20px;
    border-radius: 25px; /* Rounded button */
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #6b6b6b; /* Lighter grey on hover */
    color: #ffffff; /* White text on hover */
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3); /* Subtle glow effect */
}

/* General Message Styling */
.wpcf7 .wpcf7-response-output {
    background-color: #444444;  /* Match form styling */
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    border: 1px solid;          /* Base border, overridden below */
}

/* Error Messages */
.wpcf7 .wpcf7-not-valid,
.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
    color: #ff4d4d;             /* Red for errors */
    border-color: #ff4d4d;
}

/* Success Messages */
.wpcf7 .wpcf7-mail-sent-ok {
    color: #4dff88;             /* Green for success */
    border-color: #4dff88;
}

.wpcf7 textarea {
    height: 100px; /* Adjust as needed */
    padding: 10px;
    box-sizing: border-box;
}