/* USCC Players Hub 1.25.0 - phone menu: Menu + Account in one left panel. */

.uscc-drawer[hidden] { display: none; }
.uscc-drawer { position: fixed; inset: 0; z-index: 100000; }
.uscc-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.uscc-drawer__panel {
	position: absolute; top: 0; bottom: 0; left: 0;
	width: min(86vw, 340px);
	background: #FFF6E9; color: #2b2b2b;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: 56px 0 28px;
	box-shadow: 4px 0 22px rgba(0, 0, 0, .25);
	transform: translateX(-100%); transition: transform .22s ease;
}
.uscc-drawer.is-shown .uscc-drawer__backdrop { opacity: 1; }
.uscc-drawer.is-shown .uscc-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.uscc-drawer__backdrop, .uscc-drawer__panel { transition: none; }
}

.uscc-drawer__close {
	position: absolute; top: 8px; right: 10px;
	width: 44px; height: 44px; border: 0; background: none;
	font-size: 32px; line-height: 1; color: #9C221E; cursor: pointer;
}

.uscc-drawer__section { border-bottom: 1px solid rgba(156, 34, 30, .18); }
.uscc-drawer__head { margin: 0; font: inherit; }
.uscc-drawer__toggle {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; min-height: 52px; padding: 0 20px;
	border: 0; background: none; cursor: pointer;
	font: inherit; font-size: 18px; font-weight: 700; color: #9C221E; text-align: left;
}
.uscc-drawer__toggle::after {
	content: "+"; font-size: 26px; font-weight: 400; line-height: 1; width: 28px; text-align: center;
}
.uscc-drawer__toggle[aria-expanded="true"]::after { content: "\2212"; }
.uscc-drawer__toggle[aria-expanded="true"] { background: rgba(156, 34, 30, .06); }

.uscc-drawer__list { list-style: none; margin: 0; padding: 4px 0 12px; }
.uscc-drawer__list[hidden] { display: none; }
.uscc-drawer__list a {
	display: block; padding: 11px 20px 11px 32px;
	color: inherit; text-decoration: none; font-size: 17px;
}
.uscc-drawer__list a:hover, .uscc-drawer__list a:focus-visible { background: rgba(156, 34, 30, .08); }
.uscc-drawer__list .is-current > a { font-weight: 700; color: #9C221E; }
.uscc-drawer__label {
	margin: 10px 20px 2px 32px; padding-top: 10px; border-top: 1px solid rgba(156, 34, 30, .18);
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9C221E;
}
.uscc-drawer__logout { margin-top: 8px; border-top: 1px solid rgba(156, 34, 30, .18); }

body.uscc-drawer-open { overflow: hidden; }

/* On phones the account list on the page itself goes: it lives in the panel. */
@media (max-width: 600px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
	body.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
}

/* 1.25.1 - the footer carried a second copy of the menu; the one menu lives in the header and the panel. */
footer .wp-block-column:has( > nav.wp-block-navigation ) { display: none; }
footer .wp-block-column > nav.wp-block-navigation,
footer .wp-block-column > h3:has( + nav.wp-block-navigation ) { display: none; }

/* 1.25.2 - phones: Menu on the left, logo in the centre, basket on the right.
   The Account link goes: the panel's Account section has every account page. */
@media (max-width: 600px) {
	header .hostinger-ai-menu-wrapper {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "menu logo cart";
		align-items: center;
		column-gap: 8px;
	}
	header .hostinger-ai-site-navigation-wrapper { display: contents !important; }
	header .hostinger-ai-menu-wrapper > .wp-block-group:first-child { grid-area: logo; justify-self: center; }
	header .hostinger-ai-menu-wrapper nav.wp-block-navigation { grid-area: menu; justify-self: start; }
	header .hostinger-ai-menu-wrapper .wp-block-woocommerce-mini-cart { grid-area: cart; justify-self: end; }
	header .hostinger-ai-menu-wrapper .wp-block-woocommerce-customer-account { display: none; }
}
