/* =====================================================================
   MENU PRINCIPAL 2026 (06/10/2026)

   Desenho "Site Duplo D v2" do Claude Design: itens sem separador, chevron
   fino nos que abrem, ativo e hover no vinho, e "O que fazemos?" como um
   painel de quatro colunas (UX Design, UI e Front-end, Product Design,
   SEO e GEO), titulo de cada coluna em caixa alta na tinta da familia do
   agente, com filete de 2px na cor da familia.

   O mega menu nativo do Betheme esta desligado (theme-disable mega-menu),
   entao o painel e CSS sobre o dropdown aninhado comum: o item de topo tem
   .dd-mm-root, cada coluna .dd-mm-<familia>. Carrega com a camada
   Duplod_Menu (body.dd-menu-2026). So a partir de 1098px, onde o
   cabecalho cabe numa linha; abaixo vale o menu do celular.
   ===================================================================== */

.dd-menu-2026 {
	--mm-action: #A51D2B;
	--mm-ink: #2E2A2A;
	--mm-ink-2: #544D4D;
	--mm-bg: #FCFCFC;
}

@media (min-width: 1098px) {

	/* --- Barra --------------------------------------------------------- */

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-nav-cta) > a > span {
		border: 0 !important;
		padding-left: 14px;
		padding-right: 14px;
	}

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-nav-cta) > a {
		color: var(--mm-ink);
		transition: color .15s ease;
	}

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-nav-cta) > a:hover,
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-nav-cta):hover > a,
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-nav-cta):focus-within > a,
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li.current-menu-item:not(.dd-nav-cta) > a,
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li.current-menu-ancestor:not(.dd-nav-cta) > a {
		color: var(--mm-action);
	}

	/* Chevron fino nos itens que abrem, como no desenho. */
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li.menu-item-has-children > a > span {
		display: inline-flex;
		align-items: center;
		gap: 7px;
	}

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li.menu-item-has-children > a > span::after {
		content: "" !important;
		display: block !important;
		width: 5px;
		height: 5px;
		margin-top: -3px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		opacity: .8;
	}

	/* O tema desenha uma seta propria no item e uma barra no topo do ativo. */
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li > a > .menu-arrow,
	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-nav-cta) > a::after {
		display: none !important;
	}


	/* --- Dropdown simples (Empresa) ------------------------------------ */

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-mm-root) > ul.sub-menu {
		border-radius: 8px;
		padding: 8px 0;
		background: var(--mm-bg);
		box-shadow: 0 12px 32px rgba(46, 42, 42, .14);
		overflow: hidden;
	}

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-mm-root) > ul.sub-menu li a {
		padding: 9px 20px;
		font-size: .875rem;
		color: var(--mm-ink-2);
		border: 0;
	}

	html .dd-menu-2026 #Top_bar #menu > ul.menu-main > li:not(.dd-mm-root) > ul.sub-menu li a:hover {
		color: var(--mm-action);
		background: #F3EFEF;
	}


	/* --- Painel "O que fazemos?" --------------------------------------- */

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu {
		left: 50%;
		transform: translateX(-50%);
		width: 820px;
		max-width: calc(100vw - 32px);
		box-sizing: border-box;
		padding: 24px;
		background: var(--mm-bg);
		border-radius: 8px;
		box-shadow: 0 16px 40px rgba(46, 42, 42, .16);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	/* Abre no hover e pelo teclado. O JS do tema tambem abre no hover; o
	   !important garante grade em vez do display:block que ele escreve. */
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root:hover > ul.sub-menu,
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root:focus-within > ul.sub-menu,
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root.hover > ul.sub-menu {
		display: grid !important;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li {
		position: static;
		width: auto;
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* Titulo da coluna: nao e link, e rotulo. */
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > a {
		padding: 0 0 6px;
		margin: 0 0 2px;
		border: 0;
		border-bottom: 2px solid var(--mm-line, #E4DFDF);
		background: none !important;
		cursor: default;
		pointer-events: none;
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		line-height: 1.4;
		color: var(--mm-deep, var(--mm-ink));
		/* O dropdown arredonda o ultimo item (0 0 8px 8px): o filete curvava. */
		border-radius: 0 !important;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > a > span {
		padding: 0;
		border: 0;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > a .menu-arrow,
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root .menu-toggle {
		display: none !important;
	}

	/* Links da coluna: a lista do 3o nivel fica aberta, dentro da coluna. */
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu {
		display: block !important;
		position: static;
		left: auto;
		top: auto;
		width: auto;
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		border: 0;
		opacity: 1;
		visibility: visible;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu > li {
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu > li > a {
		display: block;
		padding: 5px 0;
		border: 0;
		background: none;
		font-size: .875rem;
		line-height: 1.45;
		font-weight: 400;
		color: var(--mm-ink-2);
		white-space: normal;
		transition: color .15s ease;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu > li > a > span {
		padding: 0;
		border: 0;
	}

	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu > li > a:hover,
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu > li > a:focus-visible,
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-root > ul.sub-menu > li > ul.sub-menu > li.current-menu-item > a {
		color: var(--mm-action);
	}

	/* Familias: tinta e filete do titulo (os mesmos -deep e -line da v2). */
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-lume   { --mm-deep: hsl(4 52% 26%);   --mm-line: hsl(4 38% 68%); }
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-node   { --mm-deep: hsl(214 52% 26%); --mm-line: hsl(214 38% 68%); }
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-signal { --mm-deep: hsl(34 52% 26%);  --mm-line: hsl(34 38% 68%); }
	html .dd-menu-2026 #Top_bar #menu li.dd-mm-pharos { --mm-deep: hsl(262 52% 26%); --mm-line: hsl(262 38% 68%); }

	html .dd-menu-2026 #Top_bar #menu a:focus-visible {
		outline: 2px solid var(--mm-action);
		outline-offset: 2px;
		border-radius: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html .dd-menu-2026 #Top_bar #menu a {
		transition: none;
	}
}