/* BBN Portal — dashboard hierarchy overrides. Added 2026-08-23 for the Aug 31 launch pass.
 *
 * WHY THIS FILE EXISTS AND WHY EVERY SELECTOR STARTS WITH `body`
 * -------------------------------------------------------------
 * The dashboard's own CSS is an inline <style> block inside widget 1421476, which lives in
 * page 2277's _elementor_data. Editing that JSON is the riskiest operation on this site, so
 * these are overrides in a real file instead.
 *
 * This stylesheet is enqueued in the HEAD. The widget's <style> is in the BODY, so it comes
 * LATER in source order and wins any tie. Therefore every rule here is scoped `body #bbn-db2`
 * to win on SPECIFICITY (0,1,1,1+ vs the original 0,0,1,0) rather than order. Drop the `body`
 * prefix and the rule silently stops applying. The nav CSS already relies on this same trick.
 *
 * Nothing here changes markup or behaviour — it is presentation only, and deleting the file
 * (or its enqueue) restores the previous appearance exactly.
 */

/* ── 1. Readable measure ───────────────────────────────────────────────────────────────────
 * The dashboard had no max-width at all, so on a wide monitor the cards stretched the full
 * content column and the eye had to travel the whole way. Owner: "sections below the titles
 * are too wide". 1180px keeps the two-column grid comfortable without shrinking it on laptops
 * (measured live: the container renders at 987px, so this is a ceiling, not a squeeze).
 */
body #bbn-db2 {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 2. Contrast — a real WCAG AA failure, not a preference ────────────────────────────────
 * The muted colour #8a7c6e on white measures 4.06:1. AA requires 4.5:1 for text below 18.66px,
 * and every use of it here is 11–12.5px: section labels, the date line, the hero note, funder
 * names, empty states, and completed steps. #6b5b4d (already in the palette — it is the
 * .db2-pill.roll text colour) measures 6.6:1 on white and reads as the same warm grey-brown.
 *
 * Seven WCAG defects were fixed on this portal previously; this is an eighth that survived
 * because it lives in the widget's own inline style rather than in any stylesheet.
 */
body #bbn-db2 .db2-label,
body #bbn-db2 .db2-date,
body #bbn-db2 .db2-hero-note,
body #bbn-db2 .db2-hero-sub,
body #bbn-db2 .db2-row-f,
body #bbn-db2 .db2-empty,
body #bbn-db2 .db2-step {
  color: #6b5b4d;
}

/* ── 3. Type hierarchy ─────────────────────────────────────────────────────────────────────
 * Owner: "this month and titles look too small", "type hierarchy feels inverted". It was: the
 * section labels that organise the page were 11px while a single number was 32px, so the eye
 * landed on the datum and never found the structure.
 *
 * Deliberately restrained — the owner explicitly warned against solving this with random
 * font-size changes, and against making anything oversized. Three small moves only:
 *   labels      11   -> 12     (organising elements become legible)
 *   card titles 14   -> 15     (a card's subject outranks its body)
 *   hero number 32   -> 28     (still the loudest thing in its card, no longer the page)
 * The page title (.db2-hi, 22px) is untouched — it stays where the owner approved it.
 */
/* Centre the dashboard header. Owner: "shouldnt this be in middle top title instead of hard left".
 *
 * .db2-head was `display:flex; justify-content:space-between` — a two-column layout built to push
 * the monthly-theme chip to the right edge. That chip is now hidden (the theme became the title),
 * so the flex row had one child and left it stranded hard-left with a large empty gap beside it.
 * With one item to place, centre it: the title now reads as a page title rather than a label
 * clinging to the corner. */
body #bbn-db2 .db2-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}

body #bbn-db2 .db2-label {
  font-size: 12px;
  letter-spacing: .6px;
}

body #bbn-db2 .db2-setup-title {
  font-size: 15px;
  line-height: 1.35;
}

body #bbn-db2 .db2-hero {
  font-size: 28px;
}

/* ── 4. The actual "cutoff wording" ────────────────────────────────────────────────────────
 * MEASURED FIRST: nothing on this page is clipped by a container. Every element reported
 * scrollHeight == clientHeight with overflow:visible and no max-height, so the Updates card is
 * not "not tall enough".
 *
 * What IS cutting text off is deliberate single-line truncation in the funding list:
 *   .db2-row-t  white-space:nowrap + text-overflow:ellipsis  -> long grant titles die mid-word
 *   .db2-row-f  max-width:130px                              -> funder names truncate early
 * A grant title is the one thing a member must be able to read to decide whether to click, so
 * hard-truncating it to one line is the wrong trade. Allow two lines, then ellipsis.
 *
 * -webkit-line-clamp is the standard mechanism here (supported in every current browser
 * including Firefox 68+); `max-height` backstops it if the clamp is ever ignored.
 */
body #bbn-db2 .db2-row-t {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  max-height: 2.7em;
}

body #bbn-db2 .db2-row {
  align-items: flex-start;
}

/* The pill sits beside a title that can now be two lines tall; nudge it onto the first line. */
body #bbn-db2 .db2-pill {
  margin-top: 1px;
}

/* Funder names: give them their own line instead of a width cap.
 *
 * The 190px cap I set earlier was still truncating. Measured in a full-portal sweep at 1280px:
 * three .db2-row-f elements were clipped on the dashboard, the worst at 190px holding 314px of
 * text — "MEDA (Metropolitan Economic Development Association)" cannot fit on one line beside a
 * title and a deadline pill, at any sensible cap.
 *
 * Since the row is flex, allowing it to wrap puts the funder on the line below the title, where
 * it has the full card width. Nothing is truncated and nothing needs hiding on mobile.
 */
body #bbn-db2 .db2-row {
  flex-wrap: wrap;
}

body #bbn-db2 .db2-row-t {
  flex: 1 1 100%;
}

body #bbn-db2 .db2-row-f {
  max-width: none;
  flex: 1 1 auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ── 5. Less fragmentation ─────────────────────────────────────────────────────────────────
 * Owner: the page "reads as separate blocks rather than one dashboard". The cards were already
 * consistent; what separated them was air. Tightening the gutters and softening the card
 * borders makes them read as panels of one surface instead of six independent boxes — without
 * restructuring anything, which is the part that needs owner sign-off.
 */
body #bbn-db2 .db2-grid,
body #bbn-db2 .db2-side {
  gap: 14px;
}

body #bbn-db2 .db2-card {
  border-color: #EDE7DC;
}

/* Updates and quick-action links were 3px apart vertically, which made a list of three items
 * read as one paragraph. */
body #bbn-db2 .db2-up {
  padding: 5px 0;
}

/* ── 6. Retire the duplicated sections below the dashboard ─────────────────────────────────
 * Owner: "everything below dashboard looks a hotmess and a repeat of what dashboard states
 * above." Correct. Page 2277 had TEN top-level sections; the dashboard already answers what
 * four of them were saying, one is dead code, and two are empty:
 *
 *   009ce00  4,375 chars of #bbn-rail CSS + markup — DEAD. nav v3 deletes #bbn-rail on build,
 *            so nothing here has styled or shown anything since that shipped.
 *   2d0f66a  empty container (0 chars)
 *   145066b  empty container (0 chars)
 *   de37acf  "Theme of the Month" heading   — the theme is now the dashboard title
 *   712478e  "Back to Business / August Focus" blurb — same content as the title
 *   1123f5b  "This Month at BBN" heading    — dashboard has a THIS MONTH card
 *   22a6440  August newsletter + updates    — dashboard has the Updates list
 *   407137f  "Featured Funding Opportunities" loop grid — 59,119 CHARACTERS, and the reason the
 *            owner said "funding opps on dashboard cant see": the dashboard's own compact list
 *            sat above a block 15x its size, so the eye never landed on it.
 *
 * KEPT: 3687528 (the dashboard) and 24262ef (Promo Tools — genuinely unique content).
 *
 * display:none, NOT deletion. No Elementor markup is touched and no content is lost — deleting
 * rendered content from a published page is the owner's call, not a side effect of a CSS pass.
 * Rollback is removing this one block.
 */
body.page-id-2277 .elementor-element-009ce00,
body.page-id-2277 .elementor-element-2d0f66a,
body.page-id-2277 .elementor-element-145066b,
body.page-id-2277 .elementor-element-de37acf,
body.page-id-2277 .elementor-element-712478e,
body.page-id-2277 .elementor-element-1123f5b,
body.page-id-2277 .elementor-element-22a6440,
body.page-id-2277 .elementor-element-407137f {
  display: none !important;
}

/* ── 7. The funding list is now the only funding on the page — make it read like it ─────────
 * With the 59KB grid gone, this list carries the whole job. It was 13px titles in a 173px box,
 * which was appropriate as a teaser under a huge grid and is too quiet as the main event.
 */
body #bbn-db2 .db2-row-t {
  font-size: 15px;
}

body #bbn-db2 .db2-list {
  gap: 14px;
}

/* A hairline between rows so five entries read as five things, not one paragraph. */
body #bbn-db2 #db2-fund-list .db2-row + .db2-row,
body #bbn-db2 #db2-vis-list .db2-row + .db2-row {
  border-top: 1px solid #F1EDE3;
  padding-top: 14px;
}

/* ── 8. Mobile ─────────────────────────────────────────────────────────────────────────────
 * The grid already collapses at 900px. These only stop the header from becoming a cramped
 * two-column squeeze on a phone, and pull the outer padding in.
 * NOTE: this site's automated browser cannot be trusted for layout verification — it reports a
 * desktop width while evaluating mobile media queries — so everything in this block needs a
 * human check on a real phone before launch.
 */
@media (max-width: 600px) {
  body #bbn-db2 .db2-head { flex-direction: column; gap: 4px; }
  body #bbn-db2 .db2-card { padding: 16px; }
  body #bbn-db2 .db2-hero { font-size: 26px; }
}

/* ── 9. Touch target height, added 2026-09-02 ──────────────────────────────────────────────
 * Correction to the note in section 8: the automated browser CAN be trusted for this. With the
 * viewport set to 375x812 it reports innerWidth 375 and evaluates mobile media queries
 * correctly, which is how the numbers below were measured rather than guessed.
 *
 * Measured at 375px before this block, 21 visible interactive elements were under 44px tall:
 *   .db2-up      28px  x8   update links and Quick Actions
 *   .db2-step    31px  x2   the sign-in prompts in the setup card
 *   .db2-more    23px  x3   the "See all funding/visibility/updates" links
 *   .db2-row-t   41px  x7   funding and visibility row titles
 * Stacked 20-30px targets are a mis-tap trap for anyone using a thumb, which is most of this
 * audience — the food and service personas both browse between customers.
 *
 * min-height is used deliberately instead of padding: it lifts the hit area to the 44px Apple
 * HIG / WCAG 2.5.5 figure WITHOUT changing the visual rhythm or pushing the cards taller than
 * they need to be, so the density the dashboard was designed with survives. Where a link's text
 * would otherwise sit at the top of its new box, align-items centres it.
 *
 * Phone widths only — desktop is untouched. 767px rather than the 600px above because the
 * mis-tap problem exists on large phones and small tablets too, not just narrow phones.
 */
@media (max-width: 767px) {
  body #bbn-db2 .db2-up {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  body #bbn-db2 .db2-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  body #bbn-db2 .db2-step { min-height: 44px; }
  /* Left as flow-root — this row also carries the funder line and the deadline pill, and
   * switching it to flex would re-flow all three. It measured 41px, so it only needs the floor. */
  body #bbn-db2 .db2-row-t { min-height: 44px; }
}