/*
 * NESC Header Block Styles
 * Extracted from the NESC 2018 theme — header-relevant rules only.
 */

/* =============================================
   BASE TYPOGRAPHY (header-relevant)
   ============================================= */

.nesc-header-block,
.nesc-header-block * {
	box-sizing: border-box;
}

.nesc-header-block {
	font-family: 'Roboto', sans-serif;
	color: #555;
}

.nesc-header-block h1,
.nesc-header-block h2,
.nesc-header-block h3,
.nesc-header-block h4,
.nesc-header-block h5,
.nesc-header-block h6 {
	color: #022155;
	font-family: 'Figtree', serif;
	font-weight: bold;
}


/* =============================================
   SKIP LINK
   ============================================= */

.nesc-header-block .skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nesc-header-block .skip-link:focus {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	font-weight: 600;
	background: #fff;
	color: #000;
	padding: 8px;
	z-index: 1000;
}


/* =============================================
   HEADER CONTAINER
   ============================================= */

.nesc-header-block header {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	transition: 0.5s all;
	width: 100%;
	z-index: 9;
	padding-top: 10px;
}

.nesc-header-block header img {
	transition: 0.5s all;
}

.nesc-header-block header form {
	border-radius: 50px;
	overflow: hidden;
	margin-left: 10px;
}

.nesc-header-block header form input {
	padding-left: 16px !important;
}

.nesc-header-block header form input:active,
.nesc-header-block header form input:focus {
	border: 0;
	padding-left: 10px;
}

/* Body padding to offset fixed header */
body.has-nesc-header {
	padding-top: 80px;
}

body.has-nesc-header header #header-logo {
	height: 50px;
	width: auto;
}

@media screen and (min-width: 992px) {
	body.has-nesc-header header #header-logo {
		height: 90px;
	}
	body.has-nesc-header {
		padding-top: 170px;
	}
}


/* =============================================
   HEADER: LOGO
   ============================================= */

.nesc-header-block #header-logo {
	width: 100%;
}

.nesc-header-block header .navbar-brand {
	max-width: 80%;
	margin-right: 0.5rem;
	padding-top: 0;
	padding-bottom: 0.75rem;
}

.nesc-header-block header .navbar-brand img {
	max-width: 100%;
}

@media (min-width: 992px) {
	.nesc-header-block header .navbar-brand {
		max-width: 520px;
	}
}

@media (min-width: 1200px) {
	.nesc-header-block header .navbar-brand {
		max-width: 615px;
	}
}


/* =============================================
   HEADER: MENU TOGGLE (Mobile)
   ============================================= */

.nesc-header-block header .navbar-toggler {
	background-color: #b6005c;
	float: right;
	margin-top: 0.125rem !important;
	padding: 0.125rem 0.5rem;
}

.nesc-header-block header .navbar-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (min-width: 576px) {
	.nesc-header-block header .navbar-toggler {
		margin-top: 0.5rem !important;
		padding: 0.25rem 0.75rem;
	}
}

@media (min-width: 992px) {
	.nesc-header-block #menu-toggle-button {
		display: none;
	}
}


/* =============================================
   HEADER: MAIN NAV BAR
   ============================================= */

.nesc-header-block nav {
	background: #022155;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.nesc-header-block header nav {
	background-color: #012155;
	color: white;
	min-height: 4px;
	border-bottom: 4px solid white;
	background-color: #011e3c !important;
}

.nesc-header-block header nav > .container {
	position: relative;
}

.nesc-header-block header nav .menu-main-navigation-container {
	width: 100%;
}

.nesc-header-block header nav #menu-main-navigation {
	width: 100%;
	font-family: 'Figtree', sans-serif !important;
	font-size: 1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.nesc-header-block header nav #menu-main-navigation .menu-item {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 7px;
	padding-bottom: 7px;
	min-width: 15%;
	transition: 0.4s background;
}

@media (min-width: 992px) {
	.nesc-header-block header nav #menu-main-navigation .menu-item {
		width: 18%;
	}
}

.nesc-header-block header nav .navbar-nav .nav-link {
	color: #fff !important;
	width: 100%;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
}

.nesc-header-block header nav .navbar-nav .current-menu-item .nav-link,
.nesc-header-block header nav .navbar-nav .current-page-ancestor .nav-link {
	color: #fff;
	text-align: center;
	width: 100%;
	height: 100%;
}

.nesc-header-block header nav .sub-menu {
	display: none;
	white-space: normal !important;
}

.nesc-header-block .navbar-dark .navbar-nav .nav-link:focus {
	text-decoration: underline;
}

.nesc-header-block .nav-item .nav-link:focus, .nesc-header-block .nav-item .nav-link a:focus {
	text-decoration: none;

    outline-style: none;
}




/* =============================================
   MENU ITEM SKEWS & HOVER COLOURS
   ============================================= */

/* Item 1: Our Organisation */
.nesc-header-block #menu-main-navigation li:nth-child(1) {
	transform: skewX(10deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(1) a {
	transform: skewX(-10deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(1).current-menu-item,
.nesc-header-block #menu-main-navigation li:nth-child(1).current-page-ancestor,
.nesc-header-block #menu-main-navigation li:nth-child(1):hover {
	background-color: #a30857;
	transition: 0s background;
}

/* Item 2: Our Work */
.nesc-header-block #menu-main-navigation li:nth-child(2) {
	transform: skewX(6deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(2) a {
	transform: skewX(-6deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(2).current-menu-item,
.nesc-header-block #menu-main-navigation li:nth-child(2).current-page-ancestor,
.nesc-header-block #menu-main-navigation li:nth-child(2):hover {
	background-color: #00857B;
	transition: 0s background;
}

/* Item 3: Publications */
.nesc-header-block #menu-main-navigation li:nth-child(3).current-menu-item,
.nesc-header-block #menu-main-navigation li:nth-child(3).current-page-ancestor,
.nesc-header-block #menu-main-navigation li:nth-child(3):hover {
	background-color: #008393;
	transition: 0.3s background;
}

/* Item 4: News & Events */
.nesc-header-block #menu-main-navigation li:nth-child(4) {
	transform: skewX(-6deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(4) a {
	transform: skewX(6deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(4).current-menu-item,
.nesc-header-block #menu-main-navigation li:nth-child(4).current-page-ancestor,
.nesc-header-block #menu-main-navigation li:nth-child(4):hover {
	background-color: #00857B;
	transition: 0s background;
}

/* Item 5: Contact */
.nesc-header-block #menu-main-navigation li:nth-child(5) {
	transform: skewX(-10deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(5) a {
	transform: skewX(10deg);
}
.nesc-header-block #menu-main-navigation li:nth-child(5).current-menu-item,
.nesc-header-block #menu-main-navigation li:nth-child(5).current-page-ancestor,
.nesc-header-block #menu-main-navigation li:nth-child(5):hover {
	background-color: #a30857;
	transition: 0s background;
}


/* =============================================
   HEADER: TOP NAV (Gaeilge / Members / Search)
   ============================================= */

.nesc-header-block .navbar-top {
	padding-bottom: 1rem;
}

.nesc-header-block .navbar-top > ul > li {
	padding: 0.5rem 1rem;
}

.nesc-header-block .topright-header-text {
	font-family: 'Figtree', serif;
	color: #fff;
	display: inline-block;
	float: none !important;
}

.nesc-header-block .member-button {
	background-color: #fff !important;
	border: none;
	border-radius: 4px;
	color: #022155 !important;
	display: inline-block;
	font-weight: bold;
	font-size: 0.9rem;
	padding: 3px 6px;
	text-align: center;
	text-decoration: none;
}

.nesc-header-block .gaeilge-button {
	background-color: #00857B !important;
	border: none;
	border-radius: 4px;
	color: #fff !important;
	display: inline-block;
	font-weight: bold;
	font-size: 0.9rem;
	padding: 3px 5px;
	margin-right: 8px !important;
	text-align: center;
	text-decoration: none;
}

.nesc-header-block .nav-login {
	text-align: center;
}

.nesc-header-block .nav-login > div {
	display: inline-block;
}

.nesc-header-block .nav-login a {
	transition: 0.3s all;
}

.nesc-header-block .nav-login a:hover {
	text-decoration: none;
}

.nesc-header-block .nav-login a:hover,
.nesc-header-block .nav-login .member-button {
	background-color: #b6005c !important;
}

.nesc-header-block .nav-login .member-button:hover {
	text-decoration: none;
	background-color: #19bade !important;
}

.nesc-header-block .nav-login .gaeilge-button:hover {
	text-decoration: none;
	background-color: #19bade !important;
}


/* =============================================
   SEARCH FORM
   ============================================= */

.nesc-header-block #search-wrapper {
	text-align: center;
}

.nesc-header-block #nesc-search {
	background: #d6eff8;
	border: 0 solid;
	border-radius: 50px 0 0 50px;
	color: #0c3f54;
	height: 28px;
	padding: 4px;
}

.nesc-header-block #nesc-search:focus,
.nesc-header-block #nesc-search:focus-visible {
	border: 2px solid #1abade;
	outline: none;
}

.nesc-header-block #searchsubmit {
	background: #d6eff8;
	border: none;
	padding: 0 8px;
	height: 28px;
	float: right;
}

.nesc-header-block #searchsubmit i {
	color: #003140;
	font-size: 17px;
	vertical-align: -5%;
}


/* =============================================
   DESKTOP: TOP NAV POSITIONING
   ============================================= */

@media (min-width: 992px) {
	.nesc-header-block .navbar-top {
		position: absolute;
		top: -100px;
		right: 0;
	}

	.nesc-header-block .navbar-top > ul > li {
		padding: 0;
	}

	.nesc-header-block .nav-login {
		text-align: left;
	}

	.nesc-header-block .nav-login > span {
		padding-right: 0.125rem;
	}

	.nesc-header-block .topright-header-text {
		color: #022155;
		font-size: 0.875rem;
		float: left;
	}

	.nesc-header-block .member-button {
		background-color: #fff !important;
		color: #fff !important;
	}

	.nesc-header-block #search-wrapper {
		padding-left: 0.5rem;
	}

	.nesc-header-block #search-wrapper #nesc-search {
		width: 100px;
	}
}

@media (min-width: 1200px) {
	.nesc-header-block #search-wrapper {
		padding-left: 1rem;
	}

	.nesc-header-block #search-wrapper #nesc-search {
		width: 120px;
	}
}


/* =============================================
   SCROLLED STATE (shrinks header on scroll)
   ============================================= */

body.scrolled .nesc-header-block header #header-logo {
	height: 50px !important;
}

@media screen and (min-width: 992px) {
	body.scrolled .nesc-header-block header {
		box-shadow: 2px 0 12px #4459804d;
	}
}

body.scrolled .nesc-header-block .navbar-top {
	top: -55px;
}

body.scrolled .nesc-header-block .navbar-top ul {
	flex-direction: row !important;
	align-items: center;
}

body.scrolled .nesc-header-block .navbar-top ul div {
	padding-bottom: 0 !important;
}


/* =============================================
   MEMBERS AREA HEADER VARIANT
   ============================================= */

.nesc-header-members .menu-main-navigation-container {
	display: none !important;
}

.nesc-header-members .nesc-members-title {
	font-family: 'Figtree', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: #022155;
	display: none;
	white-space: nowrap;
	margin-left: 0.75rem;
}

.nesc-header-members header {
	background-color: #cad9f1 !important;
}

@media (min-width: 992px) {
	.nesc-header-members header nav {
		background: transparent !important;
		background-color: transparent !important;
		min-height: 0;
		border-bottom: 5px solid #022155;
	}

	.nesc-header-members .nesc-header-logo-row {
		display: flex;
		align-items: center;
	}

	.nesc-header-members .nesc-members-title {
		display: flex;
		align-items: center;
		font-size: 1.4rem;
	}
}

.nesc-header-members .main-site-button {
	background-color: #022155 !important;
	color: #fff !important;
}

.nesc-header-members .main-site-button:hover {
	background-color: #19bade !important;
}


/* =============================================
   ADMIN BAR OFFSET (admins & editors only)
   ============================================= */

.admin-bar .nesc-header-block header {
	top: 32px;
}

body.admin-bar.has-nesc-header {
	padding-top: 112px;
}

@media screen and (min-width: 992px) {
	body.admin-bar.has-nesc-header {
		padding-top: 168px;
	}

	body.admin-bar.has-nesc-header.nesc-members-page {
		padding-top: 122px;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .nesc-header-block header {
		top: 46px;
	}

	body.admin-bar.has-nesc-header {
		padding-top: 126px;
	}
}