/*
   Data tables authored inside a rich_content block (e.g. the scholarship
   comparison tables on financialaid.wnmu.edu/financial-aid-scholarships/).

   Markup contract (authored in the block content):
     <div class="com-table-wrap" role="region" aria-label="…" tabindex="0">
       <table class="com-table"><caption>…</caption>…</table>
     </div>

   Accessibility (WCAG 2.1 AA):
   - The wrapper scrolls horizontally on narrow screens instead of the whole
     page (1.4.10 Reflow); tabindex="0" lets keyboard users focus and scroll
     it (2.1.1), and it gets a visible focus ring (2.4.7).
   - Cell borders use a mid gray at ~4.6:1 against white, above the 3:1
     non-text contrast minimum (1.4.11).
   - Text is left-aligned; no meaning is carried by color.
*/
.com-rich-content {
  --color-com-table-border: hsl(0 0% 46% / 1);
  --color-com-table-head-bg: hsl(0 0% 95% / 1);

  .com-table-wrap {
    overflow-x: auto;
    margin-block: var(--p-margin);
    &:focus-visible {
      outline: 3px solid var(--color-link);
      outline-offset: 2px;
    }
  }

  .com-table {
    width: 100%;
    /* Keeps columns readable; below this width the wrapper scrolls. */
    min-width: 40rem;
    border-collapse: collapse;
    text-align: left;
    caption {
      text-align: left;
      font-weight: 700;
      padding-bottom: 0.5rem;
    }
    th, td {
      border: 1px solid var(--color-com-table-border);
      padding: 0.6rem 0.75rem;
      text-align: left;
      vertical-align: top;
    }
    thead th {
      background: var(--color-com-table-head-bg);
    }
  }
}