/*
Theme Name: Coastal Arborist Blockbase
Theme URI: https://coastalarborist.ca
Author: Ben Johnstone
Author URI: https://coastalarborist.ca
Description: A child theme of Blockbase for Coastal Arborist.
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: blockbase
Text Domain: coastalarborist-blockbase
Tags: full-site-editing, block-patterns, wide-blocks
*/

/* Blockbase's assets/ponyfill.css sets a blanket `.wp-block-image { text-align: center }`
   that centers every image block regardless of its own alignment setting, and it happens
   to be enqueued after this stylesheet, so it wins on load order too. Out-specify it
   (rather than relying on cascade order or !important) with a body-prefixed selector;
   explicit .aligncenter/.alignright images still work via core's more specific selectors. */
body .wp-block-image {
	text-align: left;
}

/* Fixed header: stays pinned to the viewport top on scroll. Its translucent background
   also means this now naturally overlays whatever sits directly below it (the homepage
   hero photo), matching the Figma design. Pages without a hero directly under the header
   will need top padding added to their first section to clear the header's height. */
/* Blockbase's ponyfill.css also adds its own legacy `padding-left/right` to .wp-site-blocks
   as a pre-`useRootPaddingAwareAlignments` polyfill (see its comment referencing Gutenberg
   issues #35607/#35884). Our theme.json already has useRootPaddingAwareAlignments enabled,
   so this is redundant and just adds unwanted inset on top of core's own handling. Zero it
   out; full-width sections should span edge to edge, with each section handling its own
   internal spacing (as our header/footer/hero already do). */
body .wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
}

/* The other half of that same ponyfill polyfill pair: alignfull children get an equal and
   opposite `margin-left/right: calc(-1 * var(--wp--custom--gap--horizontal)) !important` to
   bleed edge-to-edge against the padding above. Since that padding is now zeroed, this
   negative margin has nothing left to cancel out and instead eats into any padding an
   alignfull block sets on itself. Neutralize it too (needs !important + higher specificity
   to beat ponyfill's own !important, since it loads after this stylesheet). */
body .wp-site-blocks .alignfull,
body .wp-site-blocks > .wp-block-group.has-background,
body .wp-site-blocks > .wp-block-cover,
body .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
body .wp-site-blocks > .wp-block-template-part > .wp-block-cover {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}


/* backdrop-filter (like transform/filter/perspective) creates a new containing block for
   any position:fixed descendants. Core's mobile nav overlay uses position:fixed; inset:0
   to fill the viewport, but with the blur directly on .site-header, that fixed element was
   being contained by the header's own box instead — cropping the open mobile menu to the
   header's height. Move the blur to a pseudo-element behind the content so .site-header
   itself stays filter-free and the nav overlay can size itself to the full viewport again. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    isolation: isolate;
    transition: background-color 0.8s ease, box-shadow 0.8s ease, padding 0.8s ease;
}
body:not(.home) .site-header {
    background-color: var(--wp--preset--color--primary);
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    //backdrop-filter: blur(5px);
    z-index: -1;
    pointer-events: none;
}

.site-header .wp-block-navigation__container {
   a.wp-block-navigation-item__content {
      position: relative;

      &::after {
         position: absolute;
         width: 100%;
         height: 3px;
         z-index: 1;
         left: 0;
         right: 0;
         bottom: 0;
         content: " ";
         display:block;
         background: var(--wp--custom--button--color--background);
         transform: scaleX(0);
         transition: transform 0.3s ease-out 0.1s;
         transform-origin: left;
      }
      &:hover::after {
         transform: scaleX(1);
      }
   }
}

/* Below core's own nav-overlay breakpoint (782px, same one WP admin uses), the navigation
   block already collapses to a hamburger toggle on its own. The "Request a Quote" button
   sits next to it as a separate block though, and isn't part of that collapse — at narrow
   widths logo + hamburger + full-size button don't fit and the fixed header overflows
   horizontally. Hide the button at the same breakpoint so it collapses in step with the nav. */
/* Core's .is-style-outline button variant sets a fixed 2px border plus its own
   em-based padding (0.667em 1.333em), completely independent of our button's
   own padding tokens/border-width compensation. Since nothing accounts for
   that border, an outline button ends up taller than a plain button in the
   same row (padding + border vs. padding alone) — visibly offset when the two
   sit side by side in a wp:buttons flex row. Subtract the border width from
   our own padding tokens instead, so the total footprint (padding + border)
   matches a border-less button exactly. Core's own rule is wrapped in :where()
   (zero specificity), so this needs no !important to win. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border-width: 2px;
	padding-top: calc(var(--wp--custom--button--spacing--padding--top) - 2px);
	padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) - 2px);
	padding-left: calc(var(--wp--custom--button--spacing--padding--left) - 2px);
	padding-right: calc(var(--wp--custom--button--spacing--padding--right) - 2px);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}
.min-width-min-content {
	min-width: min-content; 
  /* Ensures the boxes don't stay stretched to max-content */
  flex: 1 0 auto; 
	
}

.gp-popup {
	.gp-popup__close {
		color: #fff;
		fill: #fff;
	}
}


#contact {
	transition: all 0.3s ease 1s;
}
body:has(#contact:target) #contact {
	background:  var(--wp--custom--color--primary);
	
	
	
	box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
}
@media screen and (min-width: 768px) {
	body:has(#contact:target) #contact {
		transform: translateY(-80px) scale(1.1);
	}
}

/** minimise header when scrolled **/
.wp-block-image img {
		transition: all 0.3s ease 0s;
}
.site-header {
	transition: padding 0.3s ease 0s;
}

@media screen and (max-width: 599px) {
	.wp-block-navigation__responsive-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
}

.wp-block-button:not(.is-style-outline) a.wp-block-button__link.wp-element-button {
	position: relative;
   overflow: hidden;
	
	&::after {
		position: absolute;
		width: 100%;
		height: 3px;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		content: " ";
		display:block;
		background: var(--wp--custom--button--color--background);
		transform: scaleX(0);
		transition: transform 0.5s ease-out 0.1s;
		transform-origin: left;
	}
	&:hover::after {
		transform: scaleX(1);
	}
}
@media screen and (max-width: 920px) {
	.site-footer-container * {
		text-align: center;
		
	}
	body .site-footer-container .wp-block-image {
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center !important;
		
		img {
			margin: 0 auto;
		}
	}
	.footer-service-columns.wp-block-columns {
		flex-direction: column;
		gap: 13px;
	}
}


@media (max-width: 781px) {
	/* .site-header .wp-block-buttons {
		display: none;
	} */

    .site-header .site-logo {
        max-width: 160px;
    }


}

.page-template-standard-page {
   .site-header.has-nav-overlay-background-color {
      background-color: var(--wp--preset--color--primary) !important;
   }
}
.site-header.is-scrolled {
      background-color: var(--wp--preset--color--primary) !important;
      box-shadow: var(--wp--preset--shadow--deep);
      padding-top: var(--wp--preset--spacing--spacing-1) !important;
    padding-bottom: var(--wp--preset--spacing--spacing-1) !important;
    
	.wp-block-image img {
		max-width: 150px;
	}
}

.service-card.wp-block-cover {
	cursor: pointer;
	
	
	h3.wp-block-heading {
		position: relative;
		transition: padding 0.3s ease 0s;
		
		&::before {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			background: var(--wp--custom--color--primary);
			content: " ";
			z-index: -1;
			transform-origin: bottom;
			transform: scaleY(0);
         opacity: 0.8;
			transition: transform 0.5s ease 0s;
		}
	}
	
	.wp-block-cover__image-background {
		transition: scale 0.3s ease-in-out 0s;
	}
	.wp-block-cover__inner-container {
		width: 100%;
    
		margin-right: 0;
	}

	.wp-block-cover__background::after {
		content: " ";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		inset: 0;
		opacity: 0;

		background-color: var(--wp--custom--button--color--background);
		transition: opacity 0.3s ease, border 0.3s ease;
		pointer-events: none;
	}
	.wp-block-heading {
		position:relative;
		z-index: 1;
	}
   .wp-block-group:has(> svg) {
      position: relative;
      z-index: 10;
   }
	
   svg {
      transition: all 0.3s ease 0s;
      transform-origin: bottom;
      position: relative;
      border-radius: 50%;
      overflow: visible;
      z-index; 5;
      borer: 0ps solid #fff;
   }
	
	.wp-block-cover__inner-container {
		transition: transform 0.2s ease 0s;
	}
	
	&:hover {
		h3.wp-block-heading {
			padding-bottom: var(--wp--preset--spacing--spacing-3) !important;
         padding-top: var(--wp--preset--spacing--spacing-5) !important;
		}
		h3.wp-block-heading::before {
			transform: scaleY(1);

			
		}
		.wp-block-cover__image-background {
			scale: 1.35;	
		}
		
      svg {
         transform: scale(1.4) translateY(1rem);
         background-color: var(--wp--custom--color--primary);
         padding: 0.5rem !important;
         border: 2px solid #fff;
         
      }
		
		.wp-block-cover__background {
			background-image: none !important;
		}
		.wp-block-cover__background::after {
			opacity: 0.25;
			border-bottom: 10px solid var(--wp--custom--button--color--background);
		}
		
	}
	
	
}

#home-hero.wp-block-cover {
   
   flex-direction: column;
   justify-content: flex-start !important;
   align-items: flex-start !important;
   .wp-block-cover__inner-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin-top: 0;
      margin-bottom: 0;
      align-self: stretch;
      flex-direction: column;
      justify-content: space-between !important;
      display: flex;

      .content-group.wp-block-group {
         flex-grow: 1;
         max-width: var(--wp--style--global--wide-size);
         width: 100%;

        a:not(.wp-block-button__link  ) {
         text-decoration: none !important;
         &:hover {
            text-decoration: underline !important;
         }
        }
      }
     
   }

   @media screen and (max-width: 560px) {
      .wp-block-cover__background {
         background-image: none !important;
         background: #052657 !important;
         opacity: 0.65;
      }
   }
}
.wp-block-navigation__overlay-container {
   .wp-block-navigation-item.contact {
      display: none;
   }
}