/* New Day page base and shared shell. The structure mirrors the source regions without global resets. */
header.site-header,
main,
footer.site-footer {
	background: var( --newday-color-grey-10 );
	color: var( --newday-color-white );
	font-family: "Mulish", sans-serif;
	font-weight: 400;
}

#svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
	word-wrap: normal;
}

.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	stroke: none;
	vertical-align: baseline;
}

header.site-header,
#site-footer {
	background: var( --newday-color-grey-10 );
	color: var( --newday-color-white );
	font-family: "Mulish", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.15;
}

header.site-header {
	margin: 0;
	padding: 0;
}

header.site-header a,
#site-footer a {
	color: inherit;
	text-decoration: none;
}

header.site-header button {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 100%;
	font-weight: 400;
	line-height: 1.15;
	text-align: initial;
}

header.site-header button .icon {
	position: relative;
	top: -0.05em;
}

header.site-header a:focus-visible,
header.site-header button:focus-visible,
#site-footer a:focus-visible {
	outline: 2px solid var( --newday-color-orange-60 );
	outline-offset: 3px;
}

/* Header */
#site-header {
	display: grid;
	position: relative;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"skip skip"
		"brand mtog"
		"menu menu";
	grid-auto-rows: min-content;
	margin-bottom: 2.5vw;
	background: var( --newday-color-grey-10 );
}

#skip-to-content {
	grid-area: skip;
	display: inline-block;
	margin: 5vw var( --newday-page-gutter ) 0;
}

#skip-to-content:focus {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 110;
	clip: auto;
	width: auto;
	height: auto;
	padding: 0.5em 1em;
	background: var( --newday-color-orange-60 );
	color: var( --newday-color-grey-10 );
	font-weight: 800;
}

#header-branding {
	grid-area: brand;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 5vw var( --newday-page-gutter );
}

#header-branding-logo,
#header-branding-logo:visited {
	color: var( --newday-color-white );
}

#header-branding-logo:hover,
#header-branding-logo:focus-visible {
	color: var( --newday-color-white );
}

#header-branding-logo .icon {
	width: calc( 9.12rem + 3.76vw );
	max-width: 30rem;
	height: calc( 4.85rem + 2vw );
	stroke-width: 0;
	vertical-align: bottom;
}

#header-secondary,
#header-primary {
	display: none;
}

#header-mobile-drawer-toggle {
	grid-area: mtog;
}

#header-mobile-drawer-toggle button {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5vw var( --newday-page-gutter );
	border-radius: 0.5em;
	padding: 0;
	background: transparent;
	color: var( --newday-color-white );
	font-size: var( --newday-heading-size );
	line-height: 0.9;
}

#header-mobile-drawer-toggle button:hover,
#header-mobile-drawer-toggle button:focus-visible {
	color: var( --newday-color-orange-60 );
}

#header-mobile-drawer-toggle button span {
	margin-top: 0.5em;
	font-size: calc( 0.8679577465rem + 0.5633802817vw );
}

#header-mobile-drawer-toggle .icon-close {
	display: none;
}

#header-mobile-drawer-toggle button[aria-expanded="true"] .icon-open {
	display: none;
}

#header-mobile-drawer-toggle button[aria-expanded="true"] .icon-close {
	display: inline;
}

#header-mobile-drawer {
	display: none;
	grid-area: menu;
}

#header-mobile-drawer:not([hidden]) {
	display: block;
}

#site-header nav ul,
#site-footer nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header-mobile-drawer nav {
	margin: 8vw 0;
}

#mobile-secondary-navigation {
	margin-bottom: 0;
}

#header-mobile-drawer nav a {
	display: block;
	height: 100%;
	padding: 0.5em var( --newday-page-gutter );
	padding-right: 3.4em;
	color: var( --newday-color-white );
	font-size: calc( 1.1549295775rem + 0.9389671362vw );
	font-weight: 700;
}

#header-mobile-drawer #header-keyword-search {
	margin: 0 0 8vw;
}

#header-mobile-drawer #header-keyword-search > div {
	padding: 0 var( --newday-page-gutter ) 0.5em;
}

#header-mobile-drawer #header-keyword-search button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.5em var( --newday-page-gutter );
	padding-right: 3.4em;
	color: var( --newday-color-white );
	font-size: var( --newday-body-size );
	font-weight: 700;
	text-align: left;
}

#header-keyword-search input[type="search"] {
	box-sizing: border-box;
	height: calc( 2em + 2px );
	margin: 0;
	border: 2px solid var( --newday-color-grey-50 );
	border-radius: 0.25em;
	padding: calc( 0.5em - 1px ) 0.6em;
	background: rgb( 51 55 61 );
	color: var( --newday-color-white );
	color-scheme: dark;
	font: inherit;
	font-weight: 600;
	line-height: 1;
}

#header-mobile-drawer #header-keyword-search input[type="search"] {
	width: 100%;
	font-size: var( --newday-body-size );
}

#header-keyword-search input[type="search"]::placeholder {
	color: var( --newday-color-grey-60 );
}

#header-keyword-search input[type="search"]:focus-visible {
	outline: 2px solid var( --newday-color-orange-60 );
	outline-offset: 3px;
}

#header-mobile-drawer nav a:hover,
#header-mobile-drawer nav a:focus-visible,
#header-mobile-drawer nav a.is-current-page,
#header-mobile-drawer #header-keyword-search button:hover,
#header-mobile-drawer #header-keyword-search button:focus-visible {
	outline-offset: -0.2em;
	color: var( --newday-color-orange-60 );
}

#mobile-secondary-navigation ul a {
	font-size: var( --newday-body-size );
}

header.site-header.mobile-drawer-open {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	/* `dvh` follows the visible viewport as mobile address bars appear or hide; `vh` is its fallback. */
	height: 100vh;
	height: 100dvh;
	overflow: auto;
}

body.mobile-drawer-open {
	overflow: hidden;
}

@media ( min-width: 60rem ) {
	#site-header {
		align-items: center;
		grid-template-columns: 1fr 5fr;
		grid-template-areas:
			"skip skip"
			"brand secondary"
			"brand menu";
	}

	#header-branding {
		/* The white-label grid omits New Day's extra header regions. */
		padding: 2.5vw 5vw 0;
	}

	#header-secondary {
		display: flex;
		grid-area: secondary;
		align-items: center;
		justify-content: flex-end;
		gap: 2em;
		padding: 2.5vw;
		text-align: right;
	}

	#header-secondary nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 1em 2em;
	}

	#header-secondary a,
	#header-secondary #header-keyword-search button {
		color: var( --newday-color-white );
		font-weight: 700;
		white-space: nowrap;
	}

	#header-secondary a {
		font-size: calc( 0.786971831rem + 0.3755868545vw );
	}

	#header-secondary #header-keyword-search button {
		padding: 0;
	}

	#header-secondary a:hover,
	#header-secondary a:focus-visible,
	#header-secondary a.is-current-page,
	#header-secondary #header-keyword-search button:hover,
	#header-secondary #header-keyword-search button:focus-visible {
		color: var( --newday-color-orange-60 );
	}

	#header-keyword-search {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		font-size: calc( 0.786971831rem + 0.3755868545vw );
		min-height: calc( 2em + 2px );
	}

	#header-keyword-search > div {
		min-width: 0;
	}

	#header-keyword-search input[type="search"] {
		width: min( 32rem, calc( 100vw - 18rem ) );
		min-width: 12rem;
	}

	#header-mobile-drawer-toggle,
	#header-mobile-drawer {
		display: none;
	}

	#header-primary {
		/* Accepted tradeoff: reserve the reference single-row menu height while local labels retain natural multi-line growth. */
		/* Assumption: the primary navigation retains this desktop type scale. */
		display: block;
		grid-area: menu;
		align-self: end;
		min-height: calc( 1.345334507rem + 0.8732394366vw );
	}

	#header-primary-content {
		margin-right: auto;
		margin-left: auto;
		padding-right: var( --newday-page-gutter );
		padding-left: var( --newday-page-gutter );
	}

	#header-primary nav a {
		color: var( --newday-color-white );
		font-weight: 800;
		letter-spacing: 0.02em;
	}

	#header-primary nav a:hover,
	#header-primary nav a:focus-visible {
		outline-offset: -1px;
		color: var( --newday-color-orange-60 );
	}

	#header-primary nav > ul {
		display: flex;
		flex-wrap: wrap;
	}

	#header-primary nav > ul > .menu-item {
		position: relative;
		margin: 0 1em;
		margin-bottom: -0.5em;
		font-size: calc( 0.8679577465rem + 0.5633802817vw );
	}

	#header-primary nav > ul > .menu-item > a {
		display: inline-block;
		/* Accepted tradeoff: our two-column grid makes the reference height: 100% stretch this link. */
		/* Assumption: the header retains this local grid. */
		height: auto;
		border-bottom: 0.15em solid transparent;
		padding: 0.5em 0 0.25em;
		text-transform: uppercase;
	}

	#header-primary nav > ul > .menu-item > a.is-current-page {
		border-color: var( --newday-color-orange-60 );
	}

	#header-primary nav > ul > .menu-item:hover > a,
	#header-primary nav > ul > .menu-item:focus-within > a {
		color: var( --newday-color-orange-60 );
	}
}

/* Footer */
#site-footer {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

#site-footer,
#site-footer *,
#site-footer *::before,
#site-footer *::after {
	box-sizing: border-box;
}

#site-footer h2,
#site-footer p {
	margin-top: 0;
	font-family: inherit;
}

#site-footer a:hover,
#site-footer a:focus-visible {
	color: var( --newday-color-orange-60 );
}

#footer-main {
	margin-right: var( --newday-page-gutter );
	margin-left: var( --newday-page-gutter );
	border-top: 0.1rem solid var( --newday-color-grey-50 );
	padding: 5vw 0;
}

#footer-main-content {
	display: grid;
	gap: 5vw;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}

#footer-main-content h2 {
	margin: 0 0 0.5em;
	color: var( --newday-color-white );
	font-size: calc( 1.1549295775rem + 0.9389671362vw );
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

#footer-navigation,
#footer-newsletter {
	font-size: calc( 0.8679577465rem + 0.5633802817vw );
}

#footer-navigation .menu-item {
	margin: 0.5em 0;
}

#footer-navigation a {
	color: var( --newday-color-white );
	font-weight: 400;
}

#header-secondary-navigation .icon,
#mobile-secondary-navigation .icon,
#header-keyword-search .icon,
#footer-navigation .icon {
	position: relative;
	top: -0.1em;
	margin-right: 0.2em;
	vertical-align: middle;
}

#header-secondary-navigation a,
#mobile-secondary-navigation a,
#footer-navigation a {
	white-space: nowrap;
}

#footer-social ul {
	display: flex;
	flex-wrap: wrap;
	gap: calc( 1.0748502994rem + -0.3193612774vw );
	line-height: 0;
}

#footer-social .menu-item {
	margin: 0;
}

#footer-social a {
	display: inline-block;
	margin: 0;
	border: 0.09em solid var( --newday-color-white );
	border-radius: 50%;
	padding: 0.3em;
	background: transparent;
	color: var( --newday-color-white );
	font-size: calc( 1.5440140845rem + -0.1877934272vw );
	font-weight: 800;
	line-height: 0;
	white-space: nowrap;
}

#footer-social a:hover,
#footer-social a:focus-visible {
	border-color: var( --newday-color-orange-60 );
	color: var( --newday-color-orange-60 );
}

#footer-social .icon {
	display: block;
	margin: 0;
	top: 0;
}

#footer-newsletter p {
	margin: 1.5em 0;
	color: var( --newday-color-grey-80 );
	font-size: inherit;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

#footer-newsletter label {
	display: block;
	margin-bottom: 0.3em;
	color: var( --newday-color-white );
	font-size: inherit;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

#footer-newsletter form > div {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5em;
}

#footer-newsletter input[type="email"] {
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	border: 0.1em solid var( --newday-color-grey-60 );
	border-radius: 0.25em;
	padding: 0.5em 0.6em;
	background: transparent;
	color: var( --newday-color-white );
	font: inherit;
	font-weight: 600;
}

#footer-newsletter input[type="email"]::placeholder {
	color: var( --newday-color-grey-60 );
}

#footer-newsletter button {
	border: 0.1em solid var( --newday-color-orange-60 );
	border-radius: 0.25em;
	padding: 0.5em 1em;
	background: var( --newday-color-orange-60 );
	color: var( --newday-color-grey-10 );
	font: inherit;
	font-weight: 800;
	white-space: nowrap;
}

#footer-newsletter button:hover,
#footer-newsletter button:focus-visible {
	border-color: var( --newday-color-orange-10 );
	background: var( --newday-color-orange-10 );
}

#footer-bottom {
	padding: 1.75em 0;
}

#footer-bottom-content {
	display: flex;
	justify-content: space-between;
	margin-right: auto;
	margin-left: auto;
	padding-right: var( --newday-page-gutter );
	padding-left: var( --newday-page-gutter );
	font-size: calc( 0.7464788732rem + 0.2816901408vw );
	font-weight: 400;
}

#footer-bottom nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

#footer-bottom a {
	color: var( --newday-color-white );
}

#footer-bottom p {
	margin: 0;
	color: var( --newday-color-grey-80 );
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

@media (min-width: 40rem) {
	#footer-main-content {
		grid-template-columns: 2fr 3fr;
	}

	#footer-newsletter {
		grid-column: 1 / span 2;
	}
}

@media (min-width: 60rem) {
	#footer-main-content {
		grid-template-columns: 2fr 3fr 6fr;
	}

	#footer-newsletter {
		grid-column: 3;
	}
}
