/* Theme-specific additions on top of main.css — styling for classic-editor
   WYSIWYG content (e.g. Legal Pages) that main.css doesn't cover, since the
   static design only ever styled that content with per-element inline styles. */

.bstw-legal-content h3 {
	font-family: var(--bstw-font-text);
	font-weight: var(--bstw-weight-bold);
	font-size: var(--bstw-fs-16);
	margin: var(--bstw-space-23) 0 var(--bstw-space-7);
}

.bstw-legal-content p {
	font-size: var(--bstw-fs-14-5);
	line-height: var(--bstw-leading-loose);
	color: var(--bstw-color-text-muted);
	margin: 0 0 var(--bstw-space-15);
}

.bstw-legal-content h3:first-child {
	margin-top: 0;
}

.bstw-legal-content a {
	color: inherit;
	text-decoration: underline;
}

/* Form field focus state — main.css never styles :focus for .bstw-input /
   .bstw-textarea, so fields fall back to the browser's default outline,
   which doesn't match the site's hard-offset-shadow visual language. */

.bstw-input,
.bstw-textarea {
	transition: var(--bstw-transition-border), box-shadow var(--bstw-duration-base) var(--bstw-ease-standard);
}

.bstw-input:focus,
.bstw-textarea:focus {
	outline: none;
	border-color: var(--bstw-color-accent);
	box-shadow: var(--bstw-shadow-offset-3) var(--bstw-shadow-offset-3) 0 var(--bstw-color-accent);
}

.bstw-field:focus-within .bstw-field__label {
	color: var(--bstw-color-accent);
}

/* Blog post body — main.css styles .bstw-copy / .bstw-copy p already, but
   the static design only ever hand-wrote h2 with explicit .bstw-heading
   .bstw-heading--copy classes on it; classic-editor content just outputs
   plain h2/ul tags, so those need the equivalent styling here. */

.bstw-copy h2 {
	font-family: var(--bstw-font-heading);
	font-weight: var(--bstw-weight-regular);
	letter-spacing: var(--bstw-tracking-tight);
	font-size: var(--bstw-fs-22);
	margin: var(--bstw-space-23) 0 var(--bstw-space-12);
	color: var(--bstw-color-ink);
}

.bstw-copy h2:first-child {
	margin-top: 0;
}

.bstw-copy ul {
	margin: 0 0 var(--bstw-space-17);
	padding-left: var(--bstw-space-19);
}

.bstw-copy li {
	margin-bottom: var(--bstw-space-9);
}

.bstw-copy strong {
	color: var(--bstw-color-ink);
	font-weight: var(--bstw-weight-bold);
}

.bstw-copy a {
	color: inherit;
	text-decoration: underline;
}

/* 404 page — fill the viewport and vertically center the hero content, so
   the footer doesn't immediately follow a short section. Scoped to WP's own
   `error404` body class so this never affects any other template. */

body.error404 .bstw-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.error404 .bstw-hero {
	flex: 1;
	display: flex;
	align-items: center;
}

body.error404 .bstw-hero > section {
	width: 100%;
}

/* Speed test loading state — three square blocks bouncing in sequence
   (brutalist take on a spinner: hard-edged, not a circular loader) so the
   ~15-30s wait for PageSpeed Insights reads as "working," not "frozen." */

.bstw-loading-dots {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	vertical-align: middle;
}

.bstw-loading-dots__dot {
	width: 6px;
	height: 6px;
	background: currentColor;
	animation: bstw-loading-bounce 0.9s ease-in-out infinite;
}

.bstw-loading-dots__dot:nth-child(2) { animation-delay: 0.15s; }
.bstw-loading-dots__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes bstw-loading-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
	40% { transform: translateY(-4px); opacity: 1; }
}

.bstw-speedtest-status {
	display: none;
	align-items: center;
	gap: var(--bstw-space-9);
	margin-top: var(--bstw-space-9);
	font-size: var(--bstw-fs-11-5);
	color: var(--bstw-color-text-faint);
}

.bstw-speedtest-status--active {
	display: flex;
}