/*
 * Marketplace header — About page (/sobre-nos/) only.
 *
 * Reproduces the Angular marketplace header (popagro-web mkt-header.component.scss and
 * mkt-header-products-menu.component.scss). Values come from those files and from measurements
 * of the live header; the Angular breakpoints are kept: 768px (48rem, the theme's own mobile
 * boundary), 992px (62rem) and 1170px (73.125rem).
 *
 * Every selector is scoped under .mkt-header, so nothing here reaches the rest of the page.
 * Markup: template-parts/header/marketplace-header*.php. Behavior: assets/js/marketplace-header.js.
 */

/* Blinker Bold (SIL Open Font License 1.1, assets/fonts/OFL-blinker.txt), used by the Angular
   header for category names, supercategories, services and "ANUNCIE". */
@font-face {
	font-family: "Blinker";
	src: url("../fonts/blinker-bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

.mkt-header {
	--mkt-header-navy: #02395c;
	--mkt-header-green: #2aac5e;
	--mkt-header-green-icon: #19ab54;
	--mkt-header-text: #262626;
	--mkt-header-panel-text: #07121a;
	--mkt-header-gray: #eee;
	--mkt-header-new: #ffb32e;
	--mkt-header-new-mobile: #ffa500;
	--mkt-header-divider: rgb(0 0 0 / 12%);

	position: relative;
	z-index: 1000;
	width: 100%;
	min-height: 60px;
	padding: 14px 15px 10px;
	background-color: var(--mkt-header-navy);
	color: #fff;
	font-family: "Blinker", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	/* The Angular app sets 0.3px on body; every header text inherits it. */
	letter-spacing: 0.3px;
	line-height: 1.6;
}

.mkt-header [hidden] {
	display: none !important;
}

.mkt-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mkt-header a {
	color: inherit;
	text-decoration: none;
}

.mkt-header button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* Icons: fixed boxes matching the original glyph boxes (main.css sets svg { height: auto }). */
.mkt-header .mkt-header__icon {
	display: inline-block;
	flex-shrink: 0;
	max-width: none;
	overflow: visible;
}

.mkt-header .mkt-header__icon--menu { width: 21px; height: 24px; }
.mkt-header .mkt-header__icon--angle-down { width: 8px; height: 16px; }
.mkt-header .mkt-header__icon--angle-right { width: 6px; height: 16px; }
.mkt-header .mkt-header__icon--angle-right-lg { width: 9px; height: 24px; }
.mkt-header .mkt-header__icon--chevron-right { width: 8px; height: 16px; }
.mkt-header .mkt-header__icon--angle-left { width: 8px; height: 20px; }
.mkt-header .mkt-header__icon--close { width: 13px; height: 20px; }
.mkt-header .mkt-header__icon--arrow-right { width: 14px; height: 20px; }
.mkt-header .mkt-header__icon--tag,
.mkt-header .mkt-header__icon--user,
.mkt-header .mkt-header__icon--question { width: 16px; height: 16px; }

/* Bar (mobile first: menu button, centered logo, "ANUNCIE"). */
.mkt-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.mkt-header .mkt-header__toggle {
	display: flex;
	align-items: center;
	height: calc(24px * 1.6 + 2px);
	padding: 1px 6px;
	color: #fff;
}

.mkt-header__logo {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	margin-right: auto;
	margin-left: auto;
}

.mkt-header__logo img {
	width: 120px;
	height: auto;
}

.mkt-header .mkt-header__announce {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 27px;
	margin-left: -43px;
	border-radius: 30px;
	background-color: var(--mkt-header-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.mkt-header__nav,
.mkt-header__actions {
	display: none;
}

/* Mobile drawer. */
.mkt-header__drawer {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
	overscroll-behavior: contain;
	background-color: var(--mkt-header-navy);
}

.mkt-header__drawer-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 60px;
	background-color: var(--mkt-header-navy);
}

.mkt-header__drawer.is-nested .mkt-header__drawer-bar {
	justify-content: space-between;
}

.mkt-header .mkt-header__drawer-back,
.mkt-header .mkt-header__drawer-close {
	display: flex;
	align-items: center;
	height: 55px;
	margin: 0 20px;
	color: #fff;
	font-size: 20px;
}

.mkt-header__drawer-back .mkt-header__icon {
	margin-right: 16px;
}

.mkt-header__view {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.mkt-header__view > li {
	display: flex;
	margin-right: 30px;
	margin-left: 40px;
}

.mkt-header__view > li:first-child:not(.mkt-header__divider) {
	margin-top: 60px;
}

.mkt-header .mkt-header__view > .mkt-header__divider {
	height: 0;
	margin: 24px 0;
	border-top: 1px solid var(--mkt-header-divider);
}

.mkt-header .mkt-header__view > .mkt-header__divider--category {
	margin: 80px 0 0;
}

.mkt-header .mkt-header__view > .mkt-header__divider--end {
	margin: 24px 0 0;
}

.mkt-header .mkt-header__drill,
.mkt-header .mkt-header__drawer-link {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
}

.mkt-header__drill .mkt-header__icon {
	margin-left: 10px;
}

.mkt-header__drawer-item--new {
	position: relative;
}

.mkt-header__drawer-item--new .mkt-header__new {
	position: absolute;
	top: -12px;
	left: 0;
	color: var(--mkt-header-new-mobile);
	font-size: 12px;
}

.mkt-header .mkt-header__drawer-action a {
	display: flex;
	align-items: center;
	height: 42px;
	margin-left: -20px;
	padding: 0 16px;
	border: 1px solid var(--mkt-header-navy);
	border-radius: 4px;
	background-color: var(--mkt-header-navy);
	color: #fff;
	font-size: 14px;
	letter-spacing: normal;
	line-height: 20px;
}

.mkt-header__drawer-action .mkt-header__icon {
	/* 8px plus the space that follows the icon in the Angular button label. */
	margin-right: 10.5px;
	color: var(--mkt-header-green);
}

.mkt-header__drawer-social {
	align-items: center;
	margin-top: 16px;
}

.mkt-header__drawer-social a + a {
	margin-left: 16px;
}

.mkt-header .mkt-header__view > .mkt-header__drawer-category,
.mkt-header .mkt-header__view > .mkt-header__drawer-sub {
	margin-right: 15px;
}

.mkt-header__drawer-category {
	padding-top: 20px;
}

.mkt-header .mkt-header__drawer-category a {
	color: var(--mkt-header-green);
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
}

.mkt-header__drawer-sub {
	padding-top: 17px;
}

.mkt-header .mkt-header__drawer-sub a {
	display: flex;
	align-items: flex-start;
	width: 100%;
	color: #fff;
	font-size: 16px;
	line-height: 20px;
}

.mkt-header__drawer-sub .mkt-header__icon {
	margin-right: 16px;
	margin-left: 10px;
	color: var(--mkt-header-green);
}

.mkt-header .mkt-header__view > .mkt-header__not-found {
	margin: auto 25px 25px;
}

.mkt-header .mkt-header__not-found a {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 310px;
	min-height: 53px;
	border-radius: 14px;
	background-color: var(--mkt-header-navy);
	color: var(--mkt-header-green);
	font-size: 14px;
	line-height: 20px;
}

.mkt-header__not-found .mkt-header__icon {
	margin-right: 8px;
}

body.mkt-header-drawer-open {
	overflow: hidden;
}

@media (max-width: 47.99rem) {
	/* Logged-in users: keep the drawer bar below the WordPress toolbar (46px at this width). */
	body.admin-bar .mkt-header__drawer,
	body.admin-bar .mkt-header__drawer-bar {
		top: 46px;
	}
}

@media (min-width: 48rem) {
	.mkt-header {
		min-height: 55px;
	}

	.mkt-header__inner {
		max-width: 1170px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 15px;
		padding-left: 15px;
	}

	.mkt-header .mkt-header__toggle,
	.mkt-header .mkt-header__announce,
	.mkt-header .mkt-header__drawer {
		display: none !important;
	}

	.mkt-header__logo {
		margin-right: 0;
		margin-left: 0;
	}

	.mkt-header__nav {
		display: block;
		margin-left: 55px;
	}

	.mkt-header__menu {
		display: flex;
		align-items: center;
	}

	.mkt-header__item {
		margin-left: 30px;
	}

	.mkt-header__item:first-child {
		margin-left: 0;
	}

	.mkt-header .mkt-header__link {
		color: #fff;
		transition: color 300ms;
	}

	.mkt-header .mkt-header__link:hover,
	.mkt-header .mkt-header__item.is-open > .mkt-header__link {
		color: var(--mkt-header-green);
	}

	.mkt-header__link .mkt-header__icon {
		margin-left: 8px;
		vertical-align: middle;
	}

	.mkt-header__item--new {
		position: relative;
	}

	.mkt-header__item--new .mkt-header__new {
		position: absolute;
		bottom: 20px;
		color: var(--mkt-header-new);
		font-size: 10px;
	}

	.mkt-header .mkt-header__actions {
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	.mkt-header__actions li {
		margin-left: 24px;
	}

	.mkt-header .mkt-header__action {
		color: #fff;
		font-size: 14px;
		line-height: 20px;
		transition: color 300ms;
	}

	.mkt-header .mkt-header__action:hover {
		color: var(--mkt-header-green);
	}

	.mkt-header__action .mkt-header__icon {
		margin-right: 8px;
		color: var(--mkt-header-green);
		vertical-align: -3px;
	}

	/* Dropdown panels. Positioned against .mkt-header (full width); `top` is left at its static
	   position, right under the toggle, as in Angular. */
	.mkt-header__panel {
		position: absolute;
		z-index: 1000;
		display: none;
		margin-top: 16px;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
		color: var(--mkt-header-panel-text);
		font-size: 13px;
		text-align: left;
	}

	.mkt-header__item.is-open > .mkt-header__panel {
		display: flex;
		animation: mkt-header-panel-in 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	}

	.mkt-header__panel--categories {
		left: 50%;
		width: 100%;
		max-width: 1140px;
		margin-left: -570px;
	}

	/* Measured on the live header: the services panel starts 160px left of its toggle at every
	   width (Angular's left/margin overrides on top of the ng-bootstrap placement). */
	.mkt-header__panel--services {
		min-width: 300px;
		margin-left: -160px;
	}

	.mkt-header .mkt-header__services {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
		padding: 26px 40px;
	}

	.mkt-header .mkt-header__service-link {
		display: flex;
		align-items: center;
		min-height: 24px;
		color: var(--mkt-header-text);
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
		text-transform: uppercase;
		transition: color 200ms;
	}

	.mkt-header .mkt-header__service-link:hover {
		color: var(--mkt-header-green);
	}

	.mkt-header__service-link .mkt-header__icon {
		margin-right: 10px;
		color: var(--mkt-header-green-icon);
	}

	/* Categories mega menu. */
	.mkt-header__products {
		display: flex;
		align-items: stretch;
		width: 100%;
	}

	.mkt-header .mkt-header__supercategories {
		padding: 32px 0;
		background-color: var(--mkt-header-gray);
	}

	.mkt-header .mkt-header__supercategory {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 16px 30px;
		letter-spacing: inherit; /* An <li> in Angular, so it keeps the 0.3px that buttons reset. */
	}

	.mkt-header__supercategory.is-selected {
		background-color: #fff;
	}

	.mkt-header__supercategory span {
		color: var(--mkt-header-navy);
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
		text-transform: uppercase;
	}

	.mkt-header__supercategory .mkt-header__icon {
		color: var(--mkt-header-green);
		transition: all 200ms ease-in-out;
	}

	.mkt-header__categories {
		display: flex;
		flex-grow: 1;
		gap: 20px;
		padding: 32px 30px;
	}

	.mkt-header__column {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.mkt-header .mkt-header__category-link {
		color: var(--mkt-header-green);
		font-size: 16px;
		font-weight: 700;
		transition: all 200ms ease-in-out;
	}

	.mkt-header .mkt-header__category-link:hover {
		color: var(--mkt-header-navy);
	}

	.mkt-header .mkt-header__subcategories {
		line-height: 28px;
	}

	.mkt-header__subcategories li,
	.mkt-header__categories-empty {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
	}

	.mkt-header__subcategories .mkt-header__icon,
	.mkt-header__categories-empty .mkt-header__icon {
		color: var(--mkt-header-green);
	}

	.mkt-header .mkt-header__subcategory-link {
		color: var(--mkt-header-text);
		font-size: 16px;
		transition: all 200ms ease-in-out;
	}

	.mkt-header .mkt-header__subcategory-link:hover {
		color: var(--mkt-header-green);
		text-decoration: underline;
	}

	.mkt-header .mkt-header__see-all {
		color: var(--mkt-header-green);
		font-size: 12px;
		line-height: inherit;
		text-transform: uppercase;
		transition: all 200ms ease-in-out;
	}

	.mkt-header .mkt-header__see-all:hover {
		text-decoration: underline;
	}
}

@media (min-width: 62rem) {
	.mkt-header__item {
		margin-left: 32px;
	}
}

@media (min-width: 48rem) and (max-width: 73.125rem) {
	.mkt-header__panel--categories {
		left: 0;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mkt-header *,
	.mkt-header .mkt-header__item.is-open > .mkt-header__panel {
		animation: none !important;
		transition: none !important;
	}
}

/* The Angular keyframes also rotate on X, but `transform: none !important` on the menu cancels
   that part there, so only the fade is visible. */
@keyframes mkt-header-panel-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}