/* ==========================================================================
   JF Bebidas 2027 — cabeçalho, menu de ecrã inteiro, pesquisa, rodapé e ecrã de idade
   Usa os tokens de jf-design.css. Regras com "html body" para ganhar ao Kit do Elementor.

   1. Cabeçalho     4. Menu de ecrã inteiro       7. Ecrã de idade
   2. Pesquisa      5. Rodapé                       8. Movimento
   3. Mosaicos de subcategorias   6. Responsivo
   ========================================================================== */

html body .screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

html body .jf-icone { width: 1.25em; height: 1.25em; flex: none; }


/* 1. Cabeçalho ------------------------------------------------------------- */

/* O template do Elementor fica fixo no topo enquanto se faz scroll. */
html body .elementor-location-header:has(.jf-cab) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 990;
}
html body .elementor-location-header:has(.jf-cab) :is(.e-con, .e-con-inner, .elementor-widget-container, .elementor-shortcode) {
	padding: 0;
	margin: 0;
	max-width: none;
}

html body .jf-cab {
	background-color: var(--jf-texto);
	color: #fff;
	font-family: var(--jf-sans);
	font-size: 1rem;
	line-height: 1.4;
}
html body .jf-cab a { color: inherit; text-decoration: none; }

/* Barra de topo: encolhe ao fazer scroll (classe is-compacto). */
html body .jf-cab__topo {
	display: grid;
	grid-template-rows: 1fr;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	font-size: var(--jf-t-micro);
	color: rgba(255, 255, 255, .78);
	transition: grid-template-rows .35s var(--jf-ease), border-color .35s;
}
html body .jf-cab__topo > div { min-height: 0; overflow: hidden; }
html body .jf-cab__topo-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jf-e-4);
	padding-block: .55rem;
}
html body .jf-cab__frase { margin: 0; }
html body .jf-cab__contactos {
	display: flex;
	gap: var(--jf-e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
html body .jf-cab__contactos a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	color: rgba(255, 255, 255, .85);
	transition: color var(--jf-dur-curta);
}
html body .jf-cab__contactos a:hover { color: #fff; }

html body .jf-cab__linha {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo pesquisa acoes";
	align-items: center;
	gap: var(--jf-e-6);
	padding-block: 14px;
	transition: padding .35s var(--jf-ease);
}
html body .jf-cab__logo { grid-area: logo; display: block; line-height: 0; }
html body .jf-logo {
	display: block;
	width: auto;
	height: 48px;
	transition: height .35s var(--jf-ease);
}

html body .jf-cab__acoes {
	grid-area: acoes;
	display: flex;
	align-items: center;
	gap: var(--jf-e-2);
}
html body .jf-cab__icone,
html body .jf-cab__menu {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	border-radius: var(--jf-raio);
	color: #fff;
	transition: background-color var(--jf-dur-curta);
}
html body .jf-cab__icone .jf-icone { width: 24px; height: 24px; }
html body .jf-cab__icone:hover { background-color: rgba(255, 255, 255, .08); }

html body .jf-cab__menu {
	grid-auto-flow: column;
	gap: .5rem;
	padding: 0 14px;
	margin-left: var(--jf-e-2);
	border: 1px solid rgba(255, 255, 255, .4);
	background: transparent;
	font: 500 var(--jf-t-micro) / 1 var(--jf-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
html body .jf-cab__menu .jf-icone { width: 20px; height: 20px; }
html body .jf-cab__menu:hover { background-color: rgba(255, 255, 255, .08); }

/* Estado compacto (depois de algum scroll). */
html body .jf-cab.is-compacto .jf-cab__topo { grid-template-rows: 0fr; border-bottom-color: transparent; visibility: hidden; transition: grid-template-rows .35s var(--jf-ease), border-color .35s, visibility 0s .35s; }
html body .jf-cab.is-compacto .jf-cab__topo-in { padding-block: 0; }
html body .jf-cab__topo-in { transition: padding .35s var(--jf-ease); }
html body .jf-cab.is-compacto .jf-cab__linha { padding-block: 8px; }


/* 2. Pesquisa -------------------------------------------------------------- */

html body .jf-pesquisa {
	grid-area: pesquisa;
	position: relative;
	width: 100%;
	max-width: 620px;
	justify-self: center;
	margin: 0;
}
html body .jf-pesquisa__campo {
	width: 100%;
	height: 46px;
	padding: 0 52px 0 16px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--jf-raio);
	background-color: rgba(255, 255, 255, .07);
	color: #fff;
	font: 400 .9375rem / 1 var(--jf-sans);
	transition: border-color var(--jf-dur-curta), background-color var(--jf-dur-curta);
	-webkit-appearance: none;
	appearance: none;
}
html body .jf-pesquisa__campo::placeholder { color: rgba(255, 255, 255, .62); }
html body .jf-pesquisa__campo::-webkit-search-cancel-button { display: none; }
html body .jf-pesquisa__campo:focus { border-color: #fff; background-color: rgba(255, 255, 255, .1); outline: none; }
html body .jf-pesquisa__campo:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }
html body .jf-pesquisa__botao {
	position: absolute;
	top: 1px; right: 1px; bottom: 1px;
	width: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 0 var(--jf-raio) var(--jf-raio) 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
html body .jf-pesquisa__botao .jf-icone { width: 22px; height: 22px; }

html body .jf-pesquisa__lista {
	position: absolute;
	top: calc(100% + 6px);
	left: 0; right: 0;
	z-index: 20;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--jf-superficie);
	color: var(--jf-texto);
	border: 1px solid var(--jf-linha);
	border-radius: var(--jf-raio-painel);
}
html body .jf-pesquisa__lista[hidden] { display: none; }
html body .jf-pesquisa__opcao {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--jf-raio);
	cursor: pointer;
	font-size: .9375rem;
	line-height: 1.3;
}
html body .jf-pesquisa__opcao img,
html body .jf-pesquisa__opcao .jf-pesquisa__sem-foto {
	width: 44px; height: 44px;
	flex: none;
	object-fit: contain;
	border-radius: var(--jf-raio);
	background-color: var(--jf-pedra);
}
html body .jf-pesquisa__opcao[aria-selected="true"] { background-color: var(--jf-pedra); }
html body .jf-pesquisa__opcao--todos {
	justify-content: space-between;
	margin-top: 4px;
	border-top: 1px solid var(--jf-linha);
	border-radius: 0 0 var(--jf-raio) var(--jf-raio);
	font-weight: 500;
}
html body .jf-pesquisa__vazio { padding: 12px 10px; color: var(--jf-texto-2); font-size: .9375rem; }


/* 3. Mosaicos de subcategorias -------------------------------------- */

html body .jf-mosaicos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
html body .jf-mosaico {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 128px;
	padding: 20px 10px 16px;
	box-sizing: border-box;
	background-color: var(--jf-superficie);
	border: 1px solid var(--jf-linha);
	border-radius: var(--jf-raio-painel);
	color: var(--jf-texto);
	font: 500 .9375rem / 1.25 var(--jf-sans);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--jf-dur-curta), color var(--jf-dur-curta);
}
html body .jf-mosaico__icone {
	width: 44px;
	height: 44px;
	color: var(--jf-texto-2);
	transition: color var(--jf-dur-curta), transform .35s var(--jf-ease);
}
html body .jf-mosaico:hover,
html body .jf-mosaico:focus-visible { border-color: var(--jf-acento); color: var(--jf-acento); }
html body .jf-mosaico:hover .jf-mosaico__icone,
html body .jf-mosaico:focus-visible .jf-mosaico__icone { color: var(--jf-acento); transform: translateY(-3px); }
html body .jf-mosaico[aria-current="page"] { border-color: var(--jf-texto); }

/* 4. Menu de ecrã inteiro -------------------------------------------- */

html.jf-sem-scroll,
html.jf-sem-scroll body { overflow: hidden; }

html body .jf-gaveta:not([open]) { display: none; }
html body .jf-gaveta {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: radial-gradient(ellipse at 10% 20%, #571323, #241016 65%);
	color: #fff;
	font-family: var(--jf-sans);
}
html body .jf-gaveta__painel {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	min-height: 100%;
	padding-block: 1rem 1.5rem;
}
html body .jf-gaveta__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
}
html body .jf-gaveta__marca .jf-logo { height: 48px; }
html body .jf-gaveta__grelha {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
	gap: clamp(2rem, 8vw, 8rem);
}
html body .jf-gaveta__intro :is(.jf-display, .jf-sobretitulo) { color: #fff; }
html body .jf-gaveta__intro .jf-btn { margin-top: 1.5rem; }
html body .jf-gaveta__fechar {
	font: 500 var(--jf-t-micro) / 1 var(--jf-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
html body .jf-gaveta__fechar {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: var(--jf-raio);
	background: none;
	color: #fff;
	cursor: pointer;
}
html body .jf-gaveta__fechar .jf-icone { width: 18px; height: 18px; }

html body .jf-gaveta__lista { list-style: none; margin: 0; padding: 0; }
html body .jf-gaveta__lista > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
html body .jf-gaveta__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 60px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: #fff;
	font: 400 clamp(1.75rem, 1.5rem + 1.2vw, 2.125rem) / 1.15 var(--jf-serif);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
html body .jf-gaveta__link[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--jf-acento); text-underline-offset: .18em; text-decoration-thickness: 2px; }
html body .jf-gaveta__link:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, .07);
	color: #fff;
}
html body .jf-gaveta__seta,
html body .jf-gaveta__mais { width: 22px; height: 22px; color: rgba(255, 255, 255, .55); transition: transform .35s var(--jf-ease); }
html body .jf-gaveta__link[aria-expanded="true"] .jf-gaveta__mais { transform: rotate(45deg); }

html body .jf-gaveta__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s var(--jf-ease);
}
html body .jf-gaveta__sub > div { min-height: 0; overflow: hidden; }
html body .jf-gaveta__link[aria-expanded="true"] + .jf-gaveta__sub { grid-template-rows: 1fr; }
html body .jf-gaveta__link[aria-expanded="false"] + .jf-gaveta__sub { visibility: hidden; transition: grid-template-rows .45s var(--jf-ease), visibility 0s .45s; }

html body .jf-mosaicos--gaveta {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 4px 0 18px;
}
html body .jf-mosaicos--gaveta .jf-mosaico {
	min-height: 104px;
	padding: 16px 8px 12px;
	gap: 10px;
	background-color: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: .875rem;
}
html body .jf-mosaicos--gaveta .jf-mosaico__icone { width: 36px; height: 36px; color: rgba(255, 255, 255, .78); }
html body .jf-mosaicos--gaveta .jf-mosaico:hover,
html body .jf-mosaicos--gaveta .jf-mosaico:focus-visible { border-color: #fff; color: #fff; }
html body .jf-mosaicos--gaveta .jf-mosaico:hover .jf-mosaico__icone { color: #fff; }

html body .jf-gaveta__rodape {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	padding-top: var(--jf-e-5);
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: var(--jf-t-pequeno);
	color: rgba(255, 255, 255, .75);
}
html body .jf-gaveta__rodape > * { display: inline-flex; align-items: center; gap: .6em; color: inherit; text-decoration: none; }
html body .jf-gaveta__rodape a:hover { color: #fff; }


/* 5. Rodapé ---------------------------------------------------------------- */

html body .elementor-location-footer:has(.jf-rod) :is(.e-con, .e-con-inner, .elementor-widget-container, .elementor-shortcode) {
	padding: 0;
	margin: 0;
	max-width: none;
}

html body .jf-rod {
	background-color: var(--jf-texto);
	color: rgba(255, 255, 255, .75);
	font: 400 .9375rem / 1.6 var(--jf-sans);
	padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
html body .jf-rod a { color: rgba(255, 255, 255, .88); text-decoration: none; transition: color var(--jf-dur-curta); }
html body .jf-rod a:hover { color: #fff; }

html body .jf-rod__grelha {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--jf-e-7);
	padding-bottom: var(--jf-e-7);
}
html body .jf-rod__marca p { max-width: 36ch; margin: var(--jf-e-5) 0; }
html body .jf-logo--rodape { height: 84px; }

html body .jf-rod__titulo {
	margin: 0 0 var(--jf-e-4);
	font: 500 var(--jf-t-micro) / 1.2 var(--jf-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
html body .jf-rod__links,
html body .jf-rod__contactos,
html body .jf-rod__redes { list-style: none; margin: 0; padding: 0; }
html body .jf-rod__links li + li,
html body .jf-rod__contactos li + li { margin-top: .55rem; }
html body .jf-rod__contactos li { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
html body .jf-rod__contactos .jf-icone { width: 18px; height: 18px; position: relative; top: 3px; color: rgba(255, 255, 255, .55); }
html body .jf-rod__nota { color: rgba(255, 255, 255, .55); }
html body .jf-rod__redes { display: flex; gap: 8px; }
html body .jf-rod__redes a {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--jf-raio);
	transition: border-color var(--jf-dur-curta), color var(--jf-dur-curta);
}
html body .jf-rod__redes a:hover { border-color: #fff; }
html body .jf-rod__redes .jf-icone { width: 20px; height: 20px; }

html body .jf-rod__feder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jf-e-4) var(--jf-e-6);
	padding-block: var(--jf-e-6);
	border-top: 1px solid rgba(255, 255, 255, .12);
}
html body .jf-rod__feder .jf-rod__titulo { flex-basis: 100%; margin: 0; }
html body .jf-rod__barras {
	display: block;
	max-width: 100%;
	padding: 10px 14px;
	border-radius: var(--jf-raio);
	background-color: #fff;
	line-height: 0;
}
html body .jf-rod__barras img { display: block; width: 100%; max-width: 560px; height: auto; }
html body .jf-link--claro { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
html body .jf-link--claro:hover { border-bottom-color: #fff; }

html body .jf-rod__base { border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--jf-t-pequeno); }
html body .jf-rod__base-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--jf-e-2) var(--jf-e-6);
	padding-block: var(--jf-e-5);
}
html body .jf-rod__base p { margin: 0; }
html body .jf-rod__base strong { color: #fff; font-weight: 500; }


/* 6. Responsivo ------------------------------------------------------------ */

@media (max-width: 1099px) {
	html body .jf-cab__linha {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "logo acoes" "pesquisa pesquisa";
		gap: 12px var(--jf-e-4);
		padding-block: 12px 14px;
	}
	html body .jf-cab__acoes { justify-self: end; }
	html body .jf-pesquisa { max-width: none; }
	html body .jf-cab.is-compacto .jf-logo { height: 40px; }

	html body .jf-rod__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body .jf-rod__marca { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	html body .jf-cab__topo-in { justify-content: center; flex-wrap: wrap; gap: 4px var(--jf-e-5); text-align: center; }
	html body .jf-cab__frase { flex-basis: 100%; }
	html body .jf-cab__menu span { display: none; }
	html body .jf-cab__menu { padding: 0; min-width: 44px; margin-left: 0; }
	html body .jf-cab__acoes { gap: 2px; }
	html body .jf-gaveta__grelha { grid-template-columns: 1fr; gap: 1.25rem; }
	html body .jf-gaveta__intro .jf-btn { margin-top: 1rem; }
	html body .jf-gaveta__link { min-height: 50px; }
	html body .jf-rod__grelha { grid-template-columns: minmax(0, 1fr); gap: var(--jf-e-6); }
	html body .jf-rod__base-in { flex-direction: column; }
}


/* 7. Ecrã de idade --------------------------------------------------------- */

html body .jf-idade[hidden] { display: none; }
html body .jf-idade {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	padding: 16px;
	overflow-y: auto;
	background-color: rgba(20, 20, 22, .82);
	font-family: var(--jf-sans);
}
html body .jf-idade__caixa {
	width: 100%;
	max-width: 460px;
	box-sizing: border-box;
	padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 36px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--jf-raio-painel);
	background-color: var(--jf-texto);
	color: rgba(255, 255, 255, .8);
	text-align: center;
}
html body .jf-logo--idade { height: 72px; margin: 0 auto var(--jf-e-5); }
html body .jf-idade__sobre {
	margin: 0 0 var(--jf-e-3);
	font: 500 var(--jf-t-micro) / 1 var(--jf-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
html body .jf-idade__titulo {
	margin: 0 0 var(--jf-e-3);
	font: 400 clamp(2rem, 1.6rem + 1.6vw, 2.5rem) / 1.05 var(--jf-serif);
	color: #fff;
}
html body .jf-idade__texto { margin: 0 0 var(--jf-e-5); }
html body .jf-idade__pergunta { margin: 0 0 var(--jf-e-4); color: #fff; font-weight: 500; }
html body .jf-idade__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body .jf-idade__nota { margin: var(--jf-e-5) 0 0; font-size: var(--jf-t-micro); color: rgba(255, 255, 255, .55); }
html body .jf-btn--contorno-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
html body .jf-btn--contorno-claro:hover { background-color: #fff; color: var(--jf-texto); }
@media (max-width: 380px) { html body .jf-idade__acoes { grid-template-columns: 1fr; } }


/* 8. Movimento (desligado com prefers-reduced-motion) ---------------------- */

@keyframes jf-aparece { from { opacity: 0; } }
@keyframes jf-sobe { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
	html body .jf-gaveta[open] .jf-gaveta__grelha { animation: jf-sobe .32s var(--jf-ease) both; }
	html body .jf-idade:not([hidden]) { animation: jf-aparece .4s ease both; }
	html body .jf-idade:not([hidden]) .jf-idade__caixa { animation: jf-sobe .6s var(--jf-ease) .1s both; }
}