/*
Theme Name: JB French
Template: twentytwentyone
Description: Classic (non-block) child theme for JB French Dry Cleaners & Laundry, built on Twenty Twenty-One.
Author: JB French
Version: 1.0
*/

:root{
	--jbf-bg: #c5b695;
	--jbf-text: #3a3a3a;
	--jbf-line: rgba(0,0,0,.15);
}

html{ box-sizing: border-box; }
*, *:before, *:after{ box-sizing: inherit; }

body{
	background: var(--jbf-bg);
	color: #2c2c2c;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

a{ color: #2b6cb0; text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width: 100%; height: auto; }

.site{
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.site-header{
	text-align: center;
	padding: 40px 0 20px;
}

.site-branding a{ display: inline-block; }

.site-logo{
	width: 340px !important;
	max-width: 90% !important;
	height: auto !important;
}

.main-navigation{
	margin-top: 24px;
}

.nav-menu{
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.nav-menu li{
	margin: 0;
}

.nav-menu li a{
	color: var(--jbf-text);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 2px;
	font-weight: 700;
}

.nav-menu li a:hover{ opacity: .7; }

.nav-menu li:not(:last-child)::after{
	content: "\25C6";
	color: var(--jbf-text);
	font-size: 10px;
	margin: 0 18px;
	position: relative;
	top: -2px;
}

.header-divider,
.footer-divider{
	border: 0;
	border-top: 1px solid var(--jbf-line);
	margin: 0 0 40px;
}

.footer-divider{ margin: 50px 0 30px; }

/* Main content */
.site-main{
	padding-bottom: 40px;
	overflow: hidden;
}

.page-content p{ margin: 0 0 20px; }

.page-content img.alignleft{
	float: left;
	margin: 0 30px 20px 0;
}

.page-content img.alignright{
	float: right;
	margin: 0 0 20px 30px;
}

.page-content img.aligncenter{
	display: block;
	margin: 0 auto 30px;
}

/* Two-column layout (Services page) */
.jbf-columns{
	display: flex;
	gap: 40px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.jbf-columns > div{
	flex: 1 1 320px;
}

.jbf-icon-list{
	list-style: none;
	margin: 0;
	padding: 0;
}

.jbf-icon-list li{
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 9px 0;
	font-size: 17px;
}

.jbf-icon-list img{
	width: 20px;
	height: auto;
	flex-shrink: 0;
}

/* Contact / form pages */
.jbf-form-page img{
	display: block;
	margin: 0 auto 30px;
	max-width: 468px;
}

.jbf-billing{
	margin-top: 30px;
}

.jbf-billing h3{
	margin-bottom: 6px;
}

/* Ninja Forms tweaks to match original look */
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont textarea{
	background: #55565a !important;
	color: #fff !important;
	border: 0 !important;
}

.nf-form-cont textarea{
	background: #f5f5f5 !important;
	color: #333 !important;
}

.nf-form-cont .nf-field-label label{
	font-weight: 700 !important;
}

.nf-form-cont .submit-wrap input[type="submit"],
.nf-form-cont button.submit{
	background: #333 !important;
	color: #fff !important;
	border: 0 !important;
	text-transform: none;
}

/* Footer */
.site-footer{
	text-align: center;
	padding-bottom: 40px;
}

.social-icons{
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
}

.social-icons a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #c4c4c4;
	color: var(--jbf-text);
}

.social-icons a:hover{ color: #8d8d8d; }

.social-icons svg{ width: 18px; height: 18px; fill: currentColor; }

.site-copyright{
	color: #000;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 2px;
	margin: 0;
}

.site-copyright a{ color: #000; }
.site-copyright a:hover{ color: #e5ae47; }

@media (max-width: 600px){
	.nav-menu{ gap: 10px 0; }
	.nav-menu li:not(:last-child)::after{ margin: 0 10px; }
}