/**
 * Sticky header — desktop + mobile.
 * Antes vivia espalhado dentro do custom-style.css (uma parte no
 * bloco desktop, outra no bloco mobile). Fica tudo aqui, junto,
 * porque é tudo sobre a mesma coisa: o comportamento e aspeto do
 * #masthead ao fazer scroll.
 *
 * --header-height é definida uma vez por breakpoint, e usada tanto
 * no padding-top do body como na posição do mega menu — os dois
 * deixam de poder desalinhar-se um do outro.
 */

:root {
	--header-height: 72px;
	--admin-bar-height: 32px;
}

/* ==========================================================
   DESKTOP (769px+)
========================================================== */
@media (min-width: 769px) {

	.admin-bar #masthead {
		top: var(--admin-bar-height);
	}

	#masthead {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
		background-color: white;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
		transition: transform 0.3s ease-in-out;
		overflow: visible;
	}

	#masthead.header-hidden {
		transform: translateY(-120%);
	}

	body {
		padding-top: var(--header-height);
	}

	/* FIX: sem isto, o conteúdo ficava ligeiramente tapado pelo
	   header para quem está autenticado no wp-admin. */
	.admin-bar body {
		padding-top: calc(var(--header-height) + var(--admin-bar-height));
	}

	/* mega submenu */
	#masthead .main-header-menu > .menu-item {
		position: static;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu {
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--header-height) + 10px);
		width: 100vw;
		min-width: 100vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 14px 28px;
		padding: 22px 40px;
		background: #ffffff;
		border-top: 1px solid #e5e5e5;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.25s ease, visibility 0.25s ease;
		z-index: 999;
	}

	#masthead .main-header-menu > .menu-item:hover > .sub-menu,
	#masthead .main-header-menu > .menu-item:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu > li {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu > li > a {
		padding: 10px 18px;
		border-radius: 999px;
		color: #333;
		font-size: 1rem;
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu > li > a:hover {
		background: #0274be;
		color: #ffffff;
		transform: scale(1.05);
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-featured > a {
		padding: 5px 10px;
		background: transparent;
		color: #333;
		font-size: 1.05rem;
		font-weight: 700;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-featured > a:hover {
		background: transparent;
		color: #0274be;
		transform: scale(1.05);
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-divider {
		flex: 0 0 100%;
		height: 1px;
		max-width: 100%;
		margin: 3px auto;
		background: #d9d9d9;
		pointer-events: none;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-divider > a {
		display: none;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-simple {
		flex: 0 0 auto;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-simple > a {
		padding: 4px 10px;
		border-radius: 999px;
		background: transparent;
		color: #555;
		font-size: 0.86rem;
		font-weight: 600;
	}

	#masthead .main-header-menu > .menu-item > .sub-menu .submenu-simple > a:hover {
		background: transparent;
		color: #0274be;
		transform: scale(1.04);
	}
}

/* ==========================================================
   MOBILE (até 768px)
========================================================== */
@media (max-width: 768px) {

	:root {
		--header-height: 69px;
	}

	.admin-bar #masthead {
		top: var(--admin-bar-height);
	}

	#masthead {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		background-color: white;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease-in-out;
	}

	#masthead.header-hidden {
		transform: translateY(-100%);
	}

	body {
		padding-top: var(--header-height);
	}

	.admin-bar body {
		padding-top: calc(var(--header-height) + var(--admin-bar-height));
	}
}