/*
Theme Name: A Williams Joinery WordPress Theme
Template: theme360
Version: 1.0
Author: Respond Agency Ltd
Author URI: https://werespond.uk
Description: A Theme360 child theme for A Williams Joinery
*/

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@160..700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: 'CORPOREA';
    src: url('/assets/fonts/CORPOREA.woff2') format('woff2'),
        url('/assets/fonts/CORPOREA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
/* Fonts */
  --fnt_font-family: "Readex Pro", sans-serif;
  --fnt_font-size: 17px;
  --fnt_line-height: 1.7em;
  --fnt_font-weight: 300;
  
  --cta_fnt_font-size: 1rem;
  --cta_fnt_line-height: 1.3rem;
  --cta_fnt_font-weight: 400;
  --cta_fnt_text-transform: none;
  
  --cta-txt_fnt_font-size: 0.9rem;
  --cta-txt_fnt_font-weight: 500;
  --cta-txt_fnt_text-transform: uppercase;

  --psh_fnt_font-size: 0.9rem;
  --psh_fnt_line-height: 1.2rem;
  --psh_fnt_font-weight: 600;
  
  --pre_fnt_font-size: 0.8rem;
  --pre_fnt_line-height: 1.2rem;
  --pre_fnt_font-weight: 400;
  --pre_fnt_letter-spacing: 0.25rem;
  
  --hed_fnt_font-weight: 400;
  --hed_fnt_letter-spacing: 0rem;
  
  --h1_fnt_font-size: 3.8rem;
  --h1_fnt_line-height: 4.4rem;
  
  --h2_fnt_font-size: 3rem;
  --h2_fnt_line-height: 3.6rem;

  --h3_fnt_font-size: 1.9rem;
  --h3_fnt_line-height: 2.5rem;

  --h4_fnt_font-size: 1.5rem;
  --h4_fnt_line-height: 2.1rem;

/* Colours */
  --clrshadow: 1px 4px 10px 1px rgba(1,56,25,0.1);
  --clrblack: #2A2723;
  --clrblack_alt: #4A433B;
  --clrwhite: #fff;
  --clrwhite_alt: #F3EEEB;
  --clrgrey: #F3EEEB;
  --clrgrey_alt: #ECE3DD;
  /* Orange */
  --clr1: #FF6600;
  --clr1_alt: #DF4807;
  --clr1_txt: #fff;
  /* Brown */
  --clr2: #2B2723;
  --clr2_alt: #120E0B;
  --clr2_txt: #fff;
  /* Black/Brown */
  --clr3: #21201f;
  --clr3_alt: #1a1816;
  --clr3_txt: #fff;
  /* Grey to White */ 
  --clr4: #F3EEEB;
  --clr4_alt: #ECE3DD;
  --clr4_txt: #2A2723;

/* Corners */
  --radius_sm: 10px;
  --radius_md: 20px;
  --radius_lg: 40px;
  --radius_cta: 50px;
  
/* Padding */
  --cntntpad: 80px;
  --cntntpad_slm: 40px;
  --ctapad: 12px 20px;
}

/* Less than Medium */		
@media screen and (max-width: 64em) { 
	:root {
	/* Fonts */
	  --fnt_font-size: 19px;
	  --fnt_line-height: 1.7em;
  
	  --cta_fnt_font-size: 0.9rem;
	  --cta_fnt_line-height: 1.2rem;
  
	  --h1_fnt_font-size: 2.5rem;
	  --h1_fnt_line-height: 2.9rem;
  
	  --h2_fnt_font-size: 2.2rem;
	  --h2_fnt_line-height: 2.6rem;

	  --h3_fnt_font-size: 1.6rem;
	  --h3_fnt_line-height: 2rem;

	  --h4_fnt_font-size: 1.4rem;
	  --h4_fnt_line-height: 1.8rem;

  
	/* Padding */
	  --cntntpad: 60px;
	  --cntntpad_slm: 40px;
	  --ctapad: 10px 18px;
	}
}


/* -- Overrides -- */
h1, h2, h3, h4, h5, h6 {
	font-family: "CORPOREA",  "Readex Pro", sans-serif;
}

.h2-small h2.h1, .h2-small h2 {
	font-size: var(--h2_fnt_font-size);
	line-height: var(--h2_fnt_line-height);
}

form input, form textarea, form select {
	border: solid var(--clrgrey_alt) 1px;
}

	/* Header */
	header {
		transition: all 0.5s;
		padding: 30px 0;
	}
	
	header a.telephone {
		font-weight: 600;
		color: #fff;
		font-size: 1.2rem;
	}
	
		header a.telephone svg {
			color: var(--clr1);
		}
	
	header a.cta.secondary {
		display: none;
	}

	
	.floating-header header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: none;
		z-index: 9999;
	}
	
	.floating-header.post-type-archive header, .floating-header.single header, .floating-header.page-id-727 header {
		background: var(--clr3);
	}
	
		.floating-header #row-1.banner-with-form, .floating-header .first-fix {
			padding-top: 150px !important;
		}
	
	.scrolled-200 header {
		background: var(--clr3) !important;
		padding: 20px 0;
	}
	
	.header-container .logo img {
		width: 180px;
		display: block;
		transition: all 0.5s;
	}
	
	.floating-header .header-container .nav .primary-menu li a {
		text-decoration: none;
		color: var(--clrwhite);
	}
	
	.scrolled-200 .header-container .nav .primary-menu li a {
		color: var(--clrwhite);
	}
	
		.floating-header .header-container .nav .primary-menu li a:hover, .scrolled-200 .header-container .nav .primary-menu li a:hover {
			color: var(--clr1);
		}
		
	.header-container .nav .primary-menu > .menu-item-has-children > ul {
		border-radius: var(--radius_sm);
	}
	
	.header-container .nav .primary-menu > .menu-item-has-children > ul li a {
		color: var(--clr2);
	}
	
		.header-container .nav .primary-menu > .menu-item-has-children > ul li a:hover {
			color: var(--clr1);
		}

.mob-menu-item {
    font-size: 28px;
    color: var(--clrwhite);
	background: var(--clr3);
	padding: 5px 8px;
	border-radius: 5px;
}

.nav-mobile {
	position: fixed;
}
	
	/* Footer */
	footer#main a.telephone {
		font-weight: 500;
		color: #fff;
		font-size: 1.2rem;
		text-decoration: none;
		display: block;
		margin: 20px 0 0 !important;
	}
	
		footer#main a.telephone svg {
			color: var(--clr1);
			font-size: 20px;

		}
		
	footer#main a.email {
		font-weight: 500;
		color: #fff;
		font-size: 1.2rem;
		text-decoration: none;
		display: block;
		margin: 20px 0 0 !important;
		font-size: 1rem;
	}
	
		footer#main a.email svg {
			color: var(--clr1);
			font-size: 20px;
		}
	
	footer#main {
		position: relative;
		z-index: 1;
		padding-top: 120px;
	}
	
		footer#main:before {
		  content: "";
		  position: absolute;
		  top: -15px;
		  left: 0;
		  width: 100%;
		  height: 75px; /* optional, for full height */
		  background-image: url('images/oak-1.webp');
		  background-size: auto 100%; /* or contain, depending on effect */
		  background-position: center;
		  background-repeat: no-repeat;
		  z-index: 2;
		}
		
	footer#main ul, footer#main ul li {
		font-size: 0.9rem;
	}
	
	footer#legal, footer#legal a, footer#legal a:link, footer#legal a:active, footer#legal a:visited {
		font-size: 0.8rem;
	}
	
.content-titles {
    padding: 0 0 40px;
}
	
	
	/* Override General CTA */
	a.cta-text:link, a.cta-text:visited, a.cta-text:active {
		color: var(--clr2);
	}
	
		a.cta-text svg {
			color: var(--clr1);
		}
	
	/* Override Primary CTA */
	a.cta.primary, a.cta.primary:link, a.cta.primary:active, a.cta.primary:visited {
		background: var(--clr1);
		border: solid 3px var(--clr1);
		color: var(--clr1_txt);
	}

		a.cta.primary:hover {
			background: var(--clr1_alt);
			border-color: var(--clr1_alt);
		}
		
	.clr1-bg a.cta.primary, .clr1-bg a.cta.primary:link, .clr1-bg a.cta.primary:visited, .clr1-bg a.cta.primary:active {
		background: var(--clr2);
		border-color: var(--clr2);
		color: var(--clr2_txt);
	}
	
		.clr1-bg a.cta.primary:hover {
			background: var(--clr2_alt);
			border-color: var(--clr2_alt);
			color: var(--clr2_txt);
		}
		
	/* Override Secondary CTA */
		
	a.cta.secondary, a.cta.secondary:link, a.cta.secondary:active, a.cta.secondary:visited {
		background: var(--clr2);
		border: solid 3px var(--clr2);
		color: var(--clr2_txt);
	}

		a.cta.secondary:hover {
			background: var(--clr2_alt);
			border-color: var(--clr2_alt);
		}
		
	.clr2-bg a.cta.secondary, .clr2-bg a.cta.secondary:link, .clr2-bg a.cta.secondary:visited, .clr2-bg a.cta.secondary:active {
		background: var(--clrwhite);
		border-color: var(--clrwhite);
		color: var(--clrblack);
	}
	
		.clr2-bg a.cta.secondary:hover {
			background: var(--clrwhite_alt);
			border-color: var(--clrwhite_alt);
			color: var(--clrblack);
		}
		
	/* Backgrounds */
	.background-image span.pre-title, .background-image legend, .background-image span.post-meta {
		color: var(--clrwhite);
	}
	
	.clr1-bg span.pre-title, .clr1-bg legend, .clr1-bg span.post-meta {
		color: var(--clrwhite);
	}
	
	.clr2-bg span.pre-title, .clr2-bg legend, .clr2-bg span.post-meta {
		color: var(--clr1);
	}
	
	.clr1-bg h1, .clr1-bg h2, .clr1-bg h3, .clr1-bg h4, .clr1-bg h5, .clr1-bg h6 {
		color: var(--clr1_txt);
	}
	
	.clr2-bg h1, .clr2-bg h2, .clr2-bg h3, .clr2-bg h4, .clr2-bg h5, .clr2-bg h6 {
		color: var(--clr2_txt);
	}
	
	span.pre-title, legend, span.post-meta, .clr4-bg .pre-title, .clr4-bg .post-meta {
    	color: var(--clr1);
	}

.clr4-bg {
background: #F3EEEB;
background: -webkit-linear-gradient(0deg,rgba(243, 238, 235, 0) 0%, rgba(243, 238, 235, 1) 100%);
background: -moz-linear-gradient(0deg,rgba(243, 238, 235, 0) 0%, rgba(243, 238, 235, 1) 100%);
background: linear-gradient(0deg,rgba(243, 238, 235, 0) 0%, rgba(243, 238, 235, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#F3EEEB",
  endColorstr="#F3EEEB",
  GradientType=0
);	
}
		
	/* Banner */
	.banner.background-image {
		color: #fff;
		position: relative;
		background-color: var(--clr2_alt) !important;
		/*	aspect-ratio: 3/1.2; */
		padding: 225px 0;
	}
	
	.timber-border {
		position: relative;
	}
	
		.timber-border:after {
		  content: "";
		  position: absolute;
		  bottom: -15px;
		  left: 0;
		  width: 100%;
		  height: 75px; /* optional, for full height */
		  background-image: url('images/oak-2.webp');
		  background-size: auto 100%; /* or contain, depending on effect */
		  background-position: center;
		  background-repeat: no-repeat;
		  z-index: 2;
		}
	
	.banner.background-image .bg {
		display: block;
		height: 100%;
		width: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		color: #fff;
		position: absolute;
		opacity: 0.8;
		top: 0;
		left: 0;
		z-index: 0;
	}
	
		.banner.background-image:before {
			content: "";
			display: block;
			height: 75%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
background: #2B2723;
background: -webkit-linear-gradient(0deg,rgba(43, 39, 35, 0) 0%, rgba(43, 39, 35, 0.65) 80%, rgba(43, 39, 35, 0.85) 100%);
background: -moz-linear-gradient(0deg,rgba(43, 39, 35, 0) 0%, rgba(43, 39, 35, 0.65) 80%, rgba(43, 39, 35, 0.85) 100%);
background: linear-gradient(0deg,rgba(43, 39, 35, 0) 0%, rgba(43, 39, 35, 0.65) 80%, rgba(43, 39, 35, 0.85) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#2B2723",
  endColorstr="#2B27230D",
  GradientType=0
);
		}
		
		.banner.background-image * {
			position: relative;
			z-index: 3;
		}
		
		/* .banner.background-image .small-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		} */
		
	.banner p {
		font-size: 1.2rem;
		line-height: 2rem;
	}
	
	/* Icons */
	.content-container.feature .content > svg {
		color: var(--clr1);
	}
	
	/* Features */
	.grid-container.box-in .content-container {
		z-index: 8888;
		position: relative;
		background: var(--clrwhite);
	}
	
	/* Media */
	.media img {
		border-radius: var(--radius_md);
	}
	
	/* Testimonials */
/* Base grid */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 0 auto;
}

/* Modern masonry support (experimental, Chrome/Edge/Safari 17+) */
@supports (grid-template-rows: masonry) {
  .testimonial-grid {
    grid-template-rows: masonry;
  }

  .testimonial-grid > * {
    break-inside: avoid;
  }
}

/* Fallback masonry layout (works everywhere) */
@supports not (grid-template-rows: masonry) {
  .testimonial-grid {
    display: block;
    columns: 3;
    column-gap: 40px;
  }

  .testimonial-grid > * {
    break-inside: avoid;
    margin-bottom: 40px;
    width: 100%;
  }
}

/* Optional: responsive columns */
@media (max-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    columns: 2; /* fallback for non-grid masonry */
  }
}

@media (max-width: 640px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
    columns: 1;
  }
}

	
	.testimonials .grid-container {
		align-items: start;
	}
	
	.wysiwyg blockquote {
		font-weight: 500;
		color: var(--clr2);
		font-size: 2.6rem;
		line-height: 3.2rem;
		letter-spacing: -0.05em;
		margin: 0 0 50px;
	}

	blockquote.featured-testimonial {
		font-weight: 500;
		color: var(--clr2);
		font-size: 3.2rem;
		line-height: 4rem;
		letter-spacing: -0.05em;
		margin: 0 0 50px;
	}
	
	.clr2-bg .featured-testimonial  {
		color: var(--clr2_text);
	}
	
	.content-container.testimonial {
		display: block;
		position: relative;
		padding: 30px 30px 30px 30px;
		box-sizing: border-box;
	}
	
		.testimonial .stars {
			color: var(--clr1);
			font-size: 1.4rem;
		}
		
		.testimonial img.quote-image {
			border-radius: var(--radius_sm);
			margin: 0;
		}
		
		.testimonial .content {
				position: relative;
		}
		
		.testimonial * {
			position: relative;
			z-index: 2;
		}
		
		.testimonial svg.fa-quote-left {
			position: absolute;
			left: -30px;
			top:0;
			z-index: 0;
			height: 150px;
			color: var(--clrgrey);
			z-index: 1;
			opacity: 0.75;
		}
		
			.clr3-bg .testimonial svg.fa-quote-left {
				color: var(--clrgrey);
				opacity: 0.2;
			}
			
			.clrgrey-bg .testimonial svg.fa-quote-left {
				color: var(--clrwhite);
			}
			
			.clr2-bg .testimonial svg.fa-quote-left {
				color: var(--clrgrey);
				opacity: 0.1;
			}
		
		.testimonial blockquote {
			font-size: 0.95rem;
			line-height: 1.8rem;
		}
		
		.testimonial blockquote p {
			padding-top: 10px;
			margin: 0;
		}
		
		.content-container.testimonial .content .bio .name {
			margin: 20px 0 0;
			color: var(--clr1);
			font-size: 0.8rem;
		}
		
	/* Image */
	img.rounded-corners {
		border-radius: var(--radius_lg);
	}
	
	/* Content Rows */
	.content-container h2, .content-container p {
		position: relative;
		z-index: 999;
	}
	
	/* Gallery */
	.gallery-images {
		padding: 0 20px;
	}
	
	.gallery-images .thumbnail {
		display: block;
		aspect-ratio: 1/1;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    position: relative;
    overflow: hidden;
    margin: 10px;
    border-radius: var(--radius_lg);
	}
	
.gallery-images .thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    transition: inherit;
}
	
.gallery-images .thumbnail:hover::before {
    transform: scale(1.2);
}

.featured-gallery {
	overflow: hidden;
}

	.featured-gallery .gallery-over-container {
		margin-top: 30px;
	}

		.featured-gallery .gallery-over-container .gallery-images {
			width: 100vw;
		}	
		
			.featured-gallery .gallery-over-container .gallery-images a.thumbnail {
				border-radius: var(--radius_md);
				margin: 0 10px;
			}
			
/* Footer */
footer#main ul a, footer#main ul a:link, footer#main ul a:active, footer#main ul a:visited {
	color: var(--clrwhite);
}

footer#legal, footer#legal a, footer#legal a:link, footer#legal a:active, footer#legal a:visited {
	color: var(--clrgrey_alt);
}

footer#legal ul li {
	border-left: solid 1px rgba(255,255,255,0.2);
}

footer#main, footer#legal {
	border: 0;
}

footer#main a.cta.secondary {
	display: none;
}

footer#main .social a {
    color: var(--clrwhite);
}

.content-container.post img {
	border-radius: var(--radius_sm);
}

.faq-group h3 {
	font-family: var(--fnt_font-family);
	padding-right: 40px;
}

.faq-group h3 svg {
	float: right;
}
	
/* More than Medium */		
@media screen and (min-width: 64em) {	
footer#main .header {
display: block;}
footer#main .ctas, footer#main .social {
	margin: 20px 0 0;
}

	 footer#main h4 {
        margin-top: 0px;
    }

}
			
			
/* Less than Medium */		
@media screen and (max-width: 64em) {	
	header a.logo img {
		width: 140px;
	}
	
	header {
			padding: 20px 0;
	}
	.banner.background-image {
		padding: 150px 0;
	}
	
    .content-first, .content-last {
        margin: 30px 0 30px;
    }
    
    footer#main {
    	text-align: left;
    }
	
	blockquote.featured-testimonial {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

/* Less than Small */	
@media screen and (max-width: 48em) { 
    footer#main {
    	text-align: center;
    }

}

img.gform_ajax_spinner {
	max-width: 30px;
}