/* header.css 
	T4.5 header.asp styles
	April 2026 by CuR
*/

:root {
	--clr-surface-util-bar: hsl(225 25% 16%); /* #1e2433 */
	--clr-text-util-bar: 0 0% 100%;

	--shadow-main-menu:
		inset 0 0 0 1px hsl(0 0% 100% / .03),
		0 10px 25px -5px rgba(0, 0, 0, 0.08),
		0 4px 10px -4px rgba(0, 0, 0, 0.06);
}

/* || Uitl Bar */

.util-bar {
	height: 36px;
	background: var(--clr-surface-util-bar);
}

.util-bar__inner {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding: 0 1.25rem;
}

.util-bar__nav {
	display: flex;
	align-items: stretch;
	min-width: 0;
	column-gap: 2.25rem;
}

.util-bar__nav--left {
	justify-content: flex-start;
}

.util-bar__nav--right {
	justify-content: flex-end;
}

.util-bar__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	column-gap: .3125rem; /* 5px */
	height: 100%;
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	color: hsl(var(--clr-text-util-bar) / 0.65);
	line-height: 1;
	white-space: nowrap;
	transition: color 0.2s ease;
}

a.util-bar__item {
	text-decoration: none;
}

button.util-bar__item {	
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.util-bar__item:hover {
	color: hsl(var(--clr-text-util-bar));
}

.notification-bell__badge {
	color: #ffffff;
	background: #e2002d;
	padding: 0.125em .25em;
	border-radius: .25em;
}

/* || Locale selector */

.locale-list {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	background: var(--clr-surface-util-bar);
	padding: .5rem 1rem;
	min-width: 8.125rem;
	display: none;
}

.locale-picker {
	color: hsl(var(--clr-text-util-bar) / 0.65);
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	cursor: pointer;
}

#locale-dropdown.is-open .locale-list {
	display: flex;
}

.locale-picker:hover {
	color: hsl(var(--clr-text-util-bar));
}


/* || Header and Main Navigation */

.header {
	background: var(--clr-surface-content);
	overflow-x: clip;
}

[data-main-bg="true"] .header {
	background: transparent;
}

.header__inner {
	min-height: 80px;
	display: flex;
	gap: 1rem;
	align-items: stretch;
	padding: .25rem 1.25rem;
	background: var(--clr-surface-content);
}

.header__inner[data-header-bg="true"] {
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
	--_clr-bg-safe-box: transparent;
}

.header__logo-wrap {
	flex-shrink: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-width: 0;
}

.header__logo-wrap img {
	height: 3.75rem;
	width: auto;
}

.header__logo-wrap a {
	user-select: none;
}

.header__logo-safe-box {
	display: inline-block;
	background: var(--_clr-bg-safe-box, white);
	border-radius: .25rem;
	padding-inline: .2rem;
}

.header__content-wrap {
	flex-grow: 1;
	flex-basis: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 2rem;
	min-width: 0;
	padding-bottom: .5rem;
}


/* || Social Media */

.social-media {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .75rem;
}

.social-media__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-text-muted);
	font-size: .875rem; /* 16px */
	font-weight: var(--fw-bolder);
	text-decoration: none;
	line-height: 1;
	transition: color 0.2s ease;
	overflow: hidden;
}

.social-media__icon-wrap {
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-surface-subtle);
	border-radius: 50%;
}

.social-media__link:hover .social-media__icon-wrap {
	color: var(--clr-brand-strong);
}

/* analizar esta opción recomendada por chatGPT
** vi que stripe lo tiene activo, pero no esta ordenado
.util-bar__item:focus-visible,
.social-media__link:focus-visible {
	outline: 2px solid var(--clr-brand-base);
	outline-offset: 2px;
}
*/



/* || Main Menu */

.main-menu {
	--_border: 1px solid var(--border-color);
	
	border-block: var(--_border);
	background: var(--clr-surface-content);
}

.main-menu__inner {
	position: relative;
	display: flex;
	flex-direction: row;
	transition: box-shadow 0.25s ease;
}

.main-menu__inner:hover {
	box-shadow: var(--shadow-main-menu);	
}

[data-main-bg="true"] .main-menu {
	border-block: none;
	background: transparent;
}

[data-main-bg="true"] .main-menu__inner {
	border-block: var(--_border);
	background: var(--clr-surface-content);
}

.main-menu__nav {
	width: fit-content;
}

.main-menu__nav--aside {
	margin-left: auto;
}

.main-menu__list {
	max-width: var(--layout-content-max-width);
	display: flex;
	align-items: stretch;
	margin: 0 auto;
}

.main-menu__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--clr-text-soft);
	padding: .375rem 1rem;
	cursor: pointer;
}

.main-menu__item:hover,
.main-menu__item.is-active {
	color: var(--clr-text-accent);
}

.main-menu__item::after {
	content: "";
	color: var(--clr-text-subtle);
	width: 0.3rem;
	height: 0.3rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 0.2s ease, color 0.2s ease;
}

.main-menu__item.is-active::after {
	transform: translateY(0.1rem) rotate(-135deg);
}

.main-menu__link {
	height: 100%;
	font-size: var(--fs-base);
	font-weight: var(--fw-bolder);
	color: currentColor;
	padding: 0.5rem 0;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

/* || Main Menu Panel */

.main-menu__panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-height: 0;
	opacity: 0;
	background: var(--clr-surface-elevated);
	overflow: hidden;
	transition: all 0.25s ease;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	box-shadow: var(--shadow-main-menu);
	z-index: 1001;
}

.main-menu__panel.is-open {
	opacity: 1;
	max-height: 1000px;
}

.main-menu__panel-body {
	position: relative;
	min-height: 1px;
	transition: height 0.25s ease;
}

.main-menu__subpanel {
	position: absolute;
	inset: 0 0 auto 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX(0);
}

.main-menu__subpanel.is-active,
.main-menu__subpanel.is-leaving {
	visibility: visible;
}

.main-menu__subpanel.is-active {
	opacity: 1;
	pointer-events: auto;
}


.subpanel-enter-active {
	animation: subpanel-enter .3s ease-in-out;
	--translate-x: 20%;
}

.subpanel-back-enter-active {
	animation: subpanel-enter .3s ease-in-out;
	--translate-x: -20%;
}

.subpanel-leave-active {
	animation: subpanel-leave .3s ease-in-out;
	--translate-x: -20%;
}

.subpanel-back-leave-active {
	animation: subpanel-leave .3s ease-in-out;
	--translate-x: 20%;
}

@keyframes subpanel-enter {
	from {
		opacity: 0;
		transform: translateX(var(--translate-x));
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes subpanel-leave {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(var(--translate-x));
	}
}

.site-backdrop {
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	z-index: 900;

	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.site-backdrop.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.main-header {
	position: relative;
	z-index: 1000;
}


/* || Mega Menu */ 

.mega-menu {
	display: flex;
	flex-direction: row;
}

.mega-menu__column {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-weight: var(--fw-base);
	padding: 1rem 2rem 2rem;
	min-width: 0;
	border-left: 1px solid hsl(var(--border-color) / 0.5);
}

.mega-menu__column--aside {
	background: var(--clr-surface-subtle);
	border-left: 1px solid hsl(var(--border-color) / 0.3);
}

.mega-menu__title {
	font-size: inherit;
	font-weight: var(--fw-bold);
	letter-spacing: var(--font-spacing-dense);
}

.mega-menu__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mega-menu__link {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	text-decoration: none;
}

.mega-menu__link-label {
	/*color: var(--clr-brand-strong);*/
	color: var(--clr-text-accent);
	font-size: inherit;
	font-weight: var(--fw-bold);
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.mega-menu__link-text {
	color: var(--clr-text-subtle);	
	font-size: var(--fs-small);
}

.mega-menu__link-label::after {
	content: "→";
	font-size: 0.85em;
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mega-menu__link:hover .mega-menu__link-label::after {
	opacity: 1;
	transform: translateX(0);
}

.mega-menu__link:hover .mega-menu__link-text {
	color: var(--clr-text-muted);
}

/* || Search Dialog */

.search-dialog {
	width: max-content;
	min-width: min(40rem, calc(100vw - 1.5rem));
	border: none;
	background: var(--clr-surface-elevated);
	overflow: hidden;
	padding: 0;
	box-shadow: var(--shadow-main-menu);
	z-index: 1001;
}

.search-dialog:focus-visible {
	outline: none;
}

.search-dialog--dropdown {
	position: absolute;
	display: grid;
	grid-template-rows: 0fr;
	margin-inline: 0;
	opacity: 0;
	transform: translateY(-4px);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	transition:
		grid-template-rows 0.25s ease,
		opacity 0.25s ease,
		transform 0.25s ease;
}

.search-dialog--dropdown[open]{
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}

.search-dialog--modal {
	position: fixed;
	width: calc(100vw - 2rem);
	height: calc(100dvh - 2rem);
	max-height: calc(100dvh - 2rem);
	border-radius: var(--border-radius);
}

.search-dialog--dropdown .dialog__close {
	display: none;
}

.search-dialog__inner {
	height: 100%;
	min-height: 0;
	overflow: hidden;
	outline: none;
	padding: 1rem;

	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.search-dialog__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* || Active teams instant search */

#active-teams {
	height: 100%;
	min-height: 0;
}

.active-teams__container {
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 1rem;
}

.search-bar {
	--_size: 2.5rem;
	display: flex;
	max-width: 50ch;
	align-items: center;
	color: var(--clr-text);
	background-color: var(--clr-surface-content);
	border: 1px solid var(--border-color);
	border-radius: var(--_size);
	font-size: var(--fs-base);
	padding-inline: .5rem;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.search-bar:focus-within {
	border-color: var(--clr-brand-strong);
	background-color: var(--clr-surface-elevated);
}

.search-box .base-help-text {
	padding-left: .75em;
}

.search-bar__icon {
	width: var(--_size);
	height: var(--_size);
	display: flex;
	padding: .5em;
	color: var(--clr-text-subtle);	
}

.search-bar__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.search-bar__input {
	flex-grow: 1;
	min-width: 0;
	border: 0;
	padding-inline: 0.25rem 0.75rem;
	outline: none;
	font-size: inherit;
	color: inherit;
	background: transparent;
}

.search-bar__input::placeholder {
	color: var(--clr-text-subtle)/ 0.65);
}

.active-teams__list {
	padding: .375rem;
	background: transparent;

	grid-row: 2;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* smooth scroll in iphone */
}

.active-teams__loading,
.active-teams__no-matches,
.active-teams__empty {
	display: grid;
	place-items: center;

	min-height: 7.5rem;
	padding: 1rem;

	color: var(--clr-text-subtle);
	font-size: var(--fs-base);
	text-align: center;
}

.active-teams__no-matches {
	font-weight: var(--fw-bold);
	color: var(--clr-text-soft);
}

.active-teams__tournament {
	margin: .5rem .5rem .25rem;
	padding-bottom: .375rem;
	border-bottom: 1px solid hsl(var(--border-color) / 0.7);

	color: var(--clr-text-subtle);
	font-size: var(--fs-smaller);
	font-weight: var(--fw-bold);
	letter-spacing: var(--font-spacing-dense);
	text-transform: uppercase;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.active-team {
	display: flex;
	flex-direction: column;
	gap: .125rem;

	padding: .65rem .75rem;
	border-radius: calc(var(--border-radius) * .75);

	color: hsl(var(--clr-text) / 0.82);
	cursor: pointer;

	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}

.active-team.active {
	color: var(--clr-brand-strong);
	background-color: var(--clr-surface-subtle);
}

.active-team__name {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	line-height: 1.25;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.active-team__info {
	color: var(--clr-text-subtle);
	font-size: var(--fs-small);
	line-height: 1.25;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.active-team.active .active-team__info {
	color: var(--clr-text-muted);
}



/* || Active events */

.active-events__empty {
	display: grid;
	place-items: center;

	min-height: 7.5rem;
	padding: 1rem;

	color: var(--clr-text-subtle);
	font-size: var(--fs-base);
	text-align: center;
}

.active-events__container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-bottom: .75rem;
}

.active-events__content {
	display: grid;
	grid-template-columns:
		repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
	gap: 1.25rem;
}

.active-events__content :is(.stack) {
	--stack-gap: .5rem;
}

.active-events__card .base-title {
	font-size: var(--fs-base);
}

.active-events__item {
	font-size: var(--fs-base);
}

.active-events__item .base-link {
	font-weight: var(--fw-base);
	border-radius: 999px;
}

.active-events__item .base-link::after {
	content: "→";
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity .15s ease,
		transform .15s ease;
	flex-shrink: 0;	
}

.active-events__item .base-link:hover::after {
	opacity: 1;
	transform: translateX(0);
}



/* || Theme Toggle */

#theme-toggle {
	width: 30px;
	height: 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--border-color);
	background: var(--clr-surface-subtle);
	cursor: pointer;
}

.theme-toggle__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: var(--clr-text-muted);
}

.theme-toggle__icon:last-child {
	display: none;
}

[data-theme="dark"] .theme-toggle__icon:first-child {
	display: none;
}

[data-theme="dark"] .theme-toggle__icon:last-child {
	display: block;
}

#theme-toggle:hover .theme-toggle__icon {
	fill: var(--clr-brand-strong);
}


/* || Sports list */

.sports {
	position: absolute;
	display: grid;
	grid-template-rows: 0fr;
	top: 100%;
	right: 0;
	width: max-content;
	min-width: 100%;
	max-width: calc(100vw - 2rem);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-4px);
	background: var(--clr-surface-elevated);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	box-shadow: var(--shadow-main-menu);
	transition:
		grid-template-rows 0.25s ease,
		opacity 0.25s ease,
		transform 0.25s ease;
	z-index: 1001;
}

.is-active .sports {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}

.sports__list {
	min-height: 0;
	overflow: hidden;
}

.sports__link {
	color: var(--clr-text);
	opacity: 0.76;

	border-radius: var(--border-radius);
	padding: .85em 1.125rem;
	text-decoration: none;
	font-size: var(--fs-medium);
	display: flex;
	align-items: center;
	gap: .5em;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.sports__link:hover {
	opacity: 0.86;
	background-color: var(--clr-surface-subtle);
}

.sports__icon-wrap {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}

.sports__icon {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--clr-brand-strong);
}


/* || Header content */

.header-content {
	
}


/* || Notification Popup */

.notification-popup {
	position: absolute;
	margin: 0;
	padding: 0;
	width: min(30rem, calc(100vw - 1.5rem));
	border: 0;
	background: var(--clr-surface-elevated);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-dialog);
	z-index: 1001;
	outline: none;
}

.notification-popup__inner {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-base);
	padding-bottom: 1rem;
}

.notifications__title {
	color: var(--clr-text);
	font-size: inherit;
	font-weight: var(--fw-bold);
	letter-spacing: var(--font-spacing-dense);
	border-bottom: 1px solid var(--border-color);
	padding: .75rem 1rem;
}

.notifications__list {
	max-height: calc(100dvh - 3rem);
	overflow: hidden;
	overflow-y: auto;
}

.notifications__item {
	cursor: pointer;
	padding-block: 1rem;
	padding-inline: 1.25rem;
}

.notifications__item:hover {
	background: var(--clr-surface-subtle);
}


/* || Notifications */

:root {
	--clr-notification-normal: hsl(256 60% 48%);
	--clr-notification-medium: hsl(25 90% 60%);
	--clr-notification-high: hsl(10 100% 60%);
}

[data-theme="dark"] {
	--clr-notification-normal: hsl(256 60% 68%);
}

.notification {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;

	color: var(--clr-text-soft);
	font-size: var(--fs-base);
	--_notification-color: 0 0% 60%;
}

.notification__icon {
	background: var(--_notification-color);
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-top: 2px;
}

.notification__icon svg {
	fill: var(--clr-on-contrast);
}

.notification__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: .375rem;
}

.notification__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .375rem;
}

.notification__subject {
	color: var(--clr-text);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
}

.notification[data-priority="high"]
	.notification__subject {
	color: var(--_notification-color);
} 

.notification__message {
	font-size: var(--fs-medium);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	overflow: hidden;
	text-overflow: ellipsis;
}

.notification__details {
	font-size: var(--fs-small);
	color: var(--clr-text-muted);
}

.notification[data-priority="normal"] {
	--_notification-color: var(--clr-notification-normal);
}

.notification[data-priority="medium"] {
	--_notification-color: var(--clr-notification-medium);
}

.notification[data-priority="high"] {
	--_notification-color: var(--clr-notification-high);
}


/* || Feature notification */

.featured-notification {
	color: var(--clr-notification-high);

	border: 1px solid
		hsl(from currentColor h s l / .62);
	border-radius: var(--border-radius);

	margin-block: 1.25rem 0;
	padding-inline: 1.25rem;
	padding-block: .75rem;

	background: var(--clr-surface-elevated);
}

.featured-notification:hover {
	cursor: pointer;
	box-shadow:
		inset 0 0 4px 0 hsl(from currentColor h s l / .50);
}

.featured-notification .notification__info {
	gap: .125rem;
}

.featured-notification .notification__subject {
	font-size: var(--fs-medium);
}

.featured-notification .notification__message {
	font-size: var(--fs-small);
}

@container main (width > 768px) {
	.featured-notification .notification__content {
		grid-template-columns: 4fr 1fr;
		align-items: baseline;
	}

	.featured-notification .notification__message {
		white-space: nowrap;
	}

	.featured-notification .notification__details {
		text-align: right;
	}
}


/* || Banners */

.header-advertising {
	display: grid;
	place-items: center;
	
	max-width: 1000px; /* legacy t4 size */
	min-height: 100px;
	background-color: transparent;
	margin-block: 1rem 0;
	margin-inline: auto;
	overflow: hidden;
}

.aside-advertising {
	display: grid;
	place-items: center;
	
	background-color: transparent;
	margin-inline: auto;
	overflow: hidden;
}

.banner {
	border-radius: .25rem;
	overflow: hidden;
}

.header-advertising .banner {
	max-height: 100px;
}

.aside-advertising .banner {
	width: 100%;
	max-width: 14.375rem;
}

@container main (width < 768px) {
	.header-advertising {
		min-height: 40px;
	}
}


/* || Sidebar */

.sidebar-button {
	display: none;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	align-self: center;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 4px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	outline: none;

	color: hsl(0 0% 12%);
	background: hsl(0 0% 100% / .58);
}

.sidebar-button__icon > svg {
	fill: currentColor;
}

.sidebar-button:hover {
	background: hsl(0 0% 100% / .88);
	box-shadow: 0 4px 14px hsl(0 0% 0% / .12);
}

.sidebar {
	position: fixed;
	margin: 0;
	padding: 0;
	width: min(85vw, 320px);
	height: 100dvh;
	max-height: none;
	border: 0;
	border-top: 1px solid var(--border-color);
	background: var(--clr-surface-elevated);
	z-index: 1001;
	inset: 0 auto 0 0;
	transform: translateX(-100%);
	transition: transform 0.3s ease-out, display 0.3s ease-out allow-discrete;
	outline: none;
	overflow: hidden;
}

.sidebar[open] {
	transform: translateX(0);
}

.sidebar__layout {
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
	border-bottom: 1px solid var(--border-color);
	color: var(--clr-text-soft);
}

.sidebar-header__title {
	color: currentColor;
	font-size: var(--fs-large);
	font-weight: var(--fw-bold);
}

.sidebar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: currentColor;
	border: none;
	background: none;
	cursor: pointer;
	outline: none;
}

.sidebar__close svg {
	width: 1.5rem;
	width: 1.5rem;
	fill: currentColor;
}

@starting-style {
	.sidebar[open] {
		transform: translateX(-100%);
	}
}

.sidebar__content {
	grid-row: 2;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* smooth scroll in iphone */
}

.sidebar-menu {
	font-size: var(--fs-base);
	font-weight: var(--fw-bolder);
	padding: 1rem;
	text-wrap: nowrap;
	--_padding: .85em; /* for inner items */
}

.sidebar__title {
	color: var(--clr-brand-strong);
	font-size: inherit;
	font-weight: var(--fw-bold);
	padding: var(--_padding);
}

.sidebar__list {
	display: flex;
	flex-direction: column;
}

.sidebar__sublist {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .2s ease-in-out;
}

.sidebar__dropdown-btn.is-open + .sidebar__sublist {
	grid-template-rows: 1fr;
}

.sidebar__accordion {
	overflow: hidden;
}

.sidebar__link,
.sidebar__dropdown-btn {
	border-radius: var(--border-radius);
	padding-inline: var(--_padding);
	padding-block: .8125rem;
	text-decoration: none;
	color: var(--clr-text-soft);
	display: flex;
	align-items: center;
	gap: .5em;
}

.sidebar__link:hover ,
.sidebar__dropdown-btn:hover {
	background-color: var(--clr-surface-subtle);
}

.sidebar__dropdown-btn {
	width: 100%;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.sidebar__dropdown-btn::after {
	content: "";
	width: 0.3rem;
	height: 0.3rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 0.2s ease;
}

.sidebar__dropdown-btn.is-open {
	color: var(--clr-brand-strong);
}

.sidebar__dropdown-btn.is-open::after {
	transform: translateY(0.1rem) rotate(-135deg);
}

.sidebar__link {
	font: inherit;
}

.sidebar__label {
	flex-grow: 1;
}

.sidebar__icon {
	display: inline-flex;
	align-items: center;
}

.sidebar__icon svg {
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	fill: currentColor;
	opacity: 0.7;
}

.sidebar__sublist .sidebar__link {
	padding-left: 2em;
}

.sidebar__sublist .sidebar__icon {
	opacity: .65;
}

.sidebar--sports .sidebar__link {
	font-size: var(--fs-small);
}

.sidebar__bottom {
	border-top: 1px solid var(--border-color);
	color: var(--clr-text-soft);
}


.sidebar__social {
	display: flex;
	align-items: center;
	padding: 1.25rem 1.5rem;
}

.sidebar__social .sidebar__label {
	color: var(--clr-text-subtle);
	font-size: var(--fs-small);
}

.sidebar__social .social-media {
	margin-left: auto;
	gap: 1rem;
}




/* || Responsive */

@media (max-width: 768px) {
	.util-bar {
		height: 38px;
	}
	
	.sidebar-button {
		display: block;
	}

	.header__logo-wrap img {
		height: 3rem;
	}

	.header__inner {
		min-height: 72px;
	}

	.header__content-wrap {
		align-items: center;
		padding-bottom: 0;
	}
}