/**
 * Jane Flores — base.
 *
 * Aplica os tokens sobre o Storefront. Regra: nenhum valor literal de cor,
 * espaçamento ou tipografia neste arquivo — apenas var(--jf-*).
 */

/* ---------- Fundamentos ---------- */

body,
body.woocommerce,
.site {
	background-color: var(--jf-color-bg);
	color: var(--jf-color-text);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-base);
	line-height: var(--jf-leading-normal);
	font-weight: var(--jf-weight-regular);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.product_title {
	font-family: var(--jf-font-heading);
	font-weight: var(--jf-weight-semibold);
	line-height: var(--jf-leading-tight);
	letter-spacing: var(--jf-tracking-tight);
	color: var(--jf-color-text);
}

h1, .entry-title { font-size: var(--jf-size-3xl); }
h2 { font-size: var(--jf-size-2xl); }
h3 { font-size: var(--jf-size-xl); }
h4 { font-size: var(--jf-size-lg); }

/* Medida de leitura só no texto corrido. Aplicar a todo `li` estreitaria
   menus, listas de produto e itens de interface. */
.entry-content p,
.entry-content li,
.woocommerce-product-details__short-description p {
	max-width: var(--jf-measure);
}

a {
	color: var(--jf-color-primary);
	text-underline-offset: 0.2em;
}

a:hover { color: var(--jf-color-primary-hover); }

/* ---------- Foco visível (§21) ----------
 * Nunca remover outline sem substituir por um indicador equivalente.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible {
	outline: var(--jf-focus-width) solid var(--jf-color-focus);
	outline-offset: var(--jf-focus-offset);
	border-radius: var(--jf-radius-sm);
}

/* O contorno roxo que aparecia ao CLICAR em link e botão era do Storefront
 * (`a:focus, button:focus { outline: 2px solid #7f54b3 }`, no style.css e de
 * novo no CSS inline do Personalizador). `:focus` vale também para clique de
 * mouse; `:focus-visible` só quando o navegador julga que o foco precisa ser
 * visto — teclado, e campo de texto em qualquer caso.
 *
 * Aqui sai só o contorno do clique. Quem navega por teclado continua vendo o
 * anel azul acima (§21, WCAG 2.4.7). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Layout ---------- */

/* O Storefront dá ao `.col-full` MARGEM lateral de 2,6em (1,4em abaixo de
   568px) no celular, e o nosso padding somava por cima: numa tela de 375px o
   container ficava com 247px. A margem volta a ser `auto` em todas as
   larguras; o respiro lateral é só o `--jf-gutter`. */
.col-full {
	max-width: var(--jf-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--jf-gutter);
	padding-right: var(--jf-gutter);
	box-sizing: border-box;
}

/* ---------- Botões ----------
 * Grandes, claramente identificáveis, alvo de toque nunca abaixo de 44px.
 */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--jf-control-height);
	min-width: var(--jf-tap-min);
	padding: var(--jf-space-xs) var(--jf-space-md);
	background-color: var(--jf-color-primary);
	color: var(--jf-color-text-on-dark);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-base);
	font-weight: var(--jf-weight-semibold);
	line-height: var(--jf-leading-snug);
	border: 0;
	border-radius: var(--jf-radius-md);
	text-decoration: none;
	transition: background-color var(--jf-transition);
}

.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--jf-color-primary-hover);
	color: var(--jf-color-text-on-dark);
}

/* CTA principal do fluxo — alta visibilidade (§8). */
.jf-button--primary {
	min-height: var(--jf-control-height-lg);
	width: 100%;
	font-size: var(--jf-size-lg);
}

/* CTA secundário — "Preciso de ajuda": alternativa, nunca obstáculo (§2.5). */
.jf-button--ghost,
.woocommerce a.button.jf-button--ghost {
	background-color: transparent;
	color: var(--jf-color-primary);
	border: 1px solid var(--jf-color-border-strong);
}

.jf-button--ghost:hover,
.woocommerce a.button.jf-button--ghost:hover {
	background-color: var(--jf-color-primary-soft);
	color: var(--jf-color-primary-hover);
}

/* ---------- Campos de formulário ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: var(--jf-control-height);
	padding: var(--jf-space-2xs) var(--jf-space-xs);
	background-color: var(--jf-color-surface);
	color: var(--jf-color-text);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-base); /* ≥16px evita zoom automático no iOS */
	border: 1px solid var(--jf-color-border-strong);
	border-radius: var(--jf-radius-md);
	box-shadow: none;
}

label {
	display: block;
	margin-bottom: var(--jf-space-3xs);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	color: var(--jf-color-text);
}

/* ---------- Superfícies ---------- */

.jf-card {
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
	box-shadow: var(--jf-shadow-sm);
}

.jf-panel {
	background-color: var(--jf-color-surface-alt);
	border-radius: var(--jf-radius-lg);
	padding: var(--jf-space-md);
}

.jf-section {
	padding-top: var(--jf-section-y);
	padding-bottom: var(--jf-section-y);
}

/* ---------- Utilitário de acessibilidade ---------- */

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

/* ---------- Avisos do WooCommerce ----------
 * O vermelho padrão do Storefront dá 4,21:1 com texto branco — abaixo do
 * mínimo AA de 4,5:1 para texto normal. Aqui o par é texto escuro sobre fundo
 * claro, que folga bastante, e a barra lateral colorida dá o segundo sinal
 * além da cor (§21).
 */

.jf-aviso {
	margin: 0 0 var(--jf-space-md);
	padding: var(--jf-space-sm) var(--jf-space-md);
	background-color: var(--jf-color-surface-alt);
	border: 0;
	border-left: 4px solid var(--jf-color-border-strong);
	border-radius: var(--jf-radius-md);
	color: var(--jf-color-text);
	font-size: var(--jf-size-base);
	line-height: var(--jf-leading-normal);
}

.jf-aviso::before {
	display: none; /* o Storefront usa ícone de fonte no ::before */
}

.jf-aviso p,
.jf-aviso li {
	margin: 0;
	max-width: var(--jf-measure);
	color: inherit;
}

.jf-aviso__lista {
	margin: 0;
	padding-left: var(--jf-space-md);
}

.jf-aviso__lista li + li {
	margin-top: var(--jf-space-3xs);
}

.jf-aviso--erro {
	background-color: var(--jf-color-error-soft);
	border-left-color: var(--jf-color-error);
	color: var(--jf-color-error);      /* 6,64:1 sobre error-soft */
	font-weight: var(--jf-weight-semibold);
}

.jf-aviso--sucesso {
	background-color: var(--jf-color-primary-soft);
	border-left-color: var(--jf-color-success);
	color: var(--jf-color-text);       /* 13,x:1 sobre primary-soft */
}

.jf-aviso--info {
	background-color: var(--jf-color-primary-soft);
	border-left-color: var(--jf-color-primary);
	color: var(--jf-color-text);
}

/* O botão que o WooCommerce injeta dentro do aviso ("Ver carrinho") não deve
   herdar a cor do texto do aviso. */
.jf-aviso .button {
	color: var(--jf-color-text-on-dark);
	margin-left: var(--jf-space-sm);
}

/* ---------- Invólucro do cabeçalho do Storefront ----------
 * O cabeçalho é todo desenhado em cabecalho.css. Do tema pai sobra só o
 * `<header class="site-header">`, que vinha com 72px de margem embaixo e o
 * padding de uma regra antiga deste arquivo — os dois somados abriam um vão
 * entre o menu e o banner.
 *
 * As regras que estilizavam .site-branding, .site-search e .main-navigation
 * saíram daqui: esses elementos não são mais impressos.
 */
.site-header {
	margin: 0;
	padding: 0;
	background-color: var(--jf-color-surface);
	border: 0;
}

/* Na home o Storefront reaplica a margem com
   `.home.page:not(.page-template-template-homepage) .site-header`, que tem
   especificidade (0,4,0). O id é o jeito estável de vencer sem espelhar o
   seletor dele. */
#masthead.site-header {
	margin-bottom: 0;
}

/* ---------- Respiro do conteúdo ----------
 * Um valor só, vindo da escala, em vez do padding herdado do tema pai.
 */
.site-content {
	padding-top: var(--jf-space-md);
}


.site-main {
	margin-bottom: var(--jf-space-xl);
}


/* ---------- Eyebrow ----------
 * Rótulo curto em caixa alta espaçada que abre uma seção.
 *
 * É o elemento que a loja e o checkout têm em comum de verdade: mesmo
 * espaçamento (`--jf-tracking-eyebrow` = `--cee-caixa-alta-espaco`), mesmo
 * papel de dizer "isto aqui é outra coisa" sem gastar um título.
 *
 * Nasceu no rodapé, em duas classes diferentes que faziam a mesma coisa. Agora
 * é um componente só, e as duas o consomem.
 */

.jf-eyebrow,
.jf-rodape__titulo,
.jf-confianca__titulo {
	display: block;
	margin: 0 0 var(--jf-space-sm);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-xs);
	font-weight: var(--jf-weight-semibold);
	letter-spacing: var(--jf-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--jf-color-text-muted);
}

/* Variante sobre fundo escuro (banner, moldura). */
.jf-eyebrow--claro {
	color: var(--jf-color-text-on-dark);
	opacity: 0.85;
}

/* ---------- Texturas de fundo ----------
 * Ver as quatro regras de uso em tokens.css. As classes ficam aqui porque são
 * utilitárias: aplicadas a uma faixa, não a um componente.
 */

.jf-textura {
	position: relative;
	background-repeat: repeat;
}

.jf-textura--petalas { background-image: var(--jf-pattern-petalas); }
.jf-textura--grade   { background-image: var(--jf-pattern-grade); }
.jf-textura--linhas  { background-image: var(--jf-pattern-linhas); }

/* A textura se apaga quando a pessoa pede alto contraste: o desenho é decorativo
   e, em modo de contraste forçado, só atrapalharia a leitura. */
@media (forced-colors: active) {
	.jf-textura {
		background-image: none;
	}
}

/* ---------- Clearfix do Storefront em containers flex/grid ----------
 * O `.col-full` do tema pai tem clearfix: `::before` e `::after` com
 * `display: table`. Todo `.col-full` que vira flex ou grid transforma esses
 * pseudo-elementos em itens — no grid eles ocupam a primeira célula (a faixa de
 * confiança começava deslocada para a direita), no flex somam um `gap` extra.
 * Armadilha nº 5 do CLAUDE.md; esta lista cobre todos os containers do tema.
 */
.jf-faixa__in::before,
.jf-faixa__in::after,
.jf-cab__linha::before,
.jf-cab__linha::after,
.jf-cab__nav-in::before,
.jf-cab__nav-in::after,
.jf-confianca__grade::before,
.jf-confianca__grade::after,
.jf-rodape-base__in::before,
.jf-rodape-base__in::after {
	content: none;
	display: none;
}