/* ----------------------------------------------------------------------------------------
* Precision Custom Homes — colour layer for the Builtex template
* Loaded after custom.css. Changes colour only: layout, fonts and sections are the template's.
*
* Template navy   #12223B  -> logo charcoal  #211F20
* Template yellow #FFDB5A  -> logo brick     #8F3E29
* Yellow carried navy text; brick needs white text, so text on accent panels flips to white.
* On dark sections, accent-coloured text uses a lighter brick for contrast.
* ---------------------------------------------------------------------------------------- */

:root{
	--primary-color				: #211F20;
	--secondary-color			: #F4F3F1;
	--bg-color					: #ECEAE7;
	--text-color				: #4A4644;
	--accent-color				: #8F3E29;
	--accent-deep-color			: #6E2E1E;
	--accent-light-color		: #D58B6F;
	--on-accent-color			: #FFFFFF;
	--divider-color				: #211F201A;
	--dark-divider-color		: #FFFFFF1A;
}

/* Logo */
.navbar-brand img{
	height: 64px;
	width: auto;
}

.footer-logo img{
	height: 110px;
	width: auto;
}

/* The PCH email is longer than the template's demo address */
.contact-us-item-content h3,
.member-info-list ul li{
	overflow-wrap: anywhere;
}

/* Text and icons on accent backgrounds */
::selection{
	color: var(--on-accent-color);
	filter: none;
}

.btn-default{
	color: var(--on-accent-color);
}

.btn-default::before,
.readmore-btn::before{
	background-image: url('../images/arrow-white.svg');
}

.section-footer-text p span,
.project-item-content p,
.team-item-content p,
.page-category-list .page-category-list-title,
.post-tags .tag-links a,
.page-pagination ul li.active a,
.page-pagination ul li a:hover,
.post-social-sharing ul li:hover a,
.project-category-social-links ul li:hover a,
.team-member-social-list ul li:hover a,
.footer-social-links ul li a:hover,
.satisfy-client-image.add-more i{
	color: var(--on-accent-color);
}

.service-process-item-no h3,
.post-entry blockquote p,
.video-play-button a span i{
	color: var(--on-accent-color);
}

/* Dropdown and mobile menus sit on brick: links white, hover deepens the row
   (the template's hover turned navy text white, which no longer reads as a change) */
.main-menu ul ul li a,
.slicknav_nav li a,
.slicknav_arrow:after{
	color: var(--on-accent-color);
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus,
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	color: var(--on-accent-color);
	background-color: var(--accent-deep-color);
}

.slicknav_icon .slicknav_icon-bar{
	background-color: var(--on-accent-color);
}

.footer-newsletter-box .form-group .newsletter-btn img{
	filter: brightness(0) invert(1);
}

.cta-box-body-content .section-title h2,
.cta-box-body-content .section-title p,
.cta-box-body-content .section-title .section-sub-title,
.expertise-counter-item h2,
.expertise-counter-item p{
	color: var(--on-accent-color);
}

.cta-box-body-content .section-title .section-sub-title,
.expertise-counter-item{
	border-color: rgba(255, 255, 255, 0.3);
}

.cta-box-body-content .section-title .section-sub-title::before{
	background: var(--on-accent-color);
}

/* Accent-coloured text on dark sections */
.dark-section .readmore-btn:hover,
.dark-section .section-footer-text p a:hover,
.dark-section .section-footer-text ul li i,
.dark-section .section-title ul li::before,
.main-menu ul li a:hover,
.main-menu ul li a:focus,
.footer-links ul li a:hover,
.intro-video-contact-item-content h3 a:hover{
	color: var(--accent-light-color);
}

/* Image overlays: the template hard-codes navy rgba(18, 34, 59) here */
.hero::before, .hero.hero-slider-layout .hero-image-slider .hero-slider-image figure::before{
	background: linear-gradient(180deg, rgba(33, 31, 32, 0.00) 87%, rgba(33, 31, 32, 0.25) 90.49%, rgba(33, 31, 32, 0.50) 100%), linear-gradient(270deg, rgba(33, 31, 32, 0.00) 31.56%, rgba(33, 31, 32, 0.50) 49.94%, #211F20 100%), linear-gradient(0deg, rgba(33, 31, 32, 0.20) 0%, rgba(33, 31, 32, 0.20) 100%);
}

.about-us-image.box-1 figure::before{
	background: linear-gradient(180deg, rgba(33, 31, 32, 0.00) 73.72%, rgba(33, 31, 32, 0.90) 100%);
}

.about-us-image.box-2 figure::before{
	background: linear-gradient(0deg, rgba(33, 31, 32, 0.20) 0%, rgba(33, 31, 32, 0.20) 100%);
}

.intro-video::before{
	background: linear-gradient(90deg, #211F20 0.01%, rgba(33, 31, 32, 0.60) 44.76%, rgba(33, 31, 32, 0.00) 59.95%);
}

/* Stronger than the template's: the testimonial cards show bright interiors, and the
   quote starts about halfway down the card */
.testimonial-item-image figure:before{
	background: linear-gradient(180deg, rgba(33, 31, 32, 0.00) 25%, rgba(33, 31, 32, 0.65) 52%, rgba(33, 31, 32, 0.92) 100%);
}

.page-header:before{
	background: linear-gradient(180deg, rgba(33, 31, 32, 0.00) 87%, rgba(33, 31, 32, 0.25) 90.49%, rgba(33, 31, 32, 0.50) 100%), linear-gradient(270deg, rgba(33, 31, 32, 0.00) 31.56%, rgba(33, 31, 32, 0.50) 49.94%, #211F20 100%), linear-gradient(0deg, rgba(33, 31, 32, 0.20) 0%, rgba(33, 31, 32, 0.20) 100%);
}

.expertise-item-image figure::before{
	background: linear-gradient(211deg, rgba(33, 31, 32, 0.00) 30%, rgba(33, 31, 32, 0.85) 100%);
}

.project-contact-item-image figure::before{
	background: linear-gradient(0deg, rgba(33, 31, 32, 0.70) 0%, rgba(33, 31, 32, 0.70) 100%);
}

.contact-us-image figure::before{
	background: linear-gradient(180deg, rgba(33, 31, 32, 0.00) 53.72%, rgba(33, 31, 32, 0.90) 100%);
}