/* Divider Component
 * Thin horizontal line that fades at both ends and emits a soft glow.
 * Consumes --dh-accent from the node scope when no explicit color is chosen.
 */

.doghouse-divider {
  --dh-divider-accent: var(--dh-accent, var(--site-color-primary));
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--site-space-2xl) 0;
}

.doghouse-divider__line {
  position: relative;
  width: min(100%, 900px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--dh-divider-accent) 22%,
    var(--dh-divider-accent) 78%,
    transparent 100%
  );
}

/* Soft bloom directly around the line */
.doghouse-divider__line::before {
  content: '';
  position: absolute;
  inset: -1px 0;
  background: inherit;
  filter: blur(4px);
  opacity: 0.75;
  pointer-events: none;
}

/* Wider outer glow */
.doghouse-divider__line::after {
  content: '';
  position: absolute;
  inset: -5px 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--dh-divider-accent) 30%,
    var(--dh-divider-accent) 70%,
    transparent 100%
  );
  filter: blur(14px);
  opacity: 0.35;
  pointer-events: none;
}

/* Explicit accent variants */
.doghouse-divider--amber { --dh-divider-accent: var(--site-color-amber); }
.doghouse-divider--coral { --dh-divider-accent: var(--site-color-coral); }
.doghouse-divider--pink  { --dh-divider-accent: var(--site-color-pink); }
.doghouse-divider--teal  { --dh-divider-accent: var(--site-color-primary); }