/*
 * Standard Post separator alignment.
 *
 * Every intentional horizontal break uses equal left and right breathing room
 * inside the article canvas. Component-internal rules inherit the component's
 * own equal padding so lines never look shifted to one side.
 */

:root {
  --isp-post-break-inset: var(--isp-post-box-inset, 24px);
  --isp-post-break-color: color-mix(in srgb, var(--isp-article-color-border, #eae9ea) 88%, transparent);
}

/* Gutenberg / HTML separators between article sections. */
.single-post-layout .entry-content > hr,
.single-post-layout .entry-content > .wp-block-separator {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--isp-post-break-inset)));
  max-width: none;
  height: 1px;
  margin-left: var(--isp-post-break-inset);
  margin-right: var(--isp-post-break-inset);
  border: 0;
  border-top: 1px solid var(--isp-post-break-color);
  background: transparent;
}

/* Any explicit separator used inside iSPH editorial components follows the
 * component padding exactly, giving both sides the same visual gap. */
.single-post-layout .entry-content .isp-quick-action hr,
.single-post-layout .entry-content .isp-safety hr,
.single-post-layout .entry-content .isp-callout hr,
.single-post-layout .entry-content .isp-structured-section hr,
.single-post-layout .entry-content .isp-activity hr,
.single-post-layout .entry-content .isp-faq hr,
.single-post-layout .isp-post-component--at-a-glance hr,
.single-post-layout .isp-post-component--conclusion hr,
.single-post-layout .isp-post-end hr {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 1px;
  margin-left: 0;
  margin-right: 0;
  border: 0;
  border-top: 1px solid var(--isp-post-break-color);
  background: transparent;
}

@media (max-width: 700px) {
  :root {
    --isp-post-break-inset: var(--isp-post-box-inset, 18px);
  }
}