/* ==========================================================================
   COMPONENTE: HEADER SOBRE HERO
   Reutilizável noutras páginas: basta ligar o filtro
   `absites_header_over_hero` e começar a página com uma secção escura.
   ========================================================================== */

/* O canvas acompanha o azul (evita branco acima da barra de administração). */
html:has(.header-over-hero) {
	background: var(--c-primary-700);
}

/* O header fica dentro de um slot com altura zero: o slot começa depois da
   barra de administração e o header absoluto ancora-se a ele. Assim a barra
   (que em ecrãs <=600px é `position: absolute`) continua no topo do documento,
   sem faixa branca por cima. */
.header-over-hero .site-header-slot {
	position: relative;
	height: 0;
}

.ai-header--over-hero {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	margin-bottom: 0;
	background: transparent;
}

.ai-header--over-hero .ai-header__center {
	background: transparent;
	box-shadow: none;
}

/* Só a barra do header. O drawer móvel fica fora de .ai-header__inner e
   mantém o fundo branco com os links azuis. */
.ai-header--over-hero .ai-header__inner a,
.ai-header--over-hero .ai-header__inner .ai-header__menu a,
.ai-header--over-hero .ai-header__inner .ai-header__cart,
.ai-header--over-hero .ai-header__inner .ai-header__search-toggle,
.ai-header--over-hero .ai-header__inner .ai-account__toggle {
	color: var(--c-white) !important;
}

.ai-header--over-hero .ai-header__inner .custom-logo-link img,
.ai-header--over-hero .ai-header__left img {
	filter: brightness(0) invert(1);
}

.ai-header--over-hero .ai-header__cart-count {
	background: var(--c-white);
	color: var(--c-primary);
}

.ai-header--over-hero .ai-header__burger span {
	background: var(--c-white);
}

.ai-header--over-hero .ai-account__avatar {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.ai-header--over-hero .ai-header__inner .sub-menu a {
	color: #333 !important;
}

/* Dropdown da conta: mantém-se escuro sobre o painel branco. */
.ai-header--over-hero .ai-header__inner .ai-account__menu a {
	color: #333 !important;
}