/*
Theme Name: Shire Surveyors
Theme URI: Arch
Author: Arch
Author URI: archcreative.co.uk
Description: 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: 
*/


:root{
	--green:#00C76B;
	--green-mid:#007962;
	--green-dark:#004538;
	--grey-light:#F5F5F5;
	--side-padding:30px;
}



/* ===== GENERAL ===== */

html, body { width:100%;margin:0;padding:0;overflow-x:hidden;font-family: "montserrat", sans-serif;font-weight:400; }

img { display:block; }


.m-section-60 { padding-top:60px;padding-bottom:60px; }

p, ul li { line-height:1.6rem;font-size:1.125rem; }
p.large { font-size:1.5rem;line-height:2rem; }

h1 { font-size:2.25rem; }
h2 { font-size:2rem;color:var(--green); }
h3 { font-size:1.625rem;font-weight:700;color:var(--green); }
h4 { font-size:1.5rem;font-weight:700;color:var(--green); }
h5 { font-size:1.3rem;font-weight:700;color:var(--green); }

.m-grid { margin:0; }

.pos-rel { position:relative; }
.pos-abs { position:absolute; }

.text-green { color:var(--green); }
.text-white { color:#fff; }

.container { max-width:1500px;margin:0 auto;padding:0 var(--side-padding); }


.bg-green { background:var(--green); }
.bg-green-dark { background:var(--green-dark); }
.bg-green-mid { background:var(--green-mid);color:#fff; }
.bg-green-mid :where(h1,h2,h3,h4,h5,h6) { color:var(--green); }
.bg-grey-light { background:var(--grey-light); }
.bg-clipboard { background:url("/wp-content/themes/shire_arch/img/icon-clipboard-hand.svg") no-repeat left center;background-size:contain; }


.bg-green :is(h1,h2,h3,h4,h5,h6) { color:var(--green-dark); }
.banner-text :is(h1,h2,h3,h4,h5,h6) {color:#fff;}

a { color:var(--green); }
a:hover { color:var(--green-dark); }
.map-box a:hover { color:#fff; }

a.button { text-decoration:none;padding:15px 20px;color:#fff;background:var(--green);border-radius:50px;display:inline-block;font-weight:700; }
a.button:hover { background:var(--green-dark); }
a.button.outline { border:2px solid var(--green-dark);color:var(--green-dark);text-decoration:none; }
a.button.outline:hover { background:var(--green-dark);color:var(--green); }

a.button.large { font-size:1.25rem; }

a.button.arrow { padding-right:60px;position:relative;color:var(--green-dark);text-decoration:none; }
a.button.arrow::after { content:"";display:block;position:absolute;top:calc(50% - 14px);right:20px;width:30px;height:30px;background:url("/wp-content/themes/shire_arch/img/arrow.svg") no-repeat center;background-size:contain; }
a.button.arrow:hover { background:#fff; }
a.button.arrow:hover::after { right:15px; }


.services-buttons a.button { width:100%;text-align:center;display:block;height:100%; }


.vertical-align { display:block;top:0;left:0;width:100%;height:100%; }
.vertical-outer { display:table;width:100%;height:100%;vertical-align: middle;  }
.vertical-inner { display:table-cell;width:100%;height:100%;vertical-align: middle; }

img.inline { display:inline-block; }


/* ===== NAV MENU ===== */
.top-bar { background:var(--green-mid);padding:30px 0;color:#fff;text-align:right; }
.top-bar a { color:var(--green);font-weight:700; }
.top-bar .email { margin-right:15px; }
.logo { width:185px;display:inline-block;margin-right:15px;vertical-align:middle; }
.logo img { width:100%; }
nav { padding:30px 0; }
#navmenu { width:calc(100% - 200px);display:inline-block;text-align:right;vertical-align:middle; }
#navmenu .menu { list-style: none;padding:0;margin:0;display:inline-block;width:100%;z-index:100;position:relative; }
#navmenu .menu li { display:inline-block;text-align:center;position:relative; }
#navmenu .menu li a { position:relative;display:inline-block;padding:15px 30px;color:var(--green-dark);font-weight:700;text-decoration:none; }
#navmenu .menu li.button a { background:var(--green);color:#fff;border-radius:50px; } 
#navmenu .menu li.menu-item-has-children:hover { background:var(--green); }
#navmenu .menu li:hover a::after, #navmenu .menu li:is(.current-menu-item,.current_page_ancestor) a::after { content:"";display:block;width:calc(100% - 60px);height:2px;background:var(--green);position:absolute;bottom:12px;left:30px; }
#navmenu .menu li.button:hover { background:transparent; }
#navmenu .menu li:hover a { color:var(--green-dark); }
#navmenu .menu li.button:hover a { background:var(--green-dark);color:#fff; }
#navmenu .menu li.button:hover a::after { display:none; }
#navmenu .sub-menu { overflow:hidden;border-bottom-left-radius:15px;border-bottom-right-radius:15px;display:none;position:absolute;width:350px;top:100%;left:0;background:var(--green);list-style: none;padding:50px 15px 15px;margin:0; }
#navmenu .sub-menu::before { position:absolute;top:0;right:0;height:36px;width:100%;background:#fff;content:"";display:block; }
#navmenu .sub-menu li { display:inline-block;width:100%;text-align:left; }
#navmenu .menu li .sub-menu li a { width:100%;color:#fff;padding:10px;padding-left:20px;position:relative; }
#navmenu .menu li .sub-menu li a::before { position:absolute;left:0;top:50%;margin-top:-5px;content:"";display:block;width: 0px;height: 0px;border-style: solid;border-width: 5px 0 5px 8.7px;border-color: transparent transparent transparent var(--green-dark);transform: rotate(0deg); }
#navmenu .menu li .sub-menu li a:hover { color:var(--green-dark); }
#navmenu .menu li:hover .sub-menu { display:inline-block; }
#navmenu .menu > li.menu-item-has-children:not(.button):hover::before { z-index:2;content:"";position:absolute;display:block;background:var(--green);height:36px;width:100%;top:100%; }

.top-bar .socials { position:absolute;top:0px;left:30px; }
.socials a.social { display:inline-block;margin-right:10px; }
.socials a.social:last-child { margin:0; }
.socials a.social:hover { opacity:0.6; }

.mobile-toggle { width:30px;height:30px;display:none; }
.toggle-bar { width:100%;height:3px;margin-bottom:5px;background:var(--green-dark); }
.mobile-toggle.active .toggle-bar { background:var(--green); }

footer { background:var(--green-dark);padding:45px 0 60px;color:#fff; }
footer .socials { margin-top:30px; }
.social img { height:26px;width:auto; }
.footer-logo-col { width:120px;display:inline-block;vertical-align:middle; }
.footer-logo-text { width:calc(100% - 120px);display:inline-block;vertical-align:middle; }
.footer-links { margin-top:45px; }
#footermenu .menu { list-style: none;padding:0;margin:0 0 30px;line-height:35px; }
#footermenu .menu a { color:#fff;text-decoration:none; }
#footermenu .menu a:hover { color:var(--green); }







/* Banner */
.banner { position:relative;padding:90px 0 90px;color:#fff;min-height:400px; }
.banner.masked { mask-image:linear-gradient(white, white),  url("/wp-content/themes/shire_arch/img/banner-angle.svg");mask-mode:luminance;mask-repeat:no-repeat;mask-position:0px calc(100% + 1px);mask-size:calc(100% + 2px) auto;mask-composite:subtract; }
.banner h1 { margin-top:18px;margin-bottom:0px; }
.banner img, .banner video { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover; }
.banner::before { opacity:0.8;z-index:2;position:absolute;top:0;left:0;width:100%;height:100%;content:"";display:block;background:linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4)); }
.banner-text { width:100%;position:relative;z-index:3; }
.banner.home h1 { font-size:4rem; }
.banner.home .banner-text { max-width:700px; }
.banner .banner-text.quote-page h1 { font-size:2.25rem;max-width:650px;margin:0 auto;text-align:center; }
.banner.home { min-height:600px; }


.get-a-quote { filter:drop-shadow(0px 5px 3px rgba(0,0,0,0.3));text-decoration:none;text-align:center;padding:30px;border-radius:50px;font-size:1.25rem;font-weight:700;background:var(--green-dark);color:#fff;position:absolute;bottom:0;left:50%;transform:translate(-50%, 50%);z-index:4; }
.get-a-quote span { color:var(--green); }
.get-a-quote:hover { color:#fff;background:var(--green-mid); }

.clipboard-box { border-radius:50px;padding:45px 30px 60px;text-align:center;position:relative;height:100%; }
.clipboard-box img { margin-right:-22px;width:100%;max-width:130px; }
span.level { display:block;text-transform:uppercase;font-size:1.625rem;margin-top:30px; }
.clipboard-box h3 { margin-bottom:60px; }
.clipboard-box a.button.outline { width:calc(100% - 60px);position:absolute;bottom:30px;left:50%;display:block;transform:translateX(-50%);background:transparent;color:var(--green-mid);border-color:var(--green-mid); }
.clipboard-box a.button.outline:hover { background:var(--green);color:var(--green-dark); }

.home-split-section { padding:60px 0px; }
.home-split-section::before { content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:50%;background:var(--green-mid); }

/* Home */
.home-section-1 { padding:90px 0 30px; }
.bottom-triangle { width:100%;margin-top:60px;margin-bottom:-30px; }


/* Get a quote */
.form-container { padding:60px 0px;margin:0 auto;width:100%;max-width:1200px; }
.form-container form { width:100%; }
.form-container form :where(input, select, textarea) { font-family: "montserrat", sans-serif;font-weight:400;font-size:1.125rem;width:100%;appearance:none;border:none;padding:30px 30px;background:var(--grey-light); }
.forminator-response-message { padding:30px 0px; }
form button { margin:0 0 0 auto;border-radius:50px;background:var(--green);color:#fff;display:block;padding:10px 30px;border:none;font-weight:bold;font-size:1.125rem; }
form button:hover { background:var(--green-dark); }

/* ===== MODULES ===== */

/* Two Column */
.module-two-column { padding:60px 0 30px; }
.two-col-image { width:100%;aspect-ratio:12/9;object-fit:cover; }

/* Team */
.module-team { padding:90px 0 120px; }
.team-grid { text-align:center;margin:60px -15px 0; }
.team-item { width:33%;display:inline-block;padding:15px;text-align:left;vertical-align:text-top; }
.team-item img { width:100%;margin-bottom:30px; }
.team-item span { display:block;font-weight:700;font-size:1.25rem; }
.team-item span.team-name { margin-bottom:5px; }



/* Icons */
.module-icons { padding:60px 0 60px; }
.icon-grid { text-align:center;margin:60px -30px 0; }
.icon-item { width:25%;display:inline-block;padding:15px 30px;text-align:left;vertical-align:top; }
.icon-item img { width:100%;max-width:130px;margin:0 auto 30px;aspect-ratio: 1/1;object-fit: contain;}



/* Map */
.module-map { padding:90px 0px; }
.map-box { background:var(--green-dark); }
.map-box iframe { display:block;margin:0 auto;width:100%;height:100%; }
.map-text { padding:60px 30px;height:100%;color:#fff; }
.map-text .address { display:inline-block;font-size:2rem;color:var(--green);font-weight:600;margin-bottom:40px; }




/* Blog */
.blog-grid { padding:60px 0px;display:grid;grid-gap:30px;grid-row-gap:60px; }
.blog-link-text { padding:0px 30px 30px; }
.thumbnail { width:100%;height:100%;object-fit:cover;aspect-ratio:14/9; }
.blog-thumb-holder::before { pointer-events:none;transform:scaleX(-1);display:block;content:"";background:var(--grey-light);position:absolute;top:0;left:0;width:100%;height:calc(100% + 1px);mask-image: url('/wp-content/themes/shire_arch/img/banner-angle.svg');mask-repeat: no-repeat;mask-position:left bottom; }
.blog-link-text h5 { color:var(--green-dark); }
.blog-link-text .blog-date { color:var(--green);font-weight:700;font-size:1.25rem;display:block;margin-top:-20px; }
.pagination,.nav-links { text-align:center;width:100%; }

.page-numbers { display:inline-block;padding:5px 5px;text-decoration:none; }
.page-numbers:not(.current, .prev, .next):hover { text-decoration:underline; }
.page-numbers:is(.next, .prev) { background:var(--green);color:#fff;border-radius:50px;padding:5px 10px; }
.page-numbers:is(.next, .prev):hover { background:var(--green-dark); }

.blog-thumbnail-header { width:auto;max-width:100%;max-height:300px; }
.blog-box-holder { background:var(--grey-light);height:100%; }
.blog-date { padding:0 30px;position:relative;top:5px;font-weight:600;color:var(--green); }

@media(max-width:1200px){
	.home-split-section::before { height:75%; }
}


@media(max-width:1040px){
#navmenu .menu li a { padding:15px 20px; }
}

@media(min-width:992px){
	#navmenu { display:inline-block !important; }
}

@media(max-width:991px){
	/* Move this to it's own query if it needs to break down earlier */
		.mobile-toggle { display:inline-block;position:absolute;top:20px;right:var(--side-padding); }
		#navmenu { display:none;width:100%; }
		#navmenu .menu { padding:30px 0px; }
		#navmenu .menu li { display:inline-block;width:100%;padding:0; }
		#navmenu .menu a { display:inline-block;width:100%;padding:10px; }
		#navmenu .sub-menu { display: none;width:100%;position:static; }
		#navmenu .menu li:hover .sub-menu { display:none; }
		#navmenu .menu > li:not(.button):hover::before { display:none; }
		#navmenu .menu > li { border-radius:50px;overflow:hidden; }
		#navmenu .menu > li:hover { background:transparent; }
		#navmenu .menu > li:hover a { color:var(--green); }
			#navmenu .menu li:hover a::after, #navmenu .menu li:is(.current-menu-item,.current_page_ancestor) a::after { display:none; }
	#navmenu .menu li:is(.current-menu-item,.current_page_ancestor) a { color:var(--green); }
	#navmenu .menu > li.menu-item-has-children:not(.button):hover::before { display:none; }
	#navmenu .menu li.menu-item-has-children:hover { background:transparent; }
	/* ---------------------- */
	.top-bar { padding:20px 0; }
	.top-bar .socials { display:none; }

	.banner.home h1 { font-size:3rem; }
	h1 { font-size:2.5rem; }
	p.large { font-size:1.25rem; }

	.icon-item { width:50%; }

	.team-item { width:50%; }

}

/* Tablet Size */
@media(max-width:768px){
	.top-bar { text-align:center; }
	.top-bar .email { display:none;  }


	.module-two-column .image-col { grid-row-start:1; }
	.module-two-column .image-col .two-col-image { max-width:400px;margin:0 auto; }
	.map-box iframe { height:450px; }
	.thumbnail  { position:static;height:250px; }

.icon-item { width:100%; }

}

/* Mobile Size */
@media(max-width:560px){

	.banner.home h1 { font-size:2rem; }
	p.large { font-size:1.1rem; }
	.home-split-section::before { height:66%; }
	.clipboard-box img { position:absolute;left:30px;top:30px;opacity:0.1; }

	.icon-item img { width:100%;max-width:100px;margin:0 auto 30px;aspect-ratio: 1/1;object-fit: contain;}


.module-team { padding:40px 0 60px; }
.form-container { padding:20px 0px }

}


@media(max-width:460px){
		.icon-item { width:100%; }
		.team-item { width:100%; }
}