/*
Theme Name: Polita Alimentos
Theme URI: https://www.alimentospolita.com.br
Description: Tema filho do Storefront personalizado para a Polita Alimentos — loja, área do cliente e institucional.
Author: Polita Alimentos
Template: storefront
Version: 1.0.0
Text Domain: polita
*/

/* =========================================================
   1. VARIÁVEIS DE MARCA — cores oficiais do manual de
   identidade visual da Polita (Identidade Visual - Alimentos
   Polita.pdf). Troque só aqui para ajustar as cores do site.
   ========================================================= */
:root{
	--polita-primary: #FF7700;        /* Safety Orange — cor de ação (botões, CTA) */
	--polita-primary-dark: #D96400;
	--polita-green: #044730;          /* British Racing Green — cor principal da marca */
	--polita-green-dark: #022C1D;
	--polita-secondary: #38B000;      /* Kelly Green — verde folha (acentos, botão alternativo) */
	--polita-secondary-dark: #2C8C00;
	--polita-yellow: #FFC300;         /* Mikado Amarelo — destaques e selos */
	--polita-cream: #FFFBF0;
	--polita-cream-dark: #F5EDD8;
	--polita-text: #402E20;           /* Bistre — cor de texto do manual */
	--polita-text-light: #7A6552;
	--polita-white: #FFFFFF;
	--polita-radius: 10px;
	--polita-shadow: 0 4px 16px rgba(4, 71, 48, 0.08);
	--polita-shadow-hover: 0 8px 24px rgba(4, 71, 48, 0.16);
	--polita-font-heading: 'Rubik', 'Segoe UI', sans-serif;
	--polita-font-body: 'Mitr', 'Segoe UI', sans-serif;
}

/* =========================================================
   2. BASE
   ========================================================= */
body{
	background: var(--polita-cream);
	color: var(--polita-text);
	font-family: var(--polita-font-body);
}
h1, h2, h3, h4, h5, h6{
	font-family: var(--polita-font-heading);
	color: var(--polita-text);
	font-weight: 600;
}
a{ color: var(--polita-primary); }
a:hover{ color: var(--polita-primary-dark); }

/* =========================================================
   3. TOPO / AVISO DE CONTATO
   ========================================================= */
.polita-topbar{
	background: var(--polita-green-dark);
	color: var(--polita-cream);
	font-size: 0.85rem;
	padding: 6px 0;
}
.polita-topbar .polita-topbar-inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.polita-topbar a{ color: var(--polita-cream); text-decoration: none; }
.polita-topbar a:hover{ color: #fff; text-decoration: underline; }
.polita-topbar span{ margin-right: 18px; }

/* =========================================================
   4. CABEÇALHO / MENU
   ========================================================= */
#masthead.site-header{
	background: var(--polita-white);
	box-shadow: var(--polita-shadow);
	position: sticky;
	top: 0;
	z-index: 999;
}
.site-branding img{ max-height: 56px; width: auto; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a{
	font-family: var(--polita-font-heading);
	font-weight: 500;
	font-size: 0.95rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--polita-text);
	padding: 12px 16px;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover{
	color: var(--polita-primary);
}
.main-navigation ul ul{
	border-top: 3px solid var(--polita-primary);
	box-shadow: var(--polita-shadow-hover);
}

.site-header-cart .cart-contents{
	background: var(--polita-primary);
	color: #fff;
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 600;
}
.site-header-cart .cart-contents:hover{ background: var(--polita-primary-dark); color: #fff; }

/* =========================================================
   5. BOTÕES
   ========================================================= */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce-page a.button, .woocommerce-page button.button{
	background: var(--polita-primary);
	color: #fff;
	border: none;
	border-radius: var(--polita-radius);
	font-family: var(--polita-font-heading);
	font-weight: 600;
	padding: 12px 24px;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
	box-shadow: var(--polita-shadow);
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #respond input#submit:hover{
	background: var(--polita-primary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--polita-shadow-hover);
}
.button.alt, .woocommerce a.button.alt, .woocommerce #respond input#submit.alt{
	background: var(--polita-secondary);
}
.button.alt:hover{ background: var(--polita-secondary-dark); }

/* =========================================================
   6. HOME — HERO
   ========================================================= */
.polita-hero{
	background: linear-gradient(120deg, var(--polita-green) 0%, var(--polita-green-dark) 100%);
	color: #fff;
	padding: 90px 20px;
	text-align: center;
}
.polita-hero h1{
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.2rem);
	margin-bottom: 16px;
}
.polita-hero p{
	font-size: 1.15rem;
	max-width: 640px;
	margin: 0 auto 32px;
	opacity: 0.92;
}
.polita-hero .button{ background: var(--polita-primary); font-size: 1.05rem; padding: 14px 32px; }
.polita-hero .button:hover{ background: var(--polita-primary-dark); }

/* =========================================================
   7. HOME — SEÇÕES GENÉRICAS
   ========================================================= */
.polita-section{ max-width: 1200px; margin: 0 auto; padding: 70px 20px; }
.polita-section-title{ text-align: center; margin-bottom: 12px; font-size: 2rem; }
.polita-section-subtitle{ text-align: center; color: var(--polita-text-light); max-width: 560px; margin: 0 auto 48px; }

/* Categorias em destaque */
.polita-categorias{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.polita-categoria-card{
	background: var(--polita-white);
	border-radius: var(--polita-radius);
	overflow: hidden;
	box-shadow: var(--polita-shadow);
	text-decoration: none;
	color: var(--polita-text);
	display: block;
	transition: transform .2s ease, box-shadow .2s ease;
}
.polita-categoria-card:hover{ transform: translateY(-4px); box-shadow: var(--polita-shadow-hover); color: var(--polita-text); }
.polita-categoria-card .thumb{
	aspect-ratio: 4/3;
	background: var(--polita-cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.polita-categoria-card .thumb img{ width: 100%; height: 100%; object-fit: cover; }
.polita-categoria-card .label{ padding: 16px; font-family: var(--polita-font-heading); font-weight: 600; text-align: center; }

/* Cards genéricos (diferenciais, institucional) */
.polita-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.polita-card{
	background: var(--polita-white);
	border-radius: var(--polita-radius);
	padding: 28px 24px;
	box-shadow: var(--polita-shadow);
	text-align: center;
}
.polita-card .icon{ font-size: 2.4rem; margin-bottom: 12px; }
.polita-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.polita-card p{ color: var(--polita-text-light); font-size: 0.95rem; margin: 0; }

/* CTA final */
.polita-cta{
	background: var(--polita-primary);
	color: #fff;
	text-align: center;
	padding: 60px 20px;
	border-radius: var(--polita-radius);
}
.polita-cta h2{ color: #fff; margin-bottom: 12px; }
.polita-cta .button{ background: #fff; color: var(--polita-primary); }
.polita-cta .button:hover{ background: var(--polita-cream); }

/* =========================================================
   7.1 PÁGINAS INSTITUCIONAIS (Sobre / Contato)
   ========================================================= */
.polita-valores-list{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
	display: grid;
	gap: 12px;
}
.polita-valores-list li{
	background: var(--polita-white);
	border-left: 4px solid var(--polita-primary);
	border-radius: 6px;
	padding: 14px 18px;
	box-shadow: var(--polita-shadow);
}
.polita-valores-list strong{ color: var(--polita-green); }

.polita-contato-grid{
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.2fr);
	gap: 24px;
	align-items: stretch;
}
.polita-mapa{ min-height: 320px; }
@media (max-width: 782px){
	.polita-contato-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   8. LOJA / PRODUTOS
   ========================================================= */
ul.products li.product{
	background: var(--polita-white);
	border-radius: var(--polita-radius);
	padding: 16px;
	box-shadow: var(--polita-shadow);
	transition: transform .2s ease, box-shadow .2s ease;
}
ul.products li.product:hover{ transform: translateY(-4px); box-shadow: var(--polita-shadow-hover); }
ul.products li.product img{ border-radius: calc(var(--polita-radius) - 4px); }
ul.products li.product .price{ color: var(--polita-primary); font-weight: 700; }

.woocommerce-tabs ul.tabs li a{ font-family: var(--polita-font-heading); font-weight: 600; }
.polita-tabela-nutricional{ width: 100%; border-collapse: collapse; margin-top: 12px; }
.polita-tabela-nutricional caption{ text-align: left; font-weight: 700; margin-bottom: 8px; }
.polita-tabela-nutricional th, .polita-tabela-nutricional td{
	border: 1px solid var(--polita-cream-dark);
	padding: 8px 12px;
	text-align: left;
	font-size: 0.92rem;
}
.polita-tabela-nutricional thead th{ background: var(--polita-cream-dark); }

/* =========================================================
   9. ÁREA DO CLIENTE (Minha Conta)
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation{
	background: var(--polita-white);
	border-radius: var(--polita-radius);
	box-shadow: var(--polita-shadow);
	padding: 8px 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{ border: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
	padding: 12px 20px;
	display: block;
	color: var(--polita-text);
	font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
	background: var(--polita-cream);
	color: var(--polita-primary);
	border-left: 3px solid var(--polita-primary);
}
.woocommerce-account .woocommerce-MyAccount-content{
	background: var(--polita-white);
	border-radius: var(--polita-radius);
	box-shadow: var(--polita-shadow);
	padding: 32px;
}

.polita-nutri-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.polita-nutri-item{
	border: 1px solid var(--polita-cream-dark);
	border-radius: var(--polita-radius);
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.polita-nutri-item img{ width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--polita-cream); }
.polita-nutri-item a{ font-weight: 600; font-size: 0.92rem; }

.polita-doc-list{ list-style: none; margin: 0; padding: 0; }
.polita-doc-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--polita-cream-dark);
	border-radius: var(--polita-radius);
	padding: 14px 18px;
	margin-bottom: 12px;
}
.polita-doc-item .meta{ font-size: 0.82rem; color: var(--polita-text-light); }

/* =========================================================
   10. RODAPÉ
   ========================================================= */
#colophon.site-footer{ background: var(--polita-green-dark); color: var(--polita-cream); }
#colophon.site-footer a{ color: var(--polita-cream); }
#colophon.site-footer a:hover{ color: #fff; }
.polita-footer-grid{
	max-width: 1200px; margin: 0 auto; padding: 60px 20px 30px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
}
.polita-footer-grid h4{ color: #fff; margin-bottom: 16px; font-size: 1rem; }
.polita-footer-bottom{
	border-top: 1px solid rgba(255,255,255,0.12);
	text-align: center;
	padding: 18px 20px;
	font-size: 0.85rem;
	opacity: 0.8;
}

/* =========================================================
   11. WHATSAPP FLUTUANTE
   ========================================================= */
.polita-whatsapp-float{
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: #25D366;
	color: #fff;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	z-index: 999;
	font-size: 1.6rem;
	text-decoration: none;
}
.polita-whatsapp-float:hover{ color: #fff; transform: scale(1.06); }

/* =========================================================
   12. RESPONSIVO
   ========================================================= */
@media (max-width: 768px){
	.polita-hero{ padding: 60px 16px; }
	.polita-section{ padding: 44px 16px; }
	.woocommerce-account .woocommerce-MyAccount-content{ padding: 20px; }
}