/*--------------------------------------------------------------
# Site header & footer (home-2 design), loaded on every page so the
# chrome is identical site-wide. See pwl_site_chrome_styles().
--------------------------------------------------------------*/

body.pwl-chrome {
	--u: clamp(0.48px, 0.0625vw, 1px);

	--hp2-green:       #009949;
	--hp2-ink:         #1a1919;
	--hp2-muted:       #6d6d6d;
	--hp2-footer:      #222222;
	--hp2-page:        #fdfff8;

	--hp2-font:      "Inter";
	--hp2-font-btn:  'Sf-Pro-Family-Medium', 'Inter', sans-serif;
}

body.pwl-chrome .site-header {
	border-bottom: 0 !important;
	background: var(--hp2-page);
}

body.pwl-chrome .site-header .navbar {
	min-height: calc(93 * var(--u));
	padding: 0 !important;
}

body.pwl-chrome .site-header .navbar > .container {
	width: calc(1280 * var(--u));
	max-width: 100% !important;
	padding: 0 !important;
}

body.pwl-chrome .site-header .navbar > .container > .custom-logo-link .custom-logo {
	width: calc(171 * var(--u)) !important;
	max-width: none !important;
	max-height: none !important;
	height: auto !important;
	position: relative;
	top: calc(-0.5 * var(--u));
}

body.pwl-chrome .offcanvas-body {
	justify-content: flex-end !important;
	align-items: center !important;
}

/* The header markup uses Bootstrap's navbar-expand-xl, which only reveals the
   full nav (and hides the hamburger) at >=1200px. We want that switch to
   happen at the iPad breakpoint instead, so the hamburger is mobile-only. */
@media (min-width: 768px) {
	body.pwl-chrome .site-header .navbar {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	body.pwl-chrome .site-header .navbar-nav {
		flex-direction: row;
	}

	/* wp-content/themes/pwl/style.css forces this to a column below 991.98px
	   site-wide; the iPad breakpoint needs it back to a row. */
	body.pwl-chrome ul.site-header__menu {
		flex-direction: row;
	}

	body.pwl-chrome .site-header .navbar-toggler {
		display: none !important;
	}

	body.pwl-chrome .site-header .offcanvas {
		position: static;
		z-index: auto;
		flex-grow: 1;
		width: auto !important;
		height: auto !important;
		visibility: visible !important;
		background-color: transparent !important;
		border: 0 !important;
		transform: none !important;
		transition: none;
	}

	body.pwl-chrome .site-header .offcanvas .offcanvas-header {
		display: none;
	}

	body.pwl-chrome .site-header .offcanvas .offcanvas-body {
		display: flex;
		flex-grow: 1;
		padding: 0;
		overflow-y: visible;
	}
}

body.pwl-chrome ul.site-header__menu {
	gap: calc(36 * var(--u));
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

body.pwl-chrome ul.site-header__menu a {
	margin-right: 0 !important;
	font-family: var(--hp2-font) !important;
	font-weight: 400 !important;
	font-size: max(14px, calc(18 * var(--u))) !important;
	line-height: 1.444;
	color: var(--hp2-muted) !important;
	transition: color 0.2s ease;
}

body.pwl-chrome ul.site-header__menu a:hover,
body.pwl-chrome ul.site-header__menu a:focus-visible {
	color: var(--hp2-green) !important;
}

body.pwl-chrome .site-header__cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: calc(8 * var(--u));
	height: calc(48 * var(--u));
	min-height: 40px;
	padding: 0 calc(30 * var(--u)) !important;
	border-radius: calc(78 * var(--u)) !important;
	font-family: var(--hp2-font) !important;
	font-weight: 600 !important;
	font-size: max(14px, calc(16 * var(--u))) !important;
	line-height: 1.25 !important;
	justify-content: center;
}

body.pwl-chrome .site-header__cta::before {
	content: "";
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
	min-width: 16px;
	min-height: 16px;
	background: url("../images/home-2/header-btn-icon.svg") no-repeat center / contain;
}

body.pwl-chrome .site-footer {
	display: flex !important;
	align-items: center !important;
	min-height: calc(99 * var(--u));
	padding: 0 !important;
	border-top: 0 !important;
	background: var(--hp2-footer) !important;
}

body.pwl-chrome .site-footer__inner {
	width: calc(1264 * var(--u));
	max-width: 100% !important;
	padding: calc(12 * var(--u)) 0 !important;
}

body.pwl-chrome .site-footer__brand img {
	width: calc(135 * var(--u)) !important;
	max-width: none !important;
	max-height: none !important;
	height: auto !important;
}

body.pwl-chrome .site-footer__copy {
	font-family: var(--hp2-font-btn) !important;
	font-weight: normal !important;
	font-size: max(14px, calc(20 * var(--u))) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.3) !important;
}

body.pwl-chrome .site-header__cta:focus-visible {
	outline: 3px solid var(--hp2-green) !important;
	outline-offset: 3px !important;
}

@media (max-width: 767.98px) {
	body.pwl-chrome {
		--u: 1px;
	}

	body.pwl-chrome .site-header .navbar {
		min-height: 67px;
	}

	body.pwl-chrome .site-header .navbar > .container {
		width: 100%;
		max-width: none !important;
		padding: 0 28px 0 29px !important;
		flex-wrap: nowrap;
	}

	body.pwl-chrome .site-header .navbar > .container > .custom-logo-link .custom-logo {
		width: 93px !important;
		top: 0;
	}

	body.pwl-chrome .navbar-toggler {
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		box-shadow: none !important;
	}

	body.pwl-chrome .navbar-toggler-icon {
		width: 24px;
		height: 24px;
		background: none;
		content: url("../images/home-2/menu.svg");
	}

	body.pwl-chrome .navbar-toggler:focus-visible {
		outline: 3px solid var(--hp2-green);
		outline-offset: 2px;
	}

	body.pwl-chrome .offcanvas-body {
		flex-direction: column;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 24px;
	}

	body.pwl-chrome ul.site-header__menu {
		display: flex !important;
		flex-direction: column;
		gap: 16px;
		margin: 0;
	}

	body.pwl-chrome ul.site-header__menu a {
		font-size: 16px !important;
	}

	body.pwl-chrome .site-footer {
		min-height: 59px;
	}

	body.pwl-chrome .site-footer__inner {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 0 27px 0 29px !important;
	}

	body.pwl-chrome .site-footer__brand img {
		width: 81px !important;
	}

	body.pwl-chrome .site-footer__copy {
		font-family: 'Sf-Pro-Family-Regular', var(--hp2-font) !important;
		font-size: 13px !important;
		line-height: 17px !important;
		text-align: right;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.pwl-chrome nav#header-collapse .container {
		width: 100%;
		padding: 10px 25px !important;
	}

	body.pwl-chrome ul.site-header__menu li {
		margin: 0px;
	}

	body.pwl-chrome .site-header__cta {
		font-size: max(11px, calc(16 * var(--u))) !important;
	}

	body.pwl-chrome a.custom-logo-link {
		width: 150px;
	}
}