/*
 * The redesign's header and footer (inc/chrome.php, templates/site/footer.php).
 *
 * Salient's generated stylesheet (shared with salient-child) sets the header's sizes and colors
 * from its options: a #ba020e bar, a 100px logo with 20px margins, and room for the funders' bar
 * (#header-space 174px). The rules here override those for salient-up only. Selectors start
 * "html body" where they have to outrank Salient's.
 */

:root {
	--up-header-bg: var(--up-red); /* the theme's red, like its other red elements */
	--up-header-ink: var(--up-white);
	--up-header-accent: var(--up-yellow);
	--up-header-rule: var(--up-black);
	--up-header-dropdown: var(--up-red); /* dropdowns and the phone menu, like the bar */
	--up-header-highlight: var(--up-black); /* behind the hovered or tapped menu item */
	--up-header-mark: 76px;
	--up-header-pad: 14px;
	--up-footer-bg: var(--up-black);
}

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

html body #header-outer,
html body #search-outer,
html body #header-space,
html body #header-outer #mobile-menu:before {
	background-color: var(--up-header-bg);
}

/* A black rule along the bottom, drawn inside the bar so it adds no height. */
html body #header-outer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--up-header-rule);
	pointer-events: none;
}

/* The bar's height: the mark plus its margins (Salient reserved 174px for logo and funders' bar). */
@media only screen and (min-width: 1000px) {
	html body #header-space {
		height: calc(var(--up-header-mark) + 2 * var(--up-header-pad) + var(--nectar_hook_before_nav_content_height, 0px));
	}

	html body #header-outer #logo {
		margin-top: var(--up-header-pad);
		margin-bottom: var(--up-header-pad);
	}

	html body #header-outer #logo img.up-brand__mark {
		height: var(--up-header-mark);
		width: var(--up-header-mark);
	}
}

/* ---- Logo: mark plus name and tagline ------------------------------------ */

html body #header-outer #logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.up-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--up-header-ink);
}

html body #header-outer #logo img.up-brand__mark {
	display: block;
	flex: none;
	object-fit: contain;
}

.up-brand__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

html body #header-outer .up-brand__name {
	font-family: var(--up-font-display);
	font-weight: 400;
	font-size: 23px;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--up-header-ink);
}

/* Tagline: Jost at its lightest weight, white, slightly spaced: light but formal. */
html body #header-outer .up-brand__tagline {
	font-family: var(--up-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.25;
	color: var(--up-header-ink);
	letter-spacing: 0.03em;
	text-transform: none;
}

html body #header-outer .up-brand__tagline > span {
	display: block;
	white-space: nowrap;
}

/* Phones and tablets: Salient sets the mark to 50px; the text shrinks to fit beside the icons. */
@media only screen and (max-width: 999px) {
	.up-brand {
		gap: 10px;
	}

	html body #header-outer .up-brand__name {
		font-size: 15px;
		text-transform: none;
	}

	html body #header-outer .up-brand__tagline {
		font-size: 11.5px;
		line-height: 1.2;
		letter-spacing: 0.01em;
	}
}

@media only screen and (max-width: 359px) {
	html body #header-outer .up-brand__name {
		font-size: 13.5px;
	}

	html body #header-outer .up-brand__tagline {
		font-size: 10.5px;
		letter-spacing: 0;
	}
}

/* ---- Menu ----------------------------------------------------------------
 * Salient's generated stylesheet colors the menu for the old red bar with !important rules, some
 * with an ID inside :not(), so these use a tripled ID (#header-outer#header-outer#header-outer) and
 * !important to win every state (hover, open, current).
 */

@media only screen and (min-width: 1000px) {
	html body #header-outer#header-outer#header-outer #top nav > ul > li > a {
		font-family: var(--up-font-body);
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: none;
	}

	html body #header-outer#header-outer#header-outer #top nav > ul > li > a,
	html body #header-outer#header-outer#header-outer #top nav > ul > li > a .sf-sub-indicator i {
		color: var(--up-header-ink) !important;
	}

	/* Hover, open and current section: a yellow underline. */
	html body #header-outer #top nav > ul > li > a .menu-title-text {
		background: linear-gradient(var(--up-header-accent), var(--up-header-accent)) left bottom / 0 3px no-repeat;
		padding-bottom: 4px;
		transition: background-size 0.15s;
	}

	html body #header-outer #top nav > ul > li > a:hover .menu-title-text,
	html body #header-outer #top nav > ul > li > a:focus-visible .menu-title-text,
	html body #header-outer #top nav > ul > li.sfHover > a .menu-title-text,
	html body #header-outer #top nav > ul > li.current-menu-item > a .menu-title-text,
	html body #header-outer #top nav > ul > li.current-menu-ancestor > a .menu-title-text {
		background-size: 100% 3px;
	}
}

/* Keyboard focus: a white outline on every header and phone-menu link (WCAG 2.4.7). The underline
 * alone doesn't show focus on the current section, which is underlined already. */
html body #header-outer#header-outer#header-outer a:focus-visible,
html body #header-outer#header-outer#header-outer button:focus-visible,
html body #slide-out-widget-area#slide-out-widget-area a:focus-visible {
	outline: 2px solid var(--up-white) !important;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Top-level items: clear of the yellow underline below the text. */
html body #header-outer#header-outer#header-outer #top nav > ul > li > a:focus-visible {
	outline-offset: 8px;
}

@media only screen and (min-width: 1000px) {

	/* Dropdowns: red panels with a black rule on top; black behind the hovered item. */
	html body #header-outer#header-outer#header-outer #top nav > ul > li:not(.megamenu) ul {
		background-color: var(--up-header-dropdown) !important;
		border-top: 4px solid var(--up-header-rule);
		border-radius: 0 0 var(--up-radius-tile) var(--up-radius-tile);
		overflow: hidden;
	}

	html body #header-outer#header-outer#header-outer #top nav > ul > li:not(.megamenu) ul a {
		font-family: var(--up-font-body);
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--up-header-ink) !important;
		background-color: transparent !important;
	}

	html body #header-outer#header-outer#header-outer #top nav > ul > li:not(.megamenu) ul a:hover,
	html body #header-outer#header-outer#header-outer #top nav > ul > li:not(.megamenu) ul a:focus-visible,
	html body #header-outer#header-outer#header-outer #top nav > ul > li:not(.megamenu) ul .sfHover > a {
		background-color: var(--up-header-highlight) !important;
		color: var(--up-white) !important;
	}

	/* The page you're on: a yellow underline, as in the bar. */
	html body #header-outer#header-outer#header-outer #top nav > ul > li:not(.megamenu) ul .current-menu-item > a {
		text-decoration: underline;
		text-decoration-color: var(--up-header-accent);
		text-decoration-thickness: 3px;
		text-underline-offset: 6px;
	}
}

/* ---- Phone menu (Salient's slide-out panel) --------------------------------
 * Salient paints it with a red-to-cream gradient from its options; here it's the bar's red, with
 * the same black highlight and yellow underline as the desktop dropdowns.
 */

html body #slide-out-widget-area#slide-out-widget-area {
	background: var(--up-header-dropdown) !important;
}

html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li a {
	display: inline-block;
	margin-left: -12px;
	padding: 4px 12px;
	border-radius: var(--up-radius-tile, 8px);
	font-family: var(--up-font-body);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--up-white) !important;
	opacity: 1 !important;
	background-color: transparent !important;
	transition: background-color 0.15s;
}

html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li a:hover,
html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li a:focus-visible,
html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li a:active {
	background-color: var(--up-header-highlight) !important;
	color: var(--up-white) !important;
}

html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li.current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--up-header-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* "Back" at the top of a submenu: smaller, with an arrow. */
html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li.back > a {
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

html body #slide-out-widget-area#slide-out-widget-area .off-canvas-menu-container li.back > a::before {
	content: "‹ ";
}

html body #slide-out-widget-area#slide-out-widget-area .slide_out_area_close .icon-salient-x {
	color: var(--up-white) !important;
}

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

/* Salient's generated stylesheet sets #252525 !important. */
html body #footer-outer {
	background-color: var(--up-footer-bg) !important;
	padding: 0;
	border-top: 6px solid var(--up-red);
}

.up-footer {
	color: rgba(255, 255, 255, 0.86);
	font-size: 16px;
	line-height: 1.55;
}

/* Salient sets every footer link to #ccc !important. */
html body #footer-outer .up-footer a:not(.up-btn) {
	color: var(--up-white) !important;
}

html body #footer-outer .up-footer .up-btn--primary {
	color: var(--up-white) !important;
}

html body #footer-outer .up-footer .up-btn--highlight,
html body #footer-outer .up-ds .up-footer__social a:hover {
	color: var(--up-black) !important;
}

html body #footer-outer .up-ds .up-footer__links a:hover,
html body #footer-outer .up-ds .up-footer__menu a:hover {
	color: var(--up-yellow) !important;
}

.up-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 48px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px var(--up-gutter) 48px;
}

/* Brand column */
.up-ds .up-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--up-white);
}

.up-footer__logo img {
	width: 72px;
	height: 72px;
	flex: none;
}

.up-footer__name {
	font-family: var(--up-font-display);
	font-size: 22px;
	line-height: 1.05;
	text-transform: uppercase;
	max-width: 9em;
}

html body .up-ds .up-footer__tagline {
	font-family: var(--up-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: var(--up-white);
	margin: 16px 0 14px;
	padding: 0;
}

.up-footer__address {
	font-style: normal;
	margin: 0 0 10px;
}

html body .up-ds .up-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 18px;
	padding: 0;
}

.up-ds .up-footer__links a,
.up-ds .up-footer__menu a {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(255, 199, 44, 0.6);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.up-ds .up-footer__links a:hover,
.up-ds .up-footer__menu a:hover {
	color: var(--up-yellow);
	text-decoration-color: var(--up-yellow);
}

.up-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.up-footer__social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.up-ds .up-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	color: var(--up-white);
	font-size: 18px;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.up-ds .up-footer__social a:hover {
	background: var(--up-yellow);
	border-color: var(--up-yellow);
	color: var(--up-black);
}

/* Headings */
html body .up-ds .up-footer__heading {
	font-family: var(--up-font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--up-white);
	margin: 0 0 14px;
	padding: 0;
}

/* Explore */
.up-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.up-footer__menu li {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

/* Donate and newsletter */
html body .up-ds .up-footer__box p {
	margin: 0 0 18px;
	padding: 0;
	color: rgba(255, 255, 255, 0.86);
}

/* Funders */
.up-footer__funders {
	background: var(--up-white);
	color: var(--up-black);
	padding: 34px var(--up-gutter) 38px;
	text-align: center;
}

html body .up-ds .up-footer__funders-heading {
	font-family: var(--up-font-body);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--up-gray);
	margin: 0 0 22px;
	padding: 0;
}

.up-footer__funder-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 26px 52px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.up-footer__funder {
	margin: 0;
	padding: 0;
	list-style: none;
}

.up-ds .up-footer__funder a {
	display: block;
	color: var(--up-black);
	text-decoration: none;
}

/* Logos share a height; --up-funder-scale evens out logos with more or less padding. */
.up-footer__funder img {
	display: block;
	height: calc(64px * var(--up-funder-scale, 1));
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

.up-footer__funder-name {
	font-weight: 700;
	font-size: 18px;
}

/* Legal line */
.up-footer__legal {
	max-width: 1240px;
	margin: 0 auto;
	padding: 22px var(--up-gutter) 28px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

html body .up-ds .up-footer__legal p {
	margin: 0;
	padding: 0;
}

@media only screen and (max-width: 1099px) {
	.up-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 640px) {
	.up-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
		padding-top: 48px;
	}

	.up-footer__funder-list {
		gap: 24px 34px;
	}

	.up-footer__funder img {
		height: calc(48px * var(--up-funder-scale, 1));
		max-width: 170px;
	}
}