/**
 * Estilos do Header - Componente de Navegação
 * Baseado no design do Figma node-id: 19248-163
 * Usa estrutura padrão do Bootstrap Navbar com customizações
 */

.header-natal {
	padding: 16px 0;
	position: relative;
}

/* Navbar Bootstrap customizado */
.header-natal__navbar {
	padding: 0;
	background: transparent;
	border: none;
}

.header-natal__navbar .container {
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: nowrap; /* Desktop: tudo em uma linha */
}

/* Brand (Logo) */
.header-natal__brand {
	padding: 0;
	margin: 0;
	width: 78px;
	height: 69px;
	display: block;
	text-decoration: none;
}

.header-natal__brand:hover,
.header-natal__brand:focus {
	text-decoration: none;
}

.header-natal__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Logo customizado do WordPress */
.header-natal__brand .custom-logo-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.header-natal__brand .custom-logo-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.header-natal__logo-text {
	font-family: var(--font-family-headings);
	font-weight: var(--font-weight-bold);
	color: #fff;
	font-size: 1.5rem;
}

/* Navbar Toggler customizado */
.header-natal__navbar .navbar-toggler {
	border: none;
	padding: 8px;
	background: transparent;
}

.header-natal__navbar .navbar-toggler:focus {
	box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
	outline: none;
}

.header-natal__navbar .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navbar Collapse */
/* Bootstrap gerencia o display via navbar-expand-lg */
.header-natal__navbar .navbar-collapse {
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

/* Desktop: sempre visível acima do breakpoint lg */
@media (min-width: 992px) {
	.header-natal__navbar .navbar-collapse {
		display: flex !important;
	}
}

/* Breakpoint para notebooks de tela pequena (1366x768) */
@media (max-width: 1366px) {
	.header-natal__navbar .container {
		padding: 0 60px;
	}
}

/* Mobile: escondido por padrão, visível apenas com .show */
@media (max-width: 991.98px) {
	/* Container em coluna quando collapse expande */
	.header-natal__navbar .container {
		flex-wrap: wrap; /* Permite que collapse vá para nova linha */
	}
	
	/* Logo e toggler na primeira linha */
	.header-natal__brand {
		order: 1;
		flex-shrink: 0;
	}
	
	.header-natal__navbar .navbar-toggler {
		order: 2;
		margin-left: auto; /* Empurra para a direita */
	}
	
	/* Collapse na segunda linha, ocupando toda a largura */
	.header-natal__navbar .navbar-collapse {
		display: none;
		flex-basis: 100%; /* Ocupa toda a largura quando visível */
		width: 100%;
		order: 3; /* Aparece depois do logo e toggler */
		margin-top: 0; /* Remove espaçamento superior */
	}
	
	.header-natal__navbar .navbar-collapse.show,
	.header-natal__navbar .navbar-collapse.collapsing {
		display: flex !important;
		flex-basis: 100%;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* Menu de Navegação */
/* Não força display: flex para permitir que classes Bootstrap funcionem */
.header-natal__nav {
	flex: 1;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* Desktop: mostra como flex */
@media (min-width: 992px) {
	.header-natal__nav {
		display: flex;
	}
}

.header-natal__nav .nav-item {
	margin: 0;
	list-style: none;
	list-style-type: none;
}

.header-natal__nav-link {
	font-family: var(--font-family-headings); /* Bricolage Grotesque */
	font-weight: var(--font-weight-extrabold); /* 800 */
	font-size: 16px;
	line-height: 1;
	color: #ffffff !important;
	text-decoration: none;
	white-space: nowrap;
	padding: 8px;
	transition: var(--transition-base);
}

.header-natal__nav-link:hover,
.header-natal__nav-link:focus {
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none;
}

.header-natal__nav-link.active {
	color: #ffffff !important;
}

/* Botão CTA */
.header-natal__cta {
	flex-shrink: 0;
}

.btn-natal-cta {
	background-color: #0c7003;
	border: 2px solid #064800;
	border-left: 0;
	border-radius: 6px;
	padding: 16px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	transition: var(--transition-base);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.btn-natal-cta:hover,
.btn-natal-cta:focus {
	background-color: #0a5d02;
	border-color: #053d00;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.btn-natal-cta:active {
	background-color: #084a01 !important; /* Mantém background mais escuro quando pressionado */
	border-color: #042a00 !important;
	text-decoration: none;
	transform: translateY(0); /* Remove o efeito de elevação quando pressionado */
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) !important; /* Sombra mais próxima quando pressionado */
}

.btn-natal-cta__text {
	font-family: var(--font-family-body); /* Globotipo Rounded */
	font-weight: var(--font-weight-bold);
	font-size: 16px;
	line-height: 16px;
	color: #ffffff;
	white-space: nowrap;
}

/* Responsividade */
/* Breakpoint lg (992px) - Bootstrap navbar-expand-lg */
@media (max-width: 991.98px) {
	.header-natal__navbar .container {
		padding: 0 20px;
		gap: 20px;
		flex-wrap: wrap; /* Permite que collapse vá para nova linha quando expande */
	}

	.header-natal__brand {
		width: 60px;
		height: 53px;
		/* order já definido acima na seção mobile */
	}

	/* Navbar Collapse em coluna no mobile quando expandido */
	.header-natal__navbar .navbar-collapse.show,
	.header-natal__navbar .navbar-collapse.collapsing {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		/* width, flex-basis, padding já definidos acima */
	}

	/* Menu em coluna */
	.header-natal__nav {
		flex-direction: column;
		width: 100%;
		gap: 12px;
		align-items: flex-start;
	}

	.header-natal__nav-link {
		font-size: 16px;
		padding: 12px 0;
		width: 100%;
		justify-content: flex-start;
	}

	/* CTA em largura total */
	.header-natal__cta {
		width: 100%;
	}

	.btn-natal-cta {
		width: 100%;
		justify-content: center;
		padding: 14px;
		height: auto;
	}

	.btn-natal-cta__text {
		font-size: 16px;
	}
}

@media (max-width: 767.98px) {
	.header-natal__navbar .container {
		padding: 12px 42px;
		gap: 16px;
	}

	.header-natal__brand {
		width: 60px;
		height: 100%;
	}

	.header-natal__navbar .navbar-collapse {
		padding-top: 16px;
		padding-bottom: 16px;
		gap: 16px;
	}

	.header-natal__nav {
		gap: 8px;
	}

	.header-natal__nav-link {
		font-size: 16px;
		padding: 10px 0;
	}

	.btn-natal-cta {
		padding: 12px;
	}

	.btn-natal-cta__text {
		font-size: 14px;
	}
}