/*
 * .c-link: links. Always underlined and always the primary green: color is never the only cue.
 *
 *   <p>Lee la <a class="c-link" href="/politica-de-datos.html">política de datos</a>.</p>
 *   <a class="c-link c-link--standalone" href="/vitrina/">Ver todos los negocios</a>
 *   <a class="c-link c-link--on-dark" href="...">...</a>      (on a deep green field)
 */
.c-link {
  color: var(--md-color-primary);
  font-weight: var(--md-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
}

@media (hover: hover) {
  .c-link:hover {
    text-decoration-thickness: 0.2em;
  }
}

/* A link on its own line: a 48 px target with an arrow that nudges on hover. */
.c-link--standalone {
  display: inline-flex;
  align-items: center;
  gap: var(--md-space-2);
  min-block-size: var(--md-target);
  text-decoration: none;
}

.c-link--standalone::after {
  content: '';
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: currentColor;
  -webkit-mask: url('../../img/icons/arrow-right.svg') center / contain no-repeat;
  mask: url('../../img/icons/arrow-right.svg') center / contain no-repeat;
  transition: transform var(--md-duration-fast) var(--md-ease-out);
}

@media (hover: hover) {
  .c-link--standalone:hover::after {
    transform: translateX(var(--md-space-1));
  }
}

@media (hover: hover) {
  .c-link--standalone:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.22em;
  }
}

.c-link--on-dark {
  color: var(--md-color-on-primary);
}

@media (hover: hover) {
  .c-link--on-dark:hover {
    color: var(--md-color-action);
  }
}