/* ==========================================================================
   Global header - Divi Theme Builder layout
   Replaces the classic header.php markup ported from www.wesleyan.org with a
   Theme Builder "Global Header" layout (Max Mega Menu module for the primary
   navigation). Keep these values in step with the source masthead.
   ========================================================================== */

/* Fixed masthead: the Theme Builder header sticks to the top of the viewport */
.et-l--header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Push page content below the fixed header (45px top bar + 50px main bar) */
body.et-tb-has-header #et-main-area {
	padding-top: 95px;
}

/* Header rows act as the masthead container (Max Mega Menu measures the first
   .container to align mega panels, so it must be the row, not the search box). */
.et-l--header .container,
.et-l--header .twc-hdr-row {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 30px !important;
	padding-right: 30px !important;
}

.et-l--header .twc-hdr-col {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
}

/* Absolute children of the main bar anchor to the bar itself */
.et-l--header .twc-hdr-main .twc-hdr-row,
.et-l--header .twc-hdr-main .twc-hdr-col {
	position: static !important;
}

/* ---- Top utility bar ---------------------------------------------------- */

.et-l--header .twc-hdr-top {
	height: 45px;
	background-color: #ffffff;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -.03em;
}

.et-l--header .twc-hdr-top .twc-hdr-row,
.et-l--header .twc-hdr-top .twc-hdr-col {
	height: 45px;
}

/* Divi Menu module: inline-block row of links, right aligned, like the source
   masthead (anchors carry their own 14px/13px padding, 18px line-height). */
.et-l--header .twc-hdr-topmenu {
	width: 100%;
	height: 45px;
	text-align: right;
}

.et-l--header .twc-hdr-topmenu .et_pb_menu__wrap {
	display: block;
	height: 45px;
}

.et-l--header .twc-hdr-topmenu .et_pb_menu__menu,
.et-l--header .twc-hdr-topmenu .et-menu-nav,
.et-l--header .twc-hdr-topmenu ul.et-menu {
	display: inline-block !important;
	height: 45px;
	text-align: right;
}

.et-l--header .twc-hdr-topmenu ul.et-menu > li {
	display: inline-block;
	margin: 0 15px 0 0;
	padding: 0;
	vertical-align: top;
}

.et-l--header .twc-hdr-topmenu ul.et-menu > li:last-child {
	margin-right: 0;
}

.et-l--header .twc-hdr-topmenu ul.et-menu > li > a {
	display: block;
	padding: 14px 0 13px;
	color: #333132;
	font-size: 18px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -.03em;
	opacity: 1;
}

.et-l--header .twc-hdr-topmenu ul.et-menu > li > a:hover {
	color: #3ebcbc;
}

/* Logins item: icon instead of text, same as the source masthead */
.et-l--header .twc-hdr-topmenu ul.et-menu > li.custom-menu-icon-user {
	display: inline-flex;
	align-items: center;
	height: 45px;
	margin: 0;
	vertical-align: top;
}

.et-l--header .twc-hdr-topmenu ul.et-menu > li.custom-menu-icon-user > a {
	display: block;
	width: 25px;
	padding: 9px 0 13px;
	background: url(images/icon-user.svg) no-repeat center;
	color: transparent;
	font-size: 10px;
	line-height: 8px;
}

/* ---- Main bar ----------------------------------------------------------- */

.et-l--header .twc-hdr-main {
	position: relative;
	height: 50px;
	background-color: #333132;
}

/* Aqua gradient stripe along the bottom edge */
.et-l--header .twc-hdr-main::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, rgba(57, 170, 225, 1) 0%, rgba(64, 188, 188, 1) 100%);
	z-index: 2;
}

.et-l--header .twc-hdr-main .twc-hdr-row,
.et-l--header .twc-hdr-main .twc-hdr-col {
	height: 50px;
}

/* Logo sits in the white bar, overlapping the dark bar */
.et-l--header .twc-hdr-logo {
	position: absolute !important;
	top: -35px !important;
	left: 40px !important;
	width: 208px !important;
	height: auto !important;
	z-index: 6;
}

.et-l--header .twc-hdr-logo img,
.et-l--header .twc-hdr-logo .et_pb_image_wrap {
	display: block;
	width: 208px !important;
	height: 27px !important;
	max-width: none !important;
}

/* ---- Primary navigation (Max Mega Menu module) -------------------------- */

.et-l--header .twc-hdr-nav {
	height: 50px;
	margin-left: 0;
	float: left;
	width: auto;
}

.et-l--header .twc-hdr-nav #mega-menu-wrap-primary-menu {
	background: transparent;
}

.et-l--header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif !important;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -.03em;
	line-height: 50px;
	height: 50px;
}

/* ---- Search ------------------------------------------------------------- */

.et-l--header #et_top_search {
	display: none;
}

.et-l--header .twc-hdr-searchwrap {
	position: absolute !important;
	top: 0;
	right: 30px;
	width: 313px;
	height: 50px;
	margin: 0;
	z-index: 3;
}

.et-l--header .twc-hdr-search {
	position: static !important;
	width: 313px;
	height: 50px;
	overflow: visible;
	z-index: 3;
}

.et-l--header .twc-hdr-search .et_search_form_container {
	position: static;
	width: 313px;
	max-width: 313px;
	height: 50px;
	padding: 0;
	margin: 0;
}

.et-l--header .twc-hdr-search .et-search-form {
	position: static;
	margin: 5px 0 0;
	width: 313px;
	max-width: 313px;
	height: 36px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 7px;
}

.et-l--header .twc-hdr-search input.et-search-field {
	height: 36px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #b8b7b8;
}

.et-l--header .twc-hdr-search input.et-search-field::placeholder {
	color: #b8b7b8;
	opacity: 1;
}

/* ---- Mobile ------------------------------------------------------------- */

@media screen and (max-width: 729px) {

	body.et-tb-has-header #et-main-area {
		padding-top: 50px;
	}

	.et-l--header .twc-hdr-top {
		display: none;
	}

	/* Phones: wesleyan.org keeps the classic header white here (its dark
	   #333132 rule lives inside min-width:730px), with a 1px bottom shadow.
	   Divi prints .et-l--header>.et_builder_inner_content .et_pb_section_1_tb_header
	   {background-color:#333132!important}, so out-rank that cascade. */
	body .et-l--header > .et_builder_inner_content .et_pb_section.twc-hdr-main {
		background-color: #ffffff !important;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
		/* wesleyan.org's classic header measures 51.37px here (Divi 4 flex
		   rounding); match it so the gradient stripe lands on the same row */
		height: 51.37px;
	}

	.et-l--header .twc-hdr-main .twc-hdr-row,
	.et-l--header .twc-hdr-main .twc-hdr-col {
		height: 51.37px;
	}


	.et-l--header .container,
	.et-l--header .twc-hdr-row {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.et-l--header .twc-hdr-logo {
		top: 10.4px !important;
		left: 8.8px !important;
		width: 200px !important;
	}

	.et-l--header .twc-hdr-logo img,
	.et-l--header .twc-hdr-logo .et_pb_image_wrap {
		width: 200px !important;
		height: 26px !important;
	}

	/* Nav on phones: the wrap drops below the bar so the opened menu starts under
	   the masthead (same trick as the classic theme), and the toggle floats back
	   up into the bar with a negative margin. */
	.et-l--header .twc-hdr-nav {
		float: none;
		margin-left: 0;
		height: 51.37px;
		position: static;
	}

	.et-l--header .twc-hdr-nav #mega-menu-wrap-primary-menu {
		position: absolute;
		top: 51.37px;
		left: 8px;
		right: 8px;
		background: transparent;
	}

	.et-l--header #mega-menu-primary-menu {
		width: 100% !important;
	}

	.et-l--header .twc-hdr-nav #mega-menu-wrap-primary-menu .mega-menu-toggle {
		position: static;
		float: right;
		margin: -48.37px 46px 0 0;
		width: 40px;
		height: 40px;
	}

	/* Search: icon in the bar, field expands over the whole bar when tapped
	   (matches wesleyan.org: white overlay, full-width field, 36px close hit area) */
	.et-l--header #et_top_search {
		display: block;
		position: absolute;
		top: 10px;
		right: 18px;
		width: 23px;
		height: 28px;
		z-index: 25;
		cursor: pointer;
	}

	.et-l--header #et_search_icon {
		display: block;
		width: 23px;
		height: 28px;
		margin: 0;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.et-l--header .twc-hdr-searchwrap {
		position: absolute !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 51.37px;
		z-index: 30;
	}

	.et-l--header .twc-hdr-search {
		display: none;
		position: static !important;
		width: 100%;
		height: 51.37px;
		background-color: #ffffff;
		z-index: 20;
	}

	.et-l--header .twc-hdr-search:has(.et_pb_search_visible) {
		display: block;
	}

	.et-l--header .twc-hdr-search .et_search_form_container {
		position: relative;
		width: 100%;
		max-width: 100%;
		height: 51.37px !important;
		padding: 0;
		margin: 0;
		z-index: 21;
	}

	.et-l--header .twc-hdr-search .et-search-form {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0;
		width: 100%;
		max-width: none;
		height: 51.37px;
		background: transparent;
		border: 0;
		border-radius: 0;
		z-index: 22;
	}

	.et-l--header .twc-hdr-search input.et-search-field {
		height: 51.37px !important;
		width: 100% !important;
		padding: 0 52px 0 14px;
		font-size: 20px !important;
		line-height: 51.37px !important;
	}

	/* Close control: the ported custom.js binds this element to collapse the bar */
	.et-l--header .twc-hdr-search .et_close_search_field {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 36px;
		height: 51.37px;
		z-index: 26;
		cursor: pointer;
	}

	/* Match the classic masthead: a light-grey × centred in the 36px hit area,
	   and no magnifier while the field is open so the two never overlap. */
	.et-l--header .twc-hdr-search .et_close_search_field::after {
		content: "\00d7";
		position: absolute;
		top: 50%;
		right: 0;
		width: 36px;
		transform: translateY(-50%);
		font-size: 32px;
		line-height: 1;
		text-align: center;
		color: #b8b7b8;
	}

	.et-l--header .twc-hdr-searchwrap:has(.et_pb_search_visible) #et_top_search {
		display: none;
	}

	.et-l--header .twc-hdr-search input.et-search-field {
		color: #404040;
	}

	.et-l--header .twc-hdr-search input.et-search-field::placeholder {
		color: #706e70;
	}
}

/* ---- Mega menu panels: force the open state ---------------------------------
   Divi 5 renders the header in a fixed, deferred block; the plugin's
   `.mega-toggle-on > ul.mega-sub-menu` visibility/opacity declarations were
   being overridden here, so an opened panel stayed invisible. Pin the open
   state explicitly (closed panels are untouched because the class is absent). */
.et-l--header #mega-menu-primary-menu li.mega-toggle-on > ul.mega-sub-menu {
	visibility: visible !important;
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
}