/*
Theme Name: Internet Service Guide
Theme URI: https://internetserviceguide.com
Author: Internet Service Guide
Description: Custom block theme for Internet Service Guide — a consumer resource for understanding internet service, comparing options, and finding better connections. Built to WCAG 2.2 AA. No page builder, no bloat.
Version: 0.2.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: internet-service-guide
Tags: blog, block-theme, accessibility-ready, full-site-editing
*/

/* ---------------------------------------------------------------------------
   Design tokens live in theme.json, not here. This file carries only what
   theme.json cannot express: accessibility affordances, focus behaviour, and
   a few structural rules.
   --------------------------------------------------------------------------- */

/* --- Skip link -------------------------------------------------------------
   Keyboard and screen-reader users land here first and can jump straight to
   the content instead of tabbing through the whole nav. WCAG 2.2 SC 2.4.1.
   --------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	transition: top 120ms ease-in-out;
}

.skip-link:focus {
	top: 0;
	color: var(--wp--preset--color--base);
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Focus visibility ------------------------------------------------------
   A visible focus indicator on every interactive element. WCAG 2.2 SC 2.4.7
   (Focus Visible) and SC 2.4.11 (Focus Not Obscured). Never remove this.
   --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Form field boundaries -------------------------------------------------
   The `border` token is deliberately light so decorative hairlines stay
   delicate (1.29:1 against the page). That is fine for a divider and wrong
   for a control: when a border is the only thing marking where an input
   begins, it has to reach 3:1. WCAG 2.2 SC 1.4.11 (Non-text Contrast).
   `muted` clears it at 7.10:1, so interactive fields use `muted` while
   dividers keep `border`.
   --------------------------------------------------------------------------- */
:where(
	input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	select,
	textarea
),
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* --- Screen-reader-only text ---------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	white-space: normal;
}

/* --- Reduced motion --------------------------------------------------------
   Respect the OS-level setting. WCAG 2.2 SC 2.3.3.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Readability -----------------------------------------------------------
   Long-form articles are the product. Give body copy a comfortable measure
   and generous rhythm.
   --------------------------------------------------------------------------- */
.entry-content > * + * {
	margin-block-start: 1.5rem;
}

.entry-content :where(h2, h3, h4) {
	margin-block-start: 2.5rem;
	scroll-margin-top: 2rem;
}

/* Text must reflow without horizontal scrolling at 320px. WCAG 2.2 SC 1.4.10. */
img,
video,
iframe,
table {
	max-width: 100%;
}

/* Tables in articles scroll inside their own container rather than breaking
   the page layout. */
.wp-block-table {
	overflow-x: auto;
}

/* --- Forced-colors / high-contrast mode ----------------------------------- */
@media (forced-colors: active) {
	.skip-link,
	:where(a, button):focus-visible {
		outline: 3px solid CanvasText;
	}
}