/*
 * Header oficial do tema.
 *
 * Responsabilidade: estilizar somente o componente de cabecalho localizado em
 * `template-parts/header/header.php`, usando tokens do theme.json e da camada
 * base do tema.
 */

.rnen-site-header {
	--rnen-header-height: 4.5rem;
	--rnen-header-link-color: var(--wp--preset--color--neutral-900, var(--rnen-color-text));
	--rnen-header-link-hover-color: var(--wp--preset--color--primary-700, var(--rnen-color-link-hover));
	--rnen-header-background: var(--wp--preset--color--neutral-0, var(--rnen-color-background));
	--rnen-header-border-color: var(--wp--preset--color--neutral-200, var(--rnen-color-border));

	position: relative;
	z-index: var(--rnen-z-index-header);
	background: var(--rnen-header-background);
	border-bottom: var(--rnen-border-width) var(--rnen-border-style) var(--rnen-header-border-color);
}

.rnen-site-header--sticky {
	position: sticky;
	top: 0;
}

.rnen-site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: var(--rnen-space-6);
	align-items: center;
	min-height: var(--rnen-header-height);
}

.rnen-site-header__brand {
	min-width: 0;
}

.rnen-site-header__brand-link {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	color: var(--rnen-header-link-color);
	font-weight: var(--rnen-font-weight-bold);
	line-height: var(--rnen-line-height-tight);
	text-decoration: none;
}

.rnen-site-header__logo {
	width: auto;
	max-width: 12rem;
	max-height: 3rem;
}

.rnen-site-header__site-name {
	display: inline-block;
	max-width: 14rem;
	overflow-wrap: break-word;
	font-size: var(--rnen-font-size-lg);
}

.rnen-site-header__navigation {
	justify-self: center;
}

.rnen-site-header__menu,
.rnen-site-header__mobile-list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.rnen-site-header__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rnen-space-2);
	align-items: center;
	justify-content: center;
}

.rnen-site-header__menu a,
.rnen-site-header__mobile-list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--rnen-space-2) var(--rnen-space-3);
	color: var(--rnen-header-link-color);
	font-size: var(--rnen-font-size-sm);
	font-weight: var(--rnen-font-weight-medium);
	line-height: var(--rnen-line-height-tight);
	text-decoration: none;
	border-radius: var(--rnen-radius-sm);
	transition:
		color var(--rnen-transition-base),
		background-color var(--rnen-transition-base);
}

.rnen-site-header__menu a:hover,
.rnen-site-header__menu a:focus-visible,
.rnen-site-header__mobile-list a:hover,
.rnen-site-header__mobile-list a:focus-visible {
	color: var(--rnen-header-link-hover-color);
	background-color: var(--wp--preset--color--primary-50, var(--rnen-color-primary-50));
}

.rnen-site-header__actions {
	display: flex;
	justify-content: flex-end;
}

.rnen-site-header__account-link,
.rnen-site-header__mobile-account-link,
.rnen-site-header__mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: var(--rnen-space-2) var(--rnen-space-4);
	color: var(--wp--preset--color--neutral-0, var(--rnen-color-text-inverse));
	font-size: var(--rnen-font-size-sm);
	font-weight: var(--rnen-font-weight-semibold);
	line-height: var(--rnen-line-height-tight);
	text-decoration: none;
	cursor: pointer;
	background: var(--wp--preset--color--primary-700, var(--rnen-color-primary-700));
	border: var(--rnen-border-width) var(--rnen-border-style) var(--wp--preset--color--primary-700, var(--rnen-color-primary-700));
	border-radius: var(--rnen-radius-full);
	transition:
		color var(--rnen-transition-base),
		background-color var(--rnen-transition-base),
		border-color var(--rnen-transition-base);
}

.rnen-site-header__account-link:hover,
.rnen-site-header__account-link:focus-visible,
.rnen-site-header__mobile-account-link:hover,
.rnen-site-header__mobile-account-link:focus-visible,
.rnen-site-header__mobile-toggle:hover,
.rnen-site-header__mobile-toggle:focus-visible {
	color: var(--wp--preset--color--neutral-0, var(--rnen-color-text-inverse));
	background: var(--wp--preset--color--primary-900, var(--rnen-color-primary-900));
	border-color: var(--wp--preset--color--primary-900, var(--rnen-color-primary-900));
}

.rnen-site-header__mobile-menu {
	display: none;
	justify-self: end;
}

.rnen-site-header__mobile-toggle {
	list-style: none;
}

.rnen-site-header__mobile-toggle::-webkit-details-marker {
	display: none;
}

.rnen-site-header__mobile-toggle::after {
	width: 0.45rem;
	height: 0.45rem;
	margin-inline-start: var(--rnen-space-2);
	content: "";
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform var(--rnen-transition-base);
}

.rnen-site-header__mobile-menu[open] .rnen-site-header__mobile-toggle::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.rnen-site-header__mobile-navigation {
	position: absolute;
	top: calc(100% + var(--rnen-space-2));
	right: var(--rnen-container-padding);
	left: var(--rnen-container-padding);
	display: grid;
	gap: var(--rnen-space-4);
	padding: var(--rnen-space-4);
	background: var(--rnen-header-background);
	border: var(--rnen-border-width) var(--rnen-border-style) var(--rnen-header-border-color);
	border-radius: var(--rnen-radius-md);
	box-shadow: var(--rnen-shadow-md);
}

.rnen-site-header__mobile-list {
	display: grid;
	gap: var(--rnen-space-1);
}

.rnen-site-header__mobile-account-link {
	justify-self: start;
}

@media (max-width: 63.9375rem) {
	.rnen-site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.rnen-site-header__navigation,
	.rnen-site-header__actions {
		display: none;
	}

	.rnen-site-header__mobile-menu {
		display: block;
	}
}

@media (max-width: 35.9375rem) {
	.rnen-site-header {
		--rnen-header-height: 4rem;
	}

	.rnen-site-header__inner {
		gap: var(--rnen-space-4);
	}

	.rnen-site-header__logo {
		max-width: 9rem;
		max-height: 2.5rem;
	}

	.rnen-site-header__site-name {
		max-width: 11rem;
		font-size: var(--rnen-font-size-md);
	}
}