/*
Theme Name: Spike Construction
Theme URI: https://kortezthemes.com/spike-construction/
Author: kortezthemes
Author URI: https://kortezthemes.com
Description: Spike Construction is a stunning, professional and flexible Construction, Building & Renovation Theme based on Strong researches into the field of business, Construction and Handyman Business. It is fully responsive, retina ready and easy to customize. Condo has stunning styles and elements to help you make a professional website in no time.
Version: 9999.9.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.6
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: spike-construction
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, education

Spike Construction WordPress Theme, Copyright 2023 kortezthemes
Spike Construction is distributed under the terms of the GNU General Public License v3
*/


/* Added Contact Form 7 Styles - Sam */

.wpcf7 {
    background-color: #f4f4f4; /* Light grey background for the form */
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #e0e0e0; /* Adds a subtle border to define the form edge */
}

.wpcf7-form p {
margin-bottom: 15px;
}

.wpcf7-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}

.wpcf7-form input:not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 10px;
font-size: 16px;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
outline: none;
border-color: #007bff; /* Change to your primary color /
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); / Add a subtle focus effect */
}

.wpcf7-form textarea {
min-height: 100px;
}

/* Two and three column layout */
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 10px;
}

.three-column {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-bottom: 10px;
}

.two-column label,
.two-column input:not([type="checkbox"]):not([type="radio"]),
.two-column select,
.three-column label,
.three-column input:not([type="checkbox"]):not([type="radio"]),
.three-column select {
width: 100%; /* Adjust width for grid items */
margin-bottom: 0; /* Remove default bottom margin for grid items */
}

/* Checkbox and radio button styling */
.wpcf7-form input:is([type="checkbox"], [type="radio"]) {
margin-right: 5px;
}

.wpcf7-form label.wpcf7-list-item {
display: inline-block;
margin-right: 15px;
font-weight: normal;
}

/* Submit button styling */
.wpcf7-form input.wpcf7-submit {
background-color: #007bff; /* Change to your primary color */
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease;
width: auto; /* Adjust width as needed */
}

.wpcf7-form input.wpcf7-submit:hover {
background-color: #0056b3; /* Darker shade for hover effect */
}

/* File upload button styling */
.wpcf7-form input.wpcf7-file {
border: 1px solid #ccc;
padding: 8px;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer;
}

.wpcf7-form input.wpcf7-file:hover {
background-color: #eee;
}

/* Messages (error, success) */
.wpcf7-response-output {
margin-top: 15px;
padding: 10px;
border-radius: 5px;
}

.wpcf7-validation-errors {
border: 2px solid red;
color: red;
background-color: #ffebeb;
}

.wpcf7-mail-sent-ok {
border: 2px solid green;
color: green;
background-color: #e6ffe6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.two-column,
.three-column {
grid-template-columns: 1fr;
}
}
.wpcf7-spinner {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-left: 5px;
border: 2px solid #ccc;
border-top-color: #333;
border-radius: 50%;
animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
to { transform: rotate(360deg); }
}

.wpcf7-list-item {
white-space: nowrap; /* Prevent text wrapping next to the input */
}

.wpcf7-list-item input {
vertical-align: middle; /* Align checkbox/radio with the label text */
margin-right: 5px;
}




/* Reset Default Blocks Gap */
body.editor-styles-wrapper .wp-site-blocks > * {
  	margin-block-start: 0;
}
.wp-site-blocks > * {
  	margin-block-start: 0;
}

/* Support Alignfull */
body {
  	overflow-x: hidden;
}
.entry-content .alignfull {
	margin-left: calc( -50vw + 50%);
	margin-right: calc( -50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

/*Custom Box Shadow [is-style-kb-box-shadow]*/
.wp-block-image.is-style-kb-box-shadow img,
.wp-block-column.is-style-kb-box-shadow,
.wp-block-columns.is-style-kb-box-shadow,
.wp-block-group.is-style-kb-box-shadow {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
}
.wp-block-image.is-style-kb-box-shadow-medium img,
.wp-block-column.is-style-kb-box-shadow-medium,
.wp-block-columns.is-style-kb-box-shadow-medium,
.wp-block-group.is-style-kb-box-shadow-medium {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}
.wp-block-image.is-style-kb-box-shadow-large img,
.wp-block-column.is-style-kb-box-shadow-large,
.wp-block-columns.is-style-kb-box-shadow-large,
.wp-block-group.is-style-kb-box-shadow-large {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
.wp-block-image.is-style-kb-box-shadow-hover img:hover,
.wp-block-column.is-style-kb-box-shadow-hover:hover,
.wp-block-columns.is-style-kb-box-shadow-hover:hover,
.wp-block-group.is-style-kb-box-shadow-hover:hover {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
}

/*Secondary button [is-style-kb-button-secondary]*/
div.is-style-kb-button-secondary .wp-element-button{
  color: var(--wp--preset--color--secondary-accent-text);
  background-color: var(--wp--preset--color--secondary-accent);
  border: 3px solid var(--wp--preset--color--secondary-accent) !important;
}
div.is-style-kb-button-secondary .wp-element-button:hover,
div.is-style-kb-button-secondary .wp-element-button:focus,
div.is-style-kb-button-secondary .wp-element-button:active {
    color: #ffffff;
    background-color: var(--wp--preset--color--hover);
    border-color: var(--wp--preset--color--hover) !important;
}
/*SVG icon color support [kb-duotone-primary] [kb-duotone-secondary]*/
.kb-duotone-primary {
  filter: var(--wp--preset--duotone--primary);
}
.kb-duotone-secondary {
  filter: var(--wp--preset--duotone--secondary);
}
.kb-z-index {
  z-index: 9;
}

/*WooCommerce Compatibility*/
.woocommerce ul.products li.product a img {
  border-radius: 6px;
  height: 350px;
  object-fit: cover;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  margin: 0 2.5% 2.992em 0;
  width: 23.1%;
}
.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
  margin-right: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
  border: 0;
}
.woocommerce #reviews #comments ol.commentlist {
  padding: 0;
  margin-top: 20px !important;
}
.woocommerce-page .input-text {
  padding: 11px 30px;
  border: 1px solid #817e7e;
  border-radius: 6px;
}
.woocommerce-page .wc-block-components-product-name {
    font-size: var(--wp--preset--font-size--small);
    text-decoration: none;
    font-weight: var(--wp--custom--font-weight--semi-bold);
}
.woocommerce .bt-woo-breadcrumb-center .woocommerce-breadcrumb {
  text-align: center;
}
.woocommerce .bt-woo-breadcrumb-left .woocommerce-breadcrumb {
  text-align: left;
}
.woocommerce .bt-woo-breadcrumb-right .woocommerce-breadcrumb {
  text-align: right;
}
/*Single Product Gallary*/
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  overflow: hidden;
  zoom: 1;
  margin-top: 10px;
  padding: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li:nth-child(4n+1),
.woocommerce .flex-control-thumbs li:nth-child(4n+1) {
  clear: left;
}
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce .flex-control-thumbs li {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce .flex-control-thumbs li img {
  cursor: pointer;
  opacity: .5;
  margin: 0;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce .flex-control-thumbs li img.flex-active,
.woocommerce .flex-control-thumbs li img:hover {
  opacity: 1;
}
.woocommerce span.onsale {
  background-color: var(--wp--preset--color--light);
}
/*Single Product Page Price*/
.woocommerce .wp-block-add-to-cart-form form.cart div.quantity {
  display: inline-block;
  float: none;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
/*Single Product Tab*/
.wp-block-woocommerce-product-details ul.wc-tabs {
    border-bottom: none;
}
/* Navigation */
@media screen and (min-width: 600px){
    .wp-block-navigation ul.wp-block-navigation-submenu li {
        border-bottom: 1px solid rgba(0,0,0,.15);
    }
    .wp-block-navigation ul.wp-block-navigation-submenu li:last-child {
        border: none;
    }
}

/* Mobile menu fix */
@media (max-width: 599px) {

  /* This targets the main container of the mobile menu and sets the background to black. */
  .wp-block-navigation__responsive-dialog {
      background-color: #000000;
  }

  /* This targets the navigation links and sets their text color to white. */
  .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
      color: #ffffff;
  }

  /* This targets the label inside the navigation link to ensure the text color is white. */
  .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label {
      color: #ffffff;
  }

  /*
  * 1. Make the mobile menu dialog take up the full screen.
  * We use fixed positioning to stretch it across the entire viewport.
  */
  .wp-block-navigation__responsive-dialog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; /* 100% of the viewport width */
      height: 100vh; /* 100% of the viewport height */
      background-color: #000000;
      display: flex; /* Use flexbox for easy centering */
      justify-content: center;
      align-items: center;
      transition: opacity 0.3s ease; /* Add a smooth fade-in/out transition */
      opacity: 1;
  }

  /*
  * 2. Style the menu items for better readability and touch-friendliness.
  * This centers the text and increases font size and spacing.
  */
  .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
      text-align: center;
  }

  .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
      margin-bottom: 2rem; /* Add space between menu items */
  }

  .wp-block-navigation__responsive-container-content .wp-block-navigation-item__label {
      color: #ffffff;
      font-size: 1.5rem; /* Make the font larger and easier to read */
      font-weight: 600; /* A slightly bolder font */
      text-decoration: none;
  }

  /*
  * 3. Reposition and style the "Close" button for better visibility.
  * This moves it to the top right corner, which is a more conventional placement.
  */
  .wp-block-navigation__responsive-container-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: transparent;
      border: none;
  }

  /*
  * 4. Ensure the close icon (the 'X') is white and easily visible.
  */
  .wp-block-navigation__responsive-container-close svg path {
      fill: #ffffff;
  }
}