/*
 * Elevate Ranges Suite - Restricted Content Components
 *
 * Small, independently loadable presentation for canonical Highlight, Button,
 * and managed-image markup. Keep this file free of card, page-shell, modal,
 * and interaction rules so direct Divi Raw HTML does not need the full ERS
 * public bundle.
 */

/* Highlight Sections inherit their typography from the surrounding content. */
.ers-highlight{
  display:block;
  margin:1rem 0;
  padding:1.2em 1.35em;
  border-radius:4px;
  font:inherit;
}
.ers-highlight > :first-child{margin-top:0;}
.ers-highlight > :last-child{margin-bottom:0;}

/* Divi Dynamic Content can leave empty paragraph or break artifacts around
   block content. Keep the cleanup limited to ERS Highlight boundaries. */
.ers-highlight > p:empty{display:none;margin:0!important;}
.ers-highlight + br{display:none;}
.ers-highlight + p:empty{display:none;margin:0!important;}
p:has(+ .ers-highlight) > br:last-child{display:none;}

.ers-highlight--border{
  border:1px solid rgba(0,0,0,.18);
  background:transparent;
  color:inherit;
}
.ers-highlight--accent{
  border:0;
  background:var(--ers-accent-readable-bg, #2f3033);
  /* The stripe blends into a readable Primary Accent background and becomes
     visible only when contrast handling selects the dark fallback background. */
  box-shadow:inset 5px 0 0 var(--ers-accent-readable-accent, #111827);
  color:var(--ers-accent-readable-text, #fff);
}
.ers-highlight--accent,
.ers-highlight--accent p,
.ers-highlight--accent li,
.ers-highlight--accent blockquote,
.ers-highlight--accent h2,
.ers-highlight--accent h3,
.ers-highlight--accent h4,
.ers-highlight--accent h5,
.ers-highlight--accent h6,
.ers-highlight--accent strong,
.ers-highlight--accent em,
.ers-highlight--accent b,
.ers-highlight--accent i,
.ers-highlight--accent a{
  color:var(--ers-accent-readable-text, #fff) !important;
}
.ers-highlight--accent li::marker{
  color:var(--ers-accent-readable-text, #fff);
}
.ers-highlight--accent a{
  text-decoration-color:currentColor;
}

/* Compact Button component. Alignment belongs to its canonical wrapper. */
.ers-button-shortcode-wrap{
  display:block;
  margin:1rem 0;
}
.ers-button-shortcode-wrap--left{text-align:left;}
.ers-button-shortcode-wrap--center{text-align:center;}
.ers-button-shortcode-wrap--right{text-align:right;}
.ers-button-shortcode{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:.82em 2.75em;
  border:0;
  border-radius:4px;
  background:var(--ers-accent-readable-bg, #2f3033);
  /* Preserve the Primary Accent when a light Accent needs the dark fallback. */
  box-shadow:inset 4px 0 0 var(--ers-accent-readable-accent, #111827);
  color:var(--ers-accent-readable-text, #fff) !important;
  font:inherit;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.055em;
  text-align:center;
  text-decoration:none !important;
  text-transform:uppercase;
  transition:filter .18s ease;
}
.ers-button-shortcode:hover,
.ers-button-shortcode:focus{
  color:var(--ers-accent-readable-text, #fff) !important;
  text-decoration:none !important;
  filter:brightness(1.3);
}
.ers-button-shortcode:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* ERS rebuilds managed images from their local attachment identity. A saved
   maximum width caps the image without allowing it to overflow its container. */
.ers-restricted-content-image{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:var(--ers-image-max-width, 100%);
  height:auto;
  margin:1.25em 0;
}