/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

:root {
	--ea-featured-members-banner-height: 0px;
}

@media (min-width: 601px) {
	.ea-featured-members-strip {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #111111;
		background-image: var(--ea-featured-members-banner-image);
		background-repeat: repeat-x;
		background-position: center top;
		background-size: auto 100%;
		border-bottom: 1px solid #e8e8e8;
		transition: border-color 0.25s ease;
		z-index: 700;
	}

	body.admin-bar .ea-featured-members-strip {
		top: 32px;
	}

	.ea-featured-members-strip img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.ea-featured-members-strip__toggle {
		position: absolute;
		right: 16px;
		top: 14px;
		z-index: 5;
		border: 0;
		border-radius: 14px;
		padding: 6px 12px;
		font-size: 12px;
		line-height: 1;
		color: #ffffff;
		background: rgba(14, 20, 33, 0.78);
		cursor: pointer;
	}

	.ea-featured-members-strip__toggle--header {
		position: static;
		right: auto;
		top: auto;
		margin-left: 14px;
		z-index: auto;
		white-space: nowrap;
	}

	.ea-featured-members-strip__show {
		display: none;
		position: fixed;
		top: 14px;
		right: 16px;
		z-index: 10001;
		border: 0;
		border-radius: 14px;
		padding: 6px 12px;
		font-size: 12px;
		line-height: 1;
		color: #ffffff;
		background: #183ea7;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
		cursor: pointer;
	}

	body.admin-bar .ea-featured-members-strip__show {
		top: 46px;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar .ea-featured-members-strip {
			top: 46px;
		}

		body.admin-bar .ea-featured-members-strip__show {
			top: 60px;
		}
	}

	body.ea-featured-members-strip--hidden .ea-featured-members-strip {
		display: none;
	}

	body.ea-featured-members-strip--hidden .ea-featured-members-strip__show {
		display: inline-flex;
		align-items: center;
	}

	body.sticky-header:not(.ea-featured-members-strip--hidden) .site-header {
		top: var(--ea-featured-members-banner-height) !important;
	}

	body.admin-bar.sticky-header:not(.ea-featured-members-strip--hidden) .site-header {
		top: calc(var(--ea-featured-members-banner-height) + 32px) !important;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar.sticky-header:not(.ea-featured-members-strip--hidden) .site-header {
			top: calc(var(--ea-featured-members-banner-height) + 46px) !important;
		}
	}

	body.sticky-header.ea-featured-members-strip--hidden .site-header {
		top: 0 !important;
	}

	body.admin-bar.sticky-header.ea-featured-members-strip--hidden .site-header {
		top: 32px !important;
	}

	@media screen and (max-width: 782px) {
		body.admin-bar.sticky-header.ea-featured-members-strip--hidden .site-header {
			top: 46px !important;
		}
	}

	body.sticky-header:not(.ea-featured-members-strip--hidden) .site-content,
	body.buddypress.sticky-header:not(.ea-featured-members-strip--hidden) .site-content,
	body.bb-buddypanel.sticky-header:not(.ea-featured-members-strip--hidden) .site-content {
		padding-top: calc(var(--bb-header-height) + var(--ea-featured-members-banner-height)) !important;
	}

	body.sticky-header.ea-featured-members-strip--hidden .site-content,
	body.buddypress.sticky-header.ea-featured-members-strip--hidden .site-content,
	body.bb-buddypanel.sticky-header.ea-featured-members-strip--hidden .site-content {
		padding-top: var(--bb-header-height) !important;
	}
}

@media (max-width: 600px) {
	.ea-featured-members-strip,
	.ea-featured-members-strip__show,
	.ea-featured-members-strip__toggle--header {
		display: none !important;
	}
}