/* =========================================================
   BANJO SERENO — Identidade Visual
   "Cultura do samba no cotidiano"
   ========================================================= */

:root {
	/* Paleta principal */
	--bs-black: #000000;
	--bs-white: #FFFFFF;
	--bs-gold: #C9A24A;        /* dourado da marca */
	--bs-gold-soft: #E0C079;   /* dourado claro p/ hover */
	--bs-gold-deep: #A6822F;   /* dourado escuro p/ detalhes */

	/* Cores secundárias */
	--bs-blue: #A7D8F5;
	--bs-green: #1DB954;

	/* Neutros de apoio */
	--bs-ink: #0E0E0E;         /* preto levemente suave p/ fundos */
	--bs-cream: #F4EFE6;       /* creme das artes */
	--bs-gray: #6E6E6E;
	--bs-line: rgba(255,255,255,0.12);

	/* Tipografia */
	--bs-font-display: 'Bebas Neue', 'Oswald', sans-serif; /* títulos de impacto */
	--bs-font-head: 'Oswald', sans-serif;                  /* subtítulos */
	--bs-font-body: 'Montserrat', sans-serif;              /* texto corrido */
}

/* ---------- Base ---------- */
body {
	font-family: var(--bs-font-body);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--bs-ink);
}

/* ---------- Títulos ---------- */
h1, h2, h3, .entry-title, .woocommerce-loop-product__title {
	font-family: var(--bs-font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

h4, h5, h6 {
	font-family: var(--bs-font-head);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Links ---------- */
a { color: var(--bs-gold-deep); }
a:hover { color: var(--bs-gold); }

/* =========================================================
   BOTÕES
   ========================================================= */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce button.button.alt {
	font-family: var(--bs-font-head) !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border-radius: 2px !important;
	padding: 0.85em 1.8em !important;
	transition: all 0.25s ease !important;
	border: 1px solid var(--bs-black) !important;
}

/* Botão primário — preto */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.wp-block-button__link {
	background-color: var(--bs-black) !important;
	color: var(--bs-white) !important;
	border-color: var(--bs-black) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wp-block-button__link:hover {
	background-color: var(--bs-gold) !important;
	color: var(--bs-black) !important;
	border-color: var(--bs-gold) !important;
}

/* Botão secundário (outline dourado) — use a classe .bs-btn-outline */
.bs-btn-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--bs-white) !important;
	border: 1px solid var(--bs-gold) !important;
}
.bs-btn-outline .wp-block-button__link:hover {
	background-color: var(--bs-gold) !important;
	color: var(--bs-black) !important;
}

/* =========================================================
   WOOCOMMERCE
   ========================================================= */

/* Preços */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--bs-gold-deep);
	font-family: var(--bs-font-head);
	font-weight: 600;
}

/* Selo de promoção */
.woocommerce span.onsale {
	background-color: var(--bs-gold) !important;
	color: var(--bs-black) !important;
	font-family: var(--bs-font-head);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 2px;
	min-height: auto;
	min-width: auto;
	padding: 0.35em 0.7em;
	line-height: 1;
}

/* Card de produto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15rem;
	letter-spacing: 0.03em;
	padding-top: 0.6em;
}

/* Avaliação por estrelas em dourado */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--bs-gold); }

/* Mensagens / avisos */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--bs-gold) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--bs-gold) !important; }

/* Badge "esgotado" */
.woocommerce ul.products li.product .button.disabled,
.outofstock .stock { color: var(--bs-gray); }

/* =========================================================
   FAIXA / HERO utilitários da marca
   ========================================================= */

/* Seção de fundo preto (use a classe .has-bs-black-background-color nos grupos) */
.bs-section-dark {
	background-color: var(--bs-black);
	color: var(--bs-white);
}
.bs-section-dark h1,
.bs-section-dark h2,
.bs-section-dark h3,
.bs-section-dark p { color: var(--bs-white); }

/* Detalhe dourado: linha decorativa */
.bs-rule {
	width: 64px;
	height: 3px;
	background: var(--bs-gold);
	border: 0;
	margin: 1.2rem 0;
}

/* Texto de destaque dourado */
.bs-gold { color: var(--bs-gold); }

/* =========================================================
   PALETA DO EDITOR (cores disponíveis nos blocos Gutenberg)
   ========================================================= */
.has-bs-black-color { color: var(--bs-black) !important; }
.has-bs-white-color { color: var(--bs-white) !important; }
.has-bs-gold-color { color: var(--bs-gold) !important; }
.has-bs-blue-color { color: var(--bs-blue) !important; }
.has-bs-green-color { color: var(--bs-green) !important; }
.has-bs-black-background-color { background-color: var(--bs-black) !important; }
.has-bs-white-background-color { background-color: var(--bs-white) !important; }
.has-bs-gold-background-color { background-color: var(--bs-gold) !important; }
.has-bs-cream-background-color { background-color: var(--bs-cream) !important; }