/* =========================================================
   Journey — refinements.css
   Small corrections made while moving the site off WordPress.
   Every rule here is ours (the rest of /theme is the WordPress
   theme, byte for byte). Each one changes nothing a mouse user
   sees on a phone or a laptop with default settings; they make
   the existing design work for the people it was failing.
   Delete this file and the site is exactly the WordPress site.
   Catalogue with reasons: docs/REFINEMENTS.md
   ========================================================= */

/* 1. Keyboard users can open the desktop dropdowns.
      On WordPress they opened on :hover only, so Product and Company
      could not be reached without a mouse. The labels are now focusable
      (tabIndex=0 in site-header.tsx) and :focus-within mirrors :hover. */
@media (min-width: 861px) {
	.has-dropdown:focus-within .dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}
	.has-dropdown:focus-within .caret {
		transform: rotate(225deg) translate(-1px, -1px);
	}
}
.nav-link:focus-visible,
.dropdown a:focus-visible,
.footer-cols a:focus-visible,
.footer-legal a:focus-visible,
.form-legal-links a:focus-visible {
	outline: 2px solid var(--gold-cta);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 2. Drag-to-rank on touch screens. The ranked choices now respond to a
      finger without the page scrolling underneath (jQuery UI Touch Punch did
      this on WordPress), and to the arrow keys, with a visible focus ring. */
.gform_wrapper ul.gsurvey-rank li.gsurvey-rank-choice {
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.gform_wrapper ul.gsurvey-rank li.gsurvey-rank-choice:focus-visible {
	outline: 2px solid var(--gold-cta);
	outline-offset: 2px;
}

/* 3. Respect "reduce motion". The marquees, drifting card rows and looping
      bubbles keep running for everyone else; people who have asked their
      device for less motion get the same layout, standing still. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 4. Two long-form reports were wider than a phone, so phones zoomed the whole page
      out (Adaptive Wellness to 492px wide, the UNH Spring 2026 report to 459px).
      Only below 600px: figure captions wrap instead of running off the edge, the
      evidence tables scroll inside their own box, and the report's three-column
      Source / Cohort / Period row stacks. Desktop is untouched. */
@media (max-width: 600px) {
	#post-252339 .diagram-container .diagram-title {
		white-space: normal;
		width: max-content;
		max-width: calc(100% - 24px);
		line-height: 1.3;
	}
	#post-252339 .evidence-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#post-251439 .hero .meta {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}