/*
Theme Name:   Coerência
Theme URI:    https://editoracoerencia.com.br
Description:  Tema filho da loja da Editora Coerência. Implementa o design system definido em DESIGNS/prompt_stitch_home.md na home, na página de produto e nas páginas institucionais. Sem animação, sem dependência de CDN, fontes self-hosted.
Author:       FIVON
Template:     storefront
Version:      0.28.1
Requires PHP: 8.0
Text Domain:  coerencia
Tags:         e-commerce, woocommerce, editorial
*/

/* ==========================================================================
   1. Fontes self-hosted
   Author (Fontshare/ITF) — licença gratuita, inclusive web. Ver
   assets/fonts/Author-LICENSE.txt.
   Gloriche — fonte de display da marca. O contrato previa Playfair Display no
   lugar dela por dúvida de licença; em 20/08/2026 o responsável pelo projeto
   afirmou que a marca tem direito de uso e pediu a Gloriche. Ver
   assets/fonts/Gloriche-LICENCA.md — o arquivo de origem vem rotulado como
   uso pessoal, então quem comprova o direito é o contrato com o designer.

   Ambas self-hospedadas: puxar do CDN do Google adiciona latência e expõe IP
   do visitante sob a LGPD.
   ========================================================================== */

@font-face {
	font-family: 'Author';
	src: url('assets/fonts/Author-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Author';
	src: url('assets/fonts/Author-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Author';
	src: url('assets/fonts/Author-Semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Author';
	src: url('assets/fonts/Author-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
 * A Gloriche só existe em um peso. O descritor de intervalo 400–700 faz o
 * navegador usar este arquivo para os títulos em 700 em vez de fabricar um
 * negrito sintético, que engorda o traço e suja a serifa.
 */
@font-face {
	font-family: 'Gloriche';
	src: url('assets/fonts/Gloriche-Regular.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens
   Hex exatos do bloco de estilo do contrato. Conferidos contra o config do
   Tailwind embutido nos dois mockups (desktop e mobile) — batem.
   ========================================================================== */

:root {
	--paper: #f6f6ec;
	--paper-2: #eeece0;
	--line: #dedbcb;
	--ink: #313036;
	--ink-muted: #6b6a72;
	--navy: #001f5b;
	--navy-hover: #002a7a;
	--amber: #f5a800;
	--orange: #ff7f31;
	--orange-hover: #e86a1c;

	--font-display: 'Gloriche', Georgia, 'Times New Roman', serif;
	--font-ui: 'Author', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Escala de espaçamento do contrato. Nada fora dela. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;

	--container: 1280px;
	--gutter: 24px;
	--radius-sm: 4px;
	--radius: 8px;
	--radius-arch: 999px 999px 8px 8px;
	--shadow-card: 0 1px 2px rgba(49, 48, 54, 0.08);

	/*
	 * Mesma lupa do `coerencia_icone( 'busca' )`, repetida aqui como máscara
	 * porque o gatilho de zoom da galeria é markup do WooCommerce e não passa
	 * pelo helper de ícone. Mudou o traço lá, muda aqui junto.
	 */
	--coe-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");

	--btn-h: 48px;
	--input-h: 48px;
}

/*
 * O Storefront estiliza por seletor de elemento e atributo — `input[type=search]`
 * tem especificidade 11 e vence uma classe solta, que é 10. Medido: o padding
 * do campo de busca vinha dele (.618em = 8,65px), não do meu. As regras do
 * campo estão escritas com o elemento junto da classe para virar o jogo.
 */

@media (max-width: 767px) {
	:root {
		--btn-h: 44px;
		--input-h: 44px;
		--gutter: 16px;
	}
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body,
body.woocommerce,
.site {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.coe-display {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
}

a {
	color: var(--navy);
	text-decoration: none;
}

a:hover {
	color: var(--navy-hover);
}

/* Foco visível em tudo que é interativo — WCAG 2.2 AA. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

.coe-band-navy a:focus-visible,
.coe-band-navy button:focus-visible,
.coe-band-navy input:focus-visible {
	outline-color: var(--amber);
}

img {
	max-width: 100%;
	height: auto;
}

/* Contrato: nenhuma animação além de transição de carrossel e hover de card. */
*,
*::before,
*::after {
	animation: none !important;
}

.coe-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

@media (min-width: 1440px) {
	.coe-container {
		padding-inline: 0;
	}
}

.coe-section {
	padding-block: var(--sp-20);
}

@media (max-width: 767px) {
	.coe-section {
		padding-block: var(--sp-12);
	}
}

.coe-band-navy {
	background-color: var(--navy);
	color: var(--paper);
}

.coe-band-navy h1,
.coe-band-navy h2,
.coe-band-navy h3 {
	color: var(--paper);
}

.coe-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Botões
   Âmbar e laranja são fill, nunca texto sobre papel.
   ========================================================================== */

.coe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h);
	padding-inline: var(--sp-6);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1;
	cursor: pointer;
	text-align: center;
}

.coe-btn--primary {
	background-color: var(--orange);
	color: var(--ink);
}

.coe-btn--primary:hover {
	background-color: var(--orange-hover);
	color: var(--ink);
}

.coe-btn--secondary {
	background-color: transparent;
	border: 1.5px solid var(--navy);
	color: var(--navy);
}

.coe-btn--secondary:hover {
	background-color: var(--navy);
	color: var(--paper);
}

.coe-btn--on-navy {
	background-color: var(--amber);
	color: var(--ink);
}

.coe-btn--on-navy:hover {
	background-color: var(--amber);
	color: var(--ink);
}

/*
 * Sobre a faixa âmbar. Não está na lista de variantes do contrato porque a
 * lista não previu botão sobre âmbar; laranja sobre âmbar não separa.
 */
.coe-btn--on-amber {
	background-color: var(--navy);
	color: var(--paper);
}

.coe-btn--on-amber:hover {
	background-color: var(--navy-hover);
	color: var(--paper);
}

.coe-btn--outline-paper {
	background-color: transparent;
	border: 1.5px solid var(--paper);
	color: var(--paper);
}

.coe-btn--block {
	width: 100%;
}

/*
 * O Storefront dá `padding: .618em 1.41575em` a todo <button>. Num botão de
 * 44x44 isso come 39,6px de padding lateral e sobra uma caixa de conteúdo de
 * 4,4px — o ícone encolhe para 4px e vira um ponto. Medido: o SVG do
 * hambúrguer saía 4,375 × 24.
 *
 * Vale para o hambúrguer e para toda seta de carrossel; por isso a lista.
 */
button.coe-btn,
button.coe-hero__seta,
button.coe-vitrine__seta,
button.coe-autores__seta,
button.coe-hero__dot,
button.coe-header__menu-btn {
	padding: 0;
	border: 0;
}

button.coe-btn {
	padding-inline: var(--sp-6);
}

/*
 * O `border: 0` da regra acima existe para tirar o chrome do Storefront de
 * todo <button> do tema, e some com o contorno da variante secundária — a
 * cadeia `button.coe-btn` pesa (0,1,1) contra (0,1,0) de `.coe-btn--secondary`.
 *
 * Ninguém tinha esbarrado nisso porque todo botão secundário do tema era um
 * <a>. O primeiro <button> secundário foi o "Filtrar" da barra da loja, e ele
 * saiu como texto solto: a cor e o raio aplicados, o traço não.
 */
button.coe-btn--secondary {
	border: 1.5px solid var(--navy);
}

/* Ícone nunca encolhe: é peça de tamanho fixo, não conteúdo flexível. */
.coe-icone {
	flex: 0 0 auto;
}

/* ==========================================================================
   5. Links de seção e títulos
   ========================================================================== */

.coe-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-6);
	margin-bottom: var(--sp-8);
}

.coe-section-title {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.15;
	margin: 0;
}

.coe-section-sub {
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-muted);
	margin: var(--sp-1) 0 0;
}

.coe-section-link {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--navy);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.coe-section-link:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.coe-section-title {
		font-size: 24px;
	}

	.coe-section-sub {
		font-size: 15px;
	}

	/*
	 * O link ("VER TODOS OS LANÇAMENTOS →") não cabe ao lado do título em
	 * 390px: com nowrap ele espremia o h2 e "Acabou de sair" quebrava em duas
	 * linhas. Empilhar preserva os dois rótulos inteiros.
	 */
	.coe-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-3);
		margin-bottom: var(--sp-6);
	}
}

/* ==========================================================================
   6. Storefront — neutralizações
   O tema pai mira #primary (especificidade 100) e reserva largura para a
   sidebar dele. Sem isto o conteúdo fica preso a 73,9% da largura.
   ========================================================================== */

.site-content,
#content.site-content {
	padding-block: 0;
	background-color: var(--paper);
}

/*
 * O Storefront embrulha todo o conteúdo em .col-full, que tem
 * max-width: 66.4165em (≈931px) e padding lateral próprio. Dentro dele
 * nenhuma faixa consegue sangrar até a borda — hero, banda de confiança,
 * faixa Publique e rodapé ficavam com 931px em vez de 1440px.
 *
 * Medido, não suposto: a cadeia de ancestrais mostrou o max-width vindo
 * daqui, e não do #primary nem do body.
 *
 * A largura passa a ser total e quem centraliza é o .coe-container de cada
 * seção. As páginas que não têm container próprio recebem um logo abaixo.
 *
 * O .col-full do rodapé fica em .site-footer, fora de .site-content — por isso
 * ele precisa estar na lista. Sem ele o rodapé media 350px num viewport de
 * 390px.
 */
#content.site-content > .col-full,
.site-content .col-full,
.site-footer > .col-full {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * Mesma história, agora nos wrappers: o Storefront desenha o nosso header
 * dentro de .site-header e o nosso rodapé dentro de .site-footer, e cada um
 * traz chrome próprio.
 *
 * Medido no site, em 1440px:
 *   .site-header  padding-top 36.65px · margin-bottom 59.30px · fundo #fff
 *
 * A margem vem de `.no-wc-breadcrumb .site-header`, que tem dois níveis de
 * especificidade — por isso a lista de seletores abaixo repete os do
 * Storefront em vez de usar só `.site-header`.
 *   .site-footer  padding 22.65px em cima e 51.89px embaixo · fundo #f0f0f0
 *
 * Isso aparecia como faixa branca acima da barra de aviso, outra entre o
 * header e o hero, e duas faixas cinza abraçando o rodapé navy — as faixas
 * não eram do nosso layout, eram do wrapper.
 *
 * O fundo vira papel em vez de transparente: se algum breakpoint deixar
 * sobrar um pixel de folga, ele aparece na cor da marca e não em branco.
 */
.site-header,
.no-wc-breadcrumb .site-header,
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
	padding: 0;
	margin: 0;
	background-color: var(--paper);
	border-bottom: 0;
	box-shadow: none;
}

/*
 * O cabeçalho gruda no topo AQUI, e não em `.coe-header`.
 *
 * `position: sticky` só corre dentro do bloco que contém o elemento. Com o
 * sticky em `.coe-header`, o bloco era `.site-header` — que tem exatamente a
 * altura do cabeçalho. Medido: depois de rolar 1200px o topo do cabeçalho
 * estava em -1160, ou seja, ele grudou pelos 40px de folga e subiu junto com
 * a página.
 *
 * Subindo o sticky para o `.site-header`, o bloco passa a ser `#page`, que
 * tem a altura do documento. A barra de aviso saiu de dentro dele (ver
 * `functions.php`) justamente para não grudar junto.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * `overflow-x: hidden` do Storefront em `body` e `.site` transformava os dois
 * em contêiner de rolagem, e `position: sticky` dentro de um contêiner desses
 * gruda em relação a ELE, não à janela — o cabeçalho não voltaria a grudar nem
 * com o bloco certo.
 *
 * `clip` recorta o transbordo horizontal do mesmo jeito e NÃO cria contêiner
 * de rolagem. É a diferença entre as duas palavras-chave, e é exatamente o
 * caso de uso dela.
 */
body,
.site {
	overflow-x: clip;
}

.site-footer {
	padding: 0;
	margin: 0;
	background-color: var(--paper);
	border-top: 0;
}

/*
 * Loja, produto, carrinho, busca e páginas internas não desenham container
 * próprio — sem isto elas iriam de borda a borda depois da regra acima.
 */
body:not(.home) #primary,
body:not(.home) .woocommerce-notices-wrapper,
body:not(.home) .storefront-breadcrumb .col-full {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

/*
 * O `.col-full` do Storefront é `content-box`: com `max-width: 1280px` mais
 * 16px de recuo de cada lado, o conteúdo dele media 1280 enquanto o `#primary`
 * — que é `border-box` — media 1248. Medido a 1495px em 07/09/2026: breadcrumb
 * em 107,5 e o corpo do produto em 123,5. Dezesseis pixels de diferença entre
 * duas coisas empilhadas uma sobre a outra.
 */
body:not(.home) .storefront-breadcrumb .col-full {
	box-sizing: border-box;
}

/*
 * O espelho da regra do `.coe-container`, que zera o recuo lateral quando a
 * janela já comporta os 1280px inteiros. Sem isto o cabeçalho, o menu, as
 * vitrines e o rodapé iam para o trilho de 1280 acima de 1440px e o miolo das
 * páginas do WooCommerce ficava nos 1248 — o desalinhamento que aparece ao
 * dar zoom out, com o corpo da página encolhido em relação a tudo em volta.
 *
 * Os dois blocos precisam mudar juntos: alterar o breakpoint de um sem o
 * outro traz o problema de volta.
 */
@media (min-width: 1440px) {
	body:not(.home) #primary,
	body:not(.home) .woocommerce-notices-wrapper,
	body:not(.home) .storefront-breadcrumb .col-full {
		padding-inline: 0;
	}
}

#primary.content-area,
.content-area {
	width: 100%;
	float: none;
	margin-right: 0;
	margin-bottom: 0;
}

/* Sidebar órfã aparece em busca, 404 e arquivos se escondida só na home. */
#secondary.widget-area {
	display: none;
}

/* Clearfix de float do Woo vira célula em CSS Grid e come as primeiras vagas. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

/* Storefront dá margin-bottom a todo form; uma busca no header cresce 21px. */
.coe-header form,
.coe-footer form {
	margin: 0;
}

.storefront-breadcrumb {
	background-color: var(--paper);
	margin-bottom: 0;
	padding-block: var(--sp-4);
}