/**
Theme Name: Cookehouse
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.06
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* GENERAL LAYOUT */
.no-margin {
	margin-bottom: 0 !important;
}
body.page-id-6 .ast-above-header-wrap p  {
    color: white
}
@media (max-width: 544px) {
  body.page-id-6 .site .site-content #primary .ast-article-single {
    padding-top: 0 !important
  }
}
/* FILES */
.wp-block-file * + .wp-block-file__button {
  margin-left: 0em;
}

/* MEGA MENU */
.ast-megamenu .ast-mm-custom-content {
  display: flex;
  align-items: flex-start;
}

/* STORE LOCATOR */
#wpsl-stores ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
#wpsl-result-list #wpsl-stores {
    height: auto !important;
}
#wpsl-category {
  clear: unset;
}
#wpsl-search-wrap div label {
  line-height: 42px;
}
#wpsl-result-list,
.wpsl-directions {
	display: none;
}
.wpsl-search {
  margin-bottom: 12px;
  padding: 0px 0px 0 0px;
  background: var(--ast-global-color-4);
}
#wpsl-search-wrap #wpsl-search-btn {
	color: var(--ast-global-color-5);
  background: var(--ast-global-color-0);
	border-radius: 5px;
	border: none;
	font-weight: 600;
}
#wpsl-search-wrap #wpsl-search-btn:hover {
	color: var(--ast-global-color-0);
  background: var(--ast-global-color-1);
}
#wpsl-category label {
  width: auto !important;
}
.wpsl-info-window span {
	display: none;
}


.menu-services-container a.menu-link {
	font-size: 15px !important;
}

.main-header-menu .menu-services-container .menu-link {
  padding: 0.5em 0.5em;
}

/* LINK ANIMATION */
.menu-services-container .menu-link {
  position: relative;
  display: inline-block; 
  padding: 0.5em 0; 
}

.menu-services-container .menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ast-global-color-0); 
  transition: width 0.3s ease;
  transform-origin: left; 
}

.menu-services-container .menu-link:hover::after {
  width: 100%;
}


/* POP UP MENU */
/*
#ast-mobile-popup .ast-mobile-popup-inner {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
@media (min-width: 768px) {
  #ast-mobile-popup .ast-desktop-popup-content {
    flex: 1; 
    display: flex !important; 
    justify-content: center; 
    align-items: center; 
  }
}

@media (max-width: 767px) {
  #ast-mobile-popup .ast-mobile-popup-content {
    flex: 1;                   
    display: flex !important;  
    justify-content: center;   
    align-items: center;       
  }
}

#ast-mobile-popup .main-navigation .ast-nav-menu {
  display: flex !important;
  justify-content: center;
  text-align: center;
}
*/


/* SERVICES QUERY LOOP */
.servicesquery ul li a {
	color: (--ast-global-color-0);
  border: solid 2px var(--ast-global-color-0);
  padding: 0em 0.5em 0em 0.5em;
  border-radius: 15px;
  min-height: 100px;
  background-color: var(--ast-global-color-5);
  display: flex; 
	align-items: center; 
	justify-content: center;
	text-align: center;
}
.servicesquery ul li a:hover {
  border: solid 2px var(--ast-global-color-8);
}



/* MISC */
.glass {
  background-color: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 16px 16px 0px 0px;
}

/* Ensure uniform image sizing in Spectra/UAGB Post Carousel */
.uagb-post__image {
  position: relative;
  width: 100%;
  height: 350px; /* adjust as needed */
  overflow: hidden;
}

.uagb-post__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crops to fill the box */
  transform: translate(-50%, -50%);
}


/* CPT PROJECTS */
.project-categories, .archive .project-sector, .archive .ch-sector-icon {
  font-size: 13px;
  font-weight: 600;
}
.project-categories .project-category {
  /* your link styling */
}
.project-categories .divider {
  margin: 0 0.5em;
  color: #ccc;
}

/* CPT SECTORS */
/* Project Sectors — icon + label inline */
.project-sectors,
.project-categories { /* you already have categories; shared tweaks are fine */ }

.project-sectors .project-sector,
.project-categories .project-category {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ch-sector-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ch-sector-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
}

.ch-project-sectors .ch-sector-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55em; /* increased from 0.35em for more breathing room */
}

/* FA icons will inherit font size; SVGs need sizing explicitly */
.ch-sector-icon--svg {
  width: 1em;
  height: 1em;
}

.project-sectors .divider {
  opacity: .5;
  padding: 0 .35rem;
}



/* Wrapper & Title */
.related-projects-wrap {
  margin-top: 2.5em;
  border-top: 1px solid #ddd;
  padding-top: 2em;
}
.related-projects-title {
  font-size: 1.5em;
  margin-bottom: 1em;
}

/* 3-column grid on medium+ screens, 1 column on small */
.related-projects-grid {
  display: grid;
  gap: 1.5em;
  /* default to one column */
  grid-template-columns: 1fr;
}

/* from 768px up, switch to 3 columns */
@media (min-width: 768px) {
  .related-projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* fallback if grid still gives trouble: flex version */
/*
.related-projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}
.related-projects-item {
  flex: 1 1 calc(33.333% - 1.5em);
}
@media (max-width: 767px) {
  .related-projects-item {
    flex: 1 1 100%;
  }
}
*/


/* 1) Make the link/container a fixed-height “window” */
.related-projects-thumb-link {
  display: block;         /* ensure it contains the img */
  width: 100%;
  height: 220px;          /* whatever uniform height you like */
  overflow: hidden;
}

/* 2) Let the img fill that window but keep its aspect ratio */
.related-projects-thumb-link img.related-projects-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crops/fills to cover the box */
  object-position: center;
  display: block;
}


/* Individual Item */
.related-projects-item {
  background: #fff;
/*  border: 1px solid #eee;*/
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Thumbnail */
.related-projects-thumb-link {
  display: block;
  overflow: hidden;
}
.related-projects-thumb {
  width: 100%;
  height: auto;
  display: block;
}
.related-projects-thumb--placeholder {
  background: #f5f5f5;
  padding-top: 56.25%; /* 16:9 ratio placeholder */
}

/* Title */
.related-projects-item-title {
  font-size: 1.125em;
  margin: 0.75em 1em 1em;
  flex-grow: 1;
}
.related-projects-item-title a {
  text-decoration: none;
  color: #222;
}



/* Read More button */
/*
.related-projects-button {
  display: inline-block;
  margin: 0 1em 1em;
  padding: 0.5em 1em;
  background-color: #0073aa;
  color: #fff !important;
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.9em;
}
.related-projects-button:hover {
  background-color: #005f8d;
}
*/




/*
.topography-animation {
  position: relative;
  overflow: hidden;  optional, to clip anything that spills out 
}
.topography-animation canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
*/


/* 1) Make sure the outer Spectra container keeps its green background and establishes stacking */
/*
.topography-animation {
  position: relative !important;
  z-index: 0 !important;
}
*/

/* 2) Clear the background of the inner Spectra container so your canvas shows through */
/*
.topography-animation > .wp-block-uagb-container.uagb-block-eb3b164b {
  background: transparent !important;
  box-shadow: none    !important;
}
*/

/* 3) Pull the Three.js canvas out of the flow and put it behind everything */
/*
.topography-animation > canvas {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1 !important;
}
*/

/* 4) Center your inner content over the canvas */
/*
.topography-animation .uagb-container-inner-blocks-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
*/

/* 5) Remove default heading margins so it truly centers */
/*
.wp-block-uagb-advanced-heading.uagb-block-bcc38eba .uagb-heading-text {
  margin: 0;
}
*/