/**
 * ELF v1.4.0 — Header Departures board takeover (plugin-side).
 *
 * Adds three behaviors to the theme's server-rendered `.cfd-departures-board`
 * (rendered in the masthead on every page) WITHOUT editing the theme:
 *   1. The rows area scrolls when content overflows, with NO visible scrollbar.
 *   2. Sticky/pinned rows get a subtle highlight + 📌 marker.
 *   3. (row order + randomized times are supplied by the takeover JS via REST)
 *
 * The head + column headers stay fixed (theme already sets them flex-shrink:0);
 * only the rows list scrolls inside the masthead's fixed-height board.
 */

/* Rows area: cap to the board and scroll inside, scrollbar hidden everywhere. */
.cfd-departures-board__rows {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge / IE */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cfd-departures-board__rows::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                /* Chrome / Safari / new Edge */
}

/*
 * The theme lets each row flex-grow (flex:1 1 0) to divide the board height
 * evenly, which prevents overflow/scroll. Once the takeover has populated the
 * board we let rows keep their natural height so a long list overflows and the
 * container above can scroll. Scoped to boards the takeover has taken over so
 * an un-enhanced theme board is left exactly as-is.
 */
.cfd-departures-board__rows--elf-scroll > .cfd-departures-board__row {
  flex: 0 0 auto;
}

/* Sticky / pinned rows: tasteful highlight consistent with the board yellow. */
.cfd-departures-board__row--sticky .cfd-departures-board__link {
  position: relative;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cfd-board-yellow, #f5c518) 14%, transparent) 0%,
    transparent 60%
  );
  box-shadow: inset 3px 0 0 0 var(--cfd-board-yellow, #f5c518);
}

/* 📌 marker before the flight cell of a pinned row. */
.cfd-departures-board__row--sticky .cfd-departures-board__cell--flight::before {
  content: "\1F4CC";            /* 📌 */
  margin-right: 4px;
  font-size: 0.9em;
  line-height: 1;
}