/* Shared video framing and interaction feedback across the site. */
video,
iframe[src*="youtube.com/embed/"],
iframe[src*="youtube-nocookie.com/embed/"],
iframe[src*="player.vimeo.com/"] {
  box-sizing: border-box;
  border: 3px solid #94a3b8;
  border-radius: 12px;
}

a[href], button, input[type="submit"], input[type="button"], summary {
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

@media (hover: hover) {
  a[href]:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    filter: brightness(.88);
  }

  button:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  input[type="button"]:not(:disabled):hover,
  summary:hover {
    cursor: pointer;
    filter: brightness(.88);
    box-shadow: 0 0 0 2px currentColor;
  }

  a[href][class*="rounded"]:hover,
  a[href].pf-button:hover,
  a[href].pf-card-art:hover {
    box-shadow: 0 0 0 2px currentColor, 0 6px 16px rgb(15 23 42 / 12%);
  }
}

a[href]:focus-visible, button:focus-visible,
input[type="submit"]:focus-visible, input[type="button"]:focus-visible,
summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  a[href], button, input[type="submit"], input[type="button"], summary {
    transition: none;
  }
}