/*
 * DWL new header and footer (Figma 1:720 bands 1a and 10, specs/01-homepage.md 4.1 and 4.10).
 * Restyles the stanleywp child theme's existing header.php / footer.php markup. Every rule is
 * scoped to body.dwl-chrome, which is only present on the DWL Homepage template, or sitewide
 * once Settings > DWL Site "Use the new header and footer on every page" is on.
 */

body.dwl-chrome {
	--dwl-ink: #1d1d1d;
	--dwl-aqua: #00e9cf;
	--dwl-teal: #009d8b;
	--dwl-mint: #e5fcfa;
	--dwl-field-border: rgba(53, 64, 71, 0.4);
	--dwl-field-placeholder: rgba(53, 64, 71, 0.5);
}

/* ---------- Shared: 1156px content column (Figma gutters 142 at 1440) ---------- */

@media (min-width: 1200px) {
	body.dwl-chrome header .container,
	body.dwl-chrome #footer .container {
		width: 1186px;
	}
}

/* ---------- Header ---------- */

body.dwl-chrome header {
	border-bottom: 1px solid rgba(29, 29, 29, 0.1);
	background: #fff;
}

body.dwl-chrome .navbar-inverse {
	background: transparent;
	min-height: 0;
	border: 0;
}

body.dwl-chrome .inner-header {
	padding-top: 24px;
	padding-bottom: 24px;
}

body.dwl-chrome .expand-search {
	display: none;
}

body.dwl-chrome #logo {
	margin: 0;
}

body.dwl-chrome #logo img {
	display: block;
	height: 57px;
	max-height: none;
	width: auto;
	opacity: 1;
}

body.dwl-chrome .navbar-nav .chev {
	display: none;
}

/* Primary pill button, shared with the homepage buttons in home.css */
body.dwl-chrome .navbar-nav > li.menu-cta > a {
	display: inline-flex;
	align-items: center;
	height: 59px;
	padding: 8px 26px;
	border-radius: 58px;
	background: var(--dwl-aqua);
	color: var(--dwl-ink);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

body.dwl-chrome .navbar-nav > li.menu-cta > a::after {
	display: none;
}

body.dwl-chrome .navbar-nav > li.menu-cta > a:focus {
	background: var(--dwl-aqua);
	color: var(--dwl-ink);
}

/* Hover inverts, matching the homepage buttons (home.css). */
body.dwl-chrome .navbar-nav > li.menu-cta > a,
body.dwl-chrome .dwl-form--newsletter button.wpforms-submit {
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.dwl-chrome .navbar-nav > li.menu-cta > a:hover,
body.dwl-chrome .navbar-nav > li.menu-cta > a:focus-visible {
	background: var(--dwl-ink);
	color: var(--dwl-aqua);
	box-shadow: inset 0 0 0 1px var(--dwl-aqua);
}

body.dwl-chrome .navbar-nav > li.menu-cta > a:focus-visible {
	outline: 2px solid var(--dwl-ink);
	outline-offset: 3px;
}

@media (min-width: 771px) {
	body.dwl-chrome .inner-header {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	body.dwl-chrome .navbar-header {
		float: none;
		flex: none;
	}

	body.dwl-chrome .navbar-collapse {
		flex: 1;
		padding: 0;
	}

	body.dwl-chrome .navbar-nav.navbar-right {
		float: none !important;
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0;
	}

	body.dwl-chrome .navbar-nav::before,
	body.dwl-chrome .navbar-nav::after {
		display: none;
	}

	/* Free space splits equally either side of the link group, as in Figma (space-between). */
	body.dwl-chrome .navbar-nav > li:first-child {
		margin-left: auto;
	}

	body.dwl-chrome .navbar-nav > li.menu-cta {
		margin-left: auto;
	}

	body.dwl-chrome .navbar-nav > li {
		float: none;
	}

	body.dwl-chrome .navbar-inverse .navbar-nav > li:not(.menu-cta) > a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 0;
		height: 24px;
		color: var(--dwl-ink);
		font-size: 14px;
		line-height: 20px;
		font-weight: 400;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* Keep the theme's teal hover underline, re-anchored under the flex link. */
	body.dwl-chrome .navbar-nav > li:not(.menu-cta) > a::after {
		top: 100%;
		margin-top: 6px;
	}

	body.dwl-chrome .navbar-nav .caret {
		display: inline-block;
		width: 16px;
		height: 24px;
		margin: 0;
		border: 0;
		vertical-align: middle;
		background-color: currentColor;
		-webkit-mask: url(../img/icon-chevron-down.svg) center / 16px 24px no-repeat;
		mask: url(../img/icon-chevron-down.svg) center / 16px 24px no-repeat;
	}

	/* Dropdowns open on hover as well as click on desktop. */
	body.dwl-chrome .navbar-nav > li.dropdown:hover > .dropdown-menu,
	body.dwl-chrome .navbar-nav > li.dropdown:focus-within > .dropdown-menu {
		display: block;
	}

	body.dwl-chrome .navbar-nav > li > .dropdown-menu {
		margin-top: 0;
		padding: 12px 0;
		min-width: 260px;
		border: 0;
		border-top: 4px solid var(--dwl-aqua);
		border-radius: 0 0 8px 8px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}

	body.dwl-chrome .navbar-nav > li.dropdown::before {
		/* Hover bridge so the panel does not close crossing the gap below the link. */
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 12px;
	}

	body.dwl-chrome .navbar-nav > li > .dropdown-menu {
		top: calc(100% + 12px);
	}

	body.dwl-chrome .dropdown-menu > li > a {
		padding: 8px 20px;
		color: var(--dwl-ink);
		font-size: 16px;
		font-weight: 300;
		white-space: nowrap;
	}
}

/* Homepage: header sits over the hero photo. */
@media (min-width: 771px) {
	body.dwl-home header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		background: transparent;
		border-bottom: 0;
	}

	body.dwl-home .inner-header {
		padding-top: 60px;
		padding-bottom: 0;
	}

	body.dwl-home .navbar-inverse .navbar-nav > li:not(.menu-cta) > a,
	body.dwl-home .navbar-inverse .navbar-nav > li:not(.menu-cta) > a:hover,
	body.dwl-home .navbar-inverse .navbar-nav > li:not(.menu-cta) > a:focus,
	body.dwl-home .navbar-inverse .navbar-nav > .open > a {
		color: #fff;
	}

	body.dwl-home #logo img {
		-webkit-filter: brightness(0) invert(1);
		filter: brightness(0) invert(1);
	}
}

/* Narrower desktops: tighten the row so the links, logo and button still fit. */
@media (min-width: 771px) and (max-width: 1199px) {
	body.dwl-chrome .inner-header {
		flex-wrap: wrap;
		row-gap: 20px;
	}

	body.dwl-chrome .navbar-collapse {
		flex-basis: 100%;
	}

	body.dwl-chrome .navbar-nav > li:first-child {
		margin-left: 0;
	}

	body.dwl-chrome .navbar-nav.navbar-right {
		gap: 12px;
	}

	body.dwl-chrome .navbar-inverse .navbar-nav > li:not(.menu-cta) > a {
		font-size: 13px;
	}

	body.dwl-chrome .navbar-nav > li.menu-cta > a {
		height: 48px;
		padding: 8px 22px;
		font-size: 16px;
	}

	body.dwl-home .inner-header {
		padding-top: 32px;
	}
}

/*
 * Tablets: Bootstrap fixes the container at 750px below 992, and the link row plus Contact Us
 * (about 850px) overflowed the page. Contact Us moves up beside the logo, the chevrons go (as
 * on mobile), and the links get the whole second row. A longer menu wraps rather than overflows.
 */
@media (min-width: 771px) and (max-width: 991px) {
	body.dwl-chrome .inner-header {
		position: relative;
	}

	body.dwl-chrome .navbar-collapse {
		min-width: 0;
	}

	body.dwl-chrome .navbar-nav.navbar-right {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	/* The theme pulls the first link 18px left at these widths; line it up with the logo. */
	body.dwl-chrome .navbar-nav > li:first-child > a {
		margin-left: 0;
	}

	body.dwl-chrome .navbar-nav > li.menu-cta {
		position: absolute;
		top: 28px; /* inner-header padding 24 + (57px logo - 48px button) / 2 */
		right: 0;
		margin: 0;
	}

	body.dwl-home .navbar-nav > li.menu-cta {
		top: 36px; /* homepage inner-header padding is 32 */
	}

	body.dwl-chrome .navbar-nav .caret {
		display: none;
	}

	/* The last links' panels open leftwards so they stay on screen. */
	body.dwl-chrome .navbar-nav > li.dropdown:nth-last-child(-n+4) > .dropdown-menu {
		left: auto;
		right: 0;
	}
}

/* Mobile: keep the theme's hamburger menu, tidy the colours. */
@media (max-width: 770px) {
	body.dwl-chrome #logo {
		margin: 15px;
	}

	body.dwl-chrome #logo img {
		height: 48px;
	}

	body.dwl-chrome .navbar-nav .caret {
		display: none;
	}

	body.dwl-chrome .navbar-inverse .navbar-nav > li.menu-cta {
		padding: 16px 20px 20px;
	}

	body.dwl-chrome .navbar-inverse .navbar-nav > li.menu-cta > a {
		justify-content: center;
		width: 100%;
		border-top: 0;
		padding: 8px 26px;
	}

	body.dwl-chrome .navbar-inverse .navbar-nav > li:nth-last-child(2) > a {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
}

/* ---------- Footer ---------- */

body.dwl-chrome #footer {
	background: var(--dwl-ink);
}

body.dwl-chrome #footer::after {
	display: none;
}

body.dwl-chrome .inner-footer {
	padding-top: 69px;
	padding-bottom: 62px;
}

body.dwl-chrome .inner-footer > .row {
	display: grid;
	grid-template-columns: 294px 197px 1fr 369px;
	grid-template-rows: auto 1fr;
	column-gap: 0;
	margin: 0;
}

body.dwl-chrome .inner-footer > .row::before,
body.dwl-chrome .inner-footer > .row::after {
	display: none;
}

body.dwl-chrome .inner-footer > .row > [class*="footer-col-"] {
	float: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
}

body.dwl-chrome .footer-col-4 {
	grid-column: 1;
	grid-row: 1;
	display: block !important;
}

body.dwl-chrome .footer-col-4 img {
	display: block;
	height: 60px;
	max-height: none;
	width: auto;
}

body.dwl-chrome .footer-col-1 {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding-top: 1px !important;
}

body.dwl-chrome .footer-col-2 {
	grid-column: 3;
	grid-row: 1 / span 2;
	display: block !important;
	padding-top: 1px !important;
}

body.dwl-chrome .inner-footer > .row > .footer-col-3 {
	display: contents;
}

body.dwl-chrome .footer-col-3 .widget_custom_html,
body.dwl-chrome .footer-col-3 .widget_text {
	grid-column: 1;
	grid-row: 2;
	padding-top: 40px;
}

body.dwl-chrome .footer-col-3 .widget_custom_html .footer-title,
body.dwl-chrome .footer-col-3 .widget_text .footer-title {
	display: none;
}

body.dwl-chrome .footer-col-3 .widget_dwl_newsletter {
	grid-column: 4;
	grid-row: 1 / span 2;
	padding-top: 1px;
}

body.dwl-chrome #footer .widget-wrapper {
	padding-bottom: 0;
}

body.dwl-chrome #footer h2 {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 19px;
	font-weight: 500;
	color: #fff;
}

body.dwl-chrome #footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #fff;
}

body.dwl-chrome #footer .menu li {
	margin: 0 0 16px;
	line-height: 18px;
}

body.dwl-chrome #footer a {
	font-weight: 400;
	color: #fff;
}

/* Contact details under the logo */
body.dwl-chrome #footer .custom-html-widget li {
	margin: 0 0 8px;
	line-height: 21px;
}

body.dwl-chrome #footer .custom-html-widget li:last-child {
	margin-bottom: 0;
}

body.dwl-chrome #footer .custom-html-widget li:not(:has(a)) {
	font-weight: 300;
	color: #eaeaea;
}

/* Newsletter */
body.dwl-chrome .dwl-newsletter__intro {
	max-width: 372px;
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 21px;
	font-weight: 400;
	color: #fff;
}

body.dwl-chrome .dwl-form--newsletter .wpforms-container {
	margin: 0;
}

body.dwl-chrome .dwl-form--newsletter .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

body.dwl-chrome .dwl-form--newsletter .wpforms-form .wpforms-field {
	padding: 0;
	margin: 0;
}

body.dwl-chrome .dwl-form--newsletter .wpforms-form .dwl-f-email {
	grid-column: 1 / -1;
}

body.dwl-chrome .dwl-form--newsletter div.wpforms-container-full .wpforms-form input.wpforms-field-large {
	width: 100%;
	max-width: none;
	height: 50px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--dwl-field-border);
	border-radius: 0;
	background: var(--dwl-mint);
	box-shadow: none;
	font-family: 'National', Arial, sans-serif;
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: var(--dwl-ink);
}

body.dwl-chrome .dwl-form--newsletter div.wpforms-container-full .wpforms-form input::placeholder {
	color: var(--dwl-field-placeholder);
	opacity: 1;
}

body.dwl-chrome .dwl-form--newsletter .wpforms-form .wpforms-submit-container {
	margin: 16px 0 0;
	padding: 0;
}

body.dwl-chrome .dwl-form--newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit {
	margin: 0;
	text-transform: none;
	width: 138px;
	height: 46px;
	padding: 8px 26px;
	border: 0;
	border-radius: 78px;
	background: var(--dwl-aqua);
	box-shadow: none;
	font-family: 'National', Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--dwl-ink);
}

body.dwl-chrome .dwl-form--newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit:hover,
body.dwl-chrome .dwl-form--newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit:focus-visible {
	background: var(--dwl-ink);
	background-image: none;
	color: var(--dwl-aqua);
	box-shadow: inset 0 0 0 1px var(--dwl-aqua);
}

body.dwl-chrome .dwl-form--newsletter .wpforms-confirmation-container-full {
	margin: 0;
	padding: 12px 16px;
	border: 0;
	background: var(--dwl-mint);
	color: var(--dwl-ink);
}

body.dwl-chrome .dwl-form--newsletter .wpforms-confirmation-container-full p {
	margin: 0;
	color: var(--dwl-ink);
}

/* Bottom bar */
body.dwl-chrome #footer hr {
	background-color: #555;
}

body.dwl-chrome .footer-bottom {
	padding-top: 41px;
	padding-bottom: 86px;
}

body.dwl-chrome #footer .footer-bottom .menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 33px;
	row-gap: 12px;
}

body.dwl-chrome #footer .footer-bottom .menu li {
	margin: 0;
	line-height: 18px;
}

body.dwl-chrome .copyright p {
	margin: 0;
	font-size: 14px;
	line-height: 22.4px;
	font-weight: 300;
	color: #fff;
	text-align: right;
}

@media (max-width: 1199px) {
	body.dwl-chrome .inner-footer > .row {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		row-gap: 40px;
	}

	body.dwl-chrome .footer-col-4 { grid-column: 1; grid-row: 1; }
	body.dwl-chrome .footer-col-3 .widget_custom_html,
	body.dwl-chrome .footer-col-3 .widget_text { grid-column: 1; grid-row: 2; padding-top: 0; }
	body.dwl-chrome .footer-col-3 .widget_dwl_newsletter { grid-column: 2; grid-row: 1 / span 2; }
	body.dwl-chrome .footer-col-1 { grid-column: 1; grid-row: 3; }
	body.dwl-chrome .footer-col-2 { grid-column: 2; grid-row: 3; }
}

/* Footer newsletter switched off (Settings > DWL Site): on tablets, logo and contact details,
   Navigation and Popular FAQs sit side by side as on desktop, instead of leaving the newsletter's
   half of the two-column grid empty. Without :has() support the two-column layout stays. */
@media (min-width: 768px) and (max-width: 1199px) {
	body.dwl-chrome .inner-footer > .row:not(:has(.widget_dwl_newsletter)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
	}

	body.dwl-chrome .inner-footer > .row:not(:has(.widget_dwl_newsletter)) > .footer-col-1 { grid-column: 2; grid-row: 1 / span 2; }
	body.dwl-chrome .inner-footer > .row:not(:has(.widget_dwl_newsletter)) > .footer-col-2 { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 767px) {
	body.dwl-chrome .inner-footer {
		padding-top: 48px;
		padding-bottom: 40px;
	}

	body.dwl-chrome .inner-footer > .row {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	body.dwl-chrome .footer-col-4,
	body.dwl-chrome .footer-col-3 .widget_custom_html,
	body.dwl-chrome .footer-col-3 .widget_text,
	body.dwl-chrome .footer-col-3 .widget_dwl_newsletter,
	body.dwl-chrome .footer-col-1,
	body.dwl-chrome .footer-col-2 {
		grid-column: 1;
		grid-row: auto;
	}

	body.dwl-chrome .footer-col-3 .widget_dwl_newsletter { order: 5; }
	body.dwl-chrome .footer-col-4 { order: 1; }
	body.dwl-chrome .footer-col-3 .widget_custom_html,
	body.dwl-chrome .footer-col-3 .widget_text { order: 2; }
	body.dwl-chrome .footer-col-1 { order: 3; }
	body.dwl-chrome .footer-col-2 { order: 4; }

	body.dwl-chrome .footer-bottom {
		padding-top: 32px;
		padding-bottom: 40px;
	}

	body.dwl-chrome .copyright p {
		margin-top: 20px;
		text-align: left;
	}
}