/*
Theme Name: Fabrica dos Adesivos
Theme URI: https://fabricadosadesivos.com.br
Description: Tema filho do Twenty Twenty-Five para a loja Fabrica dos Adesivos.
             Paleta e tipografia da marca, padroes de secao e o configurador
             de adesivos (forma, medida, quantidade) por cima do WooCommerce.
Author: Fabrica dos Adesivos
Template: twentytwentyfive
Version: 0.3.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: fabrica-adesivos
*/

/* Cor, tamanho de fonte e espacamento vem do theme.json — nao repetir aqui.
   Este arquivo cuida so do acabamento que o theme.json nao alcanca. */

/* ---------- cabecalho ---------- */

.faixa-aviso {
	padding-block: 0.5rem;
}

.faixa-aviso p {
	margin: 0;
}

.cabecalho-loja {
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--borda);
}

.cabecalho-loja .marca {
	gap: 0.75rem;
}

.cabecalho-loja .nome-loja a {
	color: var(--wp--preset--color--grafite);
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.1;
	text-decoration: none;
	letter-spacing: -0.02em;
}

.cabecalho-loja .acoes {
	gap: 0.5rem;
}

/* ---------- secoes ---------- */

.secao {
	padding-block: var(--wp--preset--spacing--50);
}

.secao-banner {
	padding-block: var(--wp--preset--spacing--60);
}

.secao-banner .selo {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--amarelo);
	color: var(--wp--preset--color--grafite);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---------- cartoes de forma de corte ---------- */

.cartoes-forma {
	margin-top: var(--wp--preset--spacing--40);
}

.cartao {
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: 10px;
	background: var(--wp--preset--color--branco);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.cartao:hover {
	border-color: var(--wp--preset--color--amarelo);
	transform: translateY(-2px);
}

.cartao .forma {
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: var(--wp--preset--spacing--20);
	fill: var(--wp--preset--color--amarelo);
}

.cartao :where(h3) {
	margin-bottom: 0.35rem;
}

/* ---------- rodape ---------- */

.rodape-loja {
	padding-block: var(--wp--preset--spacing--50);
}

.rodape-loja a {
	color: var(--wp--preset--color--branco);
	text-decoration: none;
}

.rodape-loja a:hover {
	color: var(--wp--preset--color--amarelo);
	text-decoration: underline;
}

.rodape-loja .lista-limpa {
	padding-left: 0;
	list-style: none;
}

.rodape-loja .lista-limpa li {
	margin-bottom: 0.4rem;
}

.rodape-base {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.rodape-base p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- celular ---------- */

@media (max-width: 781px) {
	.cabecalho-loja .marca {
		gap: 0.5rem;
	}

	.cabecalho-loja .nome-loja a {
		font-size: 1rem;
	}

	.secao,
	.secao-banner {
		padding-block: var(--wp--preset--spacing--40);
	}
}

/* ---------- cabecalho que acompanha a rolagem ----------

   Gruda so a barra branca da marca e do menu. A faixa de aviso escura fica
   para tras de proposito: ela e lida uma vez, e mante-la roubaria 38 px de
   altura em toda rolagem, em toda pagina — num notebook de 720 px isso e 5%
   da tela gasto repetindo um recado ja lido.

   A pagina do produto tem os proprios elementos grudados (o resumo do pedido e
   o painel da esquerda). Quem afasta os dois desta barra e o JavaScript do
   configurador, que mede a altura real em vez de repetir um numero aqui — que
   ficaria errado no dia em que este cabecalho mudar.

   Quem gruda e a PARTE DE MODELO inteira, nao a barra branca sozinha: elemento
   grudado so viaja dentro do pai, e o pai da barra e a propria parte, com
   apenas 39 px de folga. A barra andava esses 39 px e sumia.

   O `top` negativo e o que deixa a faixa escura para tras: a parte encosta com
   o topo acima da janela, exatamente a altura da faixa, e o que fica visivel e
   so a barra branca. */

header.wp-block-template-part:has( .cabecalho-loja ) {
	position: sticky;
	/* Um numero, num lugar so, ao lado de quem ele mede. Se a faixa de aviso
	   crescer, e aqui que se acerta. */
	--faixa-aviso: 38px;
	top: calc( -1 * var(--faixa-aviso) );
	z-index: 100;
}

.cabecalho-loja {
	border-bottom: 1px solid var(--wp--preset--color--borda, #E3E1E2);
	/* Sombra discreta e constante: sem ela, conteudo de fundo claro passa por
	   baixo e a barra parece parte da pagina em vez de estar por cima. */
	box-shadow: 0 1px 12px rgba(55, 52, 53, 0.07);
}