/* =============================================================================
   NOTCH
   Transição entre a section anterior e a que o contém. As peças pintam o
   fundo DELA (herança de --system-bg-surface) e a faixa atrás pinta o fundo da
   section ANTERIOR via seletor de irmão abaixo.
   ============================================================================= */

.notch {
	width: 100%;
	height: 40px;
	min-height: 30px;
	display: flex;
	justify-content: space-between;
	position: relative;
	background-color: transparent;
}

.notch-left,
.notch-right {
	width: 45%;
	background-color: var(--system-bg-surface);
	border-radius: 15px 15px 0 0;
}

.notch-center {
	width: 15%;
	position: relative;
	overflow: visible;
}

.notch-center svg {
	position: absolute;
	width: 30px;
	height: 30px;
	bottom: -0.5px;
}

.notch-center svg path {
	fill: var(--system-bg-surface);
}

.notch-center svg:first-child {
	left: -0.5px;
	transform: rotate(270deg);
}

.notch-center svg:last-child {
	right: -0.5px;
	transform: rotate(180deg);
}

@media (max-width: 768px) {
	.notch-left,
	.notch-right {
		width: 36%;
	}

	.notch-center {
		width: 28%;
	}
}


/* =============================================================================
   NOTCH — CORES DA FAIXA DE TRÁS (seletor de irmão)

   CSS não lê variável de irmão, então o mapeamento tema→fundo é explícito aqui.
   Aponta para --system-bg-surface-* do tema, nunca para o primitivo: a faixa tem que
   acompanhar o tema, inclusive quando ele está com uma cor de debug.

   Section anterior SEM data-theme não casa com nada → faixa transparente, o que
   deixa o bg do hero (single-header) aparecer.

   POR QUE OS SELETORES SÃO ASSIM: o ScrollTrigger embrulha o que ele pina num
   .pin-spacer em runtime. Um `+ [data-theme] > .notch` quebraria após o JS rodar
   — notch nasce certo e fica transparente segundos depois. Por isso nenhum lado
   assume profundidade:

     :is(A, :has(> A))   a section anterior, embrulhada ou não
     + *                 a próxima faixa da página, embrulhada ou não
     .notch:first-child  o notch dentro dela, em qualquer profundidade

   :first-child separa o notch de transição do notch do single-header (último
   filho de .content, nunca recebe faixa).

   O par de cada bloco é o footer, irmão de <main>, que enxerga o anterior via
   :has().
   ============================================================================= */

main > :is([data-theme="light"], :has(> [data-theme="light"])) + * .notch:first-child,
main:has(> [data-theme="light"]:last-child) + footer > .notch,
main:has(> :last-child > [data-theme="light"]) + footer > .notch {
	background-color: var(--system-bg-surface-light);
}

main > :is([data-theme="dark"], :has(> [data-theme="dark"])) + * .notch:first-child,
main:has(> [data-theme="dark"]:last-child) + footer > .notch,
main:has(> :last-child > [data-theme="dark"]) + footer > .notch {
	background-color: var(--system-bg-surface-dark);
}

main > :is([data-theme="orange"], :has(> [data-theme="orange"])) + * .notch:first-child,
main:has(> [data-theme="orange"]:last-child) + footer > .notch,
main:has(> :last-child > [data-theme="orange"]) + footer > .notch {
	background-color: var(--system-bg-surface-orange);
}

main > :is([data-theme="dark-sand"], :has(> [data-theme="dark-sand"])) + * .notch:first-child,
main:has(> [data-theme="dark-sand"]:last-child) + footer > .notch,
main:has(> :last-child > [data-theme="dark-sand"]) + footer > .notch {
	background-color: var(--system-bg-surface-dark-sand);
}


/* Section que termina numa cor diferente da que ela veste declara data-theme-end.
   Vem depois de propósito — mesma especificidade das regras acima, então a
   borda declarada ganha da superfície da section. */

main > :is([data-theme-end="light"],     :has(> [data-theme-end="light"]))     + * .notch:first-child { background-color: var(--system-bg-surface-light); }
main > :is([data-theme-end="dark"],      :has(> [data-theme-end="dark"]))      + * .notch:first-child { background-color: var(--system-bg-surface-dark); }
main > :is([data-theme-end="orange"],    :has(> [data-theme-end="orange"]))    + * .notch:first-child { background-color: var(--system-bg-surface-orange); }
main > :is([data-theme-end="dark-sand"], :has(> [data-theme-end="dark-sand"])) + * .notch:first-child { background-color: var(--system-bg-surface-dark-sand); }