/* ─────────────────────────────────────────────────────────────
   guidematrix.css — the eight profession guides, as the grid they are.
   Loaded only on /blog/.

   Light, on purpose. The two other generated graphics on this site are
   navy panels; a third would read as the same block moved around. This
   one is a ruled table on white — the form the content already has.

   A real <table>, restyled. Below 760px each row becomes its own block:
   a four-row table with two link cells is unreadable at 375px and a
   horizontal scroller hides half the answer behind a gesture most people
   never make (the same reasoning as the enforcement timeline).
   ───────────────────────────────────────────────────────────── */

.guidematrix {
  background: #ffffff;
  padding: 64px 24px 8px;
}

.guidematrix-inner {
  max-width: 900px;
  margin: 0 auto;
}

.guidematrix-title {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-wrap: balance;
  margin: 0 0 12px;
}

.guidematrix-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  max-width: 62ch;
  margin: 0 0 32px;
  text-wrap: pretty;
}

.guidematrix-table {
  width: 100%;
  border-collapse: collapse;
}

/* The caption says what the table is for a screen reader and for anything
   parsing the page; the heading above already says it to a reader. */
.guidematrix-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.guidematrix-table th,
.guidematrix-table td {
  border: 1px solid #e2e8f0;
  padding: 0;
  text-align: left;
  vertical-align: stretch;
}

.guidematrix-table thead th {
  background: #0a1628;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  border-color: #0a1628;
}

.guidematrix-corner {
  color: #94a3b8;    /* 4.9:1 on the navy — a label, not a column of data */
  font-weight: 600;
}

.guidematrix-table tbody th {
  background: #f8fafc;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  padding: 18px;
  white-space: nowrap;
}

/* The whole cell is the target, not a link sitting inside one. A 44px
   target is the floor and this clears it in every direction. */
.guidematrix-table td a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  min-height: 44px;
  text-decoration: none;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

/* The regulator names lead. A reader scans this grid for "SRA" or "AICPA",
   not for the eighth identical "Read the guide" — the link affordance is the
   amber line under it and the whole cell being a target. */
.guidematrix-who {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #0f172a;
}

.guidematrix-go {
  font-size: 13px;
  font-weight: 700;
  color: #b45309;    /* 4.9:1 on white; #f59e0b would be 2.1:1 */
}

.guidematrix-go::after {
  content: " →";
}

.guidematrix-table td a:hover,
.guidematrix-table td a:focus-visible {
  background: #0a1628;
}

.guidematrix-table td a:hover .guidematrix-go,
.guidematrix-table td a:focus-visible .guidematrix-go { color: #fbbf24; }

.guidematrix-table td a:hover .guidematrix-who,
.guidematrix-table td a:focus-visible .guidematrix-who { color: #ffffff; }

.guidematrix-table td a:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

/* Phone: one block per jurisdiction, with the profession named on each
   link, because the column header is no longer beside it. */
@media (max-width: 759px) {
  .guidematrix { padding: 48px 20px 4px; }

  .guidematrix-table thead { display: none; }

  .guidematrix-table,
  .guidematrix-table tbody,
  .guidematrix-table tr,
  .guidematrix-table th,
  .guidematrix-table td { display: block; width: 100%; }

  .guidematrix-table tr {
    border: 1px solid #e2e8f0;
    margin-bottom: 14px;
  }

  .guidematrix-table th,
  .guidematrix-table td { border: 0; }

  .guidematrix-table tbody th {
    border-bottom: 1px solid #e2e8f0;
    white-space: normal;
  }

  .guidematrix-table td + td { border-top: 1px solid #e2e8f0; }

  /* "Read the guide" alone tells a phone reader nothing about which of the
     two it is. The profession is carried on the cell rather than repeated
     in the markup, so the wide table never prints it twice. */
  .guidematrix-table td:nth-of-type(1) .guidematrix-who::before { content: "Accountants — "; }
  .guidematrix-table td:nth-of-type(2) .guidematrix-who::before { content: "Solicitors & law firms — "; }
}

@media (min-width: 760px) {
  .guidematrix { padding: 80px 24px 8px; }
}