/*
 * Corner brackets — shared primitive + the <bracket-rule> divider element.
 *
 * The corner is the orange L-shape used all over the site (hero frame, nav
 * frame, section dividers). It's drawn from two borders; size comes from
 * --bracket / --bracket-w and colour from --bracket-color (css/variables.css).
 * Callers position it (top/left/right/bottom) — these classes only draw it.
 */

/* ── Corner bracket primitive ─────────────────────────────────────────────── */
.bracket {
  position: absolute;
  width: var(--bracket);
  height: var(--bracket);
  pointer-events: none;
  z-index: 2;
}
.bracket--tl {
  border-top:    var(--bracket-w) solid var(--bracket-color, var(--orange));
  border-left:   var(--bracket-w) solid var(--bracket-color, var(--orange));
}
.bracket--tr {
  border-top:    var(--bracket-w) solid var(--bracket-color, var(--orange));
  border-right:  var(--bracket-w) solid var(--bracket-color, var(--orange));
}
.bracket--bl {
  border-bottom: var(--bracket-w) solid var(--bracket-color, var(--orange));
  border-left:   var(--bracket-w) solid var(--bracket-color, var(--orange));
}
.bracket--br {
  border-bottom: var(--bracket-w) solid var(--bracket-color, var(--orange));
  border-right:  var(--bracket-w) solid var(--bracket-color, var(--orange));
}

/* ── <bracket-rule> — horizontal divider with corner brackets on the tram
 *    lines (--rail-edge). Rendered by js/components/bracket-rule.js.
 *      corners="top"     ⌜──────────⌝   (default)
 *      corners="bottom"  ⌞──────────⌟
 *      corners="seam"    ⌞──────────⌟ stacked over ⌜──────────⌝
 *      theme="dark"      white line for dark sections (default is black, for
 *                        the grey card sections).
 *    The line is full-bleed (100vw) to match the existing section rules; only
 *    the brackets sit on the tram lines. ─────────────────────────────────── */
bracket-rule {
  display: block;
}

.bracket-rule__line {
  position: relative;
  height: 1px;
}
.bracket-rule__line::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--rule-color, rgba(0, 0, 0, 1));
}

/* corners="bottom" (⌞──⌟): the line should sit on the bottom brackets' bar, not
   the top brackets'. The default -2px is calibrated for the top corners, so drop
   the line by 4px for the bottom variant. */
bracket-rule[corners="bottom"] .bracket-rule__line::before { top: 2px; }

/* Brackets straddle the line and sit on the tram-line edges */
.bracket-rule__line .bracket--tl,
.bracket-rule__line .bracket--tr { top: -4px; }
.bracket-rule__line .bracket--bl,
.bracket-rule__line .bracket--br { bottom: -4px; }
.bracket-rule__line .bracket--tl,
.bracket-rule__line .bracket--bl { left:  var(--rail-edge); }
.bracket-rule__line .bracket--tr,
.bracket-rule__line .bracket--br { right: var(--rail-edge); }

/* seam: one line; the bottom corners tick UP, their horizontal bar overlaid on
   the line so each end reads as a single up+down tick crossing the rule. */
.bracket-rule--seam .bracket-rule__line .bracket--bl,
.bracket-rule--seam .bracket-rule__line .bracket--br {
  top: -10px;
  bottom: auto;
}

/* dark sections: white line, matching the page tram lines */
bracket-rule[theme="dark"] {
  --rule-color: rgba(255, 255, 255, 0.2);
}