/**
 * Side rail primitive — vertical rotated text pinned to a viewport edge.
 *
 * Single shared layout used by:
 *   - Single Work prev/next side links (work.css extends this with the
 *     arrow icon, hover scale, and the per-direction SVG rotation).
 *   - Page side text driven by ACF `left_side_text` / `right_side_text`
 *     (rendered by the wp_footer hook in single-works.php's siblings;
 *     see .page-rail selectors below for typography overrides).
 *
 * Mirrors react-src/components/layout/side-content. Numbers come from
 * common/units.js: sm.margin = 6.03, md.horizontalMargin = 3.02, three
 * font-size breakpoints (3 / 1.5 / 1 vw at <768 / ≥768 / ≥1170).
 *
 * Color: optional. Render code sets two custom properties — one for
 * the rail's background and one for the text — typically derived from
 * the linked content (e.g. the next Work's ACF color, with the text
 * picked via luminance to stay legible). When unset, the rail is
 * transparent and inherits color, which keeps it invisible against
 * unprepared backgrounds rather than smearing a default tint.
 */

.site-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    /* Width decoupled from --page-gutter on purpose: react-src uses pure
     * vw scaling on the rail (no clamp), while --page-gutter is clamped
     * to keep body padding sane on tiny / huge viewports. Mixing them
     * makes the rotated text overflow the rail at extreme widths.
     * Numbers come from common/units.js: sm.margin = 6.03 (mobile),
     * md.horizontalMargin = 3.02 (desktop, kept across lg). */
    width: 6.03vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above .site-header (99) and the hero/.work-content stacks, but
     * below the page-transition curtain (99998) and the WP admin bar
     * (99999) so transitions and admin chrome aren't covered. */
    z-index: 100;
    pointer-events: none;
    background-color: var(--site-rail-bg, transparent);
    color: var(--site-rail-color, inherit);
    /* Typography defaults — matching react-src SideContent /
     * SideContentMobile. */
    font-family: var(--wp--preset--font-family--sharp-grotesk, "sharp-grotesk", Arial, Helvetica, sans-serif);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 3vw;
    line-height: 1;
}

@media (min-width: 768px) {
    .site-rail {
        width: 3.02vw;
        font-size: 1.5vw;
    }
}

@media (min-width: 1170px) {
    .site-rail { font-size: 1vw; }
}

.site-rail--left  { left: 0; }
.site-rail--right { right: 0; }

/* The rotated payload. Whatever element wears this class becomes the
 * vertical text — typically a `<a>` for the work-nav rails or a `<div>`
 * for static ACF text. */
.site-rail__content {
    pointer-events: auto;
    white-space: nowrap;
    letter-spacing: 0.1vw;
    color: inherit;
    text-decoration: none;
    transform: rotate(-90deg);
    transform-origin: center center;
}