/*
Theme Name: Sul Global
Theme URI: https://editora.institutosulglobal.org
Author: Editora Sul Global
Description: Tema da livraria da Editora Sul Global. Tema de blocos: a home é
  editada no Editor de Site, sem painel próprio de administração. A tipografia e
  as cores vêm dos livros — EB Garamond no texto, Anton nos títulos.
Version: 0.2.4
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sul-global
Tags: e-commerce, full-site-editing, block-patterns
*/

/*
 * Quase tudo é definido em theme.json — cores, tipografia, espaçamento — para
 * que o Editor de Site mostre exatamente o que sai publicado.
 * Aqui ficam só os ajustes que o theme.json não alcança.
 */

/* O Anton só existe num peso e é desenhado em caixa alta: sem isto, títulos
   longos ficam com entrelinha frouxa demais. */
.wp-block-post-title,
h1.has-display-font-family,
h2.has-display-font-family {
	line-height: 1.02;
	letter-spacing: -0.01em;
}

/* Preço promocional: o WooCommerce imprime o preço antigo dentro de <del>. */
.woocommerce del {
	opacity: 0.55;
	font-size: 0.85em;
}

.woocommerce ins {
	text-decoration: none;
}

/* Selo de lançamento / pré-venda sobre a capa do livro. */
.selo-livro {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--vermelho);
	color: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--pequeno);
	letter-spacing: 0.12em;
	padding: 0.35em 0.8em;
	text-transform: uppercase;
}

/* Capa de livro nunca deve ser cortada: o leitor precisa ver a capa inteira. */
.livro-capa img {
	object-fit: contain;
	box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
}

/* --------------------------------------------------------------------------
   Ficha técnica

   Renderizada pelo plugin sul-global-catalogo no gancho
   woocommerce_single_product_summary. Como não é bloco, não recebe estilo do
   theme.json — vem daqui.
   -------------------------------------------------------------------------- */
.sg-ficha-tecnica {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--linha);
	padding-top: var(--wp--preset--spacing--30);
}

.sg-ficha-tecnica h2 {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Rótulo e valor em duas colunas: a coluna fixa alinha os valores entre si,
   que é o que faz a ficha ser lida como tabela e não como lista solta. */
.sg-ficha-tecnica dl {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 0.5rem var(--wp--preset--spacing--30);
	margin: 0;
}

.sg-ficha-tecnica dt {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
	padding-top: 0.2em;
}

.sg-ficha-tecnica dd {
	margin: 0;
}

@media (max-width: 480px) {
	.sg-ficha-tecnica dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.sg-ficha-tecnica dd {
		margin-bottom: var(--wp--preset--spacing--20);
	}
}

/* Link do Kindle: alternativa discreta, não concorrente do botão de compra. */
.sg-kindle {
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   WooCommerce
   -------------------------------------------------------------------------- */

/* A galeria do produto guarda a proporção da capa; sem isto o WooCommerce
   recorta a imagem em quadrado e come o topo e o pé da capa. */
.woocommerce-product-gallery__image img {
	object-fit: contain;
}

/* O aviso de "adicionado ao carrinho" nasce com a cor do WooCommerce. */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--vermelho);
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.sg-cabecalho .wp-block-site-logo img {
	display: block;
}

/* Itens do menu: sem sublinhado fixo; ganham uma linha vermelha ao passar o
   mouse e quando é a página atual. */
.sg-menu .wp-block-navigation-item__content {
	text-decoration: none;
	padding: 0.35em 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.sg-menu .wp-block-navigation-item__content:hover,
.sg-menu .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--vermelho);
}

/* Busca: caixa reta, discreta, no tom de linha do tema. */
.sg-utilidades .wp-block-search__inside-wrapper {
	background: #fff;
	border-color: var(--wp--preset--color--linha);
}

.sg-utilidades .wp-block-search__input {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 1rem;
	padding-left: 0.75em;
}

.sg-utilidades .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--cinza);
	padding: 0 0.6em;
}

.sg-utilidades .wc-block-mini-cart__button {
	color: var(--wp--preset--color--tinta);
}

.sg-utilidades .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--vermelho);
	color: var(--wp--preset--color--creme);
	border: 0;
}

/* Onde não cabe tudo numa linha, a busca cede a vez ao menu e ao carrinho, e
   depois o menu vira o botão de menu. Com o menu e a marca em 15 px, marca,
   menu, busca (240 px) e os dois ícones pedem uns 1165 px de tela; sem a
   busca, uns 900 px (medido no staging em 16/10/2026). Antes disso o
   cabeçalho passava da tela em tablets e o carrinho ficava fora dela. Os
   limites em ,98 pegam também telas de largura fracionada (Windows com zoom
   de 125%, por exemplo), sem depender da sintaxe de intervalo das media
   queries, que iPads mais antigos não entendem. */
@media (max-width: 1179.98px) {
	.sg-utilidades .wp-block-search {
		display: none;
	}
}

/* O bloco de navegação só recolhe o menu abaixo de 600 px; aqui ele recolhe
   abaixo de 920 px. Aberto, o menu usa a mesma tela cheia do celular. */
@media (min-width: 600px) and (max-width: 919.98px) {
	.sg-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sg-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Cartão de produto (grade do catálogo e faixa da home)
   -------------------------------------------------------------------------- */
.wc-block-product-template .wc-block-product,
.wc-block-product-template li.product {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	text-align: left;
}

/* A capa tem altura fixa por linha, e a imagem inteira cabe dentro dela:
   assim os títulos alinham entre cartões mesmo com capas de proporções
   diferentes. */
.wc-block-product-template .wc-block-components-product-image {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--creme);
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-block-product-template .wc-block-components-product-image a,
.wc-block-product-template .wc-block-components-product-image img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	box-shadow: 0 6px 22px rgb(0 0 0 / 22%);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-product:hover .wc-block-components-product-image img {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
}

.wc-block-product-template .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--tinta);
}

.wc-block-product-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--vermelho);
}

.wc-block-product-template .wc-block-components-product-price {
	color: var(--wp--preset--color--vermelho);
	font-weight: 700;
}

.wc-block-product-template .wc-block-components-product-button {
	margin-top: auto;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
	width: auto;
}

/* --------------------------------------------------------------------------
   Página do livro
   -------------------------------------------------------------------------- */
/* Galeria em fundo creme, com respiro. O WooCommerce limita a caixa em volta
   dela a 512 px e dá à galeria 100% dessa caixa; com o respiro somado por
   fora, no celular ela passava da tela (414 px numa de 390) e a página toda
   ficava mais larga que o aparelho. O respiro vai para dentro da largura, e
   o limite cresce na mesma medida: no computador e no tablet a galeria
   continua com os mesmos 576 px. */
.single-product .livro-capa .wp-block-woocommerce-product-image-gallery {
	max-width: calc(512px + 2 * var(--wp--preset--spacing--40));
}

.woocommerce-product-gallery {
	box-sizing: border-box;
	background: var(--wp--preset--color--creme);
	padding: var(--wp--preset--spacing--40);
}

.woocommerce-product-gallery__image img {
	box-shadow: 0 10px 34px rgb(0 0 0 / 26%);
}

.single-product .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--cinza);
}

.single-product .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--vermelho);
}

/* Formulário de compra: quantidade e botão na mesma linha, botão do tema. */
.single-product form.cart {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.single-product form.cart .quantity .qty {
	height: 100%;
	border: 1px solid var(--wp--preset--color--linha);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--apoio);
	width: 4.5rem;
	text-align: center;
}

.single-product form.cart .single_add_to_cart_button {
	background: var(--wp--preset--color--vermelho);
	color: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--apoio);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	padding: 0.9em 1.8em;
}

.single-product form.cart .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--vermelho-escuro);
}

/* Abas de detalhes: linha fina, aba ativa marcada em vermelho. */
.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--linha);
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	display: flex;
	gap: var(--wp--preset--spacing--40);
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
	padding: 0.7em 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--tinta);
	border-bottom-color: var(--wp--preset--color--vermelho);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
	opacity: 0.9;
}

footer .wp-block-navigation-item__content:hover {
	opacity: 1;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--vermelho);
}

/* --------------------------------------------------------------------------
   Marca da editora (padrão sul-global/marca)
   Globo em SVG + assinatura em duas linhas, tudo em currentColor.
   -------------------------------------------------------------------------- */
.sg-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.sg-marca__globo {
	width: 46px;
	height: 46px;
	flex: none;
}

.sg-marca__nome {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-transform: uppercase;
}

.sg-rodape__links a,
.sg-rodape__legal {
	color: var(--wp--preset--color--creme);
}

.sg-rodape__links a {
	text-decoration: none;
	opacity: 0.9;
}

.sg-rodape__links a:hover {
	opacity: 1;
	text-decoration: underline;
}

.sg-utilidades .wc-block-customer-account__account-icon {
	color: var(--wp--preset--color--tinta);
}

/* --------------------------------------------------------------------------
   Acabamento: cabeçalho fixo, selos, preço, migalhas
   -------------------------------------------------------------------------- */

/* Cabeçalho acompanha a rolagem. O fundo é a cor "papel" do próprio bloco
   (a classe de cor do WordPress vem com !important), opaco. Sem
   backdrop-filter: com ele, o cabeçalho passava a ser a referência dos filhos
   com position: fixed, e o menu aberto no celular, que deveria cobrir a tela,
   ficava preso na faixa do cabeçalho, com só o primeiro item à vista. */
.sg-cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .sg-cabecalho {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sg-cabecalho {
		top: 46px;
	}
}

.sg-menu .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Busca arredondada, discreta. */
.sg-utilidades .wp-block-search__inside-wrapper {
	border-radius: 999px;
	padding-left: 0.5em;
	overflow: hidden;
}

.sg-utilidades .wp-block-search__input {
	background: transparent;
}

.sg-utilidades .wp-block-search__input:focus {
	outline: none;
}

.sg-utilidades .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--vermelho);
}

/* Selo de promoção do WooCommerce: etiqueta reta em vermelho, não bola verde. */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	right: auto;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.4em 0.85em;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--vermelho);
	color: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	z-index: 2;
}

/* Migalhas de pão. */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: var(--wp--preset--color--cinza);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--vermelho);
}

/* Preço na página do livro: vermelho, o antigo menor e riscado. */
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price,
.single-product .wp-block-woocommerce-product-price .price {
	color: var(--wp--preset--color--vermelho);
	font-weight: 700;
}

.single-product .wp-block-woocommerce-product-price del {
	color: var(--wp--preset--color--cinza);
	font-weight: 400;
	margin-right: 0.4em;
}

/* Estoque e avisos pequenos em Archivo. */
.single-product .stock,
.single-product .woocommerce-product-details__short-description + p {
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
}

.single-product .stock.in-stock::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: #2e7d4f;
	margin-right: 0.5em;
	vertical-align: middle;
}

/* Ícone de zoom da galeria: redondo, no creme do tema. */
.woocommerce-product-gallery__trigger {
	background: var(--wp--preset--color--papel) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

/* Miniaturas da galeria: quatro por linha, quebrando em quantas linhas
   precisar. Numa linha só, a partir da quinta ficavam escondidas pelo
   overflow do WooCommerce, sem rolagem. Todas na proporção da capa, com a
   imagem inteira dentro, para a linha não ficar desnivelada quando há foto
   deitada (capa aberta, aberturas). A ativa vai marcada em vermelho. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
	flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--20)) / 4);
}

.woocommerce-product-gallery .flex-control-thumbs img {
	box-sizing: border-box; /* a borda dentro da largura, sem passar da coluna */
	aspect-ratio: 2000 / 2825;
	object-fit: contain;
	border: 2px solid transparent;
	opacity: 0.75;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--vermelho);
}

/* Botões ganham leve elevação ao passar o mouse. */
.wp-element-button,
.wp-block-button__link,
.single-product form.cart .single_add_to_cart_button {
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.single-product form.cart .single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgb(148 6 1 / 25%);
}

/* Seleção de texto na cor da casa. */
::selection {
	background: var(--wp--preset--color--vermelho);
	color: var(--wp--preset--color--creme);
}

/* --------------------------------------------------------------------------
   Lançamento na home (padrão dinâmico sul-global/lancamento-livro)
   -------------------------------------------------------------------------- */
.sg-lancamento__capa {
	margin: 0;
}

.sg-lancamento__capa img {
	display: block;
	width: 100%;
	max-height: 78vh;
	height: auto;
	object-fit: contain;
	box-shadow: 0 24px 60px rgb(0 0 0 / 45%), 0 4px 12px rgb(0 0 0 / 25%);
	transition: transform 0.25s ease;
}

.sg-lancamento__capa:hover img {
	transform: translateY(-4px) rotate(-0.5deg);
}

/* Sem capa cadastrada ainda: mantém o lugar com um retângulo na proporção
   do livro, para o layout não colapsar. */
.sg-lancamento__capa--vazia {
	aspect-ratio: 17 / 24;
	border: 1px dashed rgb(245 239 223 / 40%);
}

/* O título: entrelinha justa no celular e 120px no desktop, onde a letra
   chega a 104px. Como a letra encolhe com a tela, nos tablets e notebooks
   menores a entrelinha acompanha: 1,2 vez a letra, até bater os 120px com a
   tela a partir de 1360px. */
.sg-lancamento h1 {
	line-height: 1.02;
}

@media (min-width: 782px) {
	.sg-lancamento h1 {
		line-height: min(120px, 1.2em);
	}
}

.sg-lancamento h1 a {
	color: inherit;
	text-decoration: none;
}

.sg-lancamento h1 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.08em;
}

.sg-lancamento__preco {
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 1.5rem;
	font-weight: 700;
}

.sg-lancamento__preco del {
	opacity: 0.6;
	font-weight: 400;
	font-size: 0.8em;
	margin-right: 0.4em;
}

.sg-lancamento__preco ins {
	text-decoration: none;
}

.sg-lancamento .is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--creme);
}

.sg-lancamento .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--vermelho);
}

@media (max-width: 781px) {
	.sg-lancamento .livro-capa {
		max-width: 70%;
		margin: 0 auto var(--wp--preset--spacing--40);
	}
}

/* --------------------------------------------------------------------------
   Índice de autores (padrão sul-global/pagina-autores)
   -------------------------------------------------------------------------- */
.sg-autores {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.sg-autores__item {
	border-top: 1px solid var(--wp--preset--color--linha);
	padding-top: var(--wp--preset--spacing--30);
}

.sg-autores__nome {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--grande);
	text-transform: uppercase;
	line-height: 1.06;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.sg-autores__nome:hover {
	color: var(--wp--preset--color--vermelho);
}

/* A contagem é informação secundária: fica ao lado do nome, não abaixo. */
.sg-autores__conta {
	display: inline-block;
	margin-left: 0.9rem;
	font-family: var(--wp--preset--font-family--apoio);
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
	vertical-align: 0.35em;
}

.sg-autores__bio {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 62ch;
}