/*
Theme Name: Blue Cactus
Theme URI: 
Author: Wayne Goodman
Author URI: 
Description: A custom block theme for the Blue Cactus Mexican Restaurant in Ocean City, NJ
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 001
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluecactustheme
Tags: 
*/

* { box-sizing: border-box; }

img {max-width:100%; height:auto; }
.wp-site-blocks { display: flex !important; flex-direction: column; min-height: 100vh !important; width:100%; max-width: 2024px; margin:auto; }

:root :where(h2) { font-weight:500; }

header.wp-block-template-part {background:#f0eee9; z-index:5}

main {flex: 1 0 auto; margin-block-start: 0; z-index: 0; }

/* to hide the 7th review if needed */
/* main .ti-review-item:nth-child(7) { display: none !important; } */

.wp-block-navigation-item__content {
    padding: 0.3rem .5rem; font-size:1.3rem;font-size: clamp(1rem, 2vw, 1.3rem);  text-transform:uppercase;
}

.is-style-eyebrow {letter-spacing: 1.6em;  margin: 58px auto 11px !important; text-transform:uppercase; color:var(--wp--preset--color--custom-blue-cactus-blue) !important; font-weight:500}
.is-style-subheadline { letter-spacing: .05em;margin: -18px auto 38px; text-transform:uppercase; color:var(--wp--preset--color--custom-blue-cactus-blue) !important; font-weight:500; font-size:1.2rem; text-wrap:balance;}
.is-style-shortparagraph {max-width:800px; margin-left:auto; margin-right:auto;  }

.wp-block-column.leftFooter, .wp-block-column.leftFooter p, .wp-block-column.leftFooter a {color:#fff !important; font-weight:400; text-decoration:none}
.wp-block-column.leftFooter {text-align:center }
.wp-block-column.leftFooter h2 {color:#fff !important; padding-top:22px}

.rightFooter h2 { font-size: clamp(1.3rem, 1.4rem + 1.5vw, 1.9rem); text-transform:uppercase; margin:0 auto -16px; padding-top:8px;  }
.rightFooter > div {margin:0 auto; }

.footerFull {display: flow-root; border-top:6px solid #789183; padding:1.4rem 0; /*margin-left: -12px;*/ }

.footerInner {
    max-width: 1380px;
    margin: 0 auto;
    width: 100%;
}

.headerInner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}


.footerColumns {
    width: 100%;
}



.leftFooter h2 { text-transform:uppercase;  /*font-family: var(--wp--preset--font-family--montserrat);*/  font-size:1.6rem; font-size: clamp(1.5rem, 1.75rem + 1.5vw, 2.1rem); margin:0 0 8px}

.leftFooter p {margin:0 0 4px; padding:0; line-height:1.4}
.hoursContainer {display: flex;  align-items: center; min-height:100px;
  justify-content: flex-start; flex-direction:column; height:100%; }

.rightFooter { margin-bottom:.5rem !important; border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20); padding-right:0; padding:left:0  }


.leftFooter {text-align:center; margin-bottom:1rem !important}
.footerColumns {flex-direction:column-reverse !important}

.hoursContainer p {line-height: 1.2; margin-bottom: 1rem;}

.rightColNav a {text-decoration:none; }
p.footerAddress {padding-bottom:1rem; font-weight:500}
@media (max-width:781px){
.leftFooter p {margin:11px auto !important;}
.phoneLink a, .emailLink a{padding:8px; background:#444; color:#fff; max-width:282px; margin:6px auto !important; display:block; border-radius: 10px; }
.leftFooter a:hover { background:#666;}
.hoursContainer {max-width:92%; margin-left:auto; margin-right:auto;}
}

@media (min-width:782px){
	.leftFooter {text-align:left; padding-top:1.5rem !important}
	.footerColumns {flex-direction:row !important}
	.rightFooter {padding-left:4%; padding-right:4% !important;}


	}

:root :where(.wp-block-button .wp-block-button__link):hover {background:#51759d; }
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)  {padding:0}

.wp-block-navigation__responsive-container a {padding:6px 11px !important}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {color:#51759d}

@media (min-width: 960px) {
.wp-block-navigation__responsive-container a {padding:6px .25vw !important}
}



/* .wp-block-button a {border-radius:99px;    padding: 1rem 1.1rem !important; font-weight:600 } */

/* Container to help with header alignment */
.header-button-container {
    display: flex;
    align-items: center;
}

/* The Manual Button Style */
.custom-header-btn {
    background-color: var(--wp--preset--color--custom-blue-cactus-tan) !important;
    color: #ffffff !important;
    padding: 0.8rem 1.4rem !important;
    border-radius: 50px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
	text-align: center;
}

/* Hover State */
.custom-header-btn:hover {
    background-color: #515f93 !important;
    transform: translateY(-1px);
}

/* Active/Click State */
.custom-header-btn:active {
    transform: translateY(0);
}
.rightColNav nav {     margin-block-start: 1.3%; !important}

.rightColNav {padding-top:1rem}

:root :where(.wp-block-button .wp-block-button__link):hover {background:#51759d; }
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)  {padding:0}



@media (max-width: 820px) {
	.wp-block-image img {/ *margin-left:-8px */}
	.secondaryHero {padding-top:32px}
	.secondaryHero img {aspect-ratio: 2/.75; height: auto !important; object-fit: cover;}
	.mobile-hide2 {display:none !important}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
	
	    .header-button-container {
        align-items: center;

    }
	.rightColNav {display:flex; flex-direction:row; justify-content: flex-end; gap:8%}
}

/* The hamburger/menu toggle button */
.wp-block-navigation__responsive-container-open {
  width: 50px;             /* Make wider */
  background-color: #51759d;  /* Background color */
  padding: 10px;
  border-radius: 5px;
}

/* The icon (SVG) inside the button */
.wp-block-navigation__responsive-container-open svg {
  fill: #fff;              /* Icon color */
  width: 30px;
  height: 30px;
}


/* Mobile nav overlay background */
.wp-block-navigation__responsive-container {
    background-color: #e8e5dd !important;
    backdrop-filter: blur(8px);
    padding: 3rem 2rem;

}

/* Make it full viewport height */
.wp-block-navigation__responsive-container.is-menu-open {
    height: 100vh;
}

/* transition for mobile menu */

.is-menu-open .wp-block-navigation-item {
    opacity: 0;
    animation: fadeInItem 0.4s ease forwards;
}

/* Staggering the items (up to 5 items) */

.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.2s; }
.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.25s; }
.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.3s; }
.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.35s; }
.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.4s; }

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateY(29px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.socialMedia {position:relative; margin-bottom:8px; }
.instagramType {font-size:.8rem; margin-left:8px}
.socialCircle {fill:#948478}
.socialMedia a:hover .socialCircle{fill:#000;  } 
.socialMedia a:hover .instagramType {text-decoration:underline}
.socialMedia svg {max-width:45px; height:auto; margin:0 3px}	   
.hidden {clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;}

@media (min-width:782px) {
	.leftFooter .socialMedia a {display:flex; flex-direction:row; align-content:center; justify-content:center}
	.instagramType {padding-top:1rem; }
}


.leftFooter span.hidden {color:#fff !important; }


.wp-block-navigation__responsive-container a {font-weight:400; }


.dark-tan-section {}

/* over-rides  */

.main {min-height:640px}
:root :where(.is-layout-constrained) > h1 {
  margin-block-start: 0;
}

 
/* contact form  */

.contactSubmit { text-align:center;  margin:8px auto; }

.submitStyle input[type="submit"]{  text-align:center; position:relative; display:block; background-color: var(--wp--preset--color--custom-blue-cactus-tan); color:#fff; padding:8px; font-size:1.3em; border:none;}
.wpcf7-spinner {position:absolute; right:0; font-weight:bold}

.wpcf7-form input[type=text], .wpcf7-form input[type=email], input[type="tel"] {min-height:36px}


.interests { margin:14px auto 18px auto}

.wpcf7-form input[type=text], .wpcf7-form input[type=email], input[type="tel"]  {  height:28px; border:1px solid var(--wp--preset--color--custom-burnt-orange)}
textarea.full-width-textarea {border:1px solid #ecae22;  margin:22px auto 0; width:100%; padding:2%}
.comments {width:100%; margin:0 auto;  }

.wpcf7-form input[type=text], .wpcf7-form input[type=email], input[type="tel"], .wpcf7-form-control-wrap textarea {font-size:.95em; padding:2%; }

.formContainer h2 {margin: 22px auto 0 auto; }
.formContainer h3 {color:#666; font-weight:500; font-size:1.1em; margin:22px 0 0 11px !important; text-align:left !important; font-family:'Open-Sans', sans-serif; width:100% }
.formContainer {font-size:.95em}
	.formContainer {border:var(--wp--preset--color--custom-burnt-orange) 1px solid; background:#f0eee9; padding:4% 6% }
.formContainer label {font-size:.9em;}

.wpcf7-form input[type=text], .wpcf7-form input[type=email], input[type="tel"], .wpcf7-form-control-wrap textarea {border:var(--wp--preset--color--custom-burnt-orange) 1px solid;}
.formContainer p {margin:0 0 4px 0; font-size:.95em; text-align:center !important }

input.wpcf7-form-control.wpcf7-text.poolsize {max-width:260px; padding:2%; height:30px; font-size:.95em;}
	
		.formContainer > div input {width:94%;}
.formContainer textarea  {width:96%}
        .formContainer > div.inlineStyle input,  .formContainer > div.inlineStyle label { padding: 6px 0 0; display:inline-block !important; width:auto !important} 
		.formContainer h2 {width:100%; display:block; text-align:center;}
.flex-half, .flex-full {margin-bottom:14px  }
	
.checkboxradio input[type=checkbox], .checkboxradio input[type=radio]  { transform: scale(1.5);}

		@media (min-width:800px) {
			.flex-half, .flex-full {margin-bottom:3px  }
				.formContainer > div input {width:96%; }
				.formContainer {display: flex;  align-items: center; flex-wrap:wrap; max-width:720px; margin:33px auto;
  justify-content: center; flex-direction:row; gap: 16px 3%;  }
		
		.flex-half {width:47.5%; height:auto;   }
		.flex-full {width:98%; height:auto;  }
}

/* changes to homepage hero */
		.scroll-down-btn {background:none !important; position:absolute; z-index:1; bottom:66px; right:8%; width:54px; height:54px; opacity:.4; border:none !important}
		.scroll-down-btn:hover {opacity:.6}
		
		.heroContainer {position:relative; margin-top:149px; aspect-ratio:inherit }
		.heroContainer {/*height:calc(100vh - 300px);*/ height:calc(100vh - 140px)}
		.swiper-slide img {object-fit:cover; height:calc(100vh - 140px); aspect-ratio:inherit}



.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {margin:auto; text-align:center}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size:1.8rem; padding:1.2rem 1rem !important}

.balance {text-wrap: balance}

.buttons2 .wp-block-button {min-width:188px; padding-bottom:11px; }

.headerPhone a svg, .phoneLink a svg {fill:#515f93; width:1.3em; height:1.3em; margin-bottom:-4px}
.phoneLink.directionsIcon svg { width:1.6em; height:1.6em; margin-right:-3px}
.phoneLink.mailIcon svg {padding-right:6px}
p.phoneLink a {font-weight:600 !important;  line-height:2; text-transform:uppercase}
.phoneLink a svg {fill:#fff;}
.desktop-hide2 {height:22px; text-align:center; margin:0;  background:#515f93; display:block}
.desktop-hide2 a {text-decoration:none; color:#fff; background:#515f93; display:block; padding:8px}
.desktop-hide2 a svg {fill:#fff;}
.footerAddress svg {margin-bottom:-11px}
				
  @media (min-width: 819px) {
	.desktop-hide2 {display:none}
		}
.formDisclaimer {font-size:.8em; text-align:center; display:block; width:100%}