/*
Theme Name: Oak Child
description: Client Theme - Oak
Template: oak-parent
Version: 1.0.0
Text Domain: oak-child
Author: BCW
*/

/* ==========================================================================
   The Conrad Agency
   Built on Oak. The parent's base.css already wires the five Customizer
   colours to --color-1..5, so this file only sets type, layout and the
   sections the parent doesn't ship (locations, carrier logo wall).

     --color-1  #c91d1d  Conrad red    headings, nav, footer, feature labels
     --color-2  #9c9c9c  grey          links, buttons, image borders
     --color-3  #ffffff  white         nav/footer text
     --color-4  #e0e0e0  light grey    footer link hover, heading rules
     --color-5  #1a1a1a  near black    body copy
   ========================================================================== */

/* = TYPE =================================================================== */
body,
.navbar-default .navbar-nav>li>a,
.gform_wrapper .gform_body input,
.gform_wrapper .gform_body textarea,
.gform_wrapper .gform_footer input {
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
	color: #555;
	-webkit-font-smoothing: antialiased;
}
p {
	margin: 0 0 18px;
	line-height: 1.75;
}
h1,
h2,
h3,
h4 {
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 {
	font-size: 32px;
	border-bottom: 0;
	margin-bottom: 22px;
}
h2 {
	font-size: 26px;
	border-bottom: 0;
	margin: 0 0 18px;
}
h3 {
	font-size: 19px;
}
main {
	color: #555;
	padding: 55px 0 60px;
}
.main-inner {
	padding-top: 0;
}
a {
	color: var(--color-1);
	transition: color 0.15s ease;
}
a:focus,
a:hover {
	color: color-mix(in oklab, var(--color-1) 20%, white);
}
:focus-visible {
	outline: 2px solid var(--color-1);
	outline-offset: 2px;
}

/* = HEADER ================================================================= */
header {
	border-bottom: 0;
	padding: 8px 0 8px;
}
header .logo img {
	max-width: 260px;
	height: auto;
	max-height: 104px;
}
.c2a {
	font-weight: 700;
	padding-top: 0px;
}
.tagline {
	font-size: 16px;
	font-style: italic;
	color: var(--color-1);
	margin-bottom: 8px;
	letter-spacing: 0.01em;
	font-weight: 900;
}

/* Three offices sit side by side in the top right. */
.header-locations {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0 34px;
}
.header-location {
	text-align: right;
	line-height: 1.35;
}
.header-location-name {
	display: block;
	font-size: 14px;
	font-weight: 900;
	text-transform: uppercase;
	color: #1a1a1a;
}
.header-location-phone {
	font-size: 16px;
}
.header-location-phone,
.header-location-phone:focus,
.header-location-phone:hover {
	display: block;
	color: var(--color-1);
	text-decoration: none;
}
.c2a .header-location-phone:hover {
	text-decoration: underline;
}

header .social-icons {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 400;
}
header .social-icons .link {
	display: inline-block;
	margin-left: 18px;
}
header .social-icons .link a,
header .social-icons .link a:focus,
header .social-icons .link a:hover {
	color: #666;
	font-weight: 400;
	text-decoration: none;
}
header .social-icons .link a:hover {
	color: var(--color-1);
}

/* = NAVIGATION ============================================================= */
nav {
	background: var(--color-1);
}
/* Bootstrap's 20px navbar margin collapses out of <nav> and leaves a white
   band between the red bar and the banner. */
nav .navbar {
	margin-bottom: 0;
	min-height: 0;
}
.navbar .navbar-collapse {
	margin-top: 0;
}
.navbar-default .navbar-nav>li>a {
	font-size: 15px;
	font-weight: 700;
	padding: 13px 22px;
	letter-spacing: 0.02em;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
	background-color: rgba(0, 0, 0, 0.18);
	color: #fff;
}
nav:after {
	content: none;
}
.navbar .menu-main-menu-container .navbar-nav {
	display: flex;
	justify-content: center;
	margin-bottom: 0;
}
.navbar .menu-main-menu-container .navbar-nav li {
	float: none;
}
.navbar .menu-main-menu-container .navbar-nav li a {
	display: block;
	font-weight: 900;
}

/* = BANNER ================================================================= */
#banner {
	margin-top: 0;
}
/* container-fluid's 15px padding normally cancels the row's -15px margin.
   Zeroing the padding for a full-bleed banner leaves that negative margin
   behind, which drags the slide 15px off the left edge, so clear both. */
#banner .banner-inner,
#banner .banner-inner>.row {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
/* The source slides are 16:9; the design wants a wide letterbox, so crop
   rather than letting a 1600px photo push the fold off screen. */
#banner .slider-img {
	width: 100%;
	height: clamp(260px, 35vw, 600px);
	object-fit: cover;
	object-position: center 58%;
}
.carousel-indicators {
	bottom: 12px;
}
.carousel-indicators li,
.carousel-indicators .active {
	width: 11px;
	height: 11px;
	margin: 0 4px;
	border: 2px solid #fff;
}
.carousel-indicators li {
	background-color: rgba(255, 255, 255, 0.35);
}

/* = FEATURE BOXES =========================================================
   Five services across on desktop; Bootstrap 3 has no fifths, so the row is
   a flex track instead of a grid. */
#feature {
	background: #fff;
	padding: 38px 0 32px;
}
.feature-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -8px;
}
.feature-col {
	width: 20%;
	padding: 0 8px;
	margin-bottom: 16px;
}
.feature-box {
	border: 0;
	box-shadow: none;
	background: none;
}
.feature-box:hover {
	transform: none;
}
.feature-box img {
	width: 100%;
	height: 128px;
	object-fit: cover;
	display: block;
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
}
.feature-box .feature-heading {
	position: static;
	width: 100%;
	font-size: 14px;
	padding: 9px 6px;
	margin-top: 8px;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}
.feature-box a:hover .feature-heading,
.feature-box a:focus .feature-heading {
	background-color: #8f1414;
}
.feature-box a:hover img,
.feature-box a:focus img {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* = HOME - MAIN CONTENT ==================================================== */
.home main .main-inner section {
	max-width: 820px;
	margin: 0 auto;
	float: none;
}
.home main h1 {
	color: var(--color-1);
}

/* = HOME - CARRIER LOGO WALL ============================================== */
.providers-section {
	background: #f7f7f7;
	padding: 50px 0 54px;
	text-align: center;
}
.providers-section h2 {
	color: var(--color-1);
}
.providers-section .content {
	max-width: 760px;
	margin: 0 auto 28px;
}
.providers-section .content p:last-child {
	margin-bottom: 0;
}
.providers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.provider {
	width: calc(16.666% - 14px);
	min-width: 132px;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 3px;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 104px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.provider a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.provider img {
	max-height: 68px;
	width: auto;
	max-width: 100%;
	margin: 0;
	border: 0;
}
.provider:hover {
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

/* = INSURANCE (SERVICES) PAGE =============================================
   The banner on this page is the carrier logo strip, so it needs breathing
   room rather than the edge-to-edge treatment a photo banner gets. */
.page-template-page-services #banner {
	background: #fff;
	padding: 18px 0 6px;
}
.page-template-page-services #banner img {
	max-width: 1100px;
	margin: 0 auto;
}
.page-template-page-services main {
	padding-bottom: 20px;
}
.page-template-page-services main h1 {
	color: var(--color-1);
}
.page-template-page-services main .main-inner section {
	max-width: 100%;
	margin: 0 auto;
	float: none;
}

#services-section {
	padding-bottom: 60px;
}
.service {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto 28px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 3px;
	padding: 24px;
}
/* Alternate which side the photo sits on, the way the mockup does. */
.service:nth-child(even) {
	flex-direction: row-reverse;
}
.service:nth-child(even) .service-content {
	text-align: right;
}
.service .service-image {
	width: 42%;
	float: none;
	padding: 0;
}
.service .service-image img {
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 2px;
}
.service .service-content {
	width: 58%;
	float: none;
	padding: 0 28px;
}
.service .service-content-full {
	width: 100%;
	text-align: center;
	padding: 0;
}
.service .service-content h2,
.service .service-content h3 {
	color: var(--color-1);
	font-size: 23px;
	margin-bottom: 12px;
}
.service .service-content p:last-child {
	margin-bottom: 0;
}

/* = ABOUT PAGE ============================================================= */
.page-template-page-about #banner img {
	max-width: 1000px;
	margin: 26px auto 0;
}
.page-template-page-about main {
	text-align: center;
	padding-bottom: 45px;
}
.page-template-page-about main h1,
.page-template-page-about main h2 {
	color: var(--color-1);
}
.page-template-page-about main h2 {
	margin-top: 38px;
}
.page-template-page-about main .main-inner section {
	max-width: 800px;
	margin: 0 auto;
	float: none;
}

.locations-section {
	background: #f7f7f7;
	padding: 46px 0 50px;
	text-align: center;
}
.locations-section h2 {
	color: var(--color-1);
	margin-bottom: 28px;
}
.locations {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}
.location {
	flex: 1 1 260px;
	max-width: 320px;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 3px;
	padding: 22px 18px 24px;
}
.location-name {
	font-size: 17px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1a1a1a;
	margin-bottom: 12px;
	border-bottom: 2px solid hsl(0 75% 45% / .2);
	padding-bottom: 8px;
}
.location-address {
	font-style: normal;
	margin-bottom: 10px;
}
.location-address a,
.location-address a:focus,
.location-address a:hover {
	color: #555;
	font-weight: 400;
}
.location-address a:hover {
	color: var(--color-1);
}
.location-phone {
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-1);
}
.locations-closing {
	margin: 30px 0 0;
	font-size: 18px;
	font-weight: 700;
}

/* = CONTACT FORM BAND =====================================================
   The parent paints the ACF background image behind #bottom-feature; the
   overlay keeps the form legible over whatever photo is set. */
#bottom-feature {
	padding: 0 0 46px;
	position: relative;
	background-attachment: scroll;
	background-position: center;
}
#bottom-feature:before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(42, 62, 97, 0.82);
}
#bottom-feature h2 {
	position: relative;
	z-index: 1;
	font-size: 25px;
	padding: 13px;
	margin-bottom: 34px;
}
#bottom-feature .container {
	position: relative;
	z-index: 1;
}
#footer-contact {
	max-width: 540px;
	margin: 0 auto;
	float: none;
}
/* One stacked column, full width - see assets/js/default-scripts.js, which
   drops the parent theme's two-column wrap. */
#footer-contact .gform_fields {
	display: block;
}
#footer-contact .gform_fields>.gfield {
	width: 100%;
	max-width: 100%;
	grid-column: 1 / -1;
}
#footer-contact input,
#footer-contact textarea {
	height: 38px;
	border-radius: 3px;
	border: 1px solid #ccc;
	box-shadow: none;
}
#footer-contact textarea {
	height: 110px;
}
#footer-contact .gform_button {
	width: 100%;
	padding: 11px;
	border-radius: 3px;
	letter-spacing: 0.08em;
	transition: background-color 0.15s ease;
}
#footer-contact .gform_wrapper .gform_footer {
	margin: 12px 0 0;
	padding: 0;
}
#footer-contact .gform_wrapper .validation_message,
#footer-contact .gform_wrapper .gfield_validation_message {
	background: #fff;
	border-radius: 3px;
}

/* = CONTACT INFO BAR ======================================================= */
#contact-info {
	background: #e0e0e0;
	padding: 12px 0;
	font-size: 14px;
}
#contact-info .contact-info,
#contact-info a {
	color: #333;
}
#contact-info a:focus,
#contact-info a:hover {
	color: var(--color-1);
}
#contact-info .spacer {
	color: #aaa;
	margin: 0 8px;
}
#contact-info .social-icons {
	display: inline-block;
}
#contact-info .social-icons .link {
	display: inline-block;
	margin-left: 6px;
}

/* = FOOTER ================================================================= */
footer {
	padding: 16px 0 14px;
}
footer .sitemap .list-inline>li>a {
	font-size: 15px;
	padding: 0 12px;
}
.copyright a,
.copyright a:focus,
.copyright a:hover {
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
}

/* = RESPONSIVE ============================================================= */
@media screen and (max-width: 1199px) {
	.provider {
		width: calc(25% - 12px);
	}
}
@media screen and (max-width: 991px) {
	header .logo img {
		margin: 0 auto 14px;
		max-width: 200px;
	}
	/* Oak hides the whole call-to-action block on small screens and leans on the
     fixed social bar, which only carries one phone number. Three offices is the
     point of this site, so the locations stay visible on mobile. */
	header .c2a {
		display: block;
	}
	.c2a {
		text-align: center;
		padding-top: 0;
	}
	.header-locations {
		justify-content: center;
		gap: 12px 26px;
	}
	header .social-icons .link {
		margin: 0 9px;
	}
	.feature-col {
		width: 33.333%;
	}
	.feature-box img {
		height: 150px;
	}
	.service .service-image,
	.service .service-content {
		width: 100%;
	}
	.service .service-content {
		padding: 20px 0 0;
		text-align: center;
	}
	.service:nth-child(even) .service-content {
		text-align: center;
	}
}
@media screen and (max-width: 767px) {
	h1 {
		font-size: 27px;
	}
	h2 {
		font-size: 23px;
	}
	main {
		padding: 35px 0 40px;
	}
	.header-locations {
		gap: 14px 22px;
	}
	.feature-col {
		width: 50%;
	}
	.feature-box {
		margin: 0;
		max-width: none;
	}
	.feature-box img {
		height: 120px;
	}
	.provider {
		width: calc(33.333% - 11px);
		min-width: 0;
		min-height: 74px;
		padding: 10px;
	}
	.provider img {
		max-height: 42px;
	}
	.providers-section,
	.locations-section {
		padding: 34px 0 38px;
	}
	.service {
		padding: 18px;
	}
	#contact-info .contact-info {
		display: block;
	}
	#contact-info .social-icons {
		margin-top: 6px;
	}
	#bottom-feature {
		padding-bottom: 34px;
	}
	#footer-contact {
		padding: 0 15px;
	}
}
@media screen and (max-width: 480px) {
	.feature-col {
		width: 100%;
		max-width: 320px;
	}
	.feature-box img {
		height: 150px;
	}
	.provider {
		width: calc(50% - 8px);
	}
	/* Keep all three offices on one line rather than orphaning the third. */
	.header-locations {
		gap: 10px;
		flex-direction: column;
		align-items: center;
	}
	.header-location {
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
	}
	.header-location-phone {
		font-size: 14px;
	}
	header .social-icons {
		flex-direction: column;
		gap: 20px;
	}
	.tagline {
		max-width: 250px;
		margin: 0 auto 15px;
	}
}