/*****************************************************************************
	portalheader.css

	Every style for the shared portal header (inc/portalheader.asp):
	  1. Utility bar    - the grey bar across the top (secondary links + user menu trigger)
	  2. User menu      - the dropdown on desktop, the slide-out panel on mobile
	  3. Menu button    - the orange hamburger tab (mobile only)
	  4. Main nav bar   - logo, nav links and call-to-action button
	  5. Mobile         - everything that changes at the mobile breakpoint

	Loaded by portalheader.asp, so it comes after main.css and style.css.

	MOBILE BREAKPOINT: 768px. Keep the CSS media queries below and the
	matchMedia() call in portalheader.asp in step if this number ever changes.

	Other pages (payment.asp, sms_repcardsolo.asp) override a few of these
	selectors, so keep these names: .portalsocialbar, .client-portal-social,
	.portalsociallinksleft, .dropbtn and nav#mainnav.
*****************************************************************************/


/* ==========================================================================
   1. UTILITY BAR
   ========================================================================== */

.portalsocialbar {
	height: 44px;
	background: #eeeeee;
}

.portalsociallinks {
	max-width: 1000px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Left side: STORIS.com, Zendesk, News... (right-aligned, next to the user menu) */
.portalsociallinksleft {
	display: inline-block;
	width: 84%;
	text-align: right;
}

ul.secondary-nav-links {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	height: 32px;
	padding-top: 10px;
	padding-right: 5px;
}

ul.secondary-nav-links li {
	display: inline;
	padding-right: 10px;
}

.client-portal-social .portalsociallinksleft a,
.client-portal-social .dropbtn {
	font-family: Museo Sans, sans-serif;
	font-size: 14px;
	color: #0A406A !important;
}

.client-portal-social .portalsociallinksleft a:hover {
	font-weight: bold;
	opacity: 1;
}

/* Right side: avatar + name (or "Log In") that opens the user menu */
.dropdown_header {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	height: 32px;
	padding-top: 10px;
	padding-right: 5px;
}

.portalsociallinks > .dropdown_header {
	float: right;
}

.dropbtn {
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
	color: #e16540;
}


/* ==========================================================================
   2. USER MENU  (#myDropdown)
   Hidden until portalheader.asp adds the .open class to it.
   ========================================================================== */

.dropdown-content {
	display: none;
	position: absolute;
	top: 44px;
	right: 0;
	z-index: 999999;
	min-width: 200px;
	background: #eeeeee;
}

.dropdown-content.open {
	display: block;
}

.dropdown-content a {
	display: block;
	padding: 12px 16px;
	font-family: Museo Sans, sans-serif;
	font-size: 14px;
	line-height: 17px;
	color: #0A406A;
	text-decoration: none;
}

.dropdown-content a:hover {
	opacity: 1;
	background-color: #B5B6B8;
}

/* STORIS staff links: collapsed under a "STORIS" heading that has an arrow */
.menu-staff-toggle {
	background: url(../Images/dt-down-arrow.svg) no-repeat center right;
	background-position: 90% 44%;
}

.menu-staff-toggle.open {
	background-image: url(../Images/dt-up-arrow.svg);
}

.menu-staff-toggle:hover {
	opacity: 1;
}

.menu-staff-links {
	display: none;
	padding-left: 15px;
}

.menu-staff-links.open {
	display: block;
}

/* Sections that only exist in the mobile panel (hidden on desktop) */
.menu-mobile-only {
	display: none;
}

/* Account links (Administration, Test Center, My Open Cases, Sign Out) */
.menu-account .portal-cta {
	display: none !important;   /* the NextGen button here is mobile only; desktop has it in the nav bar */
}


/* ==========================================================================
   3. MENU BUTTON  (hamburger tab, mobile only)
   ========================================================================== */

.menu-btn {
	display: none;
}

.menu-btn:hover {
	opacity: 1;
}

.menu-btn span {
	display: block;
	width: 18px;
	height: 3px;
	background: #fff;
}

.menu-btn span + span {
	margin-top: 3px;
}


/* ==========================================================================
   4. MAIN NAV BAR  (nav#mainnav)
   ========================================================================== */

/* Seasonal banner: swap the image here to change the look of every nav bar
   (client, employee and new employee). */
nav#mainnav {
	width: 100%;
	margin-top: 0;
	padding-top: 25px;
	padding-bottom: 25px;
	border: none;
	background: url(../Images/tradeshow-las-vegas.png) center center / cover no-repeat;
}

.portalnavcenter {
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* Logo on the left, links across the middle, button on the right */
.portalnavcenter.support-portal-header {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-column-gap: 20px;
}

.portalnavcenter.support-portal-header a {
	display: inline-block;
	float: left;
}

a.support-header-logo {
	grid-column: span 1;
}

.support-portal-header > ul {
	display: table-row;
	grid-column: span 6;
	margin: 0;
	padding-top: 20px;
	padding-left: 0;
	text-align: center;
	list-style: none;
}

/* portalheader.asp sets --nav-items to the number of links it drew, so the
   links share 1000px evenly. Any link can override its width inline. */
.support-portal-header > ul > li {
	display: table-cell;
	width: calc(1000px / var(--nav-items, 6));
	padding-left: 2px;
	padding-right: 2px;
}

.support-portal-header > ul > li > a > p {
	padding-bottom: 0;
	font-family: Museo Sans, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 17px;
	color: #FFFFFF;
	text-transform: uppercase;
}

.portalnavcenter.support-portal-header a:hover {
	opacity: 1;
}

.portalnavcenter.support-portal-header a:hover p {
	color: #ef5f37;
}

/* Call-to-action button (Discover STORIS NextGen / Values In Action) */
a.portal-cta {
	width: 150px !important;
	padding-top: 8px;
	padding-bottom: 4px;
	border-radius: 5px;
	background: #FDB426;
	font-family: Museo Sans, sans-serif;
	font-weight: bold;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
	color: #0A406A;
}

a.portal-cta:hover {
	opacity: 1;
	background: #EF5F37;
	color: #fff;
}

/* "Viewing as ..." banner shown to STORIS staff looking at a client */
.viewasbar {
	margin: 0 0 -24px;
	padding-bottom: 0;
	border-radius: 60px;
	background-color: orange;
	font-weight: 900;
	text-align: center;
}

/* Employee anniversaries box (moved into #WOBACK by portalheader.asp) */
.employee-anniversary {
	padding-bottom: 2%;
	text-align: center;
}

.employee-anniversary .employee_portal_anniversaries_top {
	display: block !important;
	width: 100%;
	padding-left: 0 !important;
}


/* ==========================================================================
   5. MOBILE  (768px and under)
   The nav bar links are hidden and live in the slide-out panel instead.
   ========================================================================== */

@media (max-width: 768px) {

	/* Utility bar collapses to nothing; only the panel inside it remains */
	.portalsocialbar {
		height: 0;
	}

	.portalsociallinks {
		height: 0 !important;
		font-size: 0;
	}

	.portalsociallinksleft,
	.portalsocialbar .dropbtn {
		display: none;
	}

	.dropdown_header {
		height: 0;
		padding: 0;
	}

	/* Menu button: orange tab on the right edge; slides left with the panel */
	.menu-btn {
		position: absolute;
		top: 25px;
		right: 0;
		z-index: 99;
		display: block;
		padding: 14px 26px 16px 17px;
		border-radius: 3px 0 0 3px;
		background: #ef5f37;
	}

	.menu-btn.open {
		right: 250px;
	}

	/* The copy of the button inside the panel (sits just left of the panel) */
	.menu-btn.menu-btn-close {
		position: absolute;
		right: 250px;
		padding: 12px 16px;
	}

	/* Slide-out panel */
	.dropdown-content {
		position: fixed;
		top: 0;
		right: 0;
		width: 250px;
		height: 100%;
		padding-left: 0;
		padding-right: 0;
		overflow-y: scroll;
		border-left: 5px solid #ef5f37;
		border-bottom: 5px solid #ef5f37;
		background: #3D3F48;
		font-size: 14px;
	}

	.dropdown-content a {
		padding-left: 20px;
		font-size: 16px;
		line-height: 19px;
		color: #FFFFFF;
	}

	.dropdown-content a:hover {
		background-color: #e16540;
	}

	.menu-mobile-only {
		display: block;
	}

	.menu-mobile-header {
		padding-top: 20px;
	}

	p.portalmobilename {
		margin-top: 5px;
		margin-bottom: 5px;
		padding-right: 20px;
		padding-bottom: 8px;
		border-bottom: 1px solid white;
		font-weight: 700;
		text-align: right;
		color: white;
	}

	img.portalmobileimg {
		padding-right: 8px;
	}

	.menu-staff-toggle {
		background-image: url(../Images/mobile-down-arow.svg);
	}

	.menu-staff-toggle.open {
		background-image: url(../Images/mobile-up-arrow.svg);
	}

	.menu-account {
		padding-top: 10px;
		background: #313139;
	}

	.menu-account .portal-cta {
		display: block !important;
		width: auto !important;
		margin: 0 15px 8px;
		padding: 8px 16px 4px 20px;   /* beats the panel's generic link padding */
		border-radius: 2px;
		background: #EF5F37;
		box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.25);
		font-size: 12px;
		line-height: 25px;
		color: #FFFFFF;
	}

	/* Nav bar: logo only, not sticky */
	.portalnavcenter.support-portal-header {
		display: block;
		height: 50px;
	}

	.portalnavcenter.support-portal-header a {
		float: inherit;
	}

	a.support-header-logo {
		grid-column: span 8;
		padding-left: 20px;
	}

	.support-portal-header > ul,
	.portalnavcenter > a.portal-cta {
		display: none !important;
	}

	nav#mainnav.fixed {
		position: relative;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Page + nav bar slide left to make room for the panel */
	.move-left {
		-webkit-transform: translate(-250px, 0);
		transform: translate(-250px, 0);
	}
}