/* HEADER */

/* Ensure the background color fills the whole width of the page */

body {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

div#page {
	max-width: none;
	width: 100%;
	margin: 0px;
}

/* Get rid of the giant link above the menu */
div.site-branding {
	display: none;
}

/* Push the menu to the top */
nav#site-navigation {
	margin-top: 5px;
}

div#menu-primary-container {
	/* Height is the same as the logo assigned as the background image to the first li */
	height: 104px;
}

ul#primary-menu {
	position: relative;
	/* Leave space for the donate button on the right */
	padding-right: 107px;
	background: transparent;
}

ul#primary-menu > li {
	/* Chosen so that when there are two rows of links they still aren't taller combined than the logo */
	margin-top: 11px;
}

ul#primary-menu > li > a {
	/* Decrease horizontal spacing between links */
	padding: 6px 16px;
}

ul#primary-menu > li:first-child {
	/* Don't let the margin on the links affect the image */
	margin: 0px;
}

ul#primary-menu > li:first-child > a {
	/* Background image scaled by dividing by 1.5 */
	width: 150px;
	height: 104px;
	background-image: url('/wp-content/uploads/2021/12/hftf-logo-e1773023829312.jpeg');
	background-size: cover;
	padding: 0px;
}

ul#primary-menu > li:last-child {
	font-size: 20px;
	margin: 0px;
	position: absolute;
	top: 0px;
	right: 20px;
	/* Same height as the logo, which is the background image of the first li */
	height: 104px;
	
	/* Vertically center the donate button */
	display: flex;
	align-items: center;
}

ul#primary-menu > li:last-child > a {
	/* The green from the Tanzanian flag */
	background-color: #61CE70;
}

/* I can't find any place I can modify this header, so just remove it */
header.entry-header {
	display: none;
}

/* On some phones (but not Garet's) the navigation menu links appeared blue-on-blue, making them invisible. Changing them to black wouldn't work since this is used as a background on hover on desktop, so make them white everywhere. */
li.menu-item {
	color: white;
}