/*
 * Titan Ementa: estilos públicos (mobile first).
 * Usa as cores e os tipos de letra do tema (theme.json) e tem valores próprios de recurso.
 */

.titan-ementa,
.titan-entrada,
.titan-destaques-lista {
	--t-creme: var(--wp--preset--color--creme, #f5f0e6);
	--t-marinho: var(--wp--preset--color--marinho, #10283a);
	--t-marinho-fundo: var(--wp--preset--color--marinho-profundo, #0b2233);
	--t-sec: var(--wp--preset--color--texto-secundario, #5c6b75);
	--t-linha: var(--wp--preset--color--linha, #d9d0bf);
	--t-aviso: var(--wp--preset--color--aviso, #efe8da);
	--t-serifa: var(--wp--preset--font-family--forum, Forum, Georgia, serif);
	--t-sans: var(--wp--preset--font-family--jost, Jost, "Helvetica Neue", Arial, sans-serif);
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.titan-ementa) {
		scroll-behavior: smooth;
	}
}

/* Listas sem marcadores */
.titan-ementa ul,
.titan-entrada ul,
.titan-destaques-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Ementa ---------- */
.titan-ementa {
	margin-inline: auto;
	max-width: 40rem;
	padding: calc(var(--titan-barra-h, 5.7rem) + 1rem) 1.5rem 3rem;
}

/* Seletor de língua: texto, sem bandeiras (uma bandeira é um país, não uma língua) */
.titan-idiomas ul {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}

.titan-idiomas a {
	align-items: center;
	border: 1px solid var(--t-linha);
	color: var(--t-marinho);
	display: inline-flex;
	font-family: var(--t-sans);
	font-size: 0.75rem;
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.12em;
	min-height: 44px;
	min-width: 44px;
	text-decoration: none;
}

.titan-idiomas a[aria-current="page"] {
	background: var(--t-marinho);
	border-color: var(--t-marinho);
	color: var(--t-creme);
}

.titan-ementa__titulo {
	margin: 1.5rem 0 0.5rem;
}

.titan-ementa__notas {
	margin: 0 0 1.5rem;
}

.titan-ementa__nota {
	color: var(--t-sec);
	font-size: 0.875rem;
	margin: 0 0 0.35rem;
}

.titan-ementa__vazio {
	color: var(--t-sec);
	margin-block: 3rem;
	text-align: center;
}

/*
 * Barras de navegação fixas ao descer:
 * 1.ª barra: os grupos (ou as categorias soltas). 2.ª barra: as categorias do grupo em que estamos,
 * que fica visível enquanto estamos nesse grupo e sai quando o grupo acaba.
 * Têm altura fixa para a 2.ª ficar sempre encostada por baixo da 1.ª.
 */
.titan-ementa {
	--t-barra: 3.3125rem;
	--t-topo: calc(var(--wp-admin--admin-bar--height, 0px) + var(--titan-barra-h, 5.7rem));
}

.titan-categorias,
.titan-subcategorias {
	background: var(--t-creme);
	border-bottom: 1px solid var(--t-linha);
	box-sizing: border-box;
	height: var(--t-barra);
	margin-inline: -1.5rem;
	overflow-x: auto;
	padding: 0.25rem 1.5rem;
	position: sticky;
	scrollbar-width: none;
}

.titan-categorias::-webkit-scrollbar,
.titan-subcategorias::-webkit-scrollbar {
	display: none;
}

.titan-categorias {
	border-top: 1px solid var(--t-linha);
	top: var(--t-topo);
	z-index: 3;
}

.titan-subcategorias {
	top: calc(var(--t-topo) + var(--t-barra));
	z-index: 2;
}

.titan-categorias ul,
.titan-subcategorias ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.titan-categorias a,
.titan-subcategorias a {
	align-items: center;
	border: 1px solid var(--t-linha);
	color: var(--t-marinho);
	display: inline-flex;
	font-family: var(--t-sans);
	font-size: 0.8125rem;
	min-height: 44px;
	padding: 0 1rem;
	text-decoration: none;
	white-space: nowrap;
}

/* Botão ativo: o que estamos a ver agora (marcado pelo JavaScript com aria-current) */
.titan-categorias a[aria-current="location"],
.titan-subcategorias a[aria-current="location"] {
	background: var(--t-marinho);
	border-color: var(--t-marinho);
	color: var(--t-creme);
}

/* O contorno de foco fica dentro do botão, para a barra (que desliza) não o cortar */
.titan-categorias a:focus-visible,
.titan-subcategorias a:focus-visible {
	outline-offset: -4px;
}

/*
 * Ao saltar para uma âncora, o título não fica escondido atrás das barras.
 * O afastamento é todo dado pelo scroll-margin das secções: o scroll-padding que o WordPress ou o tema
 * possam pôr na página (por causa da barra de administração) somar-se-ia e deixava o título demasiado abaixo.
 */
html:has(.titan-ementa) {
	scroll-padding-top: 0;
}

.titan-grupo,
.titan-ementa > .titan-categoria {
	scroll-margin-top: calc(var(--t-topo) + var(--t-barra) + 0.5rem);
}

.titan-grupo .titan-categoria {
	scroll-margin-top: calc(var(--t-topo) + 2 * var(--t-barra) + 0.5rem);
}

.titan-categoria h2 {
	margin: 2.5rem 0 1rem;
}

/* Grupos (Café e snacks, Cozinha...): título, barra das categorias, e as categorias */
.titan-grupo > h2 {
	border-top: 1px solid var(--t-linha);
	margin: 3rem 0 1rem;
	padding-top: 1.5rem;
}

.titan-grupo .titan-categoria > h3 {
	font-family: var(--t-serifa);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 2rem 0 0.5rem;
}

.titan-categoria__foto img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	margin-bottom: 0.5rem;
	object-fit: cover;
	width: 100%;
}

/* Pratos */
.titan-prato {
	border-bottom: 1px solid var(--t-linha);
	padding-block: 1rem;
}

.titan-prato:last-child {
	border-bottom: 0;
}

.titan-prato__nome {
	font-family: var(--t-serifa);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

.titan-prato__desc {
	color: var(--t-sec);
	font-size: 0.9375rem;
	margin: 0.25rem 0 0;
}

.titan-prato__alergenios {
	color: var(--t-sec);
	font-size: 0.8125rem;
	margin: 0.25rem 0 0;
}

.titan-prato__preco {
	font-family: var(--t-serifa);
	font-size: 1.25rem;
	font-weight: 400;
	margin: 0;
	white-space: nowrap;
}

/* Só texto: nome, pontinhos e preço à direita */
.titan-prato__cab {
	align-items: baseline;
	display: flex;
	gap: 0.5rem;
}

.titan-prato__pontos {
	border-bottom: 2px dotted var(--t-linha);
	flex: 1;
	min-width: 1rem;
}

/* Com foto: miniatura de 88 px à esquerda, texto à direita */
.titan-prato--foto {
	display: grid;
	gap: 1rem;
	grid-template-columns: 88px 1fr;
}

.titan-prato__foto img {
	display: block;
	height: 88px;
	object-fit: cover;
	width: 88px;
}

.titan-prato--foto .titan-prato__preco {
	margin-top: 0.5rem;
}

.titan-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-top: 0.5rem !important;
}

.titan-etiquetas li {
	background: var(--t-aviso);
	border: 1px solid var(--t-linha);
	color: var(--t-marinho);
	font-family: var(--t-sans);
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
}

.titan-ementa__fim {
	margin-top: 3rem;
	text-align: center;
}

.titan-imprimir {
	min-height: 48px;
	width: 100%;
}

/* ---------- Entrada (QR code) ---------- */
.titan-entrada {
	background: var(--t-creme);
	box-sizing: border-box;
	color: var(--t-marinho);
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	max-width: 32rem;
	min-height: 100vh;
	min-height: 100svh;
	padding: 2rem 1.5rem;
}

.titan-marca {
	align-items: center;
	color: var(--t-marinho);
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.titan-marca img {
	display: block;
	height: auto;
	width: 9.5rem;
}

.titan-marca__a,
.titan-marca__c {
	font-family: var(--t-sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.titan-marca__b {
	font-family: var(--t-serifa);
	font-size: 2.25rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	line-height: 1.1;
	margin-right: -0.25em;
	text-transform: uppercase;
}

.titan-entrada__etiqueta {
	color: var(--t-sec);
	font-family: var(--t-sans);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	margin: 3rem 0 0;
	text-align: center;
	text-transform: uppercase;
}

.titan-entrada__titulo {
	font-family: var(--t-serifa);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.35;
	margin: 1.5rem 0 2rem;
	text-align: center;
}

.titan-entrada__titulo span {
	display: block;
}

.titan-entrada__botoes {
	display: grid;
	gap: 0.75rem;
}

/* Botões de língua: filete claro, bandeira, nome e seta fina */
.titan-botao-idioma {
	align-items: center;
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid var(--t-linha);
	box-sizing: border-box;
	color: var(--t-marinho);
	display: grid;
	gap: 0 1rem;
	grid-template-columns: auto 1fr auto;
	min-height: 56px;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}

.titan-botao-idioma:hover,
.titan-botao-idioma:focus-visible {
	background: #fff;
	border-color: var(--t-marinho);
}

.titan-botao-idioma:focus-visible {
	outline: 2px solid var(--t-marinho);
	outline-offset: 3px;
}

.titan-botao-idioma__bandeira,
.titan-botao-idioma__seta {
	display: flex;
}

.titan-botao-idioma__bandeira svg {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(16, 40, 58, 0.14);
	display: block;
	height: 16px;
	width: 24px;
}

.titan-botao-idioma__nome {
	font-family: var(--t-serifa);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.1;
}

.titan-botao-idioma__seta svg {
	display: block;
	height: 14px;
	width: 8px;
}

/* Texto só para leitores de ecrã ("Ver ementa" depois do nome da língua) */
.titan-so-leitor {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.titan-entrada__site {
	color: var(--t-sec);
	font-size: 0.8125rem;
	margin: auto 0 0;
	padding-top: 2.5rem;
	text-align: center;
}

.titan-entrada__site a {
	color: inherit;
	display: inline-block;
	padding: 0.5rem 0.25rem;
	text-underline-offset: 0.2em;
}

/* Faixa de mar em baixo: sangra até às margens e à base do ecrã, com fusão suave no topo */
.titan-entrada__foto {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
	height: clamp(9rem, 26svh, 14rem);
	margin: 1rem -1.5rem -2rem;
	mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
	overflow: hidden;
}

.titan-entrada__foto img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* ---------- Destaques da Home ([titan_destaques]) ---------- */
.titan-destaque {
	align-items: flex-start;
	border-top: 1px solid var(--t-linha);
	display: grid;
	gap: 1rem;
	grid-template-columns: 88px 1fr;
	padding-block: 1rem;
}

.titan-destaque:first-child {
	border-top: 0;
}

.titan-destaque__foto {
	background:
		repeating-linear-gradient(135deg, rgba(245, 240, 230, 0.06) 0 12px, transparent 12px 24px),
		var(--t-marinho);
	height: 88px;
	width: 88px;
}

.titan-destaque__foto img {
	display: block;
	height: 88px;
	object-fit: cover;
	width: 88px;
}

.titan-destaque__nome {
	font-family: var(--t-serifa);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

.titan-destaque__desc {
	color: var(--t-sec);
	font-size: 0.9375rem;
	margin: 0.25rem 0 0;
}

.titan-destaque__preco {
	font-family: var(--t-serifa);
	font-size: 1.25rem;
	font-weight: 400;
	margin: 0.5rem 0 0;
}

/* ---------- Ecrãs maiores: a mesma coluna, com mais ar ---------- */
@media (min-width: 40rem) {
	.titan-ementa {
		padding-inline: 0;
	}

	.titan-categorias,
	.titan-subcategorias {
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* Normas de funcionamento (fim da ementa) */
.titan-ementa__normas {
	scroll-margin-top: calc(var(--t-topo) + var(--t-barra) + 0.5rem);
	border-top: 1px solid var(--t-linha);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}

.titan-ementa__normas h2 {
	font-family: var(--t-serifa);
	font-weight: 400;
	margin: 0 0 1rem;
}

.titan-normas ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.titan-normas li {
	border-top: 1px solid var(--t-linha);
	padding-block: 0.75rem;
}

.titan-normas summary {
	cursor: pointer;
	font-weight: 500;
	min-height: 44px;
	padding-block: 0.75rem;
}

.titan-normas__iva {
	color: var(--t-sec);
	font-size: 0.875rem;
	margin: 0.75rem 0 0;
}

/* Impressão: sem o espaço reservado à barra fixa */
@media print {
	.titan-ementa {
		padding-top: 1rem;
	}
}

/* ---------- Happy Hour na ementa: cores invertidas para se distinguir do resto ---------- */
.titan-ementa > .titan-ementa__hh {
	background: var(--t-marinho-fundo);
	border-radius: 0.5rem;
	color: var(--t-creme);
	margin-block: 3rem 0;
	padding: 1.5rem 1.25rem;
	scroll-margin-top: calc(var(--t-topo) + var(--t-barra) + 0.5rem);
}

.titan-ementa__hh h2 {
	color: var(--t-creme);
	margin: 0;
}

.titan-ementa__hh-linha {
	color: var(--wp--preset--color--claro-secundario, #b9c6cf);
	font-family: var(--t-sans);
	margin: 0.5rem 0 0.75rem;
}

.titan-ementa__hh .titan-prato {
	border-bottom-color: rgba(245, 240, 230, 0.2);
}

.titan-ementa__hh .titan-prato__nome,
.titan-ementa__hh .titan-prato__preco {
	color: var(--t-creme);
}

.titan-ementa__hh .titan-prato__pontos {
	border-bottom-color: rgba(245, 240, 230, 0.35);
}