/* ---------------------------------------------------------------------------
   /blog. Generated by scripts/build-blog.mjs, so this file styles a document
   and a card list, nothing more.

   It borrows every colour, both typefaces and the gold rule from styles.css
   rather than defining a second brand, for the same reason pricing.css reuses
   the hero's own background: two pages that invent their own version of the
   look are two pages that drift. The only thing here that does not exist
   elsewhere on the site is the contents rail, and it is the legal pages'
   `.lg-tabs` idea turned on its side.

   No motion beyond the site's single 150ms hover, and no scroll timelines. A
   guide is read, not watched, and the reader arriving from a search result
   wants the first paragraph, not an entrance.
--------------------------------------------------------------------------- */

.blog-page {
  background: var(--sand);
  color: var(--ink);
}

/* ---------- Masthead ---------- */

.bl-masthead {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 72px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.bl-logo { height: 30px; width: auto; }

.bl-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* ---------- Shell ---------- */

.bl-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 72px 96px;
}

/* ---------- Breadcrumbs ----------
   Visible, not only in the structured data. A reader who lands on F730 from a
   search result has no idea what site they are on until something tells them. */

.bl-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: #6B6B6B;
}

.bl-crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: #B9B2A2;
}

.bl-crumbs a { color: var(--navy); }
.bl-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-crumbs [aria-current='page'] { color: #6B6B6B; }

/* ---------- Heads ---------- */

.bl-title {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 40px;
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin: 0 0 16px;
  max-width: 20ch;
  text-wrap: balance;
}

.bl-deck {
  font-size: 18.5px;
  line-height: 1.6;
  color: #55606C;
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.bl-ihead { margin: 0 0 44px; }
.bl-ihead .bl-title { max-width: 22ch; }

.bl-head { margin: 0 0 34px; }

/* An article headline gets more measure than the index's does: 20ch broke
   "F726: nurse and nurse aide competency..." into five short lines. */
.bl-head .bl-title { max-width: 28ch; }

.bl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 12.5px;
  color: #7A7A7A;
}

.bl-dot { color: #C4BDAD; }

/* ---------- Article ---------- */

.bl-article {
  position: relative;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E4E0D6;
  padding: 52px 60px 56px;
  overflow: clip;
}

/* The gold rule along the top edge, the same one every panel on the site
   wears. Decoration, never a fill: #C9A227 on white is about 2.4:1. */
.bl-article::before,
.bl-cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, 0));
}

/* --rail-out is the rail plus the gap: the distance a full-width table is
   allowed to reach into on the right. It is declared here rather than
   hard-coded into the table rule so the two breakpoints below only have to
   restate one number instead of two. */
.bl-cols {
  --rail-out: 280px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 48px;
  align-items: start;
}

.bl-body { min-width: 0; }
.bl-body > * { max-width: 72ch; }

/* A six-column table of 50 states does not belong at prose measure. It runs
   under the contents rail instead, which is short and ends long before the
   table starts, and still scrolls inside itself if it needs more than that. */
.bl-body > .bl-tablewrap {
  max-width: none;
  width: calc(100% + var(--rail-out));
}

.bl-body h2 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin: 44px 0 14px;
  scroll-margin-top: 24px;
}

.bl-body h2:first-child { margin-top: 0; }

.bl-body h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 30px 0 10px;
  scroll-margin-top: 24px;
}

.bl-body p {
  font-size: 16px;
  line-height: 1.68;
  margin: 0 0 16px;
  text-wrap: pretty;
}

.bl-body strong { font-weight: 600; color: #101922; }

.bl-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(44, 74, 110, 0.35);
  transition: text-decoration-color var(--t) var(--ease), color var(--t) var(--ease);
}

.bl-body a:hover { color: var(--navy-dark); text-decoration-color: var(--navy-dark); }

.bl-list {
  margin: 0 0 18px;
  padding: 0 0 0 22px;
  font-size: 16px;
  line-height: 1.68;
}

.bl-list li { margin: 0 0 8px; }
.bl-list li::marker { color: var(--navy); font-weight: 600; }

.bl-rule {
  border: 0;
  border-top: 1px solid #EDE9DE;
  margin: 34px 0;
}

.bl-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  background: #F6F4ED;
  border: 1px solid #EAE5D9;
  border-radius: 6px;
  padding: 1px 5px;
}

/* ---------- The callout ---------- */

.bl-note {
  margin: 26px 0 24px;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid #DFE6EF;
  border-left: 3px solid var(--navy);
  background: #F4F7FB;
}

.bl-note p {
  font-size: 15.5px;
  line-height: 1.62;
  margin: 0 0 10px;
  color: #2A3644;
}

.bl-note p:last-child { margin: 0; }

/* ---------- Tables ----------
   Wide by nature: 50 rows of state data does not fold. The wrapper scrolls,
   the page never does. */

.bl-tablewrap {
  margin: 24px 0 28px;
  overflow-x: auto;
  border: 1px solid #E4E0D6;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.bl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.bl-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5A6774;
  background: #FBFCFD;
  padding: 12px 16px;
  border-bottom: 1px solid #E4E0D6;
  white-space: nowrap;
}

.bl-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F0EDE4;
  color: #2C3540;
}

.bl-table tbody tr:last-child td { border-bottom: 0; }
.bl-table tbody tr:nth-child(even) td { background: #FBFCFD; }
.bl-table td strong { color: var(--navy); }

/* ---------- The contents rail ---------- */

.bl-rail { position: sticky; top: 24px; }

.bl-toc {
  border-left: 2px solid #EDE9DE;
  padding: 2px 0 2px 18px;
}

.bl-toc__h {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 12px;
}

.bl-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-toc li { margin: 0 0 9px; }

.bl-toc a {
  font-size: 13.5px;
  line-height: 1.45;
  color: #5C6772;
  display: block;
  transition: color var(--t) var(--ease);
}

.bl-toc a:hover { color: var(--navy); }

/* ---------- The article FAQ ----------
   <details>/<summary>, so it opens, closes and prints with JavaScript off,
   the same as the FAQ on the home page. Its structured data mirrors this
   markup word for word, which is what Google asks for. */

.bl-faq { margin: 48px 0 0; max-width: 72ch; }

.bl-faq h2 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 26px;
  margin: 0 0 16px;
}

.bl-faq__item {
  border: 1px solid #E4E0D6;
  border-radius: 10px;
  margin: 0 0 8px;
  background: #fff;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.bl-faq__item[open] { background: var(--tint-2); border-color: #DAD4C5; }
.bl-faq__item:hover { border-color: #D3CDBD; }

.bl-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy-dark);
}

.bl-faq__q::-webkit-details-marker { display: none; }
.bl-faq__q:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; border-radius: 10px; }

/* A plus that becomes a minus. Two 1px bars, one rotated, so the state is a
   shape rather than a colour. */
.bl-faq__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.bl-faq__icon i {
  position: absolute;
  background: var(--navy);
  border-radius: 1px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.bl-faq__icon i:first-child { inset: 6px 0 auto 0; height: 1.6px; }
.bl-faq__icon i:last-child { inset: 0 auto 0 6px; width: 1.6px; }
.bl-faq__item[open] .bl-faq__icon i:last-child { opacity: 0; transform: rotate(90deg); }

.bl-faq__a { padding: 0 18px 16px; }
.bl-faq__a p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #3A4550; }

/* ---------- The call to action ---------- */

.bl-cta {
  position: relative;
  margin: 44px 0 0;
  padding: 24px 26px 26px;
  border-radius: 12px;
  border: 1px solid #DFE6EF;
  background: #F4F7FB;
  overflow: clip;
  max-width: 72ch;
}

.bl-cta--wide { max-width: none; margin-top: 12px; }

.bl-cta__k {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 10px;
}

.bl-cta__b {
  font-size: 15.5px;
  line-height: 1.62;
  color: #2A3644;
  margin: 0 0 18px;
  max-width: 66ch;
}

.bl-cta__l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0;
}

.bl-cta__alt {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid rgba(44, 74, 110, 0.3);
  transition: border-color var(--t) var(--ease);
}

.bl-cta__alt:hover { border-bottom-color: var(--navy); }

/* ---------- The index ---------- */

.bl-group { margin: 0 0 44px; }

.bl-group__h {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7684;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid #E4E0D6;
}

.bl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-card {
  position: relative;
  background: #fff;
  border: 1px solid #E4E0D6;
  border-radius: 12px;
  overflow: clip;
  transition: border-color var(--t) var(--ease);
}

.bl-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 162, 39, 0));
}

.bl-card:hover { border-color: #C8C0AD; }

.bl-card__link { display: block; padding: 22px 24px 20px; color: inherit; }

.bl-card__kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 10px;
}

.bl-card__t {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.28;
  color: var(--navy);
  margin: 0 0 10px;
  text-wrap: pretty;
}

.bl-card__d {
  font-size: 14.5px;
  line-height: 1.58;
  color: #5F6A75;
  margin: 0 0 14px;
  text-wrap: pretty;
}

.bl-card__m {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8A8A8A;
  margin: 0;
}

/* ---------- Keep reading ---------- */

.bl-rel { margin: 40px 0 0; }

.bl-rel__h {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7684;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid #E4E0D6;
}

.bl-rel ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-rel a {
  display: block;
  padding: 16px 18px;
  border: 1px solid #E4E0D6;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  transition: border-color var(--t) var(--ease);
}

.bl-rel a:hover { border-color: #C8C0AD; }

.bl-rel__t {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 6px;
}

.bl-rel__d {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6F7A85;
}

/* ---------- Breakpoints ----------
   The site's three: 1180 / 940 / 620. */

@media (max-width: 1180px) {
  .bl-masthead { padding: 26px 40px 0; }
  .bl-main { padding: 24px 40px 80px; }
  .bl-article { padding: 44px 40px 48px; }
  .bl-cols { --rail-out: 234px; grid-template-columns: minmax(0, 1fr) 200px; gap: 34px; }
}

@media (max-width: 940px) {
  .bl-cols { --rail-out: 0px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bl-title { font-size: 34px; }
  .bl-deck { font-size: 17px; }

  /* The rail moves above the article rather than disappearing: on a phone the
     contents list is the only way to see how long the thing is. */
  .bl-rail {
    position: static;
    order: -1;
    margin: 0 0 28px;
  }

  .bl-toc {
    border-left: 0;
    border-top: 1px solid #EDE9DE;
    border-bottom: 1px solid #EDE9DE;
    padding: 16px 0;
  }
}

@media (max-width: 620px) {
  .bl-masthead { padding: 20px 20px 0; flex-wrap: wrap; gap: 14px; }
  .bl-nav { gap: 16px; font-size: 14px; }
  .bl-main { padding: 20px 20px 64px; }
  .bl-article { padding: 30px 22px 34px; border-radius: 12px; }
  .bl-title { font-size: 28px; max-width: none; }
  .bl-body h2 { font-size: 23px; }
  .bl-cards { grid-template-columns: 1fr; }
  .bl-cta { padding: 20px 20px 22px; }
}

/* ---------- The one solid button ----------
   styles.css ships .btn as a shape with no ground, plus an outline and a gold
   variant, because the home page's primary action is the WebGL liquid button
   and nothing else on that page needed a filled navy. A guide is the wrong
   place for a canvas, so this is the flat version of the same intent: navy
   fill, the site's one 150ms curve, and the 1px press-down. */

.bl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.bl-btn:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
  box-shadow: 0 2px 10px rgba(30, 53, 80, 0.24);
}

.bl-btn:active { transform: translateY(1px); box-shadow: none; }
.bl-btn:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bl-btn { transition: none; }
  .bl-btn:active { transform: none; }
}