/* Paul Okhrem responsive and interaction safeguards, reviewed 2026-08-10. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Keep spam traps unavailable to sighted users and assistive technology. */
.form-honeypot {
  position: absolute !important;
  inset: auto auto auto -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The original menu CSS varies by page. These rules define one open state. */
@media (min-width: 1181px) {
  .nav-dropdown[data-open="true"] > .nav-dropdown-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .nav-dropdown[data-open="true"] > .nav-dropdown-panel--wide {
    display: block !important;
  }

  .nav .nav-dropdown:first-of-type > .nav-dropdown-panel--wide:not(.nav-dropdown-panel--resources) {
    left: 0 !important;
    right: auto !important;
    transform: translateY(-6px) !important;
  }

  .nav .nav-dropdown:first-of-type[data-open="true"] > .nav-dropdown-panel--wide:not(.nav-dropdown-panel--resources) {
    transform: translateY(0) !important;
  }

  .nav .nav-dropdown[data-open="true"] > .nav-dropdown-panel--resources {
    display: grid !important;
    transform: translateY(0) !important;
  }
}

/* Charts stay inside the viewport instead of forcing a mobile page width. */
main figure.infographic,
main .infographic-section {
  max-width: 100%;
}

main figure.infographic > svg,
main svg.infographic-svg,
main .infographic-section > svg {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Keep optional form qualifiers available without making the first step long. */
.form-optional {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}

.form-optional summary {
  min-height: 48px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}

.form-optional summary::-webkit-details-marker {
  display: none;
}

.form-optional summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.form-optional[open] summary {
  border-bottom: 1px solid var(--border);
}

.form-optional[open] summary::after {
  content: "−";
}

.form-optional summary span {
  margin-left: auto;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
}

.form-optional .form-row {
  margin: 0;
  padding: 18px;
}

/* Preserve table columns and make the table itself the scroll container. */
@media (max-width: 700px) {
  main table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  main summary,
  main .faq summary,
  main details.faq > summary {
    min-height: 44px !important;
    padding-block: 9px !important;
    align-items: center;
  }

  main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  main select,
  main textarea,
  main button,
  .menu-btn,
  .menu-toggle {
    min-height: 44px !important;
  }

  .menu-btn,
  .menu-toggle {
    min-width: 44px !important;
  }

  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .form-optional summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .form-optional summary span {
    width: 100%;
    margin: 0;
  }

  .form-optional .form-row {
    padding: 16px;
  }
}

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