/* ==========================================================================
   BISUN POWER — BASE STYLES
   Typography, containers, buttons, cards, form elements, badges.
   ========================================================================== */

body {
  font-family: var(--bp-font-body);
  color: var(--bp-text);
  line-height: var(--bp-lh-body);
  font-size: var(--bp-fs-body);
}

h1, h2, h3, h4, .wp-block-heading {
  font-family: var(--bp-font-heading);
  font-weight: 700;
  color: var(--bp-dark);
  line-height: var(--bp-lh-heading);
  margin: 0 0 var(--bp-space-4);
}
h1 { font-size: var(--bp-fs-h1); }
h2 { font-size: var(--bp-fs-h2); }
h3 { font-size: var(--bp-fs-h3); }
h4 { font-size: var(--bp-fs-h4); }

/* Container, buttons, cards, and the base grid utility moved to
   system.css (the shared spacing/component system) to eliminate
   duplicate definitions that were silently conflicting depending on
   stylesheet load order. Do not redefine .bp-container, .bp-btn*,
   .bp-card, or .bp-grid here. */
.wp-block-group.alignwide {
  max-width: var(--bp-container-max);
  margin-inline: auto;
  padding-inline: var(--bp-gutter);
}

.wp-block-button__link {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--bp-radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--bp-transition-fast), box-shadow var(--bp-transition-fast);
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--bp-shadow-hover);
}

/* ---------- Badges ---------- */
.bp-badge, .tag {
  display: inline-block;
  background: rgba(24,165,88,0.12);
  color: var(--bp-primary-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 999px;
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-sm);
  padding: 10px 14px;
  font-family: var(--bp-font-body);
  font-size: var(--bp-fs-body);
  width: 100%;
  transition: border-color var(--bp-transition-fast), box-shadow var(--bp-transition-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 3px rgba(24,165,88,0.15);
}
label { font-weight: 600; font-size: var(--bp-fs-small); color: var(--bp-dark); }

.bp-pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bp-space-6);
}