/*
 * Published Q&A pages.
 *
 * Deliberately small. These pages live inside the officer's own theme and it
 * owns the look -- this only settles the handful of things the theme has no
 * opinion about, plus the one it has a bad opinion about.
 *
 * That one being link colour. Hello Elementor ships #CC3366, a magenta nobody
 * chose, used site-wide including the nav. On a page that is mostly a table of
 * links it was the loudest thing on screen and read as an error.
 *
 * Everything is scoped to .asj-qa so nothing here can touch the rest of the
 * site.
 */

.asj-qa {
  /* Fairway's green, sampled from the Apply Now button on this site. Too light
     for text on white (about 2.3:1), so it is a hover and an accent, never a
     resting link colour. --asj-qa-link-hover is the same hue taken down to a
     readable weight. */
  --asj-qa-brand: #80C33D;
  --asj-qa-link-hover: #4E7D20;
  --asj-qa-rule: #E4E9F0;
  --asj-qa-muted: #5A6472;
}

/*
 * Links read as links by their underline, not by being a different colour from
 * the words around them. In a table where every row is a link, colour adds
 * nothing and costs contrast.
 */
.asj-qa a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(51, 51, 51, .35);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.asj-qa a:hover,
.asj-qa a:focus {
  color: var(--asj-qa-link-hover);
  text-decoration-color: currentColor;
}

.asj-qa-lede {
  font-size: 1.05em;
  color: var(--asj-qa-muted);
  margin: 0 0 1.6em;
}

/* One question, one answer, hairline between. The heading is what a crawler
   chunks on, so it stays a real h2 and simply gets room to breathe. */
.asj-qa-q {
  margin: 1.9em 0 .5em;
  line-height: 1.25;
}
.asj-qa-q:first-of-type { margin-top: 1.2em; }
.asj-qa-a {
  margin: 0;
  line-height: 1.65;
}
.asj-qa-by {
  margin: .55em 0 0;
  font-size: .88em;
  color: var(--asj-qa-muted);
}

/* The index table. Left-aligned topics, figures that line up. */
.asj-qa-index {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 2em;
}
.asj-qa-index th,
.asj-qa-index td {
  text-align: left;
  padding: .78em 1em;
  border-bottom: 1px solid var(--asj-qa-rule);
}
.asj-qa-index th {
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--asj-qa-muted);
}
.asj-qa-index td + td,
.asj-qa-index th + th {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 1%;
  white-space: nowrap;
}
.asj-qa-index tr:hover td { background: rgba(128, 195, 61, .07); }

.asj-qa-rule {
  border: 0;
  border-top: 1px solid var(--asj-qa-rule);
  margin: 2.6em 0 1.4em;
}

/*
 * The disclosure is required, and it is not the reason anyone is on the page.
 * Small and quiet, but never hidden, never collapsed, and never below the
 * contrast a person can read.
 */
.asj-qa-disclosure {
  font-size: .8em;
  line-height: 1.6;
  color: var(--asj-qa-muted);
}
.asj-qa-disclosure p { margin: 0 0 .8em; }

@media (max-width: 600px) {
  .asj-qa-index th,
  .asj-qa-index td { padding: .7em .5em; }
  .asj-qa-index th:nth-child(3),
  .asj-qa-index td:nth-child(3) { display: none; }
}