/*
Theme Name: Halo Design
Theme URI: https://haloassociates.co.uk/
Author: Halo Design
Author URI: https://haloassociates.co.uk/
Description: With its clean, minimal design and powerful feature set, Halo Design enables agencies to build stylish and sophisticated WordPress websites. Halo Design is a masterpiece of design and functionality. It features a range of valuable patterns, including hero and portfolio sections, prominent call-to-action buttons, and customer testimonials. Whether you're building a website for your business, personal brand, or creative project, Halo Design is perfect for anyone looking to launch quickly and efficiently.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3.0
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: halodesign
*/


/* Defaults
---------------------------------------- */

@view-transition {
	navigation: auto;
}

:root {
	--gf-ctrl-btn-radius: var(--wp--custom--border--radius, 100px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}


a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration: none;
}

a.wp-block-button__link {
	text-decoration: none;
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	padding: 0 8px;
    line-height: 1;
    justify-content: center;
    align-items: center;
}

p {
	line-height: 1.5;
}

/* leading edge compensation for paragraph flow */

:root :where(.is-layout-flow) > p,
:root :where(.is-layout-constrained) > p {
	margin-block-start: var(--wp--custom--spacing--paragraph-flow-gap , 22px );
}

/* -- Forms -- */

input,
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--body);
	padding: 10px 20px;
	width: 100%;
}

input:focus,
textarea:focus {
	background-color: var(--wp--preset--color--neutral);
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

/* .gform_body input[type="button"],
.gform_body input[type="email"],
.gform_body input[type="search"],
.gform_body input[type="submit"],
.gform_body input[type="text"],
.gform_body textarea {
	color: var(--wp--preset--color--light-grey) !i;
} */

::placeholder {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
	color: var(--wp--preset--color--light-grey);
}

.gfield_required .gfield_required.gfield_required_asterisk {
	color: #B4B4B4;
}

.gform-footer .gform_button.button {
	font-weight: 800 !important;
	font-size: 1rem;
	border-radius: var(--wp--custom--border--radius, 100px) !important;

	&:hover {
		background-color: var(--wp--preset--color--secondary) !important;
	}
}

.gfield_label {
	font-weight: 800 !important;
}

.gform_required_legend {
	display: none;
}

.gform-theme--foundation .gform_fields {
	row-gap: 24px !important;
}

/* Blocks
---------------------------------------- */

/* -- Navigation -- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 1px solid currentColor;
	padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--base);
}

/* -- Navigation Submenu -- */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast);
	border: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 2px 10px;
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {

	/* -- Utility -- */

	.is-style-hidden-mobile {
		display: none !important;
	}

}

@media only screen and (max-width: 782px) {

	/* -- Columns -- */

	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

	.woocommerce-breadcrumb,
	.yoast-breadcrumbs > span{ 
		row-gap: 4px !important;
	}

}

.woocommerce-breadcrumb,
.yoast-breadcrumbs > span{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: 13px;
}



.woocommerce-breadcrumb::before {
	display: none !important;
}

/* Single case study: hide last breadcrumb item and the separator (svg) before it */
body.single-case-studies .yoast-breadcrumbs span.breadcrumb_last,
body.single-case-studies .yoast-breadcrumbs svg:has(+ span.breadcrumb_last) {
	display: none !important;
}

.wp-block-search__input {
	min-height: 40px;
	padding: 0 12px;
	font-size: 13px;
	border-color: #B4B4B4;
	@media (max-width: 781px) {
		width: 100%;
	}
	@media (min-width: 782px) {	
		width: 400px;	
	}
}
  
.wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	padding: 0;
	margin: 0;
}

.wp-block-search__button svg {
	fill: var(--wp--preset--color--base);
}

/* block style variations */

/* WooCommerce */

.woocommerce div.product form.cart div.quantity {
	display:none !important;
}

/* Remove borders from WooCommerce product filter fieldsets */
.wc-block-product-filter-checkbox-list fieldset,
.wp-block-woocommerce-product-filter-taxonomy fieldset,
.wp-block-woocommerce-product-filter-attribute fieldset,
.wc-block-product-filters fieldset {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wc-block-product-filter-checkbox-list__input-wrapper {
	width: 22px;
}

.wp-block-group--relative {
	position: relative;
}


/* align rows in the product items in the collection product block */

.wc-block-product-template__responsive {
	display: grid;
	row-gap: 4rem;
}

.wc-block-product-template__responsive .wc-block-product {
	display: grid;
	grid-template-rows: subgrid;
	grid-column: span 1;
	grid-auto-rows: min-content;
	grid-row: span 4;
	gap: 24px;
}



/* pagination buttons styles */
a.is-style-pagination-button,
.ais-Pagination-item--nextPage,
.ais-Pagination-item--previousPage,
.ais-Pagination-item--firstPage,
.ais-Pagination-item--lastPage {
    display: inline-flex;
    align-items: center;
	height: 40px;
	width: 40px;    	
    text-decoration: none;
	justify-content: center;
	color: var(--wp--preset--color--base);
	.is-arrow-arrow {
		margin: 0;
	}
}

.ais-Pagination-item--nextPage,
.ais-Pagination-item--previousPage,
.ais-Pagination-item--firstPage,
.ais-Pagination-item--lastPage {
	background-color: var(--wp--preset--color--contrast) !important;
}

.ais-Pagination-item--nextPage a,
.ais-Pagination-item--previousPage a,
.ais-Pagination-item--firstPage a,
.ais-Pagination-item--lastPage a{
	color: var(--wp--preset--color--base) !important;
 }

.ais-Pagination-list {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Sticky menu: .is-position-sticky group slides in on scroll up
   Desktop only - targets the group block directly, no hiding of other blocks
---------------------------------------- */

@media (min-width: 782px) {

	/* Hide menu before position change - prevents flash */
	.site-header .wp-block-group.is-position-sticky.is-sticky-hiding {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* Pseudo-element reserves space when sticky group goes fixed - prevents layout shift */
	.site-header.is-sticky-group-fixed::after {
		content: "";
		display: block;
		height: var(--sticky-group-height, 0);
	}

	/* Sticky group: fixed + off-screen, slides in on scroll up */
	.site-header .wp-block-group.is-position-sticky.is-sticky-scroll-up {
		position: fixed;
		top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
		left: 0;
		right: 0;
		z-index: 100;
		transform: translateY(-100%);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.35s ease-out, opacity 0.25s ease-out;
	}

	.site-header .wp-block-group.is-position-sticky.is-sticky-scroll-up.is-sticky-visible {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

}

/* Print
---------------------------------------- */

@media print {

	/* -- Utility -- */

	.is-style-hidden-print {
		display: none !important;
	}

	.site-header {
		display: none !important;
	}

	.site-footer {
		display: none !important;
	}

}

/* site-footer  *.
/* shame! currenly best way to get this styling applied but doesn't fit into FSE */

footer  #gform_1 {
	position: relative;
}

footer  #gform_1 .gform_footer {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 0;
}

footer  #gform_1 .gform_footer .gform_ajax_spinner,
footer  #gform_1 .gform_footer .gform-loader {
    position: absolute;
    z-index: 100;
	left: -30px;
}

footer  #gform_1 .gform_footer .gform_button {
	border-radius: 0 !important;
	width: 40px;
	height: 40px;
	font-size: 24px;
	padding: 0;
}

footer  .gform_wrapper {
	margin-block-start: 16px !important;
}

footer .gform-theme--foundation .gform_fields {
	row-gap: 14px !important;
}

/* misc */

@media (max-width: 781px) {
	:root :where(.wp-block-group.is-layout-flex, .wp-block-buttons.is-layout-flex, .wp-block-navigation__container.is-layout-flex) {
	  row-gap: 24px;
	}
}

.single {
	a:not(.wp-block-button__link):not(.main-menu a):not(.main-menu *) {
		text-decoration: underline;
	}
}

.single .yoast-breadcrumbs a,
.single .woocommerce-breadcrumb span a {
	text-decoration: none !important;
}


.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	z-index: 9;
}



/* product page filters */

.wp-block-woocommerce-product-filter-taxonomy > .wp-block-columns,
.wp-block-woocommerce-product-filter-attribute > .wp-block-columns {
	cursor: pointer;
}

/* hide panel when collapsed */
.wp-block-woocommerce-product-filter-taxonomy.is-collapsed
  > .wp-block-woocommerce-product-filter-checkbox-list,
.wp-block-woocommerce-product-filter-attribute.is-collapsed
  > .wp-block-woocommerce-product-filter-checkbox-list {
  display: none;
}

/* animate your existing caret svg */
.wp-block-woocommerce-product-filter-taxonomy .wp-block-halo-svg-icon svg,
.wp-block-woocommerce-product-filter-attribute .wp-block-halo-svg-icon svg {
  transition: transform 150ms ease;
  transform-origin: 50% 50%;
}

/* if your svg points UP by default, rotate when collapsed */
.wp-block-woocommerce-product-filter-taxonomy.is-collapsed .wp-block-halo-svg-icon svg,
.wp-block-woocommerce-product-filter-attribute.is-collapsed .wp-block-halo-svg-icon svg {
  transform: rotate(180deg);
}


/* woocommerce sortby dropdown */

/* Target the WooCommerce sort dropdown */
.wp-block-woocommerce-product-sort select,
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 2.5rem; /* room for arrow */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
}