/* WordPress-only additions. The mockup stylesheets are ported verbatim and
   never edited; anything the WP build adds on top lives here. */

/* Skip link: theme addition (the mockups shipped none). Visually hidden until
   focused, first focusable element in the header chrome. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--ink, #322F2A);
	color: var(--paper, #F6F3EC);
	font-family: var(--font-body, sans-serif);
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: 0 0 var(--radius, 12px) 0;
}

.skip-link:focus {
	left: 0;
	outline: 2px solid var(--gold, #B5AE7B);
	outline-offset: 2px;
}

/* Text for screen readers and crawlers only, e.g. the colon between a hero's
   topic eyebrow and its title inside the h1. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The template-part wrapper around the header/footer chrome must not exist
   for layout purposes (the mockup CSS expects .site-header/.site-footer as
   body-level boxes; sticky positioning depends on it). */
.tl-chrome {
	display: contents;
}

/* Editor-authored prose inside section blocks. The mockup stylesheets style
   only the elements the mockup happened to use; these rules cover every
   element an editor can reach in those fields, in the design's own language.
   .faq__answer p mirrors .faq__a (faq.css:63) so renders never have to
   rewrite editor markup to inject the class. */
.faq__answer p {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.68;
	color: var(--ink-soft);
	max-width: 64ch;
}

.faq__answer p + p { margin-top: 0.75em; }

.faq__answer a { color: var(--blue); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }

.faq__answer ul,
.faq__answer ol,
.about-prose__body ul,
.about-prose__body ol,
.hub-approach__body ul,
.hub-approach__body ol {
	margin: 0.75em 0 0.75em 1.25em;
	color: var(--ink-soft);
	line-height: 1.68;
}

.about-prose__body a,
.hub-approach__body a { color: var(--blue); border-bottom: 1px solid var(--gold); padding-bottom: 1px; }

.about-prose__body h3,
.about-prose__body h4,
.about-prose__body h5,
.about-prose__body h6,
.hub-approach__body h3,
.hub-approach__body h4,
.hub-approach__body h5,
.hub-approach__body h6 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
	margin: 1.5em 0 0.5em;
	line-height: 1.25;
}

.about-prose__body h3, .hub-approach__body h3 { font-size: 1.45rem; }
.about-prose__body h4, .hub-approach__body h4 { font-size: 1.2rem; }
.about-prose__body h5, .hub-approach__body h5,
.about-prose__body h6, .hub-approach__body h6 { font-size: 1.05rem; }

/* Neutralize WP layout wrappers so the ported section CSS owns the page.
   Sections are full-bleed; the mockup's .container does the constraining. */
main.wp-block-group,
main.wp-block-group > .wp-block-post-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Safety nets for editor-entered content longer than the approved copy.
   Both rules are inert while content fits (flex only wraps when needed);
   with approved content the rendering is pixel-identical to the mockups. */

/* The service-page credentials line is nowrap >=901px (trust.css); four long
   entries overflow the page sideways between ~900 and ~1120px. Let the row
   wrap in that band instead. */
@media (min-width: 901px) and (max-width: 1120px) {
	.trust__creds {
		flex-wrap: wrap;
	}
}

/* Eight or more top-level menu items overflow the header into a sideways
   page scroll (register: top level flows 4-7). Wrapping is ugly but visible,
   which beats a broken layout nothing warns about. */
.nav__list {
	flex-wrap: wrap;
}

/* ---------- Contact Form 7 ----------
   The two contact forms are CF7 embeds (inc/forms.php) rendered into the
   mockup's own structure. Nothing here is new design: it maps CF7's wrappers
   and error classes onto the approved .field / .field--error / .field__error
   look and removes the plugin's own furniture. */

/* CF7 wraps every control in <span class="wpcf7-form-control-wrap">, which
   becomes the grid row that used to hold the bare input. Re-create the
   label→input gap inside it so spacing is unchanged. */
.field .wpcf7-form-control-wrap {
	display: grid;
	gap: 0.4rem;
}

/* CF7's outer <div class="wpcf7"> sits between .contact__form-wrap and the
   form, so .contact__form's own margin-top no longer has a sibling to space
   off. Put it on the wrapper instead. */
.contact__form-wrap .wpcf7,
.modal__body .wpcf7 {
	margin-top: var(--space-5);
}
.contact__form-wrap .wpcf7 .contact__form,
.modal__body .wpcf7 .modal__form {
	margin-top: 0;
}

/* .contact__form / .modal__form are display:grid, which beats the UA
   [hidden] rule; the modal hides its form on success. */
.contact__form[hidden],
.modal__form[hidden] {
	display: none;
}

/* Submit sits in its own cell so CF7's spinner does not become a grid row. */
.contact__submit {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.contact__submit .wpcf7-spinner { margin: 0; }

/* Error states: CF7 marks the control .wpcf7-not-valid and appends
   .wpcf7-not-valid-tip. Same red border, tint and message type as the mockup's
   .field--error / .field__error. */
.field .wpcf7-not-valid {
	border-color: #B4433A;
	background: rgba(180, 67, 58, 0.05);
}
.field .wpcf7-not-valid-tip {
	font-size: 0.8rem;
	font-weight: 500;
	color: #B4433A;
}

/* The plugin's own status box is an alien element in this design. The theme's
   .contact__confirm panel and .modal__thanks carry the success state, and the
   per-field tips carry the errors, so keep it for screen readers only. */
.wpcf7 .wpcf7-response-output {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot (inc/forms.php): off-screen, never focusable. */
.tl-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Modal thank-you, shown where the form was. Matches .contact__confirm-text. */
.modal__thanks {
	margin-top: var(--space-5);
	line-height: 1.6;
	color: var(--ink-soft);
}
.modal__thanks:focus { outline: none; }	/* focused by site.js only so screen readers announce it */

/* The attorney-client note now sits outside the form element. */
.contact__form-wrap > .contact__note,
.modal__body > .modal__note {
	margin-top: var(--space-4);
}