/**
 * Hello Home — shared wrapper styles for every widget in the plugin.
 *
 * Hello_Home_Widget::render() emits:
 *
 *   <section class="hello-widget hello-<slug> [hello-widget--on-dark]"
 *            style="--hello-accent: #…; --hello-bg: #…">
 *     <div class="hello-widget__inner"> … </div>
 *   </section>
 *
 * The section is full width so --hello-bg spans the whole WPBakery row (set the
 * row to "stretch row and content" for an edge-to-edge band); the inner div
 * holds the content column. A widget that needs a different column width or
 * vertical rhythm overrides the custom properties below in its own stylesheet.
 */

.hello-widget {
  --hello-accent: #C51A39; /* Site red; overridden inline by the shortcode. */
  --hello-width: 1200px;
  --hello-pad-y: 40px;
  --hello-pad-x: 20px;
  background: var(--hello-bg, transparent);
  font-family: "Raleway", sans-serif;
  color: #000;
}

.hello-widget__inner {
  max-width: var(--hello-width);
  margin: 0 auto;
  padding: var(--hello-pad-y) var(--hello-pad-x);
}

/**
 * Added by PHP when --hello-bg is dark (WCAG relative luminance < 0.18).
 * Widgets hang their light-text treatment off this class.
 */
.hello-widget--on-dark {
  color: #fff;
}

@media (max-width: 767px) {
  .hello-widget {
    --hello-pad-y: 32px;
    --hello-pad-x: 16px;
  }
}