/* Refresh: a full-width banner, a navy menu bar, member cards. Colours from the logo and the banner. */

:root {
	--navy: #254582;
	--navy-deep: #1b3463;
	/* The logo's red marks the current page and hover; a shade darker is used for text and buttons, so it reads on the tint too. */
	--red-logo: #e02142;
	--red: #c8102e;
	--red-deep: #a50d26;
	/* The banner's blue, #9ea0eb, is too pale for text: this is the same hue, darker and less saturated. */
	--blue: #3f4699;
	--banner-blue: #9ea0eb;
	--tint: #e7e8fa;
	--tint-soft: #f4f4fd;
	--text: #333333;
	--muted: #545a72;
	--line: #d7d9ef;
}

* { box-sizing: border-box; }

/* A full-height column, so the footer sits at the bottom of the window on a short page. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: #ffffff;
	color: var(--text);
	font: 16px/1.65 Arial, Helvetica, sans-serif;
}

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

a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 { color: var(--blue); line-height: 1.3; }
h1 { font-size: 28px; margin: 28px 0 16px; }
h2 { font-size: 21px; margin: 36px 0 12px; }
h3 { font-size: 17px; }
h4, h5, h6 { font-size: 16px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 1001; background: #ffffff; padding: 8px 12px; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Logged in: a slim blue bar with Edit this page and Admin (admins) and Log Out, so the members' menu keeps to one line. */
.utility { background: var(--navy); color: #ffffff; }
.utility .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 4px 20px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.utility-edit { color: #fcd34d; font-weight: bold; }
.utility-edit:hover { color: #ffffff; }
.utility .admin-link { color: #ffffff; }
.utility .admin-link:hover { color: #fcd34d; }
.utility .account { margin: 0; }
.logout {
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.logout:hover { color: #fcd34d; }
.utility a:focus-visible, .utility button:focus-visible { outline-color: #ffffff; }

/* Guests log in from the menu bar. */
.account-link {
	display: block;
	padding: 6px 14px;
	border: 0;
	border-radius: 4px;
	background: var(--red);
	color: #ffffff;
	font: bold 16px/1.6 Arial, Helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.account-link:hover { background: var(--red-deep); color: #ffffff; }

/* Banner: its left edge is white and its right edge the banner blue, so a split band hides its ends. */

.masthead { background: linear-gradient(90deg, #ffffff 50%, var(--banner-blue) 50%); }
.brand {
	display: block;
	max-width: 950px;
	margin: 0 auto;
	aspect-ratio: 950 / 170;
	background: url(/img/bcfbannerfinal.jpg) no-repeat center top / 100% auto;
	text-decoration: none;
}
/* The banner shows the name as a picture, so the text is only for screen readers until phones show it. */
.brand-name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	color: var(--navy);
}

/* Menu bar */

.nav-bar { background: var(--navy); }
.nav-bar .wrap { display: flex; align-items: stretch; }
.menu-toggle { display: none; }
.nav-panel { display: flex; flex: 1; align-items: center; gap: 12px; }

.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex: 1; }
.nav > li { position: relative; }
.nav > li > a {
	display: block;
	padding: 12px 10px 9px;
	border-bottom: 3px solid transparent;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
.nav > li > a:hover { background: var(--red-logo); color: #ffffff; }
.nav > li.current > a { border-bottom-color: var(--red-logo); }
.nav-bar a:focus-visible, .nav-bar button:focus-visible { outline-color: #ffffff; outline-offset: -3px; }

.nav ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 290px;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	background: #ffffff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--red-logo);
	box-shadow: 0 8px 24px rgba(20, 30, 70, 0.15);
}
.nav ul a { display: block; padding: 8px 18px; color: var(--navy); text-decoration: none; }
.nav ul a:hover { background: var(--tint); color: var(--red); text-decoration: underline; }
.nav ul a[aria-current] { color: var(--red); font-weight: bold; }
.nav-bar .nav ul a:focus-visible { outline-color: var(--navy); }

@media (min-width: 861px) {
	/* A decorative hint that the item has a drop-down; it is part of the link, not a button. */
	.nav > li.has-sub > a::after { content: "\25BE"; content: "\25BE" / ""; margin-left: 5px; font-size: 0.8em; }
	.nav li:focus-within > ul { display: block; }
}
@media (hover: hover) and (min-width: 861px) {
	.nav li:hover > ul { display: block; }
}

/* Page */

.page { flex: 1; width: 100%; padding-bottom: 56px; }
.main { overflow-wrap: anywhere; }
.main p, .main li { max-width: 40em; }
.main p { margin: 0 0 1.1em; }
.main table { max-width: 100%; }

/* A logo then its link, as on the Links page: a card per link with the logos in one column, the whole card clickable. */
.main p:has(> img + a, > a > img) {
	position: relative;
	display: flex;
	align-items: center;
	/* Hides the hard spaces the old editor left around each logo, which would push the names out of line. */
	font-size: 0;
	max-width: 640px;
	margin-bottom: 12px;
	padding: 14px 18px;
	background: var(--tint-soft);
	border: 1px solid var(--line);
	border-radius: 6px;
}
.main p:has(> img + a, > a > img):hover { border-color: var(--navy); }
.main p:has(> a > img) > a { display: flex; align-items: center; }
/* !important beats the width the editor writes on each logo. */
.main p:has(> img + a) > img, .main p > a > img { flex: 0 0 auto; width: 140px !important; height: 72px; margin-right: 20px; object-fit: contain; }
.main p:has(> img + a) > a, .main p > a:has(> img) { font-size: 16px; font-weight: bold; text-decoration: none; }
.main p:has(> img + a) > a::after, .main p > a:has(> img)::after { content: ""; position: absolute; inset: 0; }
.main p:has(> img + a):hover > a, .main p > a:has(> img):hover { text-decoration: underline; }

/* Text colour from the editor, which writes it as a --color custom property. */
.color { color: var(--color); }

.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; }

.section-nav {
	padding: 18px 20px;
	background: var(--tint);
	border-top: 4px solid var(--navy);
}
.section-nav h2 {
	margin: 0 0 8px;
	color: var(--navy);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.section-nav ul { list-style: none; margin: 0; padding: 0; }
.section-nav li + li { border-top: 1px solid rgba(37, 69, 130, 0.15); }
.section-nav a { display: block; padding: 9px 0; color: var(--navy); }
.section-nav a:hover { color: var(--red); }

.main.below { margin-top: 8px; }

/* Member directory */

.group-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; padding: 0; }
.group-pills a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--navy);
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}
.group-pills a:hover { background: var(--red-logo); color: #ffffff; }
.main .group-pills li { max-width: none; }
.contacts-note { color: var(--muted); font-style: italic; }

.member-group h2 { padding-bottom: 8px; border-bottom: 2px solid var(--navy); }

/* One card per company, on a column grid every card shares, so logos, addresses and people line up down the page. */
.cards { list-style: none; margin: 0; padding: 0; }
.main .cards li { max-width: none; }
.card {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) 240px;
	gap: 0 24px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.with-contacts .card { grid-template-columns: 160px minmax(0, 1fr) 240px 220px; }
/* Break a long email or address only where it must, not at any letter. */
.main .card { overflow-wrap: break-word; }

.card-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	padding: 6px;
	background: var(--tint-soft);
	border: 1px solid var(--line);
}
.card-logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

.card h3 { margin: 0 0 6px; }
.card-desc { color: var(--muted); font-style: italic; }
.card-desc p { margin: 0 0 0.4em; }
.card-desc table, .card-desc tbody, .card-desc tr, .card-desc td { display: block; padding: 0; }

.card-site { margin: 8px 0 0; font-weight: bold; }

.card-details { margin: 0; }
.card-details dt { margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; }
.card-details dt:first-child { margin-top: 0; }
.card-details dd { margin: 0; }
.card-contacts h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }

.card-contacts h4 { margin: 0 0 2px; color: var(--muted); }
.card-contacts ul { list-style: none; margin: 0; padding: 0; }
.card-contacts li + li { margin-top: 8px; }

/* The login and sitemap pages carry fixed widths and a 10px form from the old site. */
.main > div[style] { width: auto !important; max-width: 30em; padding: 0 !important; }
.main form[style] { font-size: inherit !important; }
.main input[type="text"], .main input[type="password"] {
	width: 100%;
	max-width: 20em;
	margin: 4px 0 12px;
	padding: 8px 10px;
	border: 1px solid #767676;
	border-radius: 4px;
	font: inherit;
}
.main button[type="submit"] {
	padding: 8px 18px;
	border: 0;
	border-radius: 4px;
	background: var(--red);
	color: #ffffff;
	font: bold 16px Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.main button[type="submit"]:hover { background: var(--red-deep); }
.login_error_box { margin-bottom: 12px; padding: 10px 12px; border-left: 4px solid var(--red); background: var(--tint); }

/* Footer */

.site-footer { background: var(--navy); color: #ffffff; border-top: 4px solid var(--red-logo); }
.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: 28px;
	padding-bottom: 28px;
}
.footer-name { margin: 0; font-weight: bold; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--tint); }
.site-footer a:focus-visible { outline-color: #ffffff; }

/* Phones and small tablets: the banner shrinks to the flame, and the menu folds behind a button into a plain indented list. */
@media (max-width: 860px) {
	.wrap { padding: 0 16px; }

	/* The banner's purple, edge to edge; kept light enough behind the name for navy text to read. */
	.masthead { background: linear-gradient(90deg, #e4e4f9 0%, #c9caf3 55%, var(--banner-blue) 100%); }
	/* At 76px tall the banner's first 110px is just the flame mark. */
	.brand {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 76px;
		margin: 0;
		aspect-ratio: auto;
		background: none;
	}
	.brand::before {
		content: "";
		flex: none;
		width: 110px;
		height: 76px;
		/* The transparent mark, so the purple shows behind it rather than the banner's white corner. */
		background: url(/img/bcf-logo.png) no-repeat center / auto 60px;
	}
	.brand-name {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.2;
	}

	.nav-bar .wrap { flex-wrap: wrap; padding: 0; }
	.js .menu-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 14px 16px;
		border: 0;
		background: none;
		color: #ffffff;
		font: bold 16px Arial, Helvetica, sans-serif;
		cursor: pointer;
	}
	.menu-toggle::before {
		content: "";
		width: 18px;
		height: 12px;
		border: solid currentColor;
		border-width: 2px 0;
		background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	}
	.nav-panel { display: block; width: 100%; }
	.js .nav-panel { display: none; }
	.js .nav-panel.open { display: block; }
	.nav-panel > .account-link { margin: 8px 16px 16px; text-align: center; }
	.nav { flex-direction: column; padding-bottom: 8px; }
	.nav > li { border-top: 1px solid rgba(255, 255, 255, 0.15); }
	.nav > li > a { padding: 12px 16px; border-bottom: 0; white-space: normal; }
	.nav > li.current > a { box-shadow: inset 4px 0 0 var(--red-logo); }
	.nav ul {
		display: block;
		position: static;
		min-width: 0;
		padding: 0 0 6px 16px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.nav ul a { padding: 8px 16px; color: #ffffff; }
	.nav ul a:hover { background: var(--red-logo); color: #ffffff; }
	.nav ul a[aria-current] { color: #ffffff; text-decoration: underline; }
	.nav-bar .nav ul a:focus-visible { outline-color: #ffffff; }

	h1 { font-size: 25px; margin-top: 20px; }
	.with-aside { grid-template-columns: 1fr; gap: 24px; }
	/* Stacked, the section links lead, above the page text and the member type buttons. */
	.with-aside > .section-nav { order: -1; }
	.main table { display: block; overflow-x: auto; }

	.card,
	.with-contacts .card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.card-logo { width: 160px; }
	.card-contacts:not(:has(*)) { display: none; }
}