/*
Theme Name: Zeen Child – Viva o Vinho
Theme URI: https://vivaovinho.pt/
Description: Tema filho do Zeen para o Viva o Vinho. As personalizações do tema ficam aqui, para o Zeen poder ser atualizado sem perder nada.
Author: MakeAll.Digital
Author URI: https://makeall.digital/
Template: zeen
Version: 1.0.0
Requires PHP: 8.0
Text Domain: zeen-child
*/

/* CSS próprio do site sobre o Zeen. Carregado depois do estilo principal do Zeen (ver functions.php). */

/* Espaço entre parágrafos no texto dos artigos. O Zeen não tem opção para isto (fixa 15 px);
   o site usava 24 px. Em "em" para acompanhar o tamanho de letra escolhido no Zeen
   (Tipografia > Tamanhos): 1,6 × 15 px = 24 px. */
.entry-content p {
	margin-bottom: 1.6em;
}

/* Menu principal sem negrito: o Zeen fixa 700 e não tem opção para o peso do menu. */
.main-navigation .horizontal-menu > li > a {
	font-weight: 400;
}

/* Cabeçalho 72 (logótipo e menu na mesma linha): menu e ícones centrados na altura do logótipo. */
.site-header-72 .main-navigation .horizontal-menu {
	align-items: center;
	align-content: center;
}

/* Galerias e fotos: o Zeen deixa as figuras sem margem inferior e o bloco seguinte (outra foto, parágrafo)
   ficava colado. Mesmo espaço dos parágrafos (1,6 em = 24 px). O espaço ENTRE as fotos da galeria é o do bloco. */
.entry-content .wp-block-gallery,
.entry-content figure.wp-block-image:not(.alignleft):not(.alignright),
.entry-content div.wp-block-image {
	margin-bottom: 1.6em;
}

/* Fotos com cantos de 6 px em todo o site. A opção do Zeen ("Rounded Image Corners") só cobre os
   blocos dele, com 5 px; aqui fica igual para tudo: blocos, conteúdo, barra lateral, carrosséis. */
.site-inner img:not(.logo-img img):not(.avatar):not(.emoji):not(.wp-smiley),
.site-inner .mask-img,
.site-inner .wp-block-image,
.site-inner .wp-block-gallery .wp-block-image {
	border-radius: 6px;
}

/* Só a máscara do Zeen leva overflow:hidden. NÃO pôr em .wp-block-image: o WordPress embrulha a imagem
   alinhada à esquerda/direita numa <div class="wp-block-image"> e, com overflow:hidden, a div prende a
   flutuação e o texto deixa de contornar a foto (ficava uma foto ao lado de um espaço vazio). */
.site-inner .mask-img {
	overflow: hidden;
}
/* A caixa cinzenta por trás das fotos (carregamento) tem 5 px de raio no Zeen; com 6 px na foto ficava uma
   ponta clara nos cantos (visível no megamenu, de fundo escuro). */
.site-inner .mask {
	border-radius: 6px;
}

/* Home: o título da página ("Viva o Vinho") fica para o Google e para leitores de ecrã, mas não aparece. */
.home .title-wrap .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Rótulos acima do título: o Zeen mostra as categorias e, quando o conteúdo não tem nenhuma
 * (reviews de vinhos sem Guia Brasil, eventos), cai para as tags ("quick review", "avaliação"…).
 * Tags não aparecem como rótulo; se só houver tags, o bloco inteiro some.
 */
.byline-part.cats a.cat[href*="/tag/"] {
	display: none;
}
.byline-part.cats:not(:has(a.cat:not([href*="/tag/"]))) {
	display: none;
}

/* Cartões de review (blocos clássicos do Zeen: home, arquivos): o Zeen não recorta as fotos a uma proporção
   fixa, usa a da imagem. As reviews novas têm fotos 4:5 e as antigas (Instagram) quadradas, e numa linha a
   foto quadrada ficava mais baixa e desalinhava os títulos. Todas a 4:5, recortadas ao centro. */
.preview-classic.vov_review .mask {
	aspect-ratio: 4 / 5;
}
.preview-classic.vov_review .mask > a {
	display: block;
	height: 100%;
}
.preview-classic.vov_review .mask img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blocos "Don't Miss" (79: Reviews e Imprensa na home): no telemóvel o Zeen põe 1 por linha e as 5 fotos
   viravam uma fila enorme. 2 por linha; a 5.ª some para não ficar sozinha. */
@media only screen and (max-width: 767px) {
	.block-wrap-79 .block-79 {
		column-gap: 14px;
	}
	.block-wrap-79 .block-79 > article {
		width: calc(50% - 7px);
	}
	.block-wrap-79 .block-79:not(:has(> article.vov_review)) > article:nth-child(n+5) {
		display: none;
	}
	.block-wrap-79 .block-79 > article .title {
		font-size: 17px;
	}
}

/* Nota da review por baixo do nome do vinho nos cartões, "92 pontos" (plugin vov-reviews 0.7.4, subtítulo do
   cartão). Azul-escuro do site (o do rodapé e do megamenu); nos cartões com o título sobre a foto fica a cor do
   título; no megamenu não aparece. */
.preview-classic .subtitle .vov-nota-cartao {
	color: #2c284e;
}
.vov-nota-cartao b {
	font-weight: 700;
}
/* Modo de leitura escuro do Zeen (botão da lua): o mesmo azul, clareado, para se ler sobre o fundo escuro. */
.mode--alt--b .preview-classic .subtitle .vov-nota-cartao {
	color: #aaa4dc;
}
.main-navigation .subtitle:has(.vov-nota-cartao) {
	display: none;
}

/*
 * Home, bloco Reviews: carrossel de 15 vinhos com o mesmo cartão do bloco "Don't Miss" (79), 5 à vista no
 * computador e 2 no telemóvel. A faixa desliza na horizontal; setas redondas iguais às dos sliders de fotos (js/carrossel-reviews.js).
 */
.block-wrap-79 .block-79:has(> article.vov_review) {
	flex-wrap: nowrap;
	justify-content: flex-start;
	column-gap: 12.5px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.block-wrap-79 .block-79:has(> article.vov_review)::-webkit-scrollbar {
	display: none;
}
.block-wrap-79 .block-79:has(> article.vov_review) > article {
	flex: 0 0 calc((100% - 4 * 12.5px) / 5);
	max-width: none;
	scroll-snap-align: start;
}
.vov-carrossel {
	position: relative;
}
.vov-carrossel__seta {
	position: absolute;
	top: var(--vov-carrossel-meio, 40%);
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	cursor: pointer;
	transition: opacity .2s;
}
.vov-carrossel__seta:hover,
.vov-carrossel__seta:focus-visible {
	background: #fff;
}
.vov-carrossel__seta::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border: 0 solid #222;
	border-width: 0 3px 3px 0;
}
.vov-carrossel__seta--ant {
	left: -22px;
}
.vov-carrossel__seta--ant::before {
	transform: translate(-35%, -50%) rotate(135deg);
}
.vov-carrossel__seta--seg {
	right: -22px;
}
.vov-carrossel__seta--seg::before {
	transform: translate(-65%, -50%) rotate(-45deg);
}
.vov-carrossel__seta:disabled {
	opacity: 0;
	pointer-events: none;
}
.vov-carrossel--parado .vov-carrossel__seta {
	display: none;
}
@media only screen and (max-width: 767px) {
	.block-wrap-79 .block-79:has(> article.vov_review) {
		column-gap: 14px;
	}
	.block-wrap-79 .block-79:has(> article.vov_review) > article {
		flex-basis: calc(50% - 7px);
	}
	.vov-carrossel__seta--ant {
		left: 6px;
	}
	.vov-carrossel__seta--seg {
		right: 6px;
	}
}