/* ==========================================================================
   HelpGent — "Roadmap" template styles (loaded after common.css)
   Section order: title band + counters · SimpleBoards board · bottom call to action.
   Shared from common.css: the dark title band (.phero--title), the closing card (.closer).
   The board is SimpleBoards markup: its colours, radius and font come from the --sbir-* variables,
   remapped here to the site tokens. Everything is scoped under .roadmap so it never leaks.
   ========================================================================== */

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 1 · title band counters — one pill per status column, dot in the status colour ── */
.roadmap__stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.roadmap__stats li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:15px;color:rgba(255,255,255,.82)}
.roadmap__stats li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,var(--accent-tint))}
.roadmap__stats strong{color:#fff;font-weight:600}

/* ── 2 · board ── */
.roadmap__board{background:var(--tint);padding:var(--pad) 0 0}

/* The SimpleBoards Pro Design module writes its own preset as inline --sbir-* variables on the container (and on the
   item drawer, which it moves to <body>), so the site tokens are set one level down (children inherit from there)
   and the container's own box is styled directly. */
.roadmap .sbir-board-container{width:100%;max-width:none;padding:0;background:transparent;font-family:var(--font);color:var(--text)}
.roadmap .sbir-board-container > *,
.page-template-roadmap .sbir-drawer > *{
  --sbir-font-family:var(--font);
  --sbir-primary:var(--accent);              --sbir-primary-hover:var(--accent-hover);  --sbir-primary-active:var(--accent-hover);
  --sbir-focus:var(--accent);
  --sbir-foreground:var(--text);             --sbir-muted-foreground:var(--text-2);     --sbir-muted:var(--tint);
  --sbir-border:var(--line);                 --sbir-radius:var(--radius-lg);
  --sbir-surface-hover:var(--tint);          --sbir-surface-active:var(--accent-soft);
  --sbir-kanban-column-bg:rgb(var(--dark-rgb) / .025);
  --sbir-card-border:var(--line);            --sbir-card-hover-border:var(--line-accent);
  --sbir-card-hover-shadow:var(--shadow-card);
  --sbir-card-title-color:var(--text);       --sbir-card-excerpt-color:var(--text-2);   --sbir-card-meta-color:var(--text-3);
  --sbir-vote-accent:var(--accent);          --sbir-vote-bg-hover:var(--accent-soft);   --sbir-vote-bg-active:var(--accent-soft);
  --sbir-vote-button-border:var(--line);     --sbir-vote-button-text:var(--text);
  --sbir-drawer-overlay-bg:rgb(var(--dark-rgb) / .45);
  /* cards: the item number and author mean nothing to visitors (the date is hidden below) */
  --sbir-card-show-number:none;              --sbir-card-show-author:none;
}

/* columns share the container width; below ~1000px they keep 300px and the row scrolls sideways (plugin behaviour).
   The plugin sizes the board to the window with a scroll inside each column (an app layout); on a page the
   columns grow with their cards instead, so the page scrolls as usual. */
.roadmap .sbir-kanban{gap:18px;height:auto;min-height:0;align-items:flex-start}
.roadmap .sbir-kanban-column{flex:1 1 0;min-width:300px;max-height:none;overflow:visible;border:1px solid var(--line)}
.roadmap .sbir-kanban-items{overflow-y:visible;max-height:none}
.roadmap .sbir-head-title{font-family:var(--font);font-weight:600;color:var(--text)}

/* cards: category, votes and comments stay; the date is when the item was added, not when it shipped */
.roadmap .sbir-kanban-item{border-radius:12px;box-shadow:none}
.roadmap .sbir-kanban-item:hover{box-shadow:var(--shadow-card)}
.roadmap .sbir-board-container .sbir-kanban-item .sbir-meta-date{display:none}
.roadmap .sbir-item-title{font-family:var(--font);font-weight:600;letter-spacing:-.1px}
.roadmap .sbir-item-excerpt{line-height:1.55}
.roadmap .sbir-vote-btn{min-height:32px}   /* easier to tap */

/* toolbar tabs: the site's pill look */
.roadmap .sbir-board-container .sbir-tab{font-family:var(--font);font-weight:500;border-radius:999px}
.roadmap .sbir-board-container .sbir-tab.active{color:var(--accent);background:var(--accent-soft)}
.roadmap .sbir-board-search-input,
.roadmap .sbir-board-filter-select{font-family:var(--font)}

@media (max-width:768px){ /* the plugin stacks its toolbar here but keeps the controls' 560px flex-basis, which becomes their height */
  .roadmap .sbir-board-toolbar-controls{flex-basis:auto}
  /* …and a 320px / max-content min-width on the controls and tabs, which pushes the page wider on small phones */
  .roadmap .sbir-board-toolbar-controls,.roadmap .sbir-tabs{min-width:0;max-width:100%}
  .roadmap .sbir-board-filter-select{min-width:0}
}
@media (max-width:767px){
  .roadmap__stats li{padding:6px 12px;font-size:14px}
  .roadmap .sbir-kanban-column{min-width:min(300px,86vw)}
}