/*
------------------------------------------------------------
	Public pages (mpTwoPointO.master): the header with its
	menu button and the footer. Loaded after dcDesign.css and
	1walters_style.css. Colours: plum, teal and lilac.
------------------------------------------------------------
*/

body.shortHeader
{
	--plum: #5B2E57;
	--teal: #0F7C80;
	--tealLight: #2FA7A0;
	--lilac: #F6F1F7;
	--border: #D9CCE0;
	--line: #E3DCE8;
	--text: #3F3F46;
	--muted: #6B6B73;
	--page: #F6F6F7;    /* light grey behind the page content, softer than white; panels and boxes stay white */

	/* full-width header colours: plum stripe, teal line, lilac band, border */
	background: linear-gradient(to bottom,
		var(--plum) 0, var(--plum) 8px,
		var(--tealLight) 8px, var(--tealLight) 11px,
		var(--lilac) 11px, var(--lilac) 81px,
		var(--border) 81px, var(--border) 83px,
		var(--page) 83px) repeat-x;
	background-size: 100% 83px;
	background-color: var(--page);
}

/* every public page is as wide as the home page: 1280px of content (dcDesign.css had 800px),
   and the page fills the window at least, so the footer sits at the bottom of short pages */
body.shortHeader div#container
{
	box-sizing: border-box;
	width: auto;
	max-width: 1312px;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 100vh;
	margin-bottom: 0;
}

body.shortHeader div#content
{
	flex: 1 0 auto;
}

/* ---------- header: logo and a menu button on every screen size ---------- */

body.shortHeader div#header
{
	position: relative;
	box-sizing: border-box;
	height: 83px;
	padding-top: 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

body.shortHeader div#logo
{
	float: none;
	top: 0;
}

body.shortHeader div#logo a
{
	display: block;
}

/* logo_a3.png is 495 x 113 (twice this size) */
body.shortHeader div#logo img
{
	display: block;
	width: 245px;
	height: 56px;
	border: 0;
}

body.shortHeader .menuBtn
{
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--plum);
	background-color: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

/* just the icon; a light plum tint shows on hover and while the menu is open */
body.shortHeader .menuBtn:hover,
body.shortHeader div#header.menuOpen .menuBtn
{
	background-color: rgba(91, 46, 87, 0.08);
}

body.shortHeader .menuBtn .iconClose,
body.shortHeader div#header.menuOpen .menuBtn .iconMenu
{
	display: none;
}

body.shortHeader div#header.menuOpen .menuBtn .iconClose
{
	display: block;
}

/* the link bar is the menu's drop-down; the "|" separators are hidden */
body.shortHeader div#topLinks
{
	display: none;
	position: absolute;
	right: 0;
	top: 83px;
	width: 260px;
	z-index: 2000;    /* above the home page map (Leaflet panes go up to 1000) */
	padding: 0;
	font-size: 0;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
	overflow: hidden;
}

body.shortHeader div#header.menuOpen div#topLinks
{
	display: block;
}

/* a white card: dark text, plum on hover, and the current page marked with a teal bar */
body.shortHeader div#topLinks a,
body.shortHeader div#topLinks a:link,
body.shortHeader div#topLinks a:visited
{
	display: block;
	padding: 0 20px 0 17px;
	font-size: 14px;
	line-height: 44px;
	color: var(--text);
	border-bottom: 1px solid #ECE6EF;
	border-left: 3px solid transparent;
}

body.shortHeader div#topLinks a:last-child
{
	border-bottom: 0;
}

body.shortHeader div#topLinks a:hover,
body.shortHeader div#topLinks a:focus
{
	color: var(--plum);
	background-color: var(--lilac);
	text-decoration: none;
}

body.shortHeader div#topLinks a.current
{
	font-weight: bold;
	color: var(--plum);
	border-left-color: var(--tealLight);
}

/* ---------- shared pieces for page content ---------- */

/* a round numbered map point, as on the home page map (home.css .mapDot): teal for most info, white for less */
body.shortHeader .siteDot
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	font: bold 13px verdana, helvetica, sans-serif;
	color: #ffffff;
	background-color: var(--teal);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	vertical-align: middle;
}

body.shortHeader .siteDot.siteDotSmall
{
	width: 28px;
	height: 28px;
	font-size: 11px;
	color: var(--teal);
	background-color: #ffffff;
	border-color: var(--teal);
}

/* the main call to action, like the home page's search button */
body.shortHeader a.siteBtn,
body.shortHeader a.siteBtn:link,
body.shortHeader a.siteBtn:visited
{
	display: inline-block;
	padding: 0 28px;
	font: bold 15px verdana, helvetica, sans-serif;
	line-height: 46px;
	color: #ffffff;
	background-color: var(--teal);
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(15, 124, 128, 0.3);
	text-decoration: none;
	white-space: nowrap;
}

body.shortHeader a.siteBtn:hover,
body.shortHeader a.siteBtn:focus
{
	color: #ffffff;
	background-color: #0B6266;
	text-decoration: none;
}

/* ---------- footer: dark band with the leaf icon, a short About text and the links ---------- */

/* the footer band runs the full window width although it sits inside the page's container */
body.shortHeader .siteFooter
{
	--band: #1E1E1E;
	box-shadow: 0 0 0 100vmax var(--band);
	clip-path: inset(0 -100vmax);
	background-color: var(--band);
	margin-top: 40px;
	clear: both;
	color: #E8E8E8;
	position: relative;
	padding-top: 3px;    /* room for the stripe */
}

/* a teal line like the one under the header's plum stripe, across the full window width */
body.shortHeader .siteFooter::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--tealLight);
	box-shadow: 0 0 0 100vmax var(--tealLight);
	clip-path: inset(0 -100vmax);
}

body.shortHeader .siteFooterInner
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px 60px;
	align-items: flex-start;
	padding: 44px 0 34px 0;
}

body.shortHeader .siteFooterAbout
{
	flex: 1 1 320px;
	max-width: 460px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

body.shortHeader .siteFooterLogo
{
	flex: 0 0 auto;
}

body.shortHeader .siteFooterLogo img
{
	display: block;
	width: 79px;
	height: 76px;
	border: 0;
}

body.shortHeader .siteFooterAbout p
{
	margin: 0;
	font-size: 10pt;
	line-height: 1.6;
	color: #E8E8E8;
}

body.shortHeader .siteFooterLinks
{
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
}

body.shortHeader .siteFooterCol
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 140px;
	font-size: 10pt;
}

body.shortHeader .siteFooterHead
{
	font-weight: bold;
	color: #5FC4BD;
}

body.shortHeader .siteFooter a,
body.shortHeader .siteFooter a:link,
body.shortHeader .siteFooter a:visited
{
	color: #D6D6D6;
	text-decoration: none;
}

body.shortHeader .siteFooter a:hover,
body.shortHeader .siteFooter a:focus
{
	color: #ffffff;
	text-decoration: underline;
}

body.shortHeader .siteCopyright
{
	padding: 18px 0 26px 0;
	border-top: 1px solid #383838;
	font-size: 8pt;
	text-align: center;
	color: #A8A8A8;
}

/* ---------- tablets: the About text gets its own row in the footer ---------- */

@media (max-width: 959px)
{
	body.shortHeader .siteFooterInner
	{
		padding: 36px 0 28px 0;
	}

	body.shortHeader .siteFooterAbout
	{
		flex: 0 0 100%;
		max-width: 620px;
	}
}

/* ---------- phones ---------- */

@media (max-width: 639px)
{
	body.shortHeader div#logo img
	{
		width: 202px;
		height: 46px;
	}

	/* the drop-down spans the screen */
	body.shortHeader div#topLinks
	{
		left: 0;
		width: auto;
		border-width: 0 0 1px 0;
		border-radius: 0;
	}

	body.shortHeader div#topLinks a,
	body.shortHeader div#topLinks a:link
	{
		font-size: 15px;
		line-height: 48px;
	}

	/* the About text above two columns of links */
	body.shortHeader .siteFooter
	{
		margin-top: 16px;
	}

	body.shortHeader .siteFooterInner
	{
		gap: 24px;
		padding: 28px 16px 24px 16px;
	}

	body.shortHeader .siteFooterAbout
	{
		gap: 16px;
	}

	body.shortHeader .siteFooterLogo img
	{
		width: 60px;
		height: 58px;
	}

	body.shortHeader .siteFooterLinks
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		width: 100%;
	}

	body.shortHeader .siteFooterCol
	{
		min-width: 0;
	}

	body.shortHeader .siteCopyright
	{
		margin: 0 16px;
		padding: 16px 0 22px 0;
	}
}