/* ==========================================================================
   MENU BAR GOODIES
   ========================================================================== */

/* General Navigation Link Styles */
.nav-link {
    padding-bottom: 1px;
    font-family: 'Nexa', sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
}

/* White-Themed Menu */
.navbar-nav[class*="-white"] .nav-item .nav-link.nav-color {
    color: #ffffff; /* Customize as needed */
    
}

/* Black-Themed Menu */
.navbar-nav[class*="-black"] .nav-item .nav-link.nav-color {
    color: #777777; /* Customize as needed */
}

/* Hide Logo Wrapper */
.logo-wrapper {
    display: none !important;
}

/* Hide Scroll Menu Bar */
.nav-scroll {
    display: none !important;
}


/* GETTING RID OF THE WHITE MENU BAR WHEN YOU SCROLL DOWN
   I COULDN'T FIGURE OUT HOW TO DO THIS IN THE THEME SETTINGS */

.bauen-mob-menu-wrapper {
  background-color:transparent !important;
}


/* ==========================================================================
   CUSTOM BUTTON STYLES
   ========================================================================== */

/* Base Button Style */
.custom-btn {
    background-color: #DEE0D5; /* Background */
    color: #506250; /* Text color */
    font-family: 'Nexa', sans-serif;
    font-size: 25px;
    font-weight: 600; /* Semibold */
    padding: 0;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    border-radius: 25px; /* Rounded corners */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.custom-btn .nav-link.nav-color{
  color:#506250 !important;
}

/* Button Hover State */
.custom-btn:hover {
    background-color: #95b895;
    color:black;
}


/* Ensure Link Text Color Changes on Hover */
.custom-btn:hover a {
    color: black !important;
}

.nav-button-wrap {
  display:none!important;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Hide the entire footer and any related containers */
footer, 
.site-footer, 
#footer, 
#colophon, 
.footer-widgets, 
#footer-container, 
#footer-widgets, 
.footer-bottom, 
#footer-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}





/* ==========================================================================
   CONTACT FORM STYLES
   ========================================================================== */

/* Change the appearance of text responses for submitting a contact form */

/* Apply Nexa font to all messages */
.wpcf7-response-output,
.wpcf7-mail-sent-ok,
.wpcf7-validation-errors,
.wpcf7-spam-blocked,
span.wpcf7-not-valid-tip {
    font-family: 'Nexa', sans-serif; /* Use Nexa font */
    font-size: 25px !important; /* Set font size */
    color: #777; /* Text color */
    font-weight: 300; /* Normal weight */
    background: none !important; /* Remove background box */
    border: none !important; /* Remove border */
    padding: 0 !important; /* Remove extra padding */
    text-align: center; /* Keep text centered */
}

/* Remove error tip default styles */
span.wpcf7-not-valid-tip {
    display: block; /* Ensure errors appear correctly */
    margin-top: 5px; /* Add spacing from input field */
}

/* Smooth fade-in effect for messages */
.wpcf7-response-output {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Styles for the submit button on contact forms */
.custom-btn {
    /*background-color: #0C265C; /* Dark blue background */
    color: #ffffff; /* White text color */
    font-family: 'Nexa', sans-serif;
    font-size: 25px;
    font-weight: 600; /* Semibold */
    padding: 0px 12px 0px 12px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    border-radius: 25px; /* Rounded corners */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.custom-btn:hover {
    color: white; /* Text turns white on hover */
    background-color: #DEE0D54;
}


/* MAKE THE INPUT BOXES A LITTLE DARKER */

.custom-input,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  border: 2px solid #7a7a7a; /* Grey outline */
  padding: 0.5em;
  border-radius: 3px;
  transition: border-color 0.3s;
}

.custom-input:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border-color: #7a7a7a; /* Keeps the same grey on focus; change if desired */
  outline: none;
}




/* MAKE THE CHECK BOX ITEMS ALIGN VERTICALLY */

.vertical-list .wpcf7-list-item {
    display: block;
    margin-bottom: 0.5em;
}




/* CHANGING HOW THE CHECKBOXES LOOK */

/* Hide the native checkbox completely */
.vertical-list input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
}

/* Style the label span to create room for the custom checkbox */
.vertical-list .wpcf7-list-item-label {
  position: relative;
  padding-left: 30px;  /* Adjust as needed to provide space for the box */
  cursor: pointer;
  line-height: 18px;   /* Aligns the text vertically with the custom checkbox */
}

/* Create the custom checkbox using the ::before pseudo-element */
.vertical-list .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #7a7a7a;  /* Thicker grey border */
  border-radius: 3px;
  box-sizing: border-box;
  background: transparent;
  transition: all 0.2s ease;
}

/* When the checkbox is checked, show a custom checkmark using ::after */
.vertical-list input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(50% - 2px);
  transform: translateY(-50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #7a7a7a; /* Checkmark color (grey) */
  border-width: 0 2px 2px 0;
}



/* CHANGING THE APPEARANCE OF THE RADIO BUTTONS */

/* Hide the native radio button */
.wpcf7-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
}

/* Reserve space in the label for the custom radio button */
.wpcf7-radio .wpcf7-list-item-label {
  position: relative;
  padding-left: 30px; /* Adjust to create room for the custom radio */
  cursor: pointer;
  line-height: 18px;
}

/* Draw the custom radio outline (unchecked state) */
.wpcf7-radio .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #7a7a7a;  /* Dark grey border */
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  transition: all 0.2s ease;
}

/* For the first radio option (e.g., "Yes") */
/* Show the inner circle only when checked */
.wpcf7-radio .wpcf7-list-item.first input[type="radio"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 15.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #7a7a7a; /* Dark grey fill */
  border-radius: 50%;
}

/* For the second radio option (e.g., "No") */
/* Show the inner circle only when checked */
.wpcf7-radio .wpcf7-list-item.last input[type="radio"]:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 17.5%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #7a7a7a; /* Dark grey fill */
  border-radius: 50%;
}


/* STYLING SPECIFIC TO THE T-SHIRT FIELD TO MAKE IT MATCH THE STYLE OF THE OTHER FIELDS */

/* Style the select dropdown */
.custom-input,
.wpcf7 select {
  border: 2px solid #7a7a7a; /* Grey outline */
  padding: 0.5em;
  border-radius: 3px;
  transition: border-color 0.3s;
  background-color: #fff;
  color: #7a7a7a;
}

.custom-input:focus,
.wpcf7 select:focus {
  border-color: #7a7a7a; /* Keeps the same grey on focus; change if desired */
  outline: none;
}

/* STYLE THE 'YOUR MESSAGE' BOX */

textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.message-box {
  max-height:150px !important;
}