/* ==========================================================================
   Devgun Family Law -- Block: brand "page-break" divider (BUILD-4)
   Figma: page-break-brand frames 7138:1278 (Family Law LP, 1408px span,
   60px icon), 7138:1260 (Team LP intro), 7144:599 (Collab detail, 926px
   span, 40px icon). Centered mountain mark between two 1px Light Blue
   hairlines (--color-divider), 10px gap either side of the mark.

   Consumed by templates/App/Includes/BrandDivider.ss. Layout-agnostic:
   spans 100% of whatever container it is dropped into (matches both the
   1408px and 926px design instances); icon height is fluid 40px -> 60px.

   Mark colors: design pixel-samples to the two-tone brand mark -- peak
   Canopy Blue #5C98A3, foreground ridge Forest Green #3A5648. On the dark
   section-bg bands both pieces defer to that band's --icon-accent-color
   (Light Blue on dark-blue per the REQUIRED F3 fix; Canopy elsewhere --
   see foundation/base.css).
   ========================================================================== */

.brand-divider {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  margin: clamp(2rem, 4.2vw, 5rem) 0;
}

.brand-divider::before,
.brand-divider::after {
  content: '';
  flex: 1 1 0%;
  height: 1px;
  background-color: var(--color-divider);
}

.brand-divider__mark {
  flex: 0 0 auto;
  height: clamp(2.5rem, 3.2vw, 3.75rem);
  width: auto;
}

.brand-divider__mark-fore {
  fill: var(--color-green-forest);
}

.brand-divider__mark-peak {
  fill: var(--color-blue-canopy);
}

/* Dark bands: monochrome mark in the band's accent color (F3 contract).
   Ancestor-scoped like the equivalent rules in foundation/base.css, so it
   applies whether the section-bg class is on a wrapper or an ancestor. */
[class*='section-bg--dark-blue'] .brand-divider__mark-fore,
[class*='section-bg--dark-blue'] .brand-divider__mark-peak,
[class*='section-bg--forest-green'] .brand-divider__mark-fore,
[class*='section-bg--forest-green'] .brand-divider__mark-peak,
[class*='section-bg--dark-green'] .brand-divider__mark-fore,
[class*='section-bg--dark-green'] .brand-divider__mark-peak,
[class*='section-bg--rich-black'] .brand-divider__mark-fore,
[class*='section-bg--rich-black'] .brand-divider__mark-peak {
  fill: var(--icon-accent-color, var(--color-blue-light));
}

/* Section-separator rhythm (Dave 2026-07-03: the divider gap read too
   tall; design 7138:1278 rhythm is ~90px above / ~100px below). DOM per
   the Elemental holder: the divider is the FIRST CHILD of the opted-in
   block's wrapper, directly before that block's .inner - so the below-gap
   is a direct-sibling pad, and the above-gap trims the PREVIOUS element
   wrapper's .inner via :has(). */
.brand-divider {
  margin: 0 auto;
}

/* Below the divider: the block it belongs to. */
.brand-divider + .inner {
  padding-top: 3.25rem;
}

/* Above the divider: the preceding block's bottom padding. */
*:has(+ * > .brand-divider) .inner,
*:has(+ * > .brand-divider).inner {
  padding-bottom: 2.75rem;
}