/*
 * EURES Changelog — Timeline styling (Shopify-style)
 * ----------------------------------------------------
 * Drop this file into your /stylesheets/ directory and add it to
 * your Zensical / MkDocs extra_css list AFTER eures.css:
 *
 *   extra_css:
 *     - stylesheets/eures.css
 *     - stylesheets/changelog-timeline.css
 *
 * The stylesheet targets only the main content article and does not
 * affect navigation, sidebars, or any other page chrome.
 */


/* ─── 1. Content area — make room for the track ─────────────────────── */

.md-content__inner.md-typeset {
  position: relative;
  padding-left: 2.4rem !important;
}


/* ─── 2. Vertical connecting line ────────────────────────────────────── */
/*
 * A single 1 px column centred on the dot positions.
 *
 * Geometry:
 *   • article padding-left  : 2.4rem
 *   • dot left (from h2)    : -1.95rem
 *   • dot left (from article): 2.4 – 1.95 = 0.45rem
 *   • dot width             : 0.75rem  →  centre at 0.45 + 0.375 = 0.825rem
 *   ∴ line left             : 0.825rem  (line is 1 px, so centre ≈ 0.825rem)
 *
 * The line fades to transparent over a short distance at each end.
 * This cleanly hides the stub above the first dot and below the last,
 * without requiring JavaScript or knowing the rendered heights up front.
 * The hollow dot (white fill) sits on top of the line and occludes it
 * at every version node, producing the Shopify-style connected look.
 */

.md-content__inner.md-typeset::before {
  content: "";
  position: absolute;
  top: 4rem;          /* clears the H1 + subtitle paragraph              */
  bottom: 0;
  left: 0.825rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent                                0,
    var(--md-primary-fg-color, #0065a2)        1.5rem,   /* fade in         */
    var(--md-primary-fg-color, #0065a2)        calc(100% - 5rem),
    transparent                                100%      /* fade out        */
  );
  opacity: 0.3;
  pointer-events: none;
}


/* ─── 3. Hollow ring dot at each H2 ─────────────────────────────────── */
/*
 * Mimics the Shopify style: white interior + coloured outline.
 * background-color uses --md-default-bg-color so the "hole" matches the
 * page background in both light and dark themes.
 * z-index: 1 ensures the dot paints over the line, creating the visual
 * impression that the line runs between dots rather than through them.
 */

.md-content__inner.md-typeset h2 {
  position: relative;
}

.md-content__inner.md-typeset h2::before {
  content: "";
  position: absolute;
  left: -1.95rem;
  top: 50%;
  transform: translateY(-50%);

  width:  0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-sizing: border-box;

  /* Hollow: page-background fill + primary-colour border */
  background-color: var(--md-default-bg-color, #ffffff);
  border: 2px solid var(--md-primary-fg-color, #0065a2);

  z-index: 1;
}