/* ============================================================
 *  Quinta do Barrieiro - Bottom Bar
 *  Barra de navegacao fixa no fundo (logo + menu + idiomas).
 *  Markup gerado por qb_render_bottombar() no plugin.
 *
 *  A altura do logo vem das Opcoes do Tema do Uncode e e injetada
 *  inline no <nav> como --qb-bb-logo-h / --qb-bb-logo-h-mobile.
 *  As cores (--qb-bb-bg / --qb-bb-text) podem ser reescritas em
 *  runtime pelo topbar.js (cor da seccao atras da barra).
 * ============================================================ */

:root{
	--qb-bb-bg:#F1EEDA;
	--qb-bb-text:#111;
	--qb-bb-height:64px;
	/* A altura do logo vem das Opcoes do Tema do Uncode e e injetada
	   inline no <nav>. Estes valores sao apenas fallback. */
	--qb-bb-logo-h:20px;
	--qb-bb-logo-h-mobile:20px;
}
.qb-bottombar{
	position:fixed;left:0;right:0;bottom:0;z-index:9999;
	display:flex;flex-direction:column;
	padding:10px 40px calc(10px + env(safe-area-inset-bottom));
	background:var(--qb-bb-bg);
	font-family:inherit;font-weight:700;font-size:17px;
}
/* Logo do Uncode, por cima da linha do menu */
.qb-bb-logo{display:block;line-height:0;padding:6px 0 10px;text-align:center;}
.qb-bb-logo img{
	display:inline-block;width:auto;
	height:var(--qb-bb-logo-h);max-width:100%;object-fit:contain;
}
/* Linha do menu: Inicio | links | idioma */
.qb-bb-row{
	display:flex;align-items:center;gap:24px;
	min-height:var(--qb-bb-height);
	position:relative;   /* ancora para centrar o menu na pagina */
}
.qb-bottombar a{color:var(--qb-bb-text);text-decoration:none;white-space:nowrap;}
.qb-bottombar a:hover,.qb-bottombar a:focus-visible{text-decoration:underline;text-underline-offset:4px;}
.qb-bottombar a:focus-visible{outline:2px solid var(--qb-bb-text);outline-offset:3px;}
.qb-bb-home{margin-right:auto;}

/* Menu centrado na PAGINA, nao no espaco que sobra.
   As colunas laterais tem larguras muito diferentes (o "Inicio" e
   estreito, os idiomas + licenca sao largos), por isso centrar por
   flexbox deixava o menu ~120px a esquerda. Tirando-o do fluxo, o
   centro do menu coincide com o centro da barra. */
.qb-bb-links{
	position:absolute;left:50%;transform:translateX(-50%);
	display:flex;justify-content:center;
	width:max-content;max-width:100%;
}
.qb-bb-menu{display:flex;align-items:center;gap:clamp(22px,3.5vw,52px);list-style:none;margin:0;padding:0;}
.qb-bb-menu>li{margin:0;padding:0;position:relative;}
.qb-bb-menu .current-menu-item>a,
.qb-bb-menu .current-menu-ancestor>a{text-decoration:underline;text-underline-offset:4px;}

/* --- Submenus: abrem para CIMA, porque a barra esta no fundo --- */
.qb-bb-menu li.menu-item-has-children>a::after{
	content:"";display:inline-block;margin-left:8px;
	border-left:4px solid transparent;border-right:4px solid transparent;
	border-bottom:5px solid currentColor;vertical-align:middle;
}
.qb-bb-menu .sub-menu{
	position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
	display:flex;flex-direction:column;gap:14px;
	min-width:190px;margin:0;padding:18px 22px;list-style:none;
	background:var(--qb-bb-bg);
	box-shadow:0 -8px 24px rgba(0,0,0,.12);
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* Ponte invisivel: cobre o espaco entre o item e o painel,
   para o rato nao perder o :hover a meio do caminho. */
.qb-bb-menu .sub-menu::before{
	content:"";position:absolute;left:0;right:0;top:100%;height:16px;
}
/* Area de hover do item pai alargada ate ao topo da barra */
.qb-bb-menu>li.menu-item-has-children::after{
	content:"";position:absolute;left:-12px;right:-12px;bottom:100%;height:16px;
}
.qb-bb-menu .sub-menu li{margin:0;padding:0;position:relative;}
.qb-bb-menu .sub-menu a{font-weight:400;display:block;}
/* Abrir por hover, por teclado (focus) ou por toque (classe .qb-open via JS) */
.qb-bb-menu li:hover>.sub-menu,
.qb-bb-menu li:focus-within>.sub-menu,
.qb-bb-menu li.qb-open>.sub-menu{
	opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
/* Terceiro nivel: abre para o lado */
.qb-bb-menu .sub-menu .sub-menu{
	bottom:auto;top:-18px;left:100%;transform:translateX(6px);
}
/* Ponte lateral para o terceiro nivel (anula a ponte inferior) */
.qb-bb-menu .sub-menu .sub-menu::before{
	left:auto;right:100%;top:0;bottom:0;height:auto;width:16px;
}
.qb-bb-menu .sub-menu li:hover>.sub-menu,
.qb-bb-menu .sub-menu li:focus-within>.sub-menu,
.qb-bb-menu .sub-menu li.qb-open>.sub-menu{transform:translateX(0);}
/* Pequeno atraso no fecho: perdoa desvios do rato */
.qb-bb-menu .sub-menu{transition-delay:.15s;}
.qb-bb-menu li:hover>.sub-menu,
.qb-bb-menu li:focus-within>.sub-menu,
.qb-bb-menu li.qb-open>.sub-menu{transition-delay:0s;}
/* Coluna da direita: idiomas em cima, mencao legal por baixo */
.qb-bb-meta{
	margin-left:auto;display:flex;flex-direction:column;
	align-items:flex-end;gap:5px;min-width:0;
}
.qb-bb-lang{display:flex;align-items:center;gap:8px;text-transform:uppercase;}
.qb-bb-lang a{opacity:.45;}
.qb-bb-lang a.is-active{opacity:1;}

/* Mencao legal do Alojamento Local (licenca + Livro de Reclamacoes).
   Letra mais pequena e peso normal: e informacao secundaria, mas tem
   de continuar legivel. */
.qb-bb-legal{
	margin:0;display:flex;align-items:center;gap:7px;
	font-size:12px;font-weight:400;letter-spacing:.01em;opacity:.72;
}
.qb-bb-legal a{text-decoration:underline;text-underline-offset:2px;}
.qb-bb-legal a:hover,
.qb-bb-legal a:focus-visible{opacity:1;}
.qb-bb-legal-sep{opacity:.55;}
/* Espaco no fundo para a barra nao tapar conteudo.
   --qb-bb-real-height e definida por JS (a barra muda de altura no telemovel) */
body{padding-bottom:calc(var(--qb-bb-real-height, var(--qb-bb-height)) + env(safe-area-inset-bottom));}
/* Telemovel e tablet.
   Limite a 1359px: com o menu centrado na pagina, a linha unica
   precisa de ~1360px; abaixo disso empilha, e ai ja fica centrado. */
@media (max-width:1359px){
	.qb-bottombar{
		--qb-bb-height:auto;
		padding:12px 16px calc(12px + env(safe-area-inset-bottom));
		font-size:14px;text-align:center;
	}
	/* Altura mobile do logo (o inline style no <nav> venceria a variavel,
	   por isso alteramos diretamente a altura da imagem) */
	.qb-bb-logo img{height:var(--qb-bb-logo-h-mobile);}
	.qb-bb-logo{padding:2px 0 8px;}
	.qb-bb-row{flex-direction:column;justify-content:center;gap:10px;}
	/* "Inicio" desaparece no telemovel (o logo ja leva a home) */
	.qb-bb-home{display:none;}
	/* empilhado: o menu volta ao fluxo normal, ja fica centrado */
	.qb-bb-links{
		position:static;transform:none;
		width:100%;max-width:none;justify-content:center;
		overflow:visible;-webkit-mask-image:none;
	}
	/* Links quebram em varias linhas, centrados */
	.qb-bb-menu{
		flex-wrap:wrap;justify-content:center;
		column-gap:28px;row-gap:10px;
	}
	/* idiomas e mencao legal centrados, um por cima do outro */
	.qb-bb-meta{margin:0 auto;align-items:center;gap:6px;}
	.qb-bb-legal{
		flex-wrap:wrap;justify-content:center;
		font-size:11px;row-gap:2px;
	}
	/* position:fixed para o submenu nao ser cortado */
	.qb-bb-menu .sub-menu,
	.qb-bb-menu .sub-menu .sub-menu{
		position:fixed;left:0;right:0;
		bottom:calc(var(--qb-bb-real-height, 100px) + env(safe-area-inset-bottom));
		top:auto;transform:translateY(6px);
		min-width:0;padding:16px;gap:12px;
		max-height:55vh;overflow-y:auto;
		box-shadow:0 -8px 24px rgba(0,0,0,.15);
	}
	.qb-bb-menu .sub-menu::before,
	.qb-bb-menu .sub-menu .sub-menu::before{display:none;}
	.qb-bb-menu li:hover>.sub-menu,
	.qb-bb-menu li:focus-within>.sub-menu,
	.qb-bb-menu li.qb-open>.sub-menu,
	.qb-bb-menu .sub-menu li.qb-open>.sub-menu{transform:translateY(0);}
	/* Terceiro nivel indentado em vez de lateral */
	.qb-bb-menu .sub-menu .sub-menu{padding-left:32px;}
}
@media (max-width:480px){
	.qb-bottombar{font-size:13px;}
	.qb-bb-menu{column-gap:22px;row-gap:8px;}
}