/* pucpr-widgets — Dropdown mobile para tabs nativas do Elementor.
   Opt-in via .pucpr-tabs-mobile-dropdown. Todas as regras são escopadas sob
   essa classe — além do isolamento, o escopo dá especificidade suficiente para
   vencer as regras agressivas do Elementor (ex.: `.elementor button`).
   Valores conforme o componente do Figma (node 1573-1293 fechado / 1573-1295 aberto). */

/* A casca do dropdown só existe no mobile. Acima de 767px fica oculta e as
   tabs nativas horizontais continuam no comando. */
.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd {
	display: none;
}

@media (max-width: 767px) {
	/* Esconde a navegação nativa que o JS assumiu (marcada por ele). */
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd-native {
		display: none !important;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd {
		display: block;
		position: relative;
		z-index: 2;               /* header por cima do card de conteúdo (z-index 0) */
		width: calc(100% - 40px); /* header mais estreito que o card: 20px de margem cada lado */
		margin: 0 20px 0;
	}

	/* Aberto: sobe o dropdown inteiro acima do conteúdo seguinte. */
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd.is-open {
		z-index: 100;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 50px;                   /* Figma: h-[50px] */
		padding: 0 22px;                /* Figma: px-[22px] */
		border: 0;
		border-radius: 20px 20px 0 0;   /* cantos de cima; base SEMPRE reta (cola no card/painel) */
		background: #863bff;            /* Figma: token --lilás (sólido) */
		color: #fff;
		font-size: 18px;                /* Figma: Parágrafo-LG 18px */
		font-weight: 400;               /* Source Sans Pro Regular */
		line-height: normal;
		text-align: left;
		cursor: pointer;
	}

	/* Trava o roxo no hover/focus — o tema aplica um hover rosa em <button>. */
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__trigger:hover,
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__trigger:focus {
		background: #863bff;
		color: #fff;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__label {
		flex: 1 1 auto;
	}

	/* Chevron desenhado com bordas. */
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__caret {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-left: 14px;
		margin-top: -4px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		transition: transform 0.25s ease;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd.is-open .pucpr-tabs-dd__caret {
		margin-top: 3px;
		transform: rotate(-135deg);
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__panel {
		position: absolute;
		z-index: 20;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 20px;                      /* Figma: gap-[20px] entre opções */
		margin: 0;
		padding: 20px 25px;             /* Figma: py-[20px] px-[25px] */
		list-style: none;
		background: #fff;
		border-radius: 0 0 25px 25px;   /* Figma: rounded-bl/br-[25px] */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Figma: drop-shadow 0 4px 12px rgba(0,0,0,.2) */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd.is-open .pucpr-tabs-dd__panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__option {
		margin: 0;
		padding: 0;
		font-size: 16px;                /* Figma: 16px */
		font-weight: 400;               /* Source Sans Pro Regular */
		line-height: normal;
		color: #000;                    /* Figma: --preto/black */
		cursor: pointer;
		transition: color 0.15s ease;
	}

	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__option:hover,
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__option:focus {
		color: #863bff;
		outline: none;
	}

	/* A opção correspondente à aba ativa some da lista (JS seta [hidden]). */
	.pucpr-tabs-mobile-dropdown .pucpr-tabs-dd__option[hidden] {
		display: none;
	}

	/* Devolve o arredondamento do topo do card de conteúdo (nativo = só embaixo).
	   Só o select fica com base reta; o conteúdo volta a ser um card arredondado.
	   Zera o margin-top negativo nativo (-24px, que tucava o card sob a nav antiga
	   e deixava o trigger afundado): agora o card começa na base do trigger. */
	.pucpr-tabs-mobile-dropdown .e-n-tabs-content > .e-con {
		border-radius: 20px;
		margin-top: 0;
	}
}