/* Links that act as small actions. Prose links are styled in base.css.
   .text-link   gold, underlined, 44px tall so it is a real touch target
   .text-button a <button> that looks like a text link (in-page actions)
   .link-arrow  a text link whose arrow slides on hover ("All questions") */

.text-link, .text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0;
  color: var(--link);
  font-weight: 500;
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: text-decoration-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.text-link:hover, .text-button:hover { text-decoration-color: currentColor; }
.text-link .icon, .text-button .icon { color: var(--accent); }
.text-button { font-size: var(--fs-sm); }

.link-arrow .icon { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Two or more text links in a row under a section. */
.link-row { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin-top: var(--s-4); }