/* =====================================
   OFR Callout Banner (v1.2.8)
   Fixes:
   - Enforced spacing between title and paragraph (works even if wpautop wraps content)
   - Max-width paragraph block centred reliably
   - Paragraph size: 18px / 600 / 150%
   - No drop shadow
   - Optional eyebrow (no reserved space)
   - Primary button (NOT whole-banner clickable)
===================================== */

.ofr-callout-banner,
.ofr-callout-banner *{
  box-sizing: border-box;
}

.ofr-callout-banner{
  /* Component padding tokens (fallback-safe) */
  --ofr-callout-pad-y: var(--ofr-space-xxl, 112px);
  --ofr-callout-pad-x: var(--ofr-space-lg, 56px);

  --ofr-callout-pad-y-m: var(--ofr-space-xl, 80px);
  --ofr-callout-pad-x-m: var(--ofr-space-s, 24px);

  /* Paragraph max width */
  --ofr-callout-maxw: var(--ofr-max-w-lg, 768px);

  border-radius: var(--ofr-radius-lg, 32px);
  overflow: hidden;

  /* No shadow for this component */
  box-shadow: none;

  /* Default gradient */
  background: var(--ofr-grad-mid-top);
  background-blend-mode: var(--ofr-grad-mid-top-blend);
}

.ofr-callout-banner.is-grad-mid-bottom{
  background: var(--ofr-grad-mid-bottom);
  background-blend-mode: var(--ofr-grad-mid-bottom-blend);
}

.ofr-callout-banner.is-grad-mid-top{
  background: var(--ofr-grad-mid-top);
  background-blend-mode: var(--ofr-grad-mid-top-blend);
}

.ofr-callout-banner__inner{
  padding: var(--ofr-callout-pad-y) var(--ofr-callout-pad-x);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow (optional) */
.ofr-callout-banner__eyebrow{
  text-align: center;
  margin: 0 0 var(--ofr-space-xs, 16px) 0;
}

/* Title (H2) */
.ofr-callout-banner__title{
  margin: 0;
}

/* Text wrapper:
   keep max-width and centring here */
.ofr-callout-banner__text{
  max-width: var(--ofr-callout-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* HARD enforce spacing between title and paragraph:
   - Works regardless of whether the content is a <p> or a <div> wrapper */
.ofr-callout-banner__title + .ofr-callout-banner__text{
  margin-top: var(--ofr-space-s, 24px);
}

/* If wpautop produces a first <p>, ensure it doesn't collapse spacing */
.ofr-callout-banner__text > p:first-child{
  margin-top: 0;
}

/* Paragraph typography + centring fix:
   (matches what you confirmed in inspect) */
.ofr-callout-banner__text--lg,
.ofr-callout-banner__text--lg p{
  font-family: var(--ofr-font-sans, inherit);
  font-size: var(--ofr-text-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;

  color: var(--ofr-ocean-dark, #073946);
  text-align: center;

  margin-left: auto;
  margin-right: auto;
}

/* Reset default margins safely (but keep our controlled spacing) */
.ofr-callout-banner__text--lg p{
  margin-bottom: 0;
}

/* If multiple paragraphs exist, apply your standard rhythm */
.ofr-callout-banner__text--lg p + p{
  margin-top: var(--ofr-space-s, 24px);
}

/* Inline links */
.ofr-callout-banner__text--lg a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.ofr-callout-banner__text--lg a:hover,
.ofr-callout-banner__text--lg a:focus-visible{
  text-decoration-thickness: 3px;
}

/* Actions */
.ofr-callout-banner__actions{
  margin-top: var(--ofr-space-md, 40px);
  display: flex;
  justify-content: center;
}

/* Dark theme hook */
.ofr-callout-banner.is-theme-dark .ofr-callout-banner__text--lg,
.ofr-callout-banner.is-theme-dark .ofr-callout-banner__text--lg p,
.ofr-callout-banner.is-theme-dark .ofr-callout-banner__text--lg a{
  color: var(--ofr-white, #ffffff);
}

/* Responsive */
@media (max-width: 768px){
  .ofr-callout-banner__inner{
    padding: var(--ofr-callout-pad-y-m) var(--ofr-callout-pad-x-m);
  }

  .ofr-callout-banner__text{
    max-width: 100%;
  }
}