/*
Theme Name: My Blank Theme
Theme URI: http://bath-hause.com
Author: Jamie Gravette
Author URI: http://yourwebsite.com
Description: A completely blank WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-blank-theme
*/

html {
    background-color: #272625;
}

.wrapper {
    max-width: 50%;
    margin: 0 auto; /* Centers the wrapper */
    padding: 20px;
}


body { background-color: #2B2B2B;
    margin: 0;   }


p {font-family: "Poppins", sans-serif;

}

h2 {font-family: "Cormorant Garamond", serif;}

/* FOOTER.PHP STARTS HERE */

footer {
    background-color: #272625;
    height: 200px;
    align-content: center;
    width: 100%;
}

#footer-main {
    display: flex;
    justify-content: space-between; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    padding: 0 20px; /* Optional: add some padding to avoid edge-to-edge content */
    width: 50%;
    justify-self: center;
    height: 100%;
}

#footer-left, #footer-right {
    margin: 0 20px; /* Adds some space between the left and right sections */
    align-self: center;
}

#footer-left {
    display: flex;
    align-items: center; /* Vertically center the logo */
    flex-direction: column;
    gap: 20px;
}

#footer-right {
    display: flex;
    align-items: center; /* Vertically center the text */
}

#footer-logo {
    width: 250px;
    align-items: center;
}

div#footer-social {
    display: flex;
    gap: 10px;
    height: 35px;
}



#peepee {
    justify-self: center;
    color: #ffffff;
    font-size: 12px;
    font-family: 'Poppins';

}


/* HEADER.PHP STARTS HERE */
h1#coming-this-fall {
    padding-top: 10px;
    font-style: italic;
    color: #785531;
    font-family: 'Cormorant Garamond';
    font-weight: 700;
    font-size: 127px;
    margin: 0;
    margin-bottom: -40px;
    /* margin-left: -172px; */
}


#value-prop {text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-style: italic;
    color: #c49a6c;


}

.main-logo {
    height: 250px;
    width: 600px;
    align-content: center;
}

header {
    background-image: url('https://bath-hause.com/wp-content/uploads/2025/03/steamwater-1.png');
    margin: 0;
    position: relative; /* Keeps header as a reference point for absolute positioning */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
   /* height: 500px;  removed fixed height so header can grow with text for now */
    padding-bottom: 30px;
    padding-top: 30px;
    background-position: 50% 50%;
}

#comingsoon-desc-p {
    color: white;
    margin-top: 50px; /* Adds space between the image and the paragraph */
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    max-width: 800px;
}





/* content coming soon homepage (hide all of this once full homepage is designed)*/


.services-section {
  /*  background-color: #272625;*/
    color: white;
  /*  padding: 60px 0; */
    text-align: center;
    padding-bottom: 30px;
}

.service-container {
    width: 100%;
    margin: 0 auto;
}

.section-title {
    /* font-size: 24px; */
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 40px;

}

.section-title .line {
    flex-grow: 1;
    height: 1px;
    background: white;
    margin-left: 20px;
}

.services-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.service-item {
    width: 30%;
    padding-right: 10px;
}

.service-item h3 {
    color: #c49a6c;
    font-weight: 500;
    text-align: left;
    font-family: "Cormorant Garamond", serif;
    font-optical-sizing: auto;

}

.services-text { text-align: left;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    width: 100%; }



    /* contact section */
   


/* Contact Section Wrapper (New Specific Wrapper for Contact Section) */
.contact-section-wrapper {
    position: relative;
    width: 100%;
}

/* Section with Contact Us Title and Brown Box */
.contact-title-section {
    position: relative;
    background-color: #f4f4f4;
    left: 0;
    margin-left: -58px;
}

/* Contact Us Title and Brown Box */
.contact-title-wrapper {
    background-color: rgba(92, 69, 48, 63%);
    padding: 15px 30px;
    position: absolute;
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 100px;
}

.contact-title-wrapper h2 {
    color: white;
    margin: 0;
    font-weight: 500;
    text-align: left;
    font-family: "Cormorant Garamond", serif;
}

h2#contact-us {
    position: absolute;
    width: 200px;
}

/* CONTACT FORM */

.contact-form-section {
    position: relative;
   /*  padding-top: 50px;  */
    display: flex;
    justify-content: flex-end; /* Move form to the right */
}

/* Contact Form Container */
.contact-form-container {
    background-color: #424242;
    padding-left: 10px;
    padding-right: 10px; 
    max-width: 500px;
    width: 350px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    height: 700px;

}

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #c49a6c;
    border: 1px solid #c49a6c;
    box-sizing: border-box;
}

/* Contact Form Heading */
.contact-form-container h2 {
    text-align: center;
    font-size: 2rem;
    color: #4e3b31; 
    margin-bottom: 20px;
    left: -85px;
}
/* WPForms Form Styling */
.wpforms-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align the form fields to the left */
    align-items: flex-start; /* Ensure fields are aligned to the left */
    text-align: left;
    width: 100%; /* Ensure the form takes full width of the parent */
}

.wpforms-field {
    margin-bottom: 20px;
}

.wpforms-field label {
    font-size: 1rem;
    color: #ffffff !important;
    margin-bottom: 8px;
}

.wpforms-form .wpforms-field-name label {
    color: white !important;
}

legend.wpforms-field-label {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: semi-bold;
    color: white !important;
}

label.wpforms-field-sublabel.after { /* Labels below name */
    opacity: 80%;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;

}


.wpforms-container .wpforms-field-label, .wp-core-ui div.wpforms-container .wpforms-field-label {
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 300 !important;
    font-style: normal;
    word-break: break-word;
    word-wrap: break-word;
}

input#wpforms-39-field_5, #wpforms-39-field_5-last, #wpforms-39-field_7, #wpforms-39-field_3, input#wpforms-39-field_2 {
    border-radius: 0px;
    background-color: #f1f1f1;
}

div#wpforms-39-field_2-container {
    width: 100%;
}

div#wpforms-39-field_5-container {
    display: flex
;
    flex-direction: row;
    /* width: 211px; */
}

.wpforms-container .wpforms-form * {
    word-break: break-word;
    box-sizing: border-box;
    width: 100%;
}

.wpforms-field input,
.wpforms-field textarea {
    width: 100%; /* input fields take full width of the container */
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus {
    border-color: #4e3b31; /* Focus border color to match title */
    outline: none;
}

/* Submit Button Styling */
button#wpforms-submit-39 {
    color: white;
    font-family: 'Poppins';
    background-color: #777b6a;
    width: 35%;
    float: right;
    border-radius: 0px;
}


.wpforms-submit {
    background-color: #4e3b31;
    color: white;
    padding: 15px 0;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.wpforms-submit:hover {
    background-color: #3b2b21; /* Darker on hover */
}

/* Map Background Section (Full Width Outside Wrapper) */
.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100%; /* changed this to a percentage so it can work on all monitor sizes, used to be 60vh */
    background-image: url('https://bath-hause.com/wp-content/uploads/2025/03/de6bc7f44438b7126e03dc0c150266bb-1.png'); /* Replace with your map image URL */
    background-size: cover;
    background-position: bottom;
    z-index: 1; /* Behind the content */
    margin-left: calc(-50vw + 50%); /* Ensure map stretches beyond the wrapper */
    /* Optional: Adjust height if necessary */
    /* height: 80vh;  Can adjust this to match your desired vertical height */
}

/*info below contact form */ 

#contact-bottom-section {
    height: 300px;
    background-color: #2B2B2B;
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;
  
    display: flex;
    justify-content: center; /* center the inner wrapper */
    align-items: center;
  }
  
  .contact-inner-wrapper {
    display: flex;
    justify-content: left;
    width: 39%;
    max-width: 1200px; /* adjust to match your site's content width */
    padding: 0;
    box-sizing: border-box;
  }
  
  #contact-left-info, #contact-right-info {
    line-height: 38px;
    font-family: "Poppins";
    color: white;
    width: 30%;
    font-size: 15px;
}

  
  @media (max-width: 2200px) {
    .contact-inner-wrapper {
      flex-direction: column;
      align-items: center;
      text-align: left;
    }
  
    #contact-left-info,
    #contact-right-info {
      width: 100%;
      margin-bottom: 1rem;
    }
  }

  @media only screen and (max-width: 768px) {
    .main-logo {
        width: 90%;
        height: auto;
    }

    header {
        padding: 20px 10px;
    }

    #comingsoon-desc-p {
        font-size: 14px;
        margin-top: 30px;
        padding: 0 15px;
        max-width: 100%;
        text-align: left;
    }

    #value-prop {
        padding: 0 15px;
    }

    .wrapper {
        max-width: 100%;
        margin: 0 auto; /* Centers the wrapper */
        padding: 20px;
    }

   
    .services-grid {
        flex-direction: column;
        gap: 20px;
        align-items: center;
      }
    
      .service-item {
        width: 90%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    
      .service-item h3 {
        text-align: center;
      }
    
      .services-text {
        width: 100%;
        max-width: 300px;
        text-align: center;
        font-size: 14px;
        padding: 0 10px;
        margin: 0 auto;
      }
    
      .section-title {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    
      
      }
      
      @media screen and (max-width: 600px) {

        html {width: 100%;
        }

        .wrapper {
          max-width: 95%;
          padding: 10px;
        }
      
        body {
          overflow-x: hidden;
        }
      
        h2 {font-size: 24px;
        }

        /* HEADER */
        .main-logo {
          width: 90%;
          max-width: 400px;
          height: auto;
        }
      
        #comingsoon-desc-p {
          font-size: 13px;
          max-width: 100%;
          text-align: left;
        }
      
        #value-prop {
          
        }
      
        h1#coming-this-fall {
            font-style: italic;
            font-family: 'Cormorant Garamond';
            font-weight: 700;
            font-size: 85px;
            margin: 0;
            margin-bottom: -40px;
            padding-top: 50px;
        }
        
        /* SERVICES */
        main#primary {
            padding: 10px;
        }
        .section-title {
            align-items: center;
            text-align: center;
            flex-direction: row;
          }

         .line {
            height: 0.5px;
            width: 50%;
 
        }
    
        .service-container {width: 95%;
        }

        .services-grid {
          flex-direction: column;
          gap: 25px;
          align-items: center;
        }
      
        .service-item {
          width: 100%;
          text-align: center;
        }
      
        .services-text {
          width: 100%;
          font-size: 12px;
          text-align: left;
        }
      
        .service-item h3 {
          text-align: center;
        }
      
        /* FOOTER */
        #footer-main {
          flex-direction: column;
          width: 100%;
          padding: 20px 10px;
          gap: 20px;
        }
      
        #footer-left,
        #footer-right {
          margin: 0;
          align-items: center;
          text-align: center;
        }
      
        #footer-logo {
          width: 180px;
        }
      
        #footer-social {
          justify-content: center;
          height: auto;
        }
      
        #peepee {
          text-align: center;
          font-size: 10px;
          padding: 10px 0;
        }

        .contact-section-wrapper {
         
        }
    }


/* Mobile (480px) Adjustments */
@media (max-width: 600px) {

    /* Contact Section Wrapper */
    .contact-section-wrapper {
        width: 100%;
        padding: 0;
    }

    /* Section with Contact Us Title and Brown Box */
    .contact-title-section {
        left: 0;
        width: 100%;
        background-color: transparent;
    }

    /* Contact Us Title and Brown Box */
    .contact-title-wrapper {
        background-color: rgba(92, 69, 48, 63%);
        padding: 15px;
        position: relative;
        left: 0;
        width: 40%;
        height: 30px;
        text-align: center;
        z-index: 2;
    }

    .contact-title-wrapper h2 {
        color: white;
        margin: 0;
        font-weight: 500;
        text-align: center;
        font-family: "Cormorant Garamond", serif;
    }

    /* Contact Form Section */
    .contact-form-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    /* Contact Form Container */
    .contact-form-container {
        background-color: #424242;
        padding: 10px;
        width: 100%; /* Full width for smaller screens */
        max-width: 100%;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 2;
    }

    /* Contact Form Heading */
    .contact-form-container h2 {
        text-align: center;
        font-size: 1.5rem;
        color: #4e3b31;
        margin-bottom: 10px;
    }

    /* WPForms Form Styling */
    .wpforms-form {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    /* Input Fields */
    .wpforms-field input,
    .wpforms-field textarea {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
    }

    /* Submit Button */
    button#wpforms-submit-39 {
        width: 100%;
        margin-top: 10px;
        border-radius: 0px;
    }

    .wpforms-submit {
        background-color: #4e3b31;
        color: white;
        padding: 15px 0;
        font-size: 1.2rem;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        margin-top: 20px;
        transition: background-color 0.3s ease;
    }

    .wpforms-submit:hover {
        background-color: #3b2b21;
    }

    
    .map-background {
        position: relative; /* Changed to relative to avoid it covering other elements */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://bath-hause.com/wp-content/uploads/2025/03/de6bc7f44438b7126e03dc0c150266bb-1.png');
        background-size: cover;
        background-position: bottom;
        z-index: 1;
        margin-left: 0;
    }

    /* Info Below Contact Form (Now Below Contact Form) */
    #contact-bottom-section {
        height: 300px;
        background-color: #2B2B2B;
        width: 100%;
        position: relative; /* Ensure it stays in flow */
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px; /* Add space to push it below */
    }

    .contact-inner-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    #contact-left-info, #contact-right-info {
        line-height: 38px;
        font-family: "Poppins";
        color: white;
        width: 45%; /* Adjust for mobile */
        font-size: 15px;
        margin: 0 10px;
    }
}