/* WordPress additions on top of the site's design (tailwind.css). */

[hidden] { display: none !important; }

/* Sticky header below the WordPress admin bar */
.admin-bar header.sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar header.sticky { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.sticky { top: 0; } }

/* Accessibility */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0; z-index: 100000;
	left: 1rem; top: 1rem; padding: .75rem 1rem; border-radius: .375rem;
	background: var(--primary); color: var(--primary-foreground); font-weight: 500;
}

/* Rich text written in the WordPress editor (blog posts, service texts, extra pages) */
.prose-like { color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.prose-like > * + * { margin-top: 1rem; }
.prose-like p { margin-top: 1rem; margin-bottom: 1rem; line-height: 1.625; }
.prose-like h2, .prose-like h3, .prose-like h4 {
	font-family: var(--font-display); color: var(--navy); line-height: 1.2; margin-top: 2.5rem; margin-bottom: 1rem;
}
.prose-like h2 { font-size: 1.5rem; }
.prose-like h3 { font-size: 1.25rem; }
.prose-like h4 { font-size: 1.125rem; }
@media (min-width: 48rem) { .prose-like h2 { font-size: 1.875rem; } .prose-like h3 { font-size: 1.5rem; } }
.prose-like ul, .prose-like ol { margin: 1rem 0; padding-left: 1.25rem; line-height: 1.625; }
.prose-like ul { list-style: disc; }
.prose-like ol { list-style: decimal; }
.prose-like li + li { margin-top: .375rem; }
.prose-like li::marker { color: var(--gold); }
.prose-like a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.prose-like strong { color: var(--foreground); font-weight: 600; }
.prose-like blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; font-style: italic; }
.prose-like img, .prose-like figure { max-width: 100%; height: auto; border-radius: .75rem; }
.prose-like figure { margin: 2rem 0; }
.prose-like figcaption { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.prose-like .aligncenter { margin-left: auto; margin-right: auto; }
.prose-like .alignleft { float: left; margin: .5rem 1.5rem 1rem 0; }
.prose-like .alignright { float: right; margin: .5rem 0 1rem 1.5rem; }
.prose-like > :first-child { margin-top: 0; }

/* Lead text from the editor (service description, page intros): keep the design's spacing */
.md-lead > p { margin: 0; }
.md-lead > p + p { margin-top: 1rem; }

/* Blog pagination */
.md-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem;
	border: 1px solid var(--border); border-radius: .375rem; background: var(--surface); font-size: .875rem;
}
.md-pagination .page-numbers.current, .md-pagination a.page-numbers:hover { border-color: var(--gold); color: var(--gold); }

/* Quote form messages */
.md-alert { border-radius: 1rem; padding: 1rem 1.25rem; font-size: .875rem; }
.md-alert--error { border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); background: color-mix(in oklab, var(--destructive) 8%, transparent); color: var(--destructive); }
.md-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.md-alert a { text-decoration: underline; }

/* Quote form selects: drop the native control so they match the text inputs */
.md-select {
	-webkit-appearance: none; appearance: none; padding-right: 2.5rem; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23515e75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem;
}
.md-select:has(option[value=""]:checked) { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.md-select option { color: var(--foreground); }