/*
 * Shared, additive site enhancements.
 * Page-specific styles remain in each HTML document so the established visual
 * system is preserved while common accessibility and responsive fixes live in
 * one maintainable place.
 */

:where(img, video, svg, canvas) {
  max-width: 100%;
}

img {
  height: auto;
}

video {
  display: block;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

/* Keep wide operational tables usable on small screens without changing the
   desktop table treatment. */
.article-content .rate-table,
.content-block .rate-table,
.cost-comparison .rate-table {
  max-width: 100%;
}

.calculator-methodology-note {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #dc2626;
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

@media (max-width: 768px) {
  .article-content .rate-table,
  .content-block .rate-table,
  .cost-comparison .rate-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .article-content .rate-table th,
  .article-content .rate-table td,
  .content-block .rate-table th,
  .content-block .rate-table td,
  .cost-comparison .rate-table th,
  .cost-comparison .rate-table td {
    overflow-wrap: anywhere;
  }

  .article-content .rate-table th,
  .article-content .rate-table td,
  .content-block .rate-table th,
  .content-block .rate-table td {
    padding: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}