/* ==========================================================================
   Fundamentals section dividers ("EEG trace" style)

   One visual system, applied two ways:
   1. Existing reading-flow subheadings. Scope is deliberately the direct
      children of the reading containers so lab, panel and explorer headings
      (visual-lab-header, wave-lab-heading, lab-step-panel, var-panel,
      concept-item, ...) keep their own look.
   2. Added .fr-divider landmarks inserted at content boundaries that had no
      subheading at all.

   The trace glyphs are data-URI SVGs because the h3/h4 markup is shared and
   untouched; data-URIs cannot read CSS variables, so light and dark strokes
   are declared separately under body.dark.
   ========================================================================== */

/* --- Major divider ----------------------------------------------------- */

.fundamentals-section > h3,
.fundamentals-layout > h3,
.fundamentals-text > h3,
.fr-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 2.3rem 0 0.95rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-color);
}

.fundamentals-section > h3::before,
.fundamentals-layout > h3::before,
.fundamentals-text > h3::before,
.fr-divider::before,
.fundamentals-section > h3::after,
.fundamentals-layout > h3::after,
.fundamentals-text > h3::after,
.fr-divider::after {
  content: "";
  flex: 1 1 2rem;
  height: 18px;
  min-width: 1.5rem;
  background-repeat: no-repeat;
}

/* Left rule: hairline that ends in a sharp-wave glyph next to the label */
.fundamentals-section > h3::before,
.fundamentals-layout > h3::before,
.fundamentals-text > h3::before,
.fr-divider::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18' fill='none'%3E%3Cpath d='M0 9 H12 L15 9 L17 2 L20 16 L23 9 H46' stroke='%230066cc' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--border-color), var(--border-color));
  background-size: 46px 18px, calc(100% - 50px) 1px;
  background-position: right center, left center;
}

/* Right rule: mirror image, glyph first then hairline */
.fundamentals-section > h3::after,
.fundamentals-layout > h3::after,
.fundamentals-text > h3::after,
.fr-divider::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18' fill='none'%3E%3Cpath d='M0 9 H23 L26 9 L29 4 L32 14 L34 9 H46' stroke='%230066cc' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--border-color), var(--border-color));
  background-size: 46px 18px, calc(100% - 50px) 1px;
  background-position: left center, right center;
}

body.dark .fundamentals-section > h3::before,
body.dark .fundamentals-layout > h3::before,
body.dark .fundamentals-text > h3::before,
body.dark .fr-divider::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18' fill='none'%3E%3Cpath d='M0 9 H12 L15 9 L17 2 L20 16 L23 9 H46' stroke='%232997ff' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--border-color), var(--border-color));
}

body.dark .fundamentals-section > h3::after,
body.dark .fundamentals-layout > h3::after,
body.dark .fundamentals-text > h3::after,
body.dark .fr-divider::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='18' viewBox='0 0 46 18' fill='none'%3E%3Cpath d='M0 9 H23 L26 9 L29 4 L32 14 L34 9 H46' stroke='%232997ff' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--border-color), var(--border-color));
}

.fr-divider span {
  flex: 0 1 auto;
}

/* An empty heading or a heading that opens a reading block should not carry
   a full divider treatment. */
.fundamentals-section > h3:empty,
.fundamentals-layout > h3:empty,
.fundamentals-text > h3:empty {
  display: none;
}

.fundamentals-text > h3:first-child,
.fundamentals-layout > h3:first-child,
.fundamentals-section > h3:first-child {
  margin-top: 0.4rem;
}

/* --- Minor divider ------------------------------------------------------ */

.fundamentals-section > h4,
.fundamentals-layout > h4,
.fundamentals-text > h4 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.7rem 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-color);
}

.fundamentals-section > h4::before,
.fundamentals-layout > h4::before,
.fundamentals-text > h4::before {
  content: "";
  flex: 0 0 30px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14' fill='none'%3E%3Cpath d='M0 7 H8 L10 7 L12 1 L15 13 L17 7 H30' stroke='%230066cc' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 30px 14px no-repeat;
}

.fundamentals-section > h4::after,
.fundamentals-layout > h4::after,
.fundamentals-text > h4::after {
  content: "";
  flex: 1 1 2rem;
  height: 1px;
  background: var(--border-color);
}

body.dark .fundamentals-section > h4::before,
body.dark .fundamentals-layout > h4::before,
body.dark .fundamentals-text > h4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14' viewBox='0 0 30 14' fill='none'%3E%3Cpath d='M0 7 H8 L10 7 L12 1 L15 13 L17 7 H30' stroke='%232997ff' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Small screens: let the label wrap, keep the glyphs ------------------ */

@media (max-width: 560px) {
  .fundamentals-section > h3,
  .fundamentals-layout > h3,
  .fundamentals-text > h3,
  .fr-divider {
    gap: 0.6rem;
    margin-top: 2rem;
  }

  .fundamentals-section > h3::before,
  .fundamentals-layout > h3::before,
  .fundamentals-text > h3::before,
  .fr-divider::before,
  .fundamentals-section > h3::after,
  .fundamentals-layout > h3::after,
  .fundamentals-text > h3::after,
  .fr-divider::after {
    flex-basis: 1rem;
    min-width: 1rem;
  }
}