/* ==========================================================================
   Components — buttons, cards, forms.
   Elementor widgets get these classes; Elementor holds no styling of its own.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   Guide page 7: red is for CTAs. Guide page 13 CTA wording:
   "Request a Roof Inspection", "Get a Roofing Estimate",
   "Schedule a Consultation", "Talk to a Roofing Professional",
   "View Our Recent Projects".
   -------------------------------------------------------------------------- */

.hbr-btn,
.elementor-button.hbr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hbr-space-2);
  font-family: var(--hbr-font-body);
  font-size: var(--hbr-size-btn);
  line-height: var(--hbr-lh-btn);
  font-weight: var(--hbr-w-semibold);
  letter-spacing: var(--hbr-ls-btn);
  padding: 18px 32px;
  border-radius: var(--hbr-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--hbr-duration) var(--hbr-ease),
              color var(--hbr-duration) var(--hbr-ease),
              border-color var(--hbr-duration) var(--hbr-ease);
}

/* Primary — the one clear next step. Guide page 8: one CTA per view. */
.hbr-btn--primary {
  background: var(--hbr-accent);
  color: var(--hbr-white);
  border-color: var(--hbr-accent);
}
.hbr-btn--primary:hover {
  background: var(--hbr-red-hover);
  border-color: var(--hbr-red-hover);
  color: var(--hbr-white);
}

/* Secondary — charcoal outline on light grounds. */
.hbr-btn--secondary {
  background: transparent;
  color: var(--hbr-charcoal);
  border-color: var(--hbr-charcoal);
}
.hbr-btn--secondary:hover {
  background: var(--hbr-charcoal);
  color: var(--hbr-white);
}

/* Ghost — for use on dark sections only. */
.hbr-btn--ghost {
  background: transparent;
  color: var(--hbr-white);
  border-color: var(--hbr-white);
}
.hbr-btn--ghost:hover {
  background: var(--hbr-white);
  color: var(--hbr-charcoal);
}

.hbr-btn--block { width: 100%; }

/* --- Cards --------------------------------------------------------------- */

.hbr-card {
  background: var(--hbr-white);
  border: 1px solid var(--hbr-hairline);
  border-radius: var(--hbr-radius);
  padding: var(--hbr-space-5);
  box-shadow: var(--hbr-shadow-s);
  transition: box-shadow var(--hbr-duration) var(--hbr-ease),
              transform var(--hbr-duration) var(--hbr-ease);
}
.hbr-card:hover { box-shadow: var(--hbr-shadow-l); transform: translateY(-2px); }

.hbr-card--flat { box-shadow: none; }
.hbr-card--flat:hover { transform: none; box-shadow: var(--hbr-shadow-s); }

.hbr-card__icon { color: var(--hbr-accent); margin-bottom: var(--hbr-space-3); }
.hbr-card__title { font-size: var(--hbr-size-h4); margin-bottom: var(--hbr-space-2); }
.hbr-card__body { color: var(--hbr-text-muted); }

/* On dark sections cards flip to charcoal-on-charcoal with a hairline. */
.hbr-section--dark .hbr-card {
  background: var(--hbr-slate);
  border-color: rgba(255,255,255,0.12);
  color: var(--hbr-text-on-dark);
}
.hbr-section--dark .hbr-card__body { color: rgba(255,255,255,0.72); }

/* Form styling now lives in forms.css. The block that was here existed only
   to override Fluent Forms' own CSS; the plugin is gone and so is the need. */

/* --- Logo clear space ----------------------------------------------------
   Guide page 4: clear space at least the height of the R in ROOFING.
   Minimum digital size 220px wide. Never on a red ground.
   220px is a brand rule, so it holds at every breakpoint including mobile.
   If 220px ever crowds the mobile header, the fix is a stacked or reduced
   lockup supplied by the client, NOT scaling the master mark below minimum.
   -------------------------------------------------------------------------- */
.hbr-logo img { min-width: 220px; height: auto; }
.hbr-logo { padding: var(--hbr-space-2); }

/* Stock photos placed by the builders (images.php). Ratio comes inline. */
img.hbr-photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 4px; }