/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.cs-header {
	.cs-header__search-toggle {
		width: 48px;
	    height: 48px;
		background-color: #fff;
		color: rgb(51, 51, 51);
		border-radius: 3px !important;
	}

		.cs-header__search-toggle:hover, .cs-header__search-toggle:focus {
			background-color: #8c3100;
			color: #fff;
		}
	icon {

		}
	}

/* Match the production Newsreader tab treatment after converting tabs to buttons. */
.cs-tabs .cs-tabs__header button.cs-tabs__tab {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #333;
	cursor: pointer;
	display: block;
	font-family: "Tiempos Headline", Georgia, serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	line-height: var(--cs-font-section-headings-line-height);
	margin: 0;
	overflow: visible;
	padding: 0 0 0.5rem;
	position: relative;
	text-align: inherit;
	text-transform: none;
}

.cs-tabs .cs-tabs__header button.cs-tabs__tab:hover,
.cs-tabs .cs-tabs__header button.cs-tabs__tab:focus-visible,
.cs-tabs .cs-tabs__header button.cs-tabs__tab.cs-tabs__tab-active {
	color: var(--cs-color-tab-heading-active, var(--cs-color-primary));
}
.cs-tabs .cs-tabs__header button.cs-tabs__tab.cs-tabs__tab-active:after {
	background: var(--cs-color-input-contrast, var(--cs-color-primary));
}

.cs-tabs .cs-tabs__header button.cs-tabs__tab:focus {
	outline: 2px solid rgb(0, 95, 204);
	outline-offset: 3px;
	border-radius: 3px;
}

.cs-tabs .cs-tabs__header button.cs-tabs__tab:focus-visible:after {
	background: var(--cs-color-tab-heading-active, var(--cs-color-primary));
}

.cs-tabs .cs-entry {
	border-radius: 3px;
}

.cs-tabs .cs-entry:focus-within {
	outline: 2px solid rgb(0, 95, 204);
	outline-offset: 6px;
}

.cs-tabs .cs-entry:focus-within a:focus,
.cs-tabs .cs-entry:focus-within a:focus-visible {
	outline: 0;
}


/* Sub Menu Active for Tab Navigation */
.cs-header__nav-inner>li.menu-item-has-children:not(.touch-device)>.sub-menu {
	&.active {
		top: 100%;
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s, left 0.25s;
	}
}

/* Mobile menu toggle buttons */
.cs-header__burger-toggle, .cs-header__offcanvas-toggle {
	background-color: white;
	color: rgb(51, 51, 51);
	&:hover, &:focus {
		background-color: #8c3100;
		color: white;
		border-radius: 3px;
	}
	&:focus {
		outline: 2px solid rgb(0, 95, 204);
	}
}

/* Mobile menu close button */
.cs-offcanvas__toggle {
	background-color: transparent;
	color: rgb(51, 51, 51);
	&:hover, &:focus {
		background-color: #8c3100;
		color: white;
		border-radius: 3px;
	}
	&:focus {
		outline: 2px solid rgb(0, 95, 204);
	}
}