/*
 Theme Name:   The Hairology Centre
 Theme URI:    https://generatepress.com
 Description:  Child theme for The Hairology Centre
 Author:       Blackbox Web Design
 Author URI:   https://www.blackboxdesign.co.uk
 Template:     generatepress
 Version:      0.1
*/

/* Brand Colours:
 * dark blue: #0e253a;
 * ivory: #f2efea;
 */


/* All Devices */

/* Typography*/

h1,h2,h3,h4 {
	font-weight:700;
	color:#0e253a;
}

#thc_home_header h1 {
	font-size:3em;
}

#thc_home_header h1 span.split {
	display:block;
}

#thc_home_header h1 span.nl {
	display:block;
	font-size:20px;
	font-weight:400;
	line-height:24px;
}

h1 span.subhead {
	font-family:'Inter', arial, sans-serif;
	font-weight:700!important;
	display:block;
	margin-top:30px;
}

.thc_like_h2 {
	font-family:'Playfair Display', arial, sans-serif;
	font-weight:700;
	font-size:34px;
	line-height:1em;
	margin-bottom:20px;
}

.thc_blurbs h3 {
	font-size:24px;
}

.thc_button_wrapper.center {
	text-align:center;
}

.thc_button_wrapper a {
	display:inline-block;
	padding:8px 40px;
	font-size:18px;
	font-weight:700;
	text-transform:uppercase;
	background-color:#0e253a;
	transition: 0.4s all;
	color:#fff;
	border-radius: 30px;
	text-decoration:none;
}


.thc_button_wrapper a:hover {
	background-color:#f2efea;
	color:#0e253a;
}

.thc_footer_title {
	font-size:14px;
	font-weight:700;
	margin-bottom:5px;
}

ul {
	margin-left:2em;
}

.thc_blurbs p {
	font-size:14px;
} 

p.thc_blurb_content {
	min-height:5em;
}

/* Navigation  */

.sticky-enabled .main-navigation.is_stuck {
	background-color:#f2efea;
}

.sticky-enabled .main-navigation.is_stuck .grid-container {
	max-width:100%;
}

#generate-slideout-menu ul.slideout-menu a {
	line-height:40px;
}

#generate-slideout-menu ul.slideout-menu ul.sub-menu a {
	line-height:normal;
}

#generate-slideout-menu div.main-nav {
	order:4;
}

/* Headers & Banners */

#thc_home_header {
	min-height:80vh;
	display:flex;
	align-items:center;
}

#home_benefits.thc_fw_sec.image_grid .wp-block-column.image {
	background-image:url(/wp-content/uploads/2022/08/female_hair_loss_1_1500.jpg);
	background-position:right center;
	background-size:cover;
}

		#home_benefits.thc_fw_sec.image_grid .wp-block-column.text {
			padding:100px 100px 100px 0;
			margin-left:calc( 50vw - 580px );
			max-width:600px;
		}

#home_benefits .wp-block-columns {
	margin-bottom:0;
}



.thc_fw_cols.gb-container > .gb-inside-container {
	max-width:100%;
}

#thc_about.thc_image_col {
	background-image:url(/wp-content/uploads/2022/08/passenger_hairlines_1_1500.jpg);
}

#thc_alopecia_areata.thc_image_col {
	background-image:url(/wp-content/uploads/2022/08/alopecia-areata_1_1024.jpg);
}

#thc_fpb.thc_image_col {
	background-image:url(/wp-content/uploads/2022/08/fpb_1_1024.jpg);
}

#thc_belief.thc_image_col {
	background-image:url(/wp-content/uploads/2022/08/scalp_examination_1_1500.jpg);
}

#thc_hair_loss.thc_image_col {
	background-image:url(/wp-content/uploads/2022/08/male_hair_loss_4_1500.jpg);
}

#thc_male_hair_loss.thc_image_col {
	background-image:url(/wp-content/uploads/2022/08/male_hair_loss_5_1200.jpg);
}

#thc_contact.thc_image_col {
	background-image:url(/wp-content/uploads/2022/10/The-Hairology-Centre_1a_1200.jpg);
	/*background-position:top;*/
}

#thc_treatments.thc_image_col {
	background-image:url(/wp-content/uploads/2022/10/formulation_1_1200.jpg);
}

#thc_other_hair_loss.thc_image_col {
	background-image:url(/wp-content/uploads/2022/09/female_hair_loss_3_1200.jpg);
}

#thc_contact_cols {
	min-height:60vh;
}

.thc_image_col {
	background-size:cover;
	background-position:center;
}

body:not(.home) .gb-container:first-of-type {
	margin-top:20px;
}

/* Google maps */

#map {
	height:400px;
}

/* 404 */


/* Footer */
#footer-widgets, #footer-widgets p, #footer-widgets a, #footer-widgets ul, #footer-widgets li  {
	font-size:12px;
}

/* Hide/Reveal */
.faq_item {
	position:relative;
	margin-bottom:20px;
}

.jqreveal {
	display:none;
	padding:20px;
	background-color:#f7f7f7;
	margin-bottom:20px;
}

.jqreveal p:last-of-type {
	margin-bottom:0;
}

a.jqtoggle {
	margin-left:30px;
	display:inline-block;
	text-decoration:none;
	margin-bottom:10px;
	position:relative;
	color:#620504;
	font-weight:700;
}

a.jqtoggle:before {
	position:absolute;
	left:-26px;
	content:'';
	width:20px;
	height:20px;
	background-image:url(/assets/plus.svg);
	background-size:20px 20px;
	top:3px;
}

a.jqtoggle.toggled:before {
		background-image:url(/assets/minus.svg);
}

a.jqtoggle:hover {
	cursor:pointer;
}


/* General Content */

.thc_container_padding .gb-inside-container {
	padding:60px 0;
}

.thc_sec_gap {
	margin-bottom:10px;
}

.thc_blurbs .wp-block-column {
    padding: 20px;
    background-color: #fff;
}

.thc_product_descriptions .wp-block-columns.boxed {
	padding: 20px;
    background-color: #f2efea;
    box-shadow: 0 0 16px #ddd;
    border: 1px solid #e1e1e1;
}

.thc_product_descriptions .wp-block-columns.boxed.white {
	background-color:#fff;
}

.thc_hairloss_causes .wp-block-group {
	background-color:#fff;
	margin-bottom:30px;
	border-left:9px solid #ccc;
}

.norwood img {
	width:400px;
	max-width:100%;
}



/* Responsive Large Desktop - Everything over 1800px */
@media only screen
	and (min-width: 1800px) {

		#thc_home_header .gb-inside-container {
			max-width:1800px;
		}
		
}

/* Responsive - small widescreens (an issue for the homepage header) */
@media only screen
	and (min-aspect-ratio: 9/5 )
	and (max-height: 800px) {
		
		#thc_home_header {
			align-items:flex-end;
		}
		
		#thc_home_header h1 {
			font-size:2.6vw;
		}
		
		#thc_home_header.gb-container {
			background-image:url(/wp-content/uploads/2022/09/male_hair_loss_1c_1920.jpg);
			background-position:top;
		}
}

/* Responsive - that awkward size, 1024 to 1400px */
@media only screen
	and (min-width: 1024px) 
	and (max-width: 1400px) {
		
		#thc_home_header {
			min-height:95vh;
		}
		
		#home_benefits.thc_fw_sec.image_grid .wp-block-column.text {
			padding:5% 10%;
		}
		
		.thc_blurbs h3 {
			font-size:18px;
		}
		
		.thc_button_wrapper a {
			font-size:14px;
		}
}

/* Responsive Desktop - Everything ABOVE 1024 */
@media only screen
	and (min-width: 1024px) {
		
		body {
			padding:10px;
		}
		
		#thc_home_header {
			margin-bottom:10px;
		}
		
		
		#thc_home_header .wp-block-column:first-of-type {
			flex-basis:40%;
		}
		

		#thc_home_header .wp-block-column:nth-of-type(2) {
			flex-basis:60%;
		}	
		
		.thc_mob_header {display:none!important}
		
		.gb-container.thc_fw_sec > .gb-inside-container {
			max-width:100%;
		}
		
		.gb-container.thc_fw_sec > .gb-inside-container .wp-block-group__inner-container {
			max-width:100%;
			padding:0;
		}
		
		.thc_fw_cols.gb-container > .gb-inside-container .wp-block-group {
			max-width:600px;
		}
		
		.thc_fw_cols.two_thirds.gb-container > .gb-inside-container .wp-block-group {
			max-width:1080px;
		}		
		
		.thc_product_descriptions .wp-block-columns.boxed .wp-block-column:nth-of-type(2) {
			padding-left:2em;
			border-left:4px solid #999;
		}
		
		.thc_product_descriptions .wp-block-columns.boxed .wp-block-column:first-of-type {
			text-align:right;
		}
		
		.thc_group_extra_padding {
			padding:80px 40px;
		}
		
		#thc_home_header .gb-inside-container {
			width:90%;
		}		
		

}

/* Responsive - Everything below the mobile breakpoint (1200px) */
@media only screen
	and (max-width: 1200px) {
		
		#mobile-header .site-logo.mobile-header-logo img {
			height:80px;
		}
		
		.main-navigation.has-branding .inside-navigation.grid-container {
			padding:0 20px!important;
		}
		
		.home article {
			margin-top:85px;
		}
}

/* Responsive - Everything BELOW 1024 */
@media only screen
	and (max-width: 1023px) {
		.thc_no_bg_mob {
			background-image:none!important;
		}
		
		.thc_mob_header {
			min-height:40vh;
		}
		
		#thc_home_header {
			min-height:auto;
		}
		
		#thc_home_header .gb-inside-container {
			padding:30px;
		}
		
		#home_benefits.thc_fw_sec.image_grid .wp-block-column.text {
			margin-left:auto;
			padding:0;
			max-width:initial;
		}
		
		#home_benefits.thc_fw_sec.image_grid .wp-block-column.image {
			min-height:40vh;
		}
		
		#home_benefits .wp-block-columns .wp-block-column:first-of-type {
			order:3;
		}
		
		.thc_image_col {
			min-height:40vh;
		}
		
		.thc_blurbs h3 {
			font-size:18px;
		}		
		
		.thc_button_wrapper a {
			font-size:14px;
		}
		
		#thc_home_header.gb-container {
			background-color:#fff;
		} 
		
		.thc_container_padding .gb-inside-container {
			padding:30px 0;
		}
		
		.wp-block-group__inner-container .wp-block-group:not(.with_padding) .wp-block-group__inner-container {
			padding:0;
		}
		
		p.thc_blurb_content {
			min-height:auto;
		}
}

/* Responsive Tablet - Between 768 and 1023 */
@media only screen
	and (min-width: 768px)
	and (max-width: 1023px) {
		
}


/* Responsive Mobile - Everything BELOW 768 */
@media only screen
	and (max-width: 767px) {
		
		#thc_home_header h1 {
			font-size:2em;
		}
		
		#thc_home_header h1 span.split {
			display:inline;
		}
		

		
}