/*
 * R Walters Ltd: site styles on top of House Kit. Colours come from the site's global styles (brand blue, ink);
 * their cyan is used only on the dark header, where it passes contrast.
 */

:root {
	--rw-cyan: #00adef;
	--rw-dark: #31302c;
	--rw-dark-2: #44433e;
}

/* Dark header: the logo is white and cyan on a transparent background. */
.hk-header {
	background: var(--rw-dark);
	border-bottom: 3px solid var(--rw-cyan);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.hk-header {
		background: color-mix(in srgb, var(--rw-dark) 95%, transparent);
	}
}

.hk-header__name,
.hk-header__menu a,
.hk-header__toggle {
	color: #fff;
}

.hk-header__strap {
	color: #d1d5db;
}

.hk-header__menu a:hover,
.hk-header__menu .current-menu-item > a {
	color: var(--rw-cyan);
}

.hk-js .hk-header__nav,
.hk-header__menu li + li {
	border-color: var(--rw-dark-2);
}

.hk-header__menu a:focus-visible,
.hk-header__toggle:focus-visible {
	outline: 3px solid var(--rw-cyan);
	outline-offset: 2px;
}

/* No gap between the header and the first section. */
.wp-site-blocks > main#main {
	margin-block-start: 0;
}

.hk-header__brand .custom-logo {
	max-width: 170px;
	max-height: 45px;
}

@media (min-width: 1025px) {
	.hk-header__brand {
		flex: none;
	}

	.hk-header__brand .custom-logo {
		max-width: 220px;
		max-height: 58px;
	}

	.hk-header__row,
	.hk-header__nav,
	.hk-header__menu {
		gap: 20px;
	}

	.hk-header__menu a {
		font-size: 16px;
	}

	.hk-header__cta.wp-element-button {
		padding: 8px 16px;
		font-size: 16px;
	}
}

/* Two lists side by side on the sectors page stay readable on phones. */
.rw-lists .wp-block-column h2 {
	margin-top: 0;
}