/*
=========================================
PICSOB Header
=========================================
*/

.site-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(9,11,18,.92);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	border-bottom:1px solid rgba(255,255,255,.06);
	z-index:9999;
}

.header-inner{
	width:100%;
	max-width:1600px;
	height:100%;
	padding:0 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
}

/* =====================================================
   Drawer Menu - Explore Accordion
===================================================== */

.mobile-menu-list > li > a,
.submenu-toggle{

	width:100%;

	display:flex;

	align-items:center;

	justify-content:space-between;

	background:none;

	border:none;

	cursor:pointer;

	text-align:left;

	transition:.3s;

}

.submenu-toggle{

	color:#fff;

	font-size:22px;

	font-weight:600;

	font-family:inherit;

	padding:14px 0;

}

.submenu-toggle-label{

	position:relative;

	display:inline-block;

}

.submenu-toggle-label::after{

	content:"";

	position:absolute;

	left:0;
	bottom:-6px;

	width:0;
	height:2px;

	background:#fff;

	transition:width .3s ease;

}

.submenu-toggle:hover .submenu-toggle-label::after{

	width:100%;

}

.submenu-toggle:hover{

	transform:translateX(8px);

}

.submenu{

	max-height:0;

	overflow:hidden;

	padding-left:18px;

	list-style:none;

	margin:0;

	transition:max-height .4s ease;

}

.submenu.open{

	max-height:600px;

}

.submenu li{

	list-style:none;

}

.submenu a{

	display:block;

	padding:12px 0;

	font-size:17px;

	color:var(--text-muted);

	text-decoration:none;

	transition:.25s;

}

.submenu a:hover{

	color:var(--text);

	transform:translateX(6px);

}

.submenu-toggle-arrow{

	width:10px;
	height:10px;

	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;

	transform:rotate(45deg);

	transition:.3s;

	margin-right:6px;

	flex-shrink:0;

}

.submenu-toggle.active .submenu-toggle-arrow{

	transform:rotate(225deg);

}

@media(prefers-reduced-motion:reduce){

	.submenu,
	.submenu-toggle-arrow{
		transition-duration:.01ms !important;
	}

}

.site-logo img{
	max-height:42px;
	width:auto;
	display:block;
}

.logo-text{
	font-size:24px;
	font-weight:700;
	letter-spacing:2px;
	color:#fff;
}

.header-actions{
	display:flex;
	align-items:center;
	gap:12px;
}

.header-ad-slot{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:468px;
	max-width:100%;
}

.header-ad-slot .picsob-ad,
.header-ad-slot .picsob-ad-placeholder{
	max-height:56px;
	overflow:hidden;
}

@media(max-width:900px){

	.header-ad-slot{

		display:none;

	}

}

.search-toggle,
.menu-toggle{
	width:42px;
	height:42px;
	border:none;
	background:transparent;
	color:#fff;
	cursor:pointer;
	font-size:20px;
	transition:.25s;
}

.search-toggle:hover,
.menu-toggle:hover{
	opacity:.7;
}

/* ==========================
Premium Menu Backdrop
========================== */

.mobile-menu-backdrop{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.52);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:9998;

}

.mobile-menu-backdrop.active{

    opacity:1;
    visibility:visible;

}


/* ==========================
Drawer
========================== */

.mobile-menu{

    position:fixed;

    top:0;
    right:0;
    bottom:0;

    width:min(85vw,360px);
    height:100vh;

    background:rgba(10,12,20,.92);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    display:flex;
    flex-direction:column;

    padding:110px 42px 50px;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    transform:translateX(100%);

    transition:transform .45s cubic-bezier(.22,1,.36,1);

    z-index:9999;

    will-change:transform;

}

@media(min-width:768px) and (max-width:991px){

    .mobile-menu{

        width:380px;

    }

}

@media(min-width:992px){

    .mobile-menu{

        width:420px;

    }

}

.mobile-menu.active{

    transform:translateX(0);

}


/* Close */

.mobile-menu-close{

    position:absolute;

    top:24px;
    right:24px;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    background:transparent;

    color:#fff;

    font-size:26px;
    line-height:1;

    cursor:pointer;

    opacity:.7;

    transition:
        transform .3s ease,
        opacity .3s ease;

}

.mobile-menu-close:hover{

    opacity:1;

    transform:rotate(90deg);

}


/* Menu */

.mobile-menu-list{

    list-style:none;

    margin:0;
    padding:0;

}

.mobile-menu-list li{

    opacity:0;

    transform:translateX(18px);

    transition:
        opacity .45s ease,
        transform .45s ease;

}

.mobile-menu.active .mobile-menu-list li{

    opacity:1;

    transform:none;

}

.mobile-menu.active .mobile-menu-list li:nth-child(1){transition-delay:.05s;}
.mobile-menu.active .mobile-menu-list li:nth-child(2){transition-delay:.10s;}
.mobile-menu.active .mobile-menu-list li:nth-child(3){transition-delay:.15s;}
.mobile-menu.active .mobile-menu-list li:nth-child(4){transition-delay:.20s;}
.mobile-menu.active .mobile-menu-list li:nth-child(5){transition-delay:.25s;}
.mobile-menu.active .mobile-menu-list li:nth-child(6){transition-delay:.30s;}

.mobile-menu-list > li > a{

    display:inline-block;

    color:#fff;

    text-decoration:none;

    font-size:22px;

    font-weight:600;

    padding:14px 0;

    position:relative;

    transition:
        transform .25s ease,
        color .25s ease;

}

.mobile-menu-list > li > a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:8px;

    width:0;
    height:2px;

    background:#fff;

    transition:width .3s ease;

}

.mobile-menu-list > li > a:hover{

    transform:translateX(8px);

}

.mobile-menu-list > li > a:hover::after{

    width:100%;

}

@media(prefers-reduced-motion:reduce){

    .mobile-menu,
    .mobile-menu-backdrop,
    .mobile-menu-list li,
    .mobile-menu-list a,
    .mobile-menu-close{

        transition-duration:.01ms !important;

    }

}