/*
 * WordPress-only additions to the design's stylesheet. site.css is the design's
 * own file, copied unchanged by tools/build-theme.py; this covers what only exists
 * in WordPress: post content written in the editor, form messages, the self-test
 * gate and the logged-in toolbar.
 */

/* Spam trap on the contact forms: off-screen for people, still filled in by bots. */
.ph-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Contact form status messages. */
.ph-notice {
	margin: 0;
	border: 1px solid;
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 14px;
	line-height: 1.5;
}
.ph-notice:focus { outline: 2px solid var(--color-teal-600, #007f7f); outline-offset: 2px; }
.ph-notice--ok { border-color: var(--color-teal-100, #d7edeb); background: var(--color-teal-50, #eef7f6); color: var(--color-teal-900, #0b4744); }
.ph-notice--err { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* Self-tests: the "tick the box first" message, and Quiz Maker in the design's type. */
.ph-quiz-msg { margin-top: 0.75rem; font-size: 14px; color: #991b1b; }
.ph-quiz { font-family: var(--font-body); }

/* Old-design pages: their Elementor content starts below the design's fixed 80px header. */
.ph-below-header { padding-top: 5rem; }

/* Logged-in toolbar: keep the fixed header below it. */
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
	.admin-bar #masthead { top: 46px; }
}

/* Text written in the WordPress editor (posts, and old pages without Elementor). */
.ph-content > * + * { margin-top: 1.25rem; }
.ph-content h2,
.ph-content h3,
.ph-content h4 {
	font-family: var(--font-display);
	font-weight: 600;
	color: #111827;
	line-height: 1.3;
}
.ph-content h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.ph-content h3 { font-size: 1.25rem; margin-top: 2rem; }
.ph-content h4 { font-size: 1.0625rem; margin-top: 1.75rem; }
.ph-content a {
	color: var(--color-teal-700, #0e7b77);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ph-content a:hover { color: var(--color-teal-800, #065f5c); }
.ph-content strong { color: #111827; }
.ph-content ul { list-style: disc; padding-left: 1.25rem; }
.ph-content ol { list-style: decimal; padding-left: 1.25rem; }
.ph-content li + li { margin-top: 0.4rem; }
.ph-content img { max-width: 100%; height: auto; border-radius: 1rem; }
.ph-content figure { margin: 2rem 0; }
.ph-content figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; }
.ph-content blockquote {
	border-left: 4px solid var(--color-teal-300, #7cc3bd);
	padding-left: 1rem;
	color: #4b5563;
	font-style: italic;
}
.ph-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ph-content th,
.ph-content td { border-bottom: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.ph-content .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.ph-content .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.ph-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ph-content iframe { max-width: 100%; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}