/**
 * Shared Tool Responsive Styles
 *
 * Common responsive patterns for all SEO tools.
 * Uses .tool-hero from shared/components.css.
 *
 * @package AgenticWP
 */

/* ============================================
   Mobile (680px) — Hero Adjustments
   ============================================ */

@media (max-width: 680px) {
	.tool-hero {
		padding: 32px 0 24px;
	}

	.tool-hero h1 {
		font-size: 1.75rem;
	}

	.tool-hero .lead {
		font-size: 1rem;
	}
}

/* ============================================
   Print — Hide Hero
   ============================================ */

@media print {
	.tool-hero {
		display: none !important;
	}
}

/* ============================================
   Screen Reader Only
   ============================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}