/* Rich text: WordPress's wpautop wraps a blockquote's bare text in a <p>; the source's blockquote has none. */
.slg-rich-text blockquote > p {
	line-height: inherit;
}

/* Forms: Contact Form 7's own verdict dressed as the source's .form__error and .error, one message a field. */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	transform: translateY(-15px);
	margin: 0;
	color: #941b0c;
	font-size: 14px;
	line-height: 163%;
}

.wpcf7 .wpcf7-not-valid {
	color: #941b0c !important;
	border-color: #941b0c !important;
	outline: 0 none;
}

.popup-contact-form .wpcf7 .wpcf7-not-valid-tip,
.popup-contact-form .wpcf7 .wpcf7-not-valid,
.popup-contact-form .wpcf7 .form__error,
.popup-contact-form .wpcf7 .error,
.slg-sm-hero-copy .wpcf7 .wpcf7-not-valid-tip,
.slg-sm-hero-copy .wpcf7 .wpcf7-not-valid,
.contact-form-b .wpcf7 .wpcf7-not-valid-tip,
.contact-form-b .wpcf7 .wpcf7-not-valid,
.contact-form-b .wpcf7 .form__error,
.contact-form-b .wpcf7 .error {
	color: #ff9385 !important;
	border-color: #ff9385 !important;
}

/* Location of Case: its hint sits absolutely 7-27px under the field, so the message takes its own line below the
   hint. The margin collapses with the field's 20px one. */
.wpcf7 .wpcf7-form-control-wrap:has(> .div-block-149) > .form__error,
.wpcf7 .wpcf7-form-control-wrap:has(> .div-block-149) > .wpcf7-not-valid-tip {
	margin-top: 28px;
	transform: none;
}

/* Message: the textarea has no bottom margin for the -15px lift to eat, so its message sits inside the field.
   Under a textarea it takes the inputs' 5px gap as a margin instead. */
.wpcf7 .wpcf7-form-control-wrap:has(> textarea) > .form__error,
.wpcf7 .wpcf7-form-control-wrap:has(> textarea) > .wpcf7-not-valid-tip {
	margin-top: 5px;
	transform: none;
}

/* The source's reCAPTCHA v2 slot; v3 draws nothing there, so the empty cell keeps only the source's 28px
   between the message and Submit (12px here plus the form's 16px row gap). */
.wpcf7 .div-block-57.big-cta-wrapper:empty {
	height: 12px;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* reCAPTCHA v3: the floating badge gives the corner to the chat; Google's notice sits under each form's
   submit (inc/cf7.php), in the dress of the form's "We serve only Northwest Indiana" hint. */
.grecaptcha-badge {
	visibility: hidden;
}

.wpcf7 .slg-recaptcha-note {
	margin: 16px 0 0;
	color: #fff;
	font-family: "Playfair Display", Verdana, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.contact-us-p-form-b .wpcf7 .slg-recaptcha-note {
	color: #333;
}

.wpcf7 .slg-recaptcha-note a {
	color: inherit;
	text-decoration: underline;
}

.wpcf7-form-control-wrap:has(.form__error) .wpcf7-not-valid-tip {
	display: none;
}

.wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
	display: none;
}

/* Scroll reveals (main.js): the source's slide-in, 100px up and in from transparent over 1 s, ease out quart. */
.slg-anim {
	opacity: 0;
}

.slg-anim--from {
	transform: translate3d(0, 100px, 0);
}

.slg-anim--play {
	transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.slg-anim--play[data-anim-delay="250"] {
	transition-delay: 250ms;
}

/* The burger is a <button>: no browser chrome of its own, its lines as blocks. */
button.header__main-btn {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.header__main-burger--line {
	display: block;
}

.header__main-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

/* The top menu items are <button>s, so the keyboard reaches them: no chrome of their own. */
button.header__nav-link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

@media (min-width: 1280px) {
	.header__nav-item--sub:focus-within .header__nav-sub {
		visibility: visible;
		transform: translate(0, 0);
		opacity: 1;
	}
}

/* Form fields show where the keyboard is. */
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 .nice-select:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Contrast: the team's positions and a phone link in a dark CTA read at 4.5:1 or better. */
.the-team-section:not(.the-team-section--white) .team-section-active-item__position {
	color: #e8565b;
}

.the-team-section--white .team-section-item__position {
	color: #6e6e6e;
}

/* One lawyer prints no dots: the heading keeps the room the dots' margins gave it on a phone. */
@media screen and (max-width: 767px) {
	.the-team-section .div-block-39:not(:has(> .team-pagination)) > .section-header {
		margin-bottom: 90px;
	}
}

@media screen and (max-width: 767px) {
	.section-copy-copy-copy .text-block-37-d-2 {
		color: #bdbdbd;
	}
}

.cta__text a {
	color: #fff;
	text-decoration: underline;
}

/* The footer's legal links are a 24px target on a phone. */
.footer-sp-link {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* A link inside running text is told apart by more than its colour. */
.slg-rich-text p a:not([class]),
.slg-rich-text li a:not([class]),
.rich-text p a:not([class]),
.rich-text li a:not([class]),
.cases__content-text a:not([class]) {
	text-decoration: underline;
}

/* A phone in a section's plain copy is a link in the copy's own colour, underlined like those. */
.section-text a:not([class]),
.text-block-14 a:not([class]),
.text-block-33 a:not([class]),
.text-block-37-d-copy-copy-copy a:not([class]) {
	color: inherit;
	text-decoration: underline;
}

/* The news cards' source logos are sized by height; the width/height attributes inc/img-autosizes.php
   adds must not fix their width. */
.blog-post-collection-item__source-image,
.blog-post-collection-item__source img {
	width: auto;
}

/* Those attributes keep the image's shape, never a height of their own: any stylesheet height wins. */
:where(img[sizes^="auto"]) {
	height: auto;
}

/* Practice cards below desktop show their text over the photo: the photo's own title would sit on it. */
@media screen and (max-width: 991px) {
	.cases__preview .cases__heading {
		display: none;
	}
}

/* Two CTA buttons that do not fit one phone row stack instead of running off both edges. */
@media screen and (max-width: 767px) {
	.custom-button-container-copy {
		flex-wrap: wrap;
		row-gap: 16px;
	}
}

/* Header menu: a county whose towns open on hover gets the arrow the source's menu lacks. */
@media screen and (min-width: 1280px) and (hover: hover) {
	.loc-menu__link--parent {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.loc-menu__link--parent::after {
		display: block;
		width: 6px;
		height: 6px;
		content: "";
		transition: transform ease 0.3s;
		transform: rotate(-45deg);
		border-right: 1px solid #c1272d;
		border-bottom: 1px solid #c1272d;
	}

	.loc-menu__list-item:hover > .loc-menu__link--parent::after {
		transform: rotate(-45deg) translate(2px, 2px);
	}
}

/* Below the desktop menu a county's towns have no hover: an arrow beside the county opens them under it. */
.loc-menu__toggle {
	display: none;
}

@media screen and (max-width: 1279px), (hover: none) {
	.loc-menu__list-item--parent {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.loc-menu__list-item--parent > .loc-menu__list {
		order: 3;
		flex-basis: 100%;
		padding-top: 0;
	}

	.loc-menu__list-item.loc-menu__list-item--open > .loc-menu__list {
		display: flex;
	}

	.loc-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		order: 2;
		width: 32px;
		height: 32px;
		margin-left: 4px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.loc-menu__toggle::after {
		display: block;
		width: 8px;
		height: 8px;
		content: "";
		transition: transform ease 0.3s;
		transform: translateY(-2px) rotate(45deg);
		border-right: 1px solid #c1272d;
		border-bottom: 1px solid #c1272d;
	}

	.loc-menu__list-item--open > .loc-menu__toggle::after {
		transform: translateY(2px) rotate(-135deg);
	}
}

/* Top bar: a close button at its right end; a closed bar stays hidden for the visit. */
.header__top[hidden] {
	display: none;
}

.header__top-list + .header__top-list {
	margin-left: auto;
}

.header__top-close {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	align-self: center;
}

.header__top-close::before,
.header__top-close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1px;
	content: "";
	background-color: #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}

.header__top-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.header__top-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media screen and (max-width: 1279px) {
	/* Mobile menu: an open second level covers the first, so the phone, Contact Us, socials and payment
	   below the list do not show through it. */
	.header__nav:has(.header__nav-sub--active) > .header__info-bottom {
		display: none;
	}

	/* The source's panel is the screen's height below a 66px header, so its last 66px sat off screen and a
	   second level taller than a landscape screen could not be scrolled to its last link. */
	.header__nav {
		bottom: 0;
		height: auto;
	}

	/* The one "View All" link closes the second list; on mobile it keeps the source's gap after the lists. */
	.header__nav-sub-list-item--all {
		margin-top: 24px;
		padding-bottom: 24px;
	}

	/* Areas We Serve: each list ends in its own tab's "View All Locations", so the general one goes
	   (the menu's script lifts it to the top of the level, out of its item). */
	.header__nav-sub.loc .header__nav-sub-link.highlight {
		display: none;
	}
}

/* Helpful links: an answer's sub-heading is an h3 now, in the h2's dress the source gave it. */
.helpful-links-wrap .slg-rich-text-faq h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 32px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: normal;
	text-transform: uppercase;
}

/* Contrast: text over a photo reads at 4.5:1 (3:1 large) on its lightest part. The source's red on the
   team photo and white on the light half of a hero, a card or a blog photo did not. Voted #1 keeps the
   brand's red; a soft dark patch under that line alone darkens the photo behind it. */
.hero__best-item__red {
	position: relative;
	z-index: 0;
}

.hero__best-item__red::before {
	position: absolute;
	inset: -6px -12px;
	z-index: -1;
	content: "";
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.92);
	border-radius: 12px;
	filter: blur(6px);
}

/* Red on black stops at 3.6:1, so under 768 the line is WCAG large text (14pt bold), where 3:1 holds. */
@media screen and (max-width: 767px) {
	.hero__best-item__red {
		font-size: 19px;
		font-weight: 700;
	}
}

.slg-sm-hero__image.slg-sm-hero__image__gray {
	filter: brightness(40%) grayscale();
}

.slider-blogs__item-image-container::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 60%);
}

.cases__content-filter {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2) 160px);
}

/* Contrast checkers that read only background colours (WAVE) took the white text over the hero and the blog
   photos as white on white. Each gets the black ground it sits on in fact: under the cover photo of a blog
   card, and clipped to the glyphs of the header's links, which the opaque text paints over, so neither
   shows. */
.slider-blogs__item-image-container {
	background-color: #000;
}

.header__main .header__nav-link,
.header__main .info-bottom__link-page:not(:hover) {
	-webkit-background-clip: text;
	background-clip: text;
	background-color: #000;
}

/* The CTA keeps its grey hover fill: the clip returns only once the fill has faded out. */
.header__main .info-bottom__link-page:not(:hover) {
	transition: border-color 0.3s, background-color 0.3s, background-clip 0s 0.3s allow-discrete, -webkit-background-clip 0s 0.3s allow-discrete;
}

/* The review badge's light card (Elfsight) prints its counts a grey a shade darker: 4.6:1 on its #f8f8f8.
   The dark compact badge keeps its own grey. */
.es-card-badge-container .es-badge-reviews-count {
	color: #707070 !important;
}

/* Form section: a plain dark ground instead of the source's noise texture. */
.contact-form-b:not(.hero) {
	background-color: #111;
	background-image: none;
}

.contact-form-b:not(.hero) > .div-block-142 {
	display: none;
}

/* Footer: the red block's copy in regular weight, the bottom bar a size up. */
.footer-section .text-block-10,
.footer-section .footer-disclaimer {
	font-weight: 400;
}

/* A chat floats bottom-right below desktop (JivoChat's phone button: 85px from the screen's bottom), so the
   bar ends with room for it under the credit. */
@media screen and (max-width: 991px) {
	.footer-bottom {
		padding-bottom: 98px;
	}
}

@media screen and (max-width: 767px) {
	.footer-bottom {
		padding-bottom: 50px;
	}
}

@media (min-width: 351px) {
	.footer-bottom .footer-copy-text,
	.footer-bottom .footer-sp-link {
		font-size: 14px;
	}
}

/* Contact popup: the dark ground of the form section, so its black copy and icons turn white. */
.popup-contact-form {
	background-color: #111;
}

.popup-contact-form__address,
.popup-contact-form__address a {
	color: #fff;
}

.popup-contact-form__close svg,
.popup-contact-form__soc-icon svg,
.popup-contact-form__soc-icon svg path {
	fill: #fff;
}

.popup-contact-form .custom-button-type-4 {
	border-color: #fff;
}