/* =====================================
   OFR Section Header — Elements Plugin
===================================== */

:root{
  /* Match your site container width (adjust if theme differs) */
  --ofr-site-container: var(--ofr-max-w-xxl, 1280px);

  /* HERO H1 role (recommend: promote into style.css :root later) */
  --ofr-hero-h1-size: 96px;
  --ofr-hero-h1-line: 105px;
  --ofr-hero-h1-weight: 400;

  --ofr-hero-h1-size-m: 40px;
  --ofr-hero-h1-line-m: 44px;
}

/* -------------------------------------
   1) BG Video overlay container
   IMPORTANT: do NOT force text-align here.
   Section Header alignment classes control that.
------------------------------------- */
.ofr-bgvideo-simple .ofr-bgv__content{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: inherit !important; /* was: left */
}

/* The overlay container width */
.ofr-bgvideo-simple .ofr-bgv__content > .ofr-section-header{
  width: 100% !important;
  max-width: var(--ofr-site-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: var(--ofr-pad-x, 48px) !important;
  padding-right: var(--ofr-pad-x, 48px) !important;
}

@media (max-width: 768px){
  .ofr-bgvideo-simple .ofr-bgv__content > .ofr-section-header{
    padding-left: var(--ofr-pad-x-m, 24px) !important;
    padding-right: var(--ofr-pad-x-m, 24px) !important;
  }
}

/* -------------------------------------
   2) Section header block
------------------------------------- */
.ofr-section-header{
  /* Keep existing LEFT default behaviour */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ✅ FIX: when centered, the block itself must center */
.ofr-section-header.is-align-center{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Inner wrapper is the actual “content block” */
.ofr-section-header__inner{
  width: 100%;
  max-width: var(--ofr-max-w-lg, 768px); /* default if no is-max-* */
}

/* ✅ FIX: Center aligned Section Header should center the inner block */
.ofr-section-header.is-align-center .ofr-section-header__inner{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Element max-width classes constrain INNER content, not the overlay container */
.ofr-section-header.is-max-xxs .ofr-section-header__inner{ max-width: var(--ofr-max-w-xxs, 320px) !important; }
.ofr-section-header.is-max-xs  .ofr-section-header__inner{ max-width: var(--ofr-max-w-xs,  400px) !important; }
.ofr-section-header.is-max-sm  .ofr-section-header__inner{ max-width: var(--ofr-max-w-sm,  480px) !important; }
.ofr-section-header.is-max-md  .ofr-section-header__inner{ max-width: var(--ofr-max-w-md,  560px) !important; }
.ofr-section-header.is-max-lg  .ofr-section-header__inner{ max-width: var(--ofr-max-w-lg,  768px) !important; }
.ofr-section-header.is-max-xl  .ofr-section-header__inner{ max-width: var(--ofr-max-w-xl, 1024px) !important; }
.ofr-section-header.is-max-xxl .ofr-section-header__inner{ max-width: var(--ofr-max-w-xxl, 1280px) !important; }

/* ✅ Max width NONE */
.ofr-section-header.is-max-none .ofr-section-header__inner{
  max-width: none !important;
}

/* Alignment (text) */
.ofr-section-header.is-align-left,
.ofr-section-header.is-align-left *{
  text-align: left !important;
}

.ofr-section-header.is-align-center,
.ofr-section-header.is-align-center *{
  text-align: center !important;
}

/* Paragraph-only max-width utilities - applied directly to <p> */
.ofr-section-header__text .ofr-text-max-sm{ max-width: var(--ofr-max-w-sm, 480px); }
.ofr-section-header__text .ofr-text-max-md{ max-width: var(--ofr-max-w-md, 560px); }
.ofr-section-header__text .ofr-text-max-lg{ max-width: var(--ofr-max-w-lg, 768px); }

/* Ensure block behaviour + left default */
.ofr-section-header__text .ofr-text-max-sm,
.ofr-section-header__text .ofr-text-max-md,
.ofr-section-header__text .ofr-text-max-lg{
  display: block;
  margin-left: 0;
  margin-right: auto;
}

/* ✅ When centered, center those max-width paragraphs too */
.ofr-section-header.is-align-center .ofr-section-header__text .ofr-text-max-sm,
.ofr-section-header.is-align-center .ofr-section-header__text .ofr-text-max-md,
.ofr-section-header.is-align-center .ofr-section-header__text .ofr-text-max-lg{
  margin-left: auto !important;
  margin-right: auto !important;
}


/* -------------------------------------
   3) Eyebrow + title spacing
------------------------------------- */
.ofr-section-header .ofr-section-header__eyebrow{
  margin: 0 0 var(--ofr-space-xs, 16px) 0 !important;
}

/* Default title spacing */
.ofr-section-header .ofr-section-header__title{
  margin: 0 0 var(--ofr-space-s, 24px) 0 !important;
}

/* -------------------------------------
   4) HERO title style (for ofr-heading-hero / H1 usage)
   - Scoped ONLY to this component
------------------------------------- */
.ofr-section-header .ofr-heading-hero{
  font-family: var(--ofr-font-sans) !important;
  font-size: var(--ofr-hero-h1-size) !important;
  font-weight: var(--ofr-hero-h1-weight) !important;
  line-height: var(--ofr-hero-h1-line) !important;
  text-transform: none !important;
}


/* -------------------------------------
   Section Header — H3 type scale (token-based)
------------------------------------- */

.ofr-section-header h3,
.ofr-section-header .ofr-heading-h3{
  font-size: var(--ofr-text-h3) !important;
  line-height: var(--ofr-text-h3-line, 1.2) !important; /* optional fallback */
  font-weight: var(--ofr-h2-weight) !important; /* your existing choice */
}

@media (max-width: 768px){
  .ofr-section-header h3,
  .ofr-section-header .ofr-heading-h3{
    font-size: var(--ofr-text-h3-m) !important;
    line-height: var(--ofr-text-h3-line-m, 1.25) !important; /* optional fallback */
  }
}

@media (max-width: 768px){
  .ofr-section-header .ofr-heading-hero{
    font-size: var(--ofr-hero-h1-size-m) !important;
    line-height: var(--ofr-hero-h1-line-m) !important;
  }
}

/* -------------------------------------
   5) WYSIWYG paragraph rhythm
------------------------------------- */
.ofr-section-header__text--wysiwyg p{
  margin: 0 !important;
}

.ofr-section-header__text--wysiwyg p:empty{
  display: none !important;
}

.ofr-section-header__text--wysiwyg p + p{
  margin-top: var(--ofr-space-s, 24px) !important;
}

/* If WPBakery outputs only 1 real paragraph then empty <p>, still add breathing room */
.ofr-section-header__text--wysiwyg p.ofr-body-md-strong{
  margin-bottom: var(--ofr-space-s, 24px) !important;
}

.ofr-section-header__text--wysiwyg p.ofr-body-md-strong + p:not(:empty){
  margin-top: 0 !important;
}

/* -------------------------------------
   6) Buttons
------------------------------------- */
.ofr-section-header__actions{
  margin-top: var(--ofr-space-md, 40px);
}

/* ✅ FIX: Center the button group when align = center */
.ofr-section-header.is-align-center .ofr-section-header__actions{
  width: 100%;
  display: flex;
  justify-content: center !important;
}

/* If your .ofr-btn-group is also flex, force it too */
.ofr-section-header.is-align-center .ofr-btn-group{
  justify-content: center !important;
}

/* On small screens, allow wrapping but keep centered */
@media (max-width: 768px){
  .ofr-section-header.is-align-center .ofr-section-header__actions,
  .ofr-section-header.is-align-center .ofr-btn-group{
    flex-wrap: wrap;
  }
}

/* -------------------------------------
   7) Theme contexts
------------------------------------- */
.ofr-section-header.is-theme-dark{
  color: var(--ofr-white, #fff);
}

.ofr-section-header.is-theme-dark .ofr-eyebrow,
.ofr-section-header.is-theme-dark .ofr-section-header__eyebrow,
.ofr-section-header.is-theme-dark .ofr-heading-h2,
.ofr-section-header.is-theme-dark .ofr-heading-hero,
.ofr-section-header.is-theme-dark .ofr-body-md,
.ofr-section-header.is-theme-dark .ofr-body-md-strong,
.ofr-section-header.is-theme-dark h1,
.ofr-section-header.is-theme-dark h2,
.ofr-section-header.is-theme-dark h3,
.ofr-section-header.is-theme-dark p{
  color: var(--ofr-white, #fff) !important;
}

/* Dark sections: only invert the OFR Section Header text, not everything */
.ofr-base.is-dark .ofr-section-header h1,
.ofr-base.is-dark .ofr-section-header h2,
.ofr-base.is-dark .ofr-section-header h3,
.ofr-base.is-dark .ofr-section-header h4,
.ofr-base.is-dark .ofr-section-header h5,
.ofr-base.is-dark .ofr-section-header h6,
.ofr-base.is-dark .ofr-section-header p,
.ofr-base.is-dark .ofr-section-header .ofr-eyebrow,
.ofr-base.is-dark .ofr-section-header .ofr-section-header__eyebrow{
  color: var(--ofr-white, #fff) !important;
}

/* Support dark sections that use .is-dark without .ofr-base */
.ofr-section.is-dark .ofr-section-header h1,
.ofr-section.is-dark .ofr-section-header h2,
.ofr-section.is-dark .ofr-section-header h3,
.ofr-section.is-dark .ofr-section-header h4,
.ofr-section.is-dark .ofr-section-header h5,
.ofr-section.is-dark .ofr-section-header h6,
.ofr-section.is-dark .ofr-section-header p,
.ofr-section.is-dark .ofr-section-header .ofr-eyebrow,
.ofr-section.is-dark .ofr-section-header .ofr-section-header__eyebrow{
  color: var(--ofr-white, #fff) !important;
}


/* =====================================
   OFR BG Video — Hero Overlay (optional)
   Enable when class is on ROW or component
   (Do NOT change media-wrap positioning)
===================================== */

/* Create overlay pseudo element (supports class on row OR on component) */
.ofr-bgvideo-simple.has-hero-overlay .ofr-bgv__media-wrap::after,
.has-hero-overlay .ofr-bgvideo-simple .ofr-bgv__media-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* above poster/video, below content */

  /* Use your existing gradient tokens (or paste the literal gradient here) */
  background: var(--ofr-grad-hero-overlay);
  background-blend-mode: var(--ofr-grad-hero-overlay-blend);
}