/* =========================================================
   SECTION-RAIL.CSS
   The thin (87px) numbered index column running down the
   physical right edge of "inner" pages (Contact confirmed so
   far — Technical Services appears to reuse the same pattern,
   not yet built). Not present on the Home page at all.

   Built from a direct Figma layer inspection of the Contact
   frame (Home Page has nothing like this): each item is its
   own background rectangle sized to exactly match the page
   section it sits beside (X=1053, W=87, full frame height —
   items stack contiguously, e.g. item 01 Y79–632, item 02
   Y631–929 starts exactly where 01 ends), with a small
   number + divider line + English label near its own top.
   The rail does NOT run the full page — it stops after the
   4th item; the closing photo/footer band has no rail at all.

   Implementation: each item is an absolutely-positioned overlay
   pinned to the physical right edge of its own section (which
   must be position:relative and reserve 87px on that side for
   it — see each page's own CSS), height:100% so it automatically
   matches that section's real rendered height with no JS. This
   is more robust than hardcoding pixel heights, which is fluid
   content here would immediately invalidate.
   ========================================================= */

.section-rail__item {
  position: absolute;
  top: 0;
  inset-inline-start: 0; /* physical right in this dir="rtl" site */
  width: 87px;
  height: 100%;
  /* 8px top / 12px left / 8px right — Figma-exact insets for
     the number+line+label block (X1065 vs item's own X1053).
     Physical padding on purpose (not logical-inline), so it's
     unaffected by the item's own inset-inline-start above. */
  padding: 8px 8px 0 12px;
  overflow: hidden;
  pointer-events: none;
}

.section-rail__number {
  display: block;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  /* 15px / #5A5A5A, up from 13px / #A1A1A1. The rail was the
     worst contrast on the site: #A1A1A1 scores 2.58:1 against
     white, barely over half of what AA asks. The divider below
     keeps its own lighter grey on purpose -- a hairline is a
     graphic, and it is meant to sit back from the type. */
  font-size: 15px;
  line-height: 1;
  color: #5A5A5A;
  direction: ltr;
}

/* 67px wide, Figma-exact — narrower than the item's own
   content width (87 - 12 - 8 = 67, so it reaches the item's
   own right inset exactly). */
.section-rail__divider {
  display: block;
  width: 67px;
  height: 0;
  margin-block-start: 8px;
  border-block-start: 0.5px solid #A1A1A1;
}

.section-rail__label {
  /* display:block, not the default inline — text-align only
     governs an element's OWN box when it's a block; on an
     inline element it's the PARENT's text-align that positions
     the inline content within the line box instead, which was
     silently pinning this to the right (inherited from body's
     text-align:start, RTL) no matter what text-align was set
     here. Same reasoning the sibling .section-rail__number
     already had display:block for. */
  display: block;
  margin: 0;
  margin-block-start: 7px;
  max-width: none;
  font-family: var(--font-hebrew);
  /* Light (300), down from Regular (400), to match the number
     above it. The two had always been at different weights, but
     while both were a pale #A1A1A1 nobody could see it; the
     moment the ink went dark enough to read, the label jumped
     out as the bold one and the pairing looked wrong. Matching
     the number is what makes the rail read as one quiet mark
     again rather than a heading with a caption.

     The delicacy here comes from the weight and the size, not
     from fading the colour out -- that is what the rail used to
     do, and it is what made it unreadable. */
  font-weight: var(--font-weight-light);
  /* 10px, up from 6. Six pixels at 2.58:1 was effectively
     invisible on anything but a Retina screen. At 10px / Light
     the line is larger AND lighter than it was, and it still
     fits: measured in the browser, the longest label wraps to
     two lines inside the rail's own 67px and nothing
     overflows. */
  font-size: 10px;
  line-height: 1.3;
  color: #5A5A5A;
  /* Belt and braces. Every label is already typed in capitals
     in the markup, but the rail is a fixed graphic device and
     should not depend on whoever types the next one
     remembering that. */
  text-transform: uppercase;
  direction: ltr;
  /* bidi-override on top of direction:ltr — plain direction
     alone still let the Unicode Bidi Algorithm flip "& LIGHT"
     to "LIGHT &" (the "&" is a weak/neutral character whose own
     ordering isn't fully pinned by direction alone in a
     dir="rtl" document). bidi-override forces every character
     onto the declared direction regardless of its own class. */
  unicode-bidi: bidi-override;
  text-align: left;
}