/*
Theme Name: Aurora Dairies
Description: A custom WordPress theme for Aurora Dairies using the panels approach with ACF
Version: 1.0.0
Author: Aurora Dairies
Text Domain: auroradairies
*/

/* Base styles and typography */
body { 
	font-family: "Montserrat", sans-serif; 
	font-optical-sizing: auto; 
	font-style: normal; 
	font-size: 18px; 
	color: var(--grey);
	margin:0 !important;
}

body { 
	--padding-xlarge: 140px; 
	--padding-large: 124px; 
	--padding-medium: 100px; 
	--padding-small: 83px; 
	--blue: #003599; 
	--grey: #1f2137; 
}

h1, .h1 { 
	margin: 0 0 0 0; 
	font-size: 60px; 
	font-weight: 500; 
	line-height: 110%; 
}

h2, .h2 { 
	margin: 0 0 0.5em 0; 
	font-size: 26px; 
	font-weight: 600; 
	line-height: 1.43; 
}

h3, .h3 { 
	margin: 0 0 0.5em 0; 
	font-size: 24px; 
	font-weight: 600; 
	line-height: 1.43; 
}

h4, .h4 { 
	margin: 0 0 0.5em 0; 
	font-size: 21px; 
	font-weight: 600; 
	line-height: 1.35; 
}

p { 
	margin: 0 0 0.9em 0; 
	font-size: 18px; 
	font-weight: 400; 
	line-height: 1.56; 
}

ul { 
	margin: 0 0 0.9em 0; 
	padding: 0 0 0 20px; 
}

li { 
	margin: 0 0 0.3em 0; 
	font-weight: 500; 
}

a { 
	color: inherit; 
	text-decoration: none; 
	transition: background 0.4s, color 0.4s; 
}

/* Grid and layout */
.row { 
	margin: 0 -36px; 
}

.col { 
	padding: 0 36px; 
}

.container { 
	padding: 0 50px; 
}

/* Buttons */
.btn,
.panel-contact .wpcf7-submit { 
	display: inline-block; 
	line-height: 38px; 
	padding: 0 20px; 
	border-radius: 50px; 
	background: #333; 
	color: #fff; 
	font-size: 16px; 
	font-weight: 500; 
	font-family: "filson-pro", sans-serif; 
	text-transform: uppercase; 
}

.btn-primary,
.panel-contact .wpcf7-submit { 
	background: none; 
	color: var(--blue); 
	border: solid 1px var(--blue); 
	border-radius: 99px; 
}

.btn-primary:hover { 
	background: var(--blue); 
	color: #fff; 
}

/* Header styles */
header { 
	position: absolute; 
	z-index: 1900; 
	height: 127px; 
	left: 0; 
	top: 0; 
	right: 0; 
	padding-top: 14px; 
}

header.fixed { 
	position: fixed; 
	background: #fff; 
	box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); 
}

header img { 
	height: 102px; 
}

header .col-6 { 
	display: flex; 
	align-items: center; 
}

header .col-6:last-child { 
	justify-content: end; 
}

.header-right { 
	display: flex; 
	line-height: 48px; 
	height: 48px; 
}

.header-search { 
	/* Empty for now */
}

.header-links a { 
	padding: 0 42px; 
	font-size: 20px; 
	color: var(--blue); 
	font-weight: 600; 
}

.header-links a:hover { 
	color: var(--blue); 
}

.header-contact { 
	/* Empty for now */
}

/* Footer styles */
footer { 
	background: var(--blue); 
	color: #fff; 
	padding: 16px 0; 
}

footer img { 
	width: 100%; 
	max-width: 216px; 
}

footer a { 
	color: #fff; 
}

footer a:hover { 
	color: #fff !important; 
}

footer .col { 
	display: flex; 
	align-items: center; 
}

.footer-logo img { 
	max-width: 156px; 
}

.footer-links a { 
	margin-right: 72px; 
}

.footer-right { 
	justify-content: end; 
	font-size: 16px; 
	font-weight: 500; 
	line-height: 1.4; 
	color: #fff; 
}

.footer-right a { 
	display: inline-block; 
	white-space: nowrap; 
}

.footer-right a:before { 
	content: ' '; 
	display: inline-block; 
	width: 5px; 
	height: 5px; 
	border-radius: 50%; 
	background: #fff; 
	margin: 0 26px; 
}

/* Responsive breakpoints */
@media (min-width: 1300px) {
	.panel-intro .container { 
		max-width: 1220px; 
	}
}

@media (min-width: 1410px) {
	.container { 
		max-width: 1400px; 
	}
	
	.col-one-fifth { 
		width: 20%; 
		max-width: 20%; 
		flex: 0 0 20%; 
	}
}

@media (max-width: 1599px) {
	footer .row { 
		margin: 0 -15px; 
	}
	
	footer .col { 
		padding: 0 15px; 
	}
	
	.footer-links a { 
		margin-right: 32px; 
	}
}

@media (max-width: 1199px) {
	body { 
		--padding-xlarge: 80px; 
		--padding-large: 80px; 
		--padding-medium: 80px; 
		--padding-small: 80px; 
	}
	
	footer .footer-right { 
		font-size: 14px; 
	}
}

@media (max-width: 992px) {
	body { 
		--padding-xlarge: 60px; 
		--padding-large: 60px; 
		--padding-medium: 60px; 
		--padding-small: 60px; 
	}
	
	footer .footer-right { 
		display: block; 
		text-align: right; 
		font-size: 14px; 
		padding-top: 16px; 
	}
	
	footer .footer-right span { 
		display: block; 
		margin-bottom: 8px; 
	}
	
	footer .footer-right a { 
		display: block; 
	}
	
	footer .footer-right a:before { 
		display: none; 
	}
}

@media (max-width: 767px) {
	body { 
		font-size: 16px; 
		--padding-xlarge: 48px; 
		--padding-large: 48px; 
		--padding-medium: 48px; 
		--padding-small: 48px; 
	}
	
	h1, .h1 { 
		font-size: 30px !important; 
	}
	
	h2, .h2 { 
		font-size: 22px !important; 
		line-height: 1.4 !important; 
	}
	
	h3, .h3 { 
		font-size: 20px !important; 
	}
	
	h4, .h4 { 
		font-size: 18px !important; 
	}
	
	p { 
		font-size: 16px !important; 
		line-height: 1.72 !important; 
	}
	
	.btn { 
		padding: 0 16px; 
		line-height: 40px; 
		height: 40px; 
		font-size: 15px; 
	}
	
	.hidden-xs { 
		display: none; 
	}
	
	header { 
		height: 80px; 
		padding-top: 10px; 
	}
	
	header img { 
		height: 60px; 
	}
	
	.header-links a { 
		padding: 0 16px; 
		font-size: 15px; 
	}
	
	.container { 
		padding: 0 36px; 
	}
	
	footer .col { 
		display: block; 
		width: 100%; 
		flex: 1 1 100%; 
		max-width: 100%; 
		text-align: center; 
		padding: 0; 
	}
	
	.footer-links a { 
		margin: 0 16px; 
	}
	
	footer .footer-right span { 
		line-height: 1.8; 
		margin-bottom: 16px; 
	}
	
	footer .footer-right { 
		padding-bottom: 16px; 
	}
}