/**
 * 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 {
  /* The comp's three reds. --hello-accent is overridden inline by the
     shortcode; the other two track it only if someone changes them here. */
  --hello-accent: #dc1a40;        /* primary */
  --hello-accent-dark: #b01232;   /* hover / pressed */
  --hello-accent-bright: #ff3355; /* display type on dark */
  --hello-width: 1200px;
  --hello-pad-y: 40px;
  --hello-pad-x: 20px;
  /* One place to swap the display face once the comp's heading font is named. */
  --hello-font: "Raleway", sans-serif;
  background: var(--hello-bg, transparent);
  font-family: var(--hello-font);
  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;
}

/**
 * Accent run inside a heading or subtitle. Produced by
 * Hello_Home_Widget::accent_text() from *asterisk-wrapped* text, since a
 * WPBakery textfield can't carry HTML. On a dark band the accent would be
 * competing with the background, so it goes white with the rest.
 */
.hello-widget__accent {
  color: var(--hello-accent);
}

.hello-widget--on-dark .hello-widget__accent {
  color: #fff;
}

/**
 * Raleway 900.
 *
 * The child theme loads 400/600/700/800 from gstatic but not 900, which the
 * comp uses for the big display headings. Without this the browser fakes it
 * by smearing 800, which reads as slightly mushy rather than black.
 *
 * Self-hosted latin subset, as with the signature face: one 22KB file beats
 * a third-party request, and it does not depend on guessing the version in
 * a gstatic URL the way the theme's declarations do. Raleway is OFL.
 */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("raleway-900.woff2") format("woff2");
}

/* ==========================================================================
 * Theme reset.
 *
 * The BuddyBoss child theme styles headings, blockquotes and lists site-wide
 * -- it was setting our hero title to Lato in grey, and italicising the
 * founder quote. Widgets take the band's colour and the plugin's face by
 * inheritance, so this is fought once here rather than in eight stylesheets.
 *
 * Specificity is deliberate: a bare element selector loses to the theme's
 * .entry-content h1, so each of these carries the wrapper class. The plugin's
 * stylesheets enqueue on render, after the theme's, so ties fall our way.
 * ========================================================================== */

.hello-widget h1,
.hello-widget h2,
.hello-widget h3,
.hello-widget h4,
.hello-widget p,
.hello-widget ul,
.hello-widget ol,
.hello-widget li,
.hello-widget figure,
.hello-widget blockquote,
.hello-widget figcaption {
  font-family: var(--hello-font);
}

/**
 * Colour is reset on headings ONLY, where the theme actually interferes (it
 * was rendering the hero title grey). Including p/li here as well looks
 * harmless but is not: `.hello-widget p` outscores a single utility class,
 * so `color: inherit` silently beat every coloured paragraph we style --
 * the accent kicker among them, which is why it rendered near-black.
 */
.hello-widget h1,
.hello-widget h2,
.hello-widget h3,
.hello-widget h4 {
  color: inherit;
}

.hello-widget blockquote {
  font-style: normal;
  quotes: none;
  border: 0;
  background: none;
}
.hello-widget blockquote::before,
.hello-widget blockquote::after {
  content: none;
}

/**
 * Box model is reset through :where(), which contributes no specificity, so
 * a widget's own padding and margin still win on a plain class selector.
 * Spelling these as .hello-widget figure instead would beat the widget rules
 * and silently flatten them -- which is exactly what it did to the hero's
 * quote card the first time around.
 */
.hello-widget :where(figure, blockquote, ul, ol) {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
 * Shared vocabulary.
 *
 * The comp repeats the same few pieces across every section: a red uppercase
 * kicker, a big heading with an accent run, a lead paragraph, a red-tick list,
 * a hairline rule and a pill button in four flavours. They live here so a
 * widget stylesheet only carries what is actually unique to that section.
 * ========================================================================== */

/* Comp: 14px / 700 / 2.5px tracking, in the accent. */
.hello-widget__kicker {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hello-accent);
}

.hello-widget__heading {
  margin: 0 0 20px;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.5px;
}

/**
 * font-size and font-weight carry !important ONLY because the BuddyBoss theme
 * options inject an inline `h2 { font-size: 56px !important; font-weight: 800
 * !important }`. A bare element selector with !important beats any class, so
 * every section heading was pinned to 56px/800 whatever the comp asked for.
 * Nothing else here needs it, and nothing else should acquire it.
 */

/* Smaller heading, for a card or a column rather than a whole band. */
.hello-widget__heading--sub {
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.15 !important;
}

.hello-widget__lead {
  margin: 0 0 24px;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

.hello-widget__body {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: #333;
}

.hello-widget__rule {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: rgba(0, 0, 0, 0.12);
}

/* ---- red-tick list ------------------------------------------------------ */

.hello-widget__checks {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.hello-widget__check {
  position: relative;
  padding: 0 0 0 34px;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.45;
}

/* Tick drawn from two borders so the list needs no icon font or svg per row. */
.hello-widget__check::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 7px;
  height: 14px;
  border: solid var(--hello-accent);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---- buttons ------------------------------------------------------------ */

.hello-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 36px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hello-btn:hover,
.hello-btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}

/**
 * The theme darkens every <button> on hover and focus by flooding it with an
 * inset shadow -- `box-shadow: rgba(0,0,0,0.1) 0 0 0 99999px inset`. On the
 * white outline button that turns #fff into #e5e5e5, and it applies to any of
 * these rendered without a link, since those are <button> elements.
 *
 * Cleared here, then the focus ring is restored below -- order matters, both
 * selectors score the same.
 */
.hello-btn:hover,
.hello-btn:focus,
.hello-btn:active {
  box-shadow: none;
}
.hello-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.18);
}
.hello-btn:active {
  transform: translateY(0);
}

/* Solid accent — the default call to action. */
.hello-btn--solid {
  background: var(--hello-accent);
  border-color: var(--hello-accent);
  color: #fff;
}
.hello-btn--solid:hover,
.hello-btn--solid:focus-visible {
  background: var(--hello-accent-dark);
  border-color: var(--hello-accent-dark);
  color: #fff;
}

/* Outlined, for sitting on a photo or an accent-coloured panel. */
.hello-btn--outline {
  background: transparent;
  border-color: currentColor;
  color: #fff;
}
/* Comp: style-hover="background:#fff;color:#dc1a40" -- the fill inverts to
   white and the label takes the accent, rather than going to plain black. */
.hello-btn--outline:hover,
.hello-btn--outline:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--hello-accent);
}

/**
 * Accent outline on a light band -- the inverse of --outline, which assumes a
 * dark one and so draws itself in white. This is the existing site's secondary
 * button ("1-Minute Trailer"): white fill, accent border and label.
 */
.hello-btn--hollow {
  background: #fff;
  border-color: var(--hello-accent);
  color: var(--hello-accent);
}
.hello-btn--hollow:hover,
.hello-btn--hollow:focus-visible {
  background: var(--hello-accent);
  border-color: var(--hello-accent);
  color: #fff;
}

/* Quiet secondary, paired under a solid button. */
.hello-btn--ghost {
  background: #e9e9e9;
  border-color: #e9e9e9;
  color: #000;
}
.hello-btn--ghost:hover,
.hello-btn--ghost:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #000;
}

/* White fill, for an accent-coloured band. */
.hello-btn--invert {
  background: #fff;
  border-color: #fff;
  color: var(--hello-accent);
}
.hello-btn--invert:hover,
.hello-btn--invert:focus-visible {
  filter: brightness(0.95);
}

/* Square-ish corners, for the hero pair. */
.hello-btn--rect {
  border-radius: 6px;
  width: 100%;
  max-width: 370px;
}

/* Circular play glyph that rides inside a button label. */
.hello-btn__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--hello-accent);
}
.hello-btn__play svg {
  display: block;
  width: 14px;
  height: 14px;
  margin-left: 2px; /* optical centring of the triangle */
}

/* ---- on a dark band ----------------------------------------------------- */

.hello-widget--on-dark .hello-widget__lead,
.hello-widget--on-dark .hello-widget__body {
  color: rgba(255, 255, 255, 0.82);
}
.hello-widget--on-dark .hello-widget__rule {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 767px) {
  .hello-widget {
    --hello-pad-y: 32px;
    --hello-pad-x: 16px;
  }
  .hello-widget__kicker {
    margin-bottom: 12px;
  }
  .hello-btn {
    padding: 14px 28px;
  }
  .hello-btn--rect {
    max-width: none;
  }
}