/**
 * Header Styles
 *
 * @package In_Development
 */
@import './search.css';
html {
	--header-top-height: 30px;
	--header-sub-height: 215px;
}
.site-header-top {
	--site-title-width: 190px;
	--site-small-logo-width: 40px;
	top: 0;
	padding: 10px var(--padding);
	background-color: var(--black);
	position: fixed;
	z-index: 1000;
}
.main-navigation {
	display: flex;
	justify-content: space-between;
	/* align-items: end; */
}
.main-navigation .menu-item a,
.main-navigation .menu-item span,
.search-form input[type="search"] {
	color: var(--background);
	display: inline-block;
	font-size: 28px;
}
.menu-item.active a,
.menu-item.active span {
	opacity: 0.5;
}
.main-navigation .menu-item span {
	cursor: pointer;
}
.main-navigation .menu-item {
	margin-bottom: var(--gap);
	text-align: right;
}
#primary-menu {
	padding-top: 80px;
}
.menu-container {
	--gap: 1em;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	z-index:-1;
	background-color: #000;
	padding: 10px var(--padding);
	padding-bottom: 30px;
	transform: translate3D(0, -100%, 0);
	transition: transform 300ms;
}
.main-navigation.toggled .menu-container{
	transform: translate3D(0, 0, 0);
}
.main-navigation ul {
	
	gap: var(--gap);
	justify-content: flex-end;
	align-items: center;
	display: block;
}

.site-header-sub {
	position: absolute;
	z-index: 950;
	top: var(--header-top-height);
	background-color: var(--background);
	transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
	border-bottom: 1px solid var(--black);
}
.site-header-sub[data-folded="1"]{
	position: fixed;
	
}
.site-header-sub[data-folded="1"] .site-header-sub-row:first-of-type {
	padding: 0;
	height: 0px;
}
.site-header-sub-row > .site-title-wrapper,
.site-header-sub-row > .header-actions,
.site-header-sub-row > .page-context{
	animation: fadeInFromTop 0.3s ease-in-out forwards;
}
.site-header-sub-row:first-of-type {
	/* display: flex; */
	align-items: center;
	padding: 12px var(--padding) 8px var(--padding);
	overflow: hidden;
	
}
.site-header-sub-row:last-of-type {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* gap: 24px; */
	border-top: 1px solid;
	padding: 6px var(--padding);
}
.site-header-sub-row.empty {
	border-top: none;
	padding: 0;
}
.main-navigation .site-title-wrapper {
	--gap: 0.5em;
	/* flex: 0 0 calc(var(--site-title-width) + var(--site-small-logo-width) + var(--gap)); */
	
}
.main-navigation .site-title-wrapper > a {
	display: flex;
	align-items: baseline;
	gap: var(--gap);
}
.main-navigation .site-logo-small-wrapper img,
.main-navigation .site-title-small-wrapper img {
	display: block;
}
.main-navigation .site-logo-small-wrapper {
	flex: 0 0 var(--site-small-logo-width);
}
.main-navigation .site-title-small-wrapper {
	flex: 0 0 var(--site-title-width);
	
}
.site-title-wrapper a,
.site-title-wrapper span {
	position: relative;
	display: inline-block;
}
.site-title-large {
	--y: 0px;
	--width: 100%;
	width: calc(var(--width) - var(--y));
	padding-top: 8px;
	padding-bottom: 4px;
	transform: translate3D(0, 0, 0);
}
.main-site-title-large {
	position: absolute;
	bottom: 0;
}
.pseudo-site-title-large {
	--y: 0px !important;
	opacity: 0;
}
.main-navigation .site-title-small {
	width: 0px;
	opacity: 0;
	/* max-width: 234px; */
	margin-bottom: 2px;
	
}
#masthead[data-sub-folded="1"] .main-navigation .site-title-small {
	width: var(--site-title-width);
	pointer-events: auto;
	animation: fadeInFromTop 0.3s ease-in-out forwards;
}
.site-header-sub[data-folded="1"] .site-title-large {
	display: none;
}
.header-actions {
	position: relative;
	display: none;
}
.site-header-sub[data-folded="1"] .header-actions {
	display: block;
}


.text-subscribe-btn {
	display: block;
	width: 100%;
	max-width: 150px;
	padding: 5px;
	cursor: pointer;
}
.text-subscribe-btn > img {
	display: block;
	width: 100%;
}
.site-header-sub[data-folded="0"] .text-subscribe-btn {
	opacity: 0;
}
.page-context {
	text-align: right;
	padding-left: 20px;
}
.badge-subscribe-btn {
	--size: 80px;
	--duration: 4000ms;
	width: var(--size);
	height: var(--size);
	background-color: #fff;
	background-image: url(./../assets/images/subscribe_text.svg);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* animation: rotate var(--duration) linear infinite; */
	font-size: 0.65em;
}
.badge-subscribe-btn-wrapper {
	position: absolute;
	right: 45px;
	top: calc(var(--header-top-height) - 16px );
	z-index: 1100;
	transition: opacity 0.3s ease-in-out; 
}
.site-header-sub[data-folded="1"] + .badge-subscribe-btn-wrapper,
.badge-subscribe-btn-wrapper.hidden,
.viewing-search .badge-subscribe-btn-wrapper {
	opacity: 0;
	pointer-events: none;
}

.menu-toggle {
	--bar-width: 2px;
	--icon-color: var(--background);
	--icon-height: 14px;
	appearance: none;
    border: none;
	outline:none;
    border-radius: 0;
    width: 30px;
    height: 30px;
    position: relative;
	cursor: pointer;
}
.menu-toggle:before,
.menu-toggle:after {
	content: '';
	width: 100%;
    height: var(--bar-width);
    background-color: var(--icon-color);
    position: absolute;
    left: 0;
    transition: transform .5s, top .5s, left .5s, background-color .5s;
    transform-origin: center;
}
.menu-toggle:before {
	/* top: auto; */
    top: calc((100% - var(--icon-height)) / 2);
}
.menu-toggle:after {
	top: calc(100% - (100% - var(--icon-height)) / 2 - var(--bar-width));
}
.toggled .menu-toggle:before {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.toggled .menu-toggle:after {
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.page-title-wrapper { 
	display: none;
}
[data-header-version="2"] .page-title-wrapper {
	transition: opacity 300ms;
	position: absolute;
	top: 50%;
	left: var(--padding);
	transform: translate(0, -50%);
	display: block;
}
[data-header-version="2"] .page-title-wrapper[data-visible="0"] {
	opacity: 0;
	pointer-events: none;
	
}
[data-header-version="2"] .page-title-wrapper[data-visible="1"] {
	opacity: 1;
	pointer-events: auto;
	/* position: static; */
}
@keyframes fadeInFromTop {
	from {
		transform: translate3D(0, -10px, 0);
		opacity: 0;
	}
	to {
		transform: translate3D(0, 0, 0);
		opacity: 1;
	}
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@media (hover: hover) {
	.badge-subscribe-btn-wrapper:hover .badge-subscribe-btn {
		animation: none;
	}
}
@media screen and (min-width: 500px) {
	.site-title-large {
		--width: 70vw;
	}
	.badge-subscribe-btn-wrapper {
		top: calc(var(--header-top-height) + 10px);
		right: var(--padding);
	}
	.badge-subscribe-btn {
		--size: 90px;
	}
}
@media screen and (min-width: 600px) {
	.site-header-top {
		--site-title-width: 214px;
	}
	.site-title-large {
		--width: 60vw;
	}
	.main-navigation .site-title-small {
		margin-bottom: 1px;
	}
}
@media screen and (min-width: 768px){
	.menu-container {
        display: flex;
        gap: var(--gap);
		justify-content: flex-end;
    }
	#primary-menu {
		text-align: left;
		padding-top: 0;
	}
	.main-navigation {
		align-items: center;
	}
	.main-navigation .menu-item {
		margin-bottom: 0px;
	}
	.main-navigation .menu-item a,
	.main-navigation .menu-item span,
	.search-form input[type="search"] {
		font-size: inherit;
	}
	.site-header-top {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.site-header-sub {
		--v-padding: 16px;
		display: flex;
		justify-content: space-between;
	}
	.site-header-sub[data-folded="1"] {
		align-items: center;
	}
	.site-header-sub-row,
	.site-header-sub-row:first-of-type,
	.site-header-sub-row:last-of-type {
		padding-top: var(--v-padding);
		padding-bottom: var(--v-padding);
	}
	.site-header-sub-row:first-of-type {
		flex: 1;
		padding-right: 0;
	}
	.site-header-sub-row:last-of-type {
		border-top: 0;
		flex: 1;
		align-items: normal;
	}
	.header-actions {
		display: block;
		align-self: center;
	}
	.site-title-large {
		--width: 50vw;
	}
	.main-navigation .site-title-wrapper { 
		--gap: 0.8em;
	}
	.badge-subscribe-btn-wrapper {
		top: calc(var(--header-top-height) + var(--header-sub-height));
		right: 20vw;
		transform: translate(0, -90%);
	}
	.badge-subscribe-btn-wrapper.hidden {
		opacity: 1;
		pointer-events: auto;
	}
	.badge-subscribe-btn {
		--size: 110px;
	}
	.text-subscribe-btn {
		padding: 8px;
	}
	.header-actions {
		flex: 0 0 15vw;
	}
	.page-context {
		flex: 0 0 12vw;
	}
	.page-context > .issue-number-wrapper {
		--dev-y: -3px;
		position: fixed;
    	top: calc(var(--header-top-height) + var(--v-padding) + var(--dev-y));
		right: var(--padding);
	}
	.site-header-sub[data-folded="1"] .issue-number-note {
		margin-top: 0.1em;
	}
	.site-header-sub.fade-in .site-header-sub-row > .page-context,
	.site-header-sub-row > .page-context {
		animation: none;
	}
	.main-navigation {
		text-align: right;
		display: flex;
	}
	.menu-main-menu-container,
	.header-search {
		display: inline-block;
		vertical-align: top;
	}
	
	.menu-container {
		--gap: 3vw;
		position: static;
		transform: none;
		padding: 0;
		z-index: 1;
	}
	.main-navigation ul {
		display: flex;
	}
	.main-navigation .site-title-wrapper {
		position: relative;
		z-index: 10;
	}
	.main-navigation .menu-item a,
	.main-navigation .menu-item span {
		padding: 0.1em;
	}
	
}
@media screen and (min-width: 1024px) {
	.site-header-top {
		--site-title-width: 234px;
		--site-small-logo-width: 44px;
	}
	.site-title-large {
		--width: 42vw;
	}
	.badge-subscribe-btn {
		--size: 115px;
		background-size: 75%;
	}
	.text-subscribe-btn {
		padding: 10px;
		/* width: 110px; */
	}
	.page-context > .issue-number-wrapper {
		--dev-y: 0px;
	}
	.menu-container {
		--gap: 3vw;
	}
}
@media screen and (min-width: 1200px) {
	.badge-subscribe-btn {
		--size: 130px;
	}
	.site-title-large {
		--width: 38vw;
	}
	.site-header-top {
		--site-title-width: 270px;
		--site-small-logo-width: 46px;
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.main-navigation .site-title-small {
		margin-bottom: 0px;
	}
	.badge-subscribe-btn-wrapper {
		right: 25vw;
	}
}


@media (hover:hover) {
	.text-subscribe-btn:hover {
		background-color: #fff;
	}
	.menu-item a:hover,
	.menu-item span:hover {
		opacity: 0.5;
	}
	.search-form input[type="submit"]:hover {
		opacity: 0.5;
	}
	.badge-subscribe-btn-wrapper:hover .badge-subscribe-btn {
		animation: rotate var(--duration) linear infinite;
	}
}