/*
Theme Name: Ofertas Arrasadoras
Theme URI: https://ofertasarrasadoras.net
Description: Tema-filho do Kadence com a identidade visual da marca Ofertas Arrasadoras (portal de ofertas e afiliados). Cores, tipografia, cabeçalho, rodapé, coluna de destaques e layout de produto/oferta.
Author: Ofertas Arrasadoras
Author URI: https://ofertasarrasadoras.net
Template: kadence
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ofertasarrasadoras
*/

/* ===================================================================
   1. TOKENS DA MARCA  — docs/DECISAO-ARQUITETURA-WORDPRESS.md §5.2
   =================================================================== */
:root {
	--oa-preto: #0E0102;
	--oa-vermelho: #BF0D19;
	--oa-vermelho-escuro: #620907;
	--oa-laranja: #FA943C;
	--oa-laranja-vermelho: #D3431E;
	--oa-dourado: #F5B942;
	--oa-branco: #FFFFFF;
	--oa-cinza-claro: #F5F5F5;

	/* Neutros de apoio */
	--oa-tinta: #1c1917;          /* texto principal */
	--oa-tinta-suave: #57534e;    /* texto secundário */
	--oa-linha: #e7e5e4;          /* bordas */
	--oa-fundo: #ffffff;
	--oa-fundo-alt: #faf9f8;

	/* Papéis semânticos */
	--oa-cta-bg: var(--oa-vermelho);
	--oa-cta-bg-hover: var(--oa-vermelho-escuro);
	--oa-cta-fg: var(--oa-branco);
	--oa-destaque: var(--oa-laranja);
	--oa-preco: var(--oa-vermelho-escuro);
	--oa-badge-bg: var(--oa-dourado);
	--oa-badge-fg: var(--oa-preto);

	--oa-raio: 12px;
	--oa-raio-sm: 8px;
	--oa-sombra: 0 1px 2px rgba(14,1,2,.06), 0 8px 24px -12px rgba(14,1,2,.18);
	--oa-sombra-hover: 0 2px 6px rgba(14,1,2,.08), 0 16px 40px -16px rgba(14,1,2,.28);
	--oa-container: 1200px;

	/* Espelha os tokens nos globais do Kadence para a UI herdar a marca. */
	--global-palette1: var(--oa-vermelho);
	--global-palette2: var(--oa-vermelho-escuro);
	--global-palette3: var(--oa-tinta);
	--global-palette4: var(--oa-tinta-suave);
	--global-palette5: var(--oa-tinta-suave);
	--global-palette6: var(--oa-linha);
	--global-palette7: var(--oa-fundo-alt);
	--global-palette8: var(--oa-branco);
	--global-palette9: var(--oa-preto);
}

/* ===================================================================
   2. BASE
   =================================================================== */
body {
	color: var(--oa-tinta);
	background: var(--oa-fundo);
}
a { color: var(--oa-vermelho); }
a:hover { color: var(--oa-vermelho-escuro); }

.oa-container,
.content-container.site-container {
	max-width: var(--oa-container);
}

h1, h2, h3, h4, .entry-title {
	color: var(--oa-tinta);
	letter-spacing: -0.01em;
}

/* Foco visível (acessibilidade — §60) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--oa-laranja);
	outline-offset: 2px;
}

/* ===================================================================
   3. BOTÕES / CTA
   =================================================================== */
.oa-btn,
.wp-block-button.is-style-oa-cta .wp-block-button__link,
.woocommerce a.button.product_type_external,
.woocommerce .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--oa-cta-bg);
	color: var(--oa-cta-fg);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.15;
	padding: .9em 1.5em;
	border: 0;
	border-radius: var(--oa-raio-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 6px 16px -6px rgba(191,13,25,.5);
}
.oa-btn:hover,
.oa-btn:focus-visible,
.wp-block-button.is-style-oa-cta .wp-block-button__link:hover,
.woocommerce a.button.product_type_external:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--oa-cta-bg-hover);
	color: var(--oa-cta-fg);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px rgba(98,9,7,.55);
}
.oa-btn--ghost {
	background: transparent;
	color: var(--oa-vermelho);
	border: 2px solid var(--oa-vermelho);
	box-shadow: none;
}
.oa-btn--ghost:hover { background: var(--oa-vermelho); color: #fff; }
.oa-btn--block { width: 100%; }

/* ===================================================================
   4. SELOS / PREÇO
   =================================================================== */
.oa-badge {
	display: inline-block;
	background: var(--oa-badge-bg);
	color: var(--oa-badge-fg);
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .02em;
	padding: .22em .6em;
	border-radius: 999px;
	line-height: 1.3;
}
.oa-badge--fire::before { content: "🔥 "; }

.oa-price { color: var(--oa-preco); font-weight: 800; font-size: 1.15rem; }
.oa-price__old {
	color: var(--oa-tinta-suave);
	text-decoration: line-through;
	font-weight: 500;
	font-size: .9em;
	margin-left: .45em;
}
.oa-price__from { color: var(--oa-tinta-suave); font-weight: 500; font-size: .85em; display: block; }

/* ===================================================================
   5. CABEÇALHO  (claro, wordmark + busca + categorias)
   =================================================================== */
.site-header,
.site-branding .site-header-wrap {
	background: var(--oa-branco);
}
.site-header-row-container-inner {
	border-bottom: 1px solid var(--oa-linha);
}

/* Logo por imagem (wordmark) */
.site-branding a.brand img,
.custom-logo-link img {
	height: 52px;
	width: auto;
}
@media (min-width: 1024px) {
	.site-branding a.brand img,
	.custom-logo-link img { height: 60px; }
}

/* Botão "Categorias" no header (adicione classe .oa-cats ao item de menu) */
.main-navigation .menu-item.oa-cats > a {
	background: var(--oa-vermelho);
	color: #fff !important;
	border-radius: var(--oa-raio-sm);
	padding-left: 1em;
	padding-right: 1em;
	font-weight: 800;
}
.main-navigation .menu-item.oa-cats > a:hover { background: var(--oa-vermelho-escuro); }

/* Campo de busca do header */
.search-toggle-open-container .search-field,
.header-search .search-field {
	border-radius: 999px;
	border: 1.5px solid var(--oa-linha);
}
.search-toggle-open-container .search-field:focus { border-color: var(--oa-laranja); }

/* ===================================================================
   6. GRID DE OFERTAS / CARDS
   =================================================================== */
.oa-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
@media (min-width: 600px)  { .oa-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .oa-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.oa-grid--wide.oa-grid { }
@media (min-width: 1024px) { .oa-grid--3.oa-grid { grid-template-columns: repeat(3, 1fr); } }

.oa-card {
	display: flex;
	flex-direction: column;
	background: var(--oa-branco);
	border: 1px solid var(--oa-linha);
	border-radius: var(--oa-raio);
	overflow: hidden;
	box-shadow: var(--oa-sombra);
	transition: box-shadow .15s ease, transform .15s ease;
}
.oa-card:hover { box-shadow: var(--oa-sombra-hover); transform: translateY(-2px); }
.oa-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--oa-fundo-alt);
}
.oa-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.oa-card__badge { position: absolute; top: 10px; left: 10px; }
.oa-card__body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.oa-card__title {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oa-tinta);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
.oa-card__store { font-size: .78rem; color: var(--oa-tinta-suave); }
.oa-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

/* Cards do WooCommerce (loja/categoria) herdam o visual */
.woocommerce ul.products li.product {
	border: 1px solid var(--oa-linha);
	border-radius: var(--oa-raio);
	box-shadow: var(--oa-sombra);
	overflow: hidden;
	padding: 0 0 12px;
	transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--oa-sombra-hover); transform: translateY(-2px); }
.woocommerce ul.products li.product img { margin: 0 0 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 12px; font-size: .95rem; }
.woocommerce ul.products li.product .price { padding: 0 12px; color: var(--oa-preco); }
.woocommerce ul.products li.product .button { margin: 8px 12px 0; }

/* ===================================================================
   7. SIDEBAR "OFERTAS EM DESTAQUE"
   =================================================================== */
.oa-destaques {
	background: var(--oa-branco);
	border: 1px solid var(--oa-linha);
	border-radius: var(--oa-raio);
	overflow: hidden;
}
.oa-destaques__head {
	background: var(--oa-preto);
	color: #fff;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .85rem;
	padding: 12px 14px;
}
.oa-destaques__head::before { content: "🔥 "; }
.oa-destaques__item {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--oa-linha);
	align-items: center;
}
.oa-destaques__item img { width: 56px; height: 56px; object-fit: contain; background: var(--oa-fundo-alt); border-radius: var(--oa-raio-sm); }
.oa-destaques__t { font-size: .84rem; font-weight: 600; line-height: 1.25; color: var(--oa-tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oa-destaques__p { font-size: .82rem; color: var(--oa-preco); font-weight: 800; }

/* ===================================================================
   8. PÁGINA DE PRODUTO — área de DESTINOS (§53)
   =================================================================== */
.oa-destinos { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.oa-destino {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--oa-linha);
	border-radius: var(--oa-raio);
	background: var(--oa-branco);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.oa-destino:hover { border-color: var(--oa-laranja); box-shadow: var(--oa-sombra); }
.oa-destino--melhor { border-color: var(--oa-laranja); box-shadow: 0 0 0 3px rgba(250,148,60,.15); }
.oa-destino__loja { font-weight: 800; color: var(--oa-tinta); }
.oa-destino__meta { font-size: .82rem; color: var(--oa-tinta-suave); }
.oa-destino__preco { margin-left: auto; text-align: right; }
.oa-destino .oa-btn { flex-shrink: 0; }
@media (max-width: 560px) {
	.oa-destino { flex-wrap: wrap; }
	.oa-destino__preco { margin-left: 0; text-align: left; }
	.oa-destino .oa-btn { width: 100%; }
}

/* ===================================================================
   9. HERO / SEÇÕES DA HOME
   =================================================================== */
.oa-hero {
	background: linear-gradient(135deg, var(--oa-preto) 0%, var(--oa-vermelho-escuro) 60%, var(--oa-laranja-vermelho) 100%);
	color: #fff;
	border-radius: var(--oa-raio);
	padding: clamp(28px, 6vw, 64px);
	text-align: center;
}
.oa-hero h1 { color: #fff; font-size: clamp(1.6rem, 4.5vw, 2.6rem); margin: 0 0 .4em; }
.oa-hero p { color: rgba(255,255,255,.9); font-size: clamp(1rem, 2.5vw, 1.15rem); margin: 0 0 1.4em; }

.oa-section { margin: 40px 0; }
.oa-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.oa-section__head h2 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.oa-section__head a { font-weight: 700; font-size: .9rem; white-space: nowrap; }

.oa-cats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .oa-cats-grid { grid-template-columns: repeat(4, 1fr); } }
.oa-cat {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 18px 12px; text-align: center;
	background: var(--oa-branco); border: 1px solid var(--oa-linha); border-radius: var(--oa-raio);
	font-weight: 700; color: var(--oa-tinta); text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.oa-cat:hover { border-color: var(--oa-laranja); transform: translateY(-2px); color: var(--oa-tinta); }

/* ===================================================================
   10. RODAPÉ  (preto premium — §19)
   =================================================================== */
.site-footer,
.site-footer-row-container-inner {
	background: var(--oa-preto) !important;
	color: rgba(255,255,255,.75);
}
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; }
.site-footer h2, .site-footer h3, .site-footer .widget-title { color: #fff; }

.oa-affiliate-note {
	background: #000;
	color: rgba(255,255,255,.6);
	font-size: .8rem;
	text-align: center;
	padding: 10px 16px;
	line-height: 1.5;
}
.oa-affiliate-note a { color: rgba(255,255,255,.85); text-decoration: underline; }

/* ===================================================================
   11. UTIL / RESPONSIVO
   =================================================================== */
img { height: auto; }
.oa-only-mobile { display: block; }
.oa-only-desktop { display: none; }
@media (min-width: 1024px) {
	.oa-only-mobile { display: none; }
	.oa-only-desktop { display: block; }
}

/* Página 404 amigável */
.error404 .oa-404-search { max-width: 480px; margin: 24px auto; }