/* ============================================================
   Data Center Dispatch — Events directory table
   Scoped to the events page only (body.dcd-events, set in functions.php),
   layered on top of the shared .dcd-directory table styles in app.css.
   Loaded only on /data-center-events-2026-2027/, so no other page or table
   is touched. Gives the table controlled column widths, a sticky header row,
   and sort controls. The static server-rendered table underneath stays fully
   readable with JS off (sticky is pure CSS; only sorting needs JS).
   ============================================================ */

/* Controlled column widths. table-layout:fixed stops one long narrative cell
   (History and attendance) from stretching the scannable columns wider than
   they need to be. Widths: Event, Dates, Location, Type, History, Booth. */
body.dcd-events .article-body table{ table-layout:fixed; width:100%; }
/* Widths give the two long headers ("History and attendance", "Booth option")
   enough room to sit on ONE line (headers never wrap, see below). */
body.dcd-events .article-body thead th:nth-child(1){ width:16%; }
body.dcd-events .article-body thead th:nth-child(2){ width:12%; }
body.dcd-events .article-body thead th:nth-child(3){ width:13%; }
body.dcd-events .article-body thead th:nth-child(4){ width:21%; }
body.dcd-events .article-body thead th:nth-child(5){ width:26%; }
body.dcd-events .article-body thead th:nth-child(6){ width:12%; }

/* Body cells: let long tokens break so they don't force a column wide; centre the short Booth flag. */
body.dcd-events .article-body td{ overflow-wrap:anywhere; }
body.dcd-events .article-body tbody td:nth-child(6){ text-align:center; }

/* Header text stays on one line (never wraps); the columns above are sized to fit it. */
body.dcd-events .article-body thead th{ white-space:nowrap; vertical-align:middle; }
body.dcd-events .article-body thead th .dcd-sort{ white-space:nowrap; }

/* --- Sticky header ---------------------------------------------------------
   The shared rule makes the table figure a horizontal-scroll container
   (overflow-x:auto), which would trap position:sticky inside the figure. On
   desktop/tablet the fixed-layout table already fits the column, so we drop
   that overflow and let the header stick to the viewport, just under the
   sticky masthead. --dcd-mast is measured by events-sort.js; 118px fallback. */
body.dcd-events .article-body .wp-block-table{ overflow-x:visible; }
body.dcd-events .article-body thead th{
  position:sticky;
  top:var(--dcd-mast, 118px);
  z-index:4;                      /* below the masthead (z-index:50) */
  background:var(--surface2);
  /* collapsed borders do not travel with a sticky cell, so paint them here */
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}

/* --- Sort controls (rendered by events-sort.js; a11y-native <button>) ------- */
body.dcd-events .article-body th .dcd-sort{
  appearance:none; -webkit-appearance:none;
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  width:100%; margin:0; padding:0; border:0; background:transparent;
  font:inherit; font-weight:600; color:inherit; text-align:left; cursor:pointer;
}
body.dcd-events .article-body th .dcd-sort:focus-visible{
  outline:2px solid var(--blue-deep); outline-offset:2px; border-radius:3px;
}
body.dcd-events .article-body th .dcd-ind{ flex:none; font-size:.8em; line-height:1; }
body.dcd-events .article-body th .dcd-ind::after{ content:"\2195"; opacity:.4; }                 /* idle: up-down */
body.dcd-events .article-body th .dcd-sort:hover .dcd-ind::after{ opacity:.75; }
body.dcd-events .article-body th[aria-sort="ascending"]  .dcd-ind::after{ content:"\25B2"; opacity:1; color:var(--blue); }
body.dcd-events .article-body th[aria-sort="descending"] .dcd-ind::after{ content:"\25BC"; opacity:1; color:var(--blue); }
body.dcd-events .article-body th[aria-sort="ascending"],
body.dcd-events .article-body th[aria-sort="descending"]{ color:var(--ink); }

/* --- Small screens: horizontal scroll, header in normal flow ----------------
   Inside a horizontal-scroll container a sticky header can only stick to that
   container, not the page, so on phones we keep the header in normal flow and
   let the whole table scroll sideways instead (header stays aligned with the
   body during that scroll). */
@media (max-width:767px){
  body.dcd-events .article-body .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.dcd-events .article-body table{ table-layout:auto; min-width:780px; }
  body.dcd-events .article-body thead th{ position:static; box-shadow:none; }
}

/* --- Mobile floating header (built by events-sort.js) ----------------------
   A cloned header row, fixed under the masthead, whose horizontal offset is
   slaved to the table's scrollLeft. Self-contained styling so it doesn't depend
   on the .article-body rules. Only shown on phones (JS gates it; the media query
   below is a belt-and-suspenders so desktop never reveals the clone). */
.dcd-float-head{
  position:fixed; top:0; left:0; z-index:40;   /* under the masthead (z-index:50) */
  overflow:hidden; display:none;
  box-shadow:0 10px 16px -12px rgba(0,0,0,.45);
}
.dcd-float-head.show{ display:block; }
.dcd-float-scroller{ will-change:transform; }
.dcd-float-head table{ border-collapse:collapse; margin:0; }
.dcd-float-head th{
  border:1px solid var(--line); padding:.6rem .8rem; text-align:left; vertical-align:middle;
  font-size:.94rem; line-height:1.5; font-weight:600; white-space:nowrap;
  background:var(--surface2); color:var(--ink);
}
.dcd-float-head th:nth-child(6){ text-align:center; }
.dcd-float-head .dcd-sort{
  appearance:none; -webkit-appearance:none;
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  width:100%; margin:0; padding:0; border:0; background:transparent;
  font:inherit; font-weight:600; color:inherit; text-align:left; cursor:pointer; white-space:nowrap;
}
.dcd-float-head .dcd-ind{ flex:none; font-size:.8em; line-height:1; }
.dcd-float-head .dcd-ind::after{ content:"\2195"; opacity:.4; }
.dcd-float-head th[aria-sort="ascending"]  .dcd-ind::after{ content:"\25B2"; opacity:1; color:var(--blue); }
.dcd-float-head th[aria-sort="descending"] .dcd-ind::after{ content:"\25BC"; opacity:1; color:var(--blue); }
@media (min-width:768px){ .dcd-float-head{ display:none !important; } }