/**
 * Styles for every bespoke Page template: Our Firm, Meet Our Team,
 * Testimonials, FAQs, Contact, Practice Areas hub, the shared general
 * practice-area template, Blog index, and the shared legal-page template.
 * Token-driven, consistent with home.css/location.css — not chased through
 * the same exhaustive per-pixel CSS extraction as header/footer.
 */

/* ---------------- Shared simple hero (all inner pages) ----------------
 * Dark breadcrumb hero: background image + navy overlay, a bordered breadcrumb
 * pill (yellow scales separator), a yellow title, and a white subtitle.
 * Left-aligned on desktop, centered on mobile.
 */
.simple-hero {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: bottom center;
	background-color: var(--plf-color-secondary);
	padding: 200px 0 100px;
}

.simple-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--plf-color-secondary);
	opacity: 0.5;
	z-index: 0;
}

.simple-hero .container {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.simple-hero {
		padding: 100px 0 50px;
		text-align: center;
	}
}

.simple-hero__breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--plf-color-border);
	padding: 5px 15px;
	font-family: var(--plf-font-body);
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-accent);
	margin-bottom: 20px;
}

.simple-hero__breadcrumb a {
	color: var(--plf-color-accent);
	text-decoration: none;
}

.simple-hero__breadcrumb i {
	font-size: 18px;
	color: var(--plf-color-yellow);
}

.simple-hero__title,
.simple-hero__title .highlight {
	color: var(--plf-color-yellow);
}

/*
 * Render the heading exactly as it is typed in the editor.
 *
 * base.css capitalises every h1/h2 (carried over from the Elementor Kit), which
 * uppercases the first letter of EVERY word — so "Slip and Fall" comes out as
 * "Slip And Fall". CSS has no notion of title case, so the only way to get the
 * small words right is to stop transforming and let the editor's own casing
 * stand. Applies to every page using the shared hero: locations, practice
 * areas, contact, FAQs, blog, legal.
 */
.simple-hero__title {
	max-width: 700px;
	margin: 0 0 15px;
	text-transform: none;
}

.location-hero__title {
	text-transform: none;
}

.simple-hero__subtitle {
	max-width: 560px;
	margin: 0;
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-accent);
}

.simple-hero__cta {
	margin-top: 25px;
}

@media (max-width: 767px) {
	.simple-hero__title,
	.simple-hero__subtitle {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------------- Our Firm ---------------- */
.our-firm-credentials {
	background-size: cover;
	background-position: center;
	padding: 60px 0;
}

.our-firm-credentials__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.our-firm-credentials__badge,
.our-firm-credentials__counter,
.our-firm-credentials__video {
	flex: 1;
	min-width: 220px;
}

.our-firm-credentials__badge {
	display: flex;
	align-items: center;
	gap: 15px;
}

.our-firm-credentials__badge-icon {
	font-size: 34px;
	color: var(--plf-color-primary);
}

.our-firm-credentials__counter-number,
.our-firm-credentials__counter + span {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 45px;
	color: var(--plf-color-yellow);
}

.our-firm-credentials__video {
	position: relative;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

.our-firm-credentials__video-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--plf-color-accent);
	color: var(--plf-color-secondary);
	padding: 12px 20px;
	text-decoration: none;
	font-weight: 600;
}

.our-firm-about,
.our-firm-why,
.our-firm-team {
	padding: 100px 0;
}

@media (max-width: 767px) {
	.our-firm-about,
	.our-firm-why,
	.our-firm-team {
		padding: 60px 0;
	}
}

.our-firm-about__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 30px 0;
}

.our-firm-about__feature {
	display: flex;
	gap: 15px;
}

.our-firm-about__feature i {
	font-size: 28px;
	color: var(--plf-color-primary);
}

.our-firm-about__feature-title {
	font-weight: 700;
	margin: 0 0 4px;
}

.our-firm-why__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}

.our-firm-why__content,
.our-firm-why__boxes {
	flex: 1 1 45%;
	min-width: 300px;
}

.our-firm-why__boxes {
	display: grid;
	gap: 25px;
}

.our-firm-why__box {
	background: var(--plf-color-bg-cream);
	border: 1px solid var(--plf-color-border);
	padding: 25px;
}

.our-firm-why__box i {
	font-size: 34px;
	color: var(--plf-color-primary);
	margin-bottom: 10px;
	display: inline-block;
}

.our-firm-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 30px;
}

@media (max-width: 1024px) {
	.our-firm-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.our-firm-team__grid {
		grid-template-columns: 1fr;
	}
}

.our-firm-team__member {
	position: relative;
	height: 320px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.our-firm-team__member-info {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
	color: var(--plf-color-accent);
	width: 100%;
	padding: 20px;
}

.our-firm-team__member-name {
	font-family: var(--plf-font-display);
	font-weight: 700;
	margin: 0;
}

.our-firm-team__member-role {
	margin: 2px 0 8px;
	font-size: 14px;
}

.our-firm-team__member-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
}

/* ---------------- Meet Our Team (bios) ----------------
 * Jump-nav pills, alternating photo/content bios (odd rows cream), a white
 * "Harvard" badge + LinkedIn badge on the photo, Aria's 2-column credentials,
 * and a photo-left "Areas of Legal Focus" section.
 */
.team-page__jumpnav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 75%;
	margin: 0 auto;
	gap: 20px;
	padding: 60px 0 0;
}

.team-page__jumpnav a {
	text-align: center;
	padding: 5px 7px;
	border: 1px solid var(--plf-color-primary);
	font-family: var(--plf-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--plf-color-secondary);
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.team-page__jumpnav a:hover {
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
}

@media (max-width: 767px) {
	.team-page__jumpnav {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 20px;
		padding: 50px 30px 0;
	}
	.team-page__jumpnav a {
		font-size: 16px;
	}
}

.team-bio {
	padding: 100px 0;
	scroll-margin-top: 100px;
}

.team-bio--cream {
	background: var(--plf-color-bg-cream);
}

@media (max-width: 767px) {
	.team-bio {
		padding: 50px 0;
	}
}

.team-bio__grid {
	display: flex;
	gap: 50px;
	align-items: stretch;
}

.team-bio--photo-left .team-bio__photo {
	order: 1;
}

.team-bio--photo-left .team-bio__content {
	order: 2;
}

.team-bio--photo-right .team-bio__photo {
	order: 2;
}

.team-bio--photo-right .team-bio__content {
	order: 1;
}

.team-bio__photo {
	position: relative;
	flex: 1 1 40%;
	min-width: 0;
	min-height: 500px;
	background-size: cover;
	background-position: top center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
}

@media (max-width: 767px) {
	/* Shorter photos for the badge-less bios (Carlos, Alejandra, Beau);
	   Aria's stays tall (500px) to fit the Harvard badge. */
	.team-bio__photo:not(:has(.team-bio__badge)) {
		min-height: 350px;
	}
}

.team-bio__content {
	flex: 1 1 60%;
	min-width: 0;
}

@media (max-width: 1024px) {
	.team-bio__grid {
		flex-direction: column;
		align-items: stretch;
	}
	.team-bio__photo,
	.team-bio__content {
		flex-basis: auto;
		width: 100%;
	}
	/* Stack photo above content for every bio, overriding the desktop
	   left/right alternation, so mobile reads photo -> text throughout. */
	.team-bio--photo-left .team-bio__photo,
	.team-bio--photo-right .team-bio__photo {
		order: 0;
	}
	.team-bio--photo-left .team-bio__content,
	.team-bio--photo-right .team-bio__content {
		order: 1;
	}
}

/* LinkedIn badge, pinned to the photo's top-right */
.team-bio__social {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.3s;
}

.team-bio__social:hover {
	background: var(--plf-color-secondary);
}

/* White "Harvard" badge card at the photo's foot */
.team-bio__badge {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	background: var(--plf-color-accent);
	padding: 20px;
}

.team-bio__badge-logo {
	flex: 0 0 auto;
}

.team-bio__badge-logo img {
	width: 137.5px;
	height: 36.6px;
	object-fit: contain;
	display: block;
}

/* Vertical divider between the logo and the caption/name block. */
.team-bio__badge-text {
	border-left: 1px solid var(--plf-color-border);
	padding-left: 15px;
}

.team-bio__badge-caption {
	font-size: 16px;
	line-height: 21px;
	color: var(--plf-color-text-black);
	margin: 0;
}

.team-bio__badge-name {
	font-family: var(--plf-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 21px;
	color: var(--plf-color-primary);
	margin: 6px 0 0;
}

@media (max-width: 767px) {
	/* Stack the Harvard badge vertically and centre it: logo on top, a
	   horizontal rule, then the caption/name centred below. */
	.team-bio__badge {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.team-bio__badge-text {
		width: 100%;
		border-left: 0;
		border-top: 1px solid var(--plf-color-border);
		padding-left: 0;
		padding-top: 15px;
	}
}

/* Bio content */
.team-bio__content .kicker {
	margin-bottom: 20px;
}

.team-bio__body {
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-text-black);
}

.team-bio__body p {
	margin: 0 0 16px;
}

.team-bio .btn {
	margin-top: 10px;
}

/* Credentials (Aria) — 2 columns, filled column-major */
.team-bio__credentials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	gap: 20px 40px;
	margin: 25px 0;
}

@media (max-width: 767px) {
	.team-bio__credentials {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
}

.team-bio__credential {
	display: flex;
	align-items: center;
	gap: 15px;
}

.team-bio__credential i {
	flex: 0 0 auto;
	font-size: 30px;
	line-height: 1;
	padding: 20px;
	border: 1px solid var(--plf-color-primary);
	background: var(--plf-color-accent);
	color: var(--plf-color-primary);
}

.team-bio__credential-title {
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-primary);
	margin: 0 0 5px;
}

.team-bio__credential-text,
.team-bio__credential-text a {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3em;
	color: var(--plf-color-secondary);
	text-decoration: none;
	margin: 0;
}

/* Areas of Legal Focus — photo left, content right */
.team-page__practice {
	padding: 100px 0;
	background: #fff;
}

.team-page__practice .container {
	display: flex;
	gap: 50px;
	align-items: stretch;
}

.team-page__practice-photo {
	flex: 1 1 0;
	min-width: 0;
	min-height: 500px;
	background-size: cover;
	background-position: center;
}

.team-page__practice-content {
	flex: 1 1 0;
	min-width: 0;
}

.team-page__practice-content .kicker {
	margin-bottom: 20px;
}

.team-page__practice-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	gap: 15px 40px;
	margin: 25px 0;
}

.team-page__practice-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--plf-font-body);
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-text-black);
}

.team-page__practice-item i {
	font-size: 15px;
	color: var(--plf-color-primary);
}

@media (max-width: 1024px) {
	.team-page__practice .container {
		flex-direction: column;
	}
	.team-page__practice-photo,
	.team-page__practice-content {
		flex-basis: auto;
		width: 100%;
	}
	.team-page__practice-photo {
		min-height: 350px;
	}
}

@media (max-width: 767px) {
	.team-page__practice {
		padding: 50px 0;
	}
	.team-page__practice-list {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
}

/* ---------------- Testimonials page ----------------
 * Reuses the homepage testimonial cards (.home-testimonials__*, in home.css),
 * so the 3-up grid, card design and mobile swipe-slider are all shared. Only
 * the page's outer spacing is defined here.
 */
.testimonials-page {
	padding-top: 80px;
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	.testimonials-page {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	/* Keep the page's cards stacked top-to-bottom on mobile. (The homepage
	   section turns this same grid into a swipe slider; the page should not.) */
	.testimonials-page .home-testimonials__grid {
		display: grid;
		grid-template-columns: 1fr;
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

/* ---------------- FAQs page ----------------
 * Two-column accordion: numbered blue question bars (navy when open) with a
 * white answer panel. Columns fill top-to-bottom (1–5 left, 6–10 right).
 */
.faqs-page {
	padding: 80px 0;
}

.faqs-page__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--faq-rows, 5), auto);
	align-items: start;
	gap: 20px 30px;
	margin-bottom: 50px;
}

.faq-item {
	align-self: start;
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	cursor: pointer;
	list-style: none;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	padding: 20px 25px;
	transition: background-color 0.2s;
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item[open] .faq-item__question {
	background: var(--plf-color-secondary);
}

.faq-item__icon {
	flex: 0 0 auto;
	font-size: 16px;
	color: var(--plf-color-accent);
}

/* Show the chevron when closed, the up-right arrow when open. */
.faq-item__icon--open {
	display: none;
}

.faq-item[open] .faq-item__icon--closed {
	display: none;
}

.faq-item[open] .faq-item__icon--open {
	display: inline-block;
}

.faq-item__answer {
	background: var(--plf-color-accent);
	border: 1px solid var(--plf-color-border);
	border-top: none;
	padding: 20px 25px;
}

.faq-item__answer p {
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	color: var(--plf-color-secondary);
	margin: 0;
}

.faqs-page__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

@media (max-width: 767px) {
	.faqs-page {
		padding: 50px 0;
	}
	.faqs-page__list {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}
}

/* ---------------- Contact page ---------------- */
.contact-page__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--plf-color-border);
	margin: 60px auto;
}

.contact-page__card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 50px 40px;
}

/* One outer border on the row; thin vertical dividers between the three cards. */
.contact-page__card + .contact-page__card {
	border-left: 1px solid var(--plf-color-border);
}

/* Each icon sits in a solid blue square with a centered white glyph. */
.contact-page__card i {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	font-size: 30px;
}

@media (max-width: 767px) {
	.contact-page__cards {
		grid-template-columns: 1fr;
		/* Inset the bordered box from the screen edges (margin, since the border
		   sits at the border-box edge; padding would only pad inside it). */
		margin: 40px 15px;
		padding: 0;
	}
	.contact-page__card {
		padding: 30px 20px;
	}
	/* Stacked on mobile: dividers run across the top instead of the side. */
	.contact-page__card + .contact-page__card {
		border-left: none;
		border-top: 1px solid var(--plf-color-border);
	}
}

.contact-page__card-title {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 35px;
	line-height: 46px;
	color: var(--plf-color-secondary);
	margin: 0 0 4px;
}

.contact-page__card a {
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	text-decoration: none;
	color: var(--plf-color-secondary);
}

.contact-page__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-bottom: 80px;
}

.contact-page__form,
.contact-page__map {
	flex: 1 1 45%;
	min-width: 300px;
}

.contact-page__map iframe {
	width: 100%;
	height: 100%;
	min-height: 400px;
	border: 0;
}

.contact-page__form h2 {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 35px;
	line-height: 46px;
	color: var(--plf-color-secondary);
	margin: 0 0 12px;
}

/* Direct child only, so Contact Form 7's field <p> wrappers keep their styling. */
.contact-page__form > p {
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	color: var(--plf-color-text-black);
	margin: 0 0 20px;
}

/* ---------------- Practice Areas hub (grouped by location) ----------------
 * One section per city (consistent surface, no bands), each a city heading with
 * an accent underline over a grid of service cards that link to that city's
 * single-location pages. Cards lift on hover for a premium, tactile feel.
 */
.practice-hub__city {
	padding: 55px 0;
}

.practice-hub__city:first-child {
	padding-top: 80px;
}

.practice-hub__city:last-child {
	padding-bottom: 90px;
}

.practice-hub__city-name {
	position: relative;
	margin-bottom: 40px;
	padding-bottom: 18px;
	font-size: var(--plf-h3-size);
	line-height: 1.3em;
}

/* Short blue accent under each city name. */
.practice-hub__city-name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 3px;
	background: var(--plf-color-primary);
}

.practice-hub__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 1024px) {
	.practice-hub__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.practice-hub__city {
		padding: 40px 0;
	}
	.practice-hub__city:first-child {
		padding-top: 50px;
	}
	.practice-hub__city-name {
		font-size: var(--plf-h3-size-mobile);
	}
	.practice-hub__grid {
		grid-template-columns: 1fr;
	}
}

/* Service card: name + arrow, subtle resting shadow, lifts on hover. */
.practice-hub__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	background: var(--plf-color-accent);
	border: 1px solid var(--plf-color-border);
	padding: 28px 30px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba( 28, 58, 89, 0.05 );
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.practice-hub__card:hover {
	transform: translateY(-4px);
	border-color: var(--plf-color-primary);
	box-shadow: 0 16px 34px rgba( 28, 58, 89, 0.14 );
}

.practice-hub__card-name {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3em;
	color: var(--plf-color-secondary);
}

.practice-hub__card i {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--plf-color-primary);
	transition: transform 0.25s;
}

.practice-hub__card:hover i {
	transform: translate( 3px, -3px );
}

/* ---------------- General practice-area page ----------------
 * Persistent 70/30 two-column layout (article + sidebar rail), stacks <=1024.
 * Intro heading 45px, section headings 35px. "Approach" is a 2-col image +
 * checklist. One cream form section at the foot.
 */
.practice-area-page__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 80px 0;
}

.practice-area-page__main {
	flex: 0 0 calc(70% - 10px);
	min-width: 0;
}

.practice-area-page__sidebar {
	flex: 0 0 calc(30% - 10px);
	min-width: 0;
	align-self: flex-start;
}

@media (max-width: 1024px) {
	.practice-area-page__layout {
		flex-direction: column;
	}
	.practice-area-page__main,
	.practice-area-page__sidebar {
		flex-basis: auto;
		width: 100%;
	}
}

/* Mobile: centre the headings + body copy, and the form (moved by JS to sit
   right after the content, before the sidebar). */
@media (max-width: 767px) {
	.practice-area-page__layout {
		padding: 50px 0;
	}
	.practice-area-page__main {
		text-align: center;
	}
	.practice-area-page__checklist li {
		justify-content: center;
	}
	.practice-area-page__layout .practice-area-page__final-cta {
		width: 100%;
		margin: 0;
		padding: 50px 0;
	}
}

/* Intro */
.practice-area-page__intro-image img {
	width: 100%;
	height: 564px;
	object-fit: cover;
	margin-bottom: 25px;
}

@media (max-width: 767px) {
	.practice-area-page__intro-image img {
		height: 200px;
	}
}

/* Intro heading stays 45px (base h2); section headings drop to 35px */
.practice-area-page__section {
	margin-bottom: 40px;
}

.practice-area-page__section h2 {
	font-size: 35px;
}

@media (max-width: 767px) {
	.practice-area-page__section h2 {
		font-size: 30px;
	}
}

/* Images inside content-block sections (location pages) — natural aspect. */
.practice-area-page__section-image {
	margin-bottom: 20px;
}

.practice-area-page__section-image img {
	width: 100%;
	height: auto;
}

.practice-area-page__body p {
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-text-black);
	margin: 0 0 16px;
}

/* Location pages: content authored in the standard WordPress editor
   (headings, paragraphs, lists, images) styled to match the service pages. */
.practice-area-page__content > *:first-child {
	margin-top: 0;
}

.practice-area-page__content h2 {
	font-size: 35px;
	line-height: 1.3em;
	color: var(--plf-color-secondary);
	margin: 40px 0 15px;
}

.practice-area-page__content h3 {
	font-size: 28px;
	line-height: 1.3em;
	color: var(--plf-color-secondary);
	margin: 32px 0 12px;
}

.practice-area-page__content p {
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-text-black);
	margin: 0 0 16px;
}

.practice-area-page__content ul,
.practice-area-page__content ol {
	margin: 0 0 20px;
	padding-left: 22px;
	color: var(--plf-color-text-black);
}

.practice-area-page__content li {
	font-size: 18px;
	line-height: 1.5em;
	margin-bottom: 10px;
}

.practice-area-page__content img {
	max-width: 100%;
	height: auto;
}

.practice-area-page__content figure {
	margin: 24px 0;
}

@media (max-width: 767px) {
	.practice-area-page__content h2 {
		font-size: 30px;
	}
}

/* Approach: image (40%) beside heading + checklist */
.practice-area-page__approach {
	display: flex;
	gap: 30px;
	align-items: stretch;
}

.practice-area-page__approach-image {
	flex: 0 0 40%;
	min-height: 350px;
	background-size: cover;
	background-position: center;
}

.practice-area-page__approach-content {
	flex: 1 1 auto;
}

@media (max-width: 767px) {
	.practice-area-page__approach {
		flex-direction: column;
	}
	.practice-area-page__approach-image {
		flex-basis: auto;
		min-height: 250px;
	}
}

.practice-area-page__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.practice-area-page__checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 18px;
	line-height: 1.4em;
	color: var(--plf-color-text-black);
}

.practice-area-page__checklist i {
	flex: 0 0 auto;
	font-size: 17px;
	color: var(--plf-color-primary);
	margin-top: 4px;
}

/* Sidebar rail */
.practice-area-page__sidebar-section {
	margin-bottom: 20px;
	padding: 30px 20px;
	border: 1px solid var(--plf-color-border);
}

.practice-area-page__sidebar-section h4 {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 31px;
	line-height: 1.3em;
	text-transform: capitalize;
	margin: 0 0 15px;
}

/* Attorney call card — law-library photo behind a navy overlay. */
.practice-area-page__sidebar-section--attorney {
	background-color: var(--plf-color-secondary);
	background-image: linear-gradient( rgba( 28, 58, 89, 0.8 ), rgba( 28, 58, 89, 0.8 ) ), url( /wp-content/uploads/2026/06/law_firm_bg_2.png );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--plf-color-accent);
	border: none;
	text-align: center;
}

.practice-area-page__sidebar-section--attorney h4,
.practice-area-page__sidebar-section--attorney p {
	color: var(--plf-color-accent);
}

.practice-area-page__sidebar-section--attorney p {
	margin-bottom: 20px;
}

.practice-area-page__sidebar-section--attorney .btn {
	justify-content: center;
}

/* Other Practice Areas card */
.practice-area-page__sidebar-section--links {
	background: var(--plf-color-bg-cream);
	border: none;
}

.practice-area-page__sidebar-section--links h4 {
	text-align: center;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--plf-color-border);
	color: var(--plf-color-secondary);
}

.practice-area-page__sidebar-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.practice-area-page__sidebar-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	padding: 15px 25px;
	font-family: var(--plf-font-body);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.3s;
}

.practice-area-page__sidebar-links a:hover {
	background: var(--plf-color-secondary);
}

/* Follow us card — cream with border, label + icons on one centered row. */
.practice-area-page__sidebar-section--social {
	background: var(--plf-color-bg-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.practice-area-page__sidebar-section--social h4 {
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	text-transform: none;
	color: var(--plf-color-secondary);
	margin: 0;
	white-space: nowrap;
}

.practice-area-page__sidebar-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
}

.practice-area-page__sidebar-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.3s;
}

.practice-area-page__sidebar-socials a:hover {
	background: var(--plf-color-secondary);
}

/* Single form section at the foot — cream, left-aligned navy heading */
.practice-area-page__final-cta {
	background: var(--plf-color-bg-cream);
	padding: 80px 0;
}

.practice-area-page__final-cta h2 {
	color: var(--plf-color-secondary);
	margin-bottom: 5px;
}

.practice-area-page__final-cta p {
	color: var(--plf-color-text-black);
	margin-bottom: 30px;
}

/* Heading + intro line centred; the form fields/button stay left-aligned. */
.practice-area-page__final-cta h2,
.practice-area-page__final-cta .container > p {
	text-align: center;
}

/* ---------------- Blog index ---------------- */
.blog-index {
	padding-top: 80px;
	padding-bottom: 80px;
}

.blog-index__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media (max-width: 1024px) {
	.blog-index__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.blog-index {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.blog-index__grid {
		grid-template-columns: 1fr;
	}
}

.blog-card {
	background: var(--plf-color-bg-cream);
	border: 1px solid var(--plf-color-border);
}

.blog-card__thumb {
	position: relative;
	display: block;
}

.blog-card__thumb img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

/* Blue date ribbon, pinned to the photo's bottom-left: big day over month. */
.blog-card__date {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	padding: 10px 14px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	font-family: var(--plf-font-display);
	line-height: 1.1;
	text-align: center;
}

/* Folded-ribbon corner (darker navy triangle at the badge's top-left). */
.blog-card__date::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 12px solid var(--plf-color-secondary);
	border-right: 12px solid transparent;
}

.blog-card__date-day {
	font-weight: 700;
	font-size: 28px;
}

.blog-card__date-month {
	font-weight: 500;
	font-size: 16px;
}

.blog-card__body {
	padding: 25px;
}

.blog-card__body h3 {
	font-size: 24px;
	line-height: 1.25em;
	text-transform: capitalize;
	margin: 0 0 12px;
}

.blog-card__body h3 a {
	color: var(--plf-color-secondary);
	text-decoration: none;
}

.blog-card__body p {
	font-family: var(--plf-font-body);
	font-size: 16px;
	line-height: 1.5em;
	color: var(--plf-color-text-black);
	margin: 0 0 20px;
}

/* Solid blue "Learn More" button (not a plain text link). */
.blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--plf-color-primary);
	color: var(--plf-color-accent);
	padding: 14px 22px;
	font-family: var(--plf-font-body);
	font-weight: 600;
	font-size: 16px;
	text-transform: capitalize;
	text-decoration: none;
	transition: background-color 0.3s;
}

.blog-card__link:hover {
	background: var(--plf-color-secondary);
}

/* ---------------- Single blog post ----------------
 * Centred reading column (featured image, date/time meta, post content) under
 * the shared hero, then a related-posts grid that reuses the blog cards.
 */
/* Match the capitalised hero title in the original single-post design. */
body.single-post .simple-hero__title {
	text-transform: capitalize;
}

/* Scoped to the <main> element: `single-post` is also a WordPress body class,
   so a bare `.single-post` rule would wrongly pad the whole <body>. */
main.single-post {
	padding: 80px 0;
}

.single-post__container {
	max-width: 875px;
	margin: 0 auto;
	padding: 0 20px;
}

.single-post__thumb {
	margin-bottom: 25px;
}

.single-post__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin-bottom: 25px;
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	color: var(--plf-color-secondary);
}

.single-post__meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.single-post__meta i {
	color: var(--plf-color-primary);
	font-size: 18px;
}

/* Content section headings (the migrated posts use h3, block editor may emit
   h2) share the same Cormorant 700 / 35px / 46px navy style. */
.single-post__content h2,
.single-post__content h3 {
	font-family: var(--plf-font-display);
	font-weight: 700;
	font-size: 35px;
	line-height: 46px;
	text-transform: capitalize;
	color: var(--plf-color-secondary);
	margin: 32px 0 12px;
}

.single-post__content p {
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	color: var(--plf-color-secondary);
	margin: 0 0 20px;
}

.single-post__content a {
	color: var(--plf-color-primary);
	text-decoration: underline;
}

.single-post__content ul,
.single-post__content ol {
	margin: 0 0 18px;
	padding-left: 22px;
	color: var(--plf-color-text-black);
	line-height: 1.7em;
}

.single-post__content li {
	margin-bottom: 8px;
}

.single-post__content img {
	max-width: 100%;
	height: auto;
}

.single-post__related {
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	main.single-post {
		padding: 50px 0;
	}
	.single-post__content h2,
	.single-post__content h3 {
		font-size: 28px;
		line-height: 1.3em;
	}
	.single-post__related {
		padding-bottom: 50px;
	}
}

/* ---------------- Locations hub ----------------
 * 4-up cards: a city photo whose lower edge fades into the navy card, then a
 * gold city name, a white uppercase address, and a "Get Direction" link.
 */
.locations-hub {
	padding-top: 80px;
	padding-bottom: 80px;
}

.locations-hub__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 300px));
	justify-content: center;
	gap: 20px;
}

@media (max-width: 1024px) {
	.locations-hub__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.locations-hub {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.locations-hub__grid {
		grid-template-columns: 1fr;
	}
}

.locations-hub__card {
	display: flex;
	flex-direction: column;
	height: 300px;
	background: var(--plf-color-secondary);
	border-radius: 10px;
	overflow: hidden;
	color: var(--plf-color-accent);
	box-shadow: 0 12px 30px rgba( 28, 58, 89, 0.18 );
}

.locations-hub__card-image {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background-color: var(--plf-color-secondary);
	background-size: cover;
	background-position: center top;
}

/* Per-city framing: Sacramento and Seattle have tall skies, so their skylines
   sit lower in the photo — shift the focal point down to the buildings.
   (San Francisco and Los Angeles read well with the default top framing.) */
.locations-hub__card--sacramento .locations-hub__card-image {
	background-position: center 50%;
}

.locations-hub__card--seattle .locations-hub__card-image {
	background-position: center 35%;
}

/* Fade the photo's lower edge into the navy card body. */
.locations-hub__card-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 28, 58, 89, 0 ) 55%, var(--plf-color-secondary) 100% );
}

.locations-hub__card-body {
	position: relative;
	z-index: 1;
	padding: 0 28px 30px;
	margin-top: -8px;
}

.locations-hub__card-body h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	color: var(--plf-color-yellow);
	margin: 0 0 12px;
}

.locations-hub__card-body p {
	font-family: var(--plf-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--plf-color-accent);
	margin: 0 0 18px;
}

.locations-hub__direction {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--plf-color-accent);
	font-family: var(--plf-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
	transition: color 0.3s;
}

.locations-hub__direction:hover {
	color: var(--plf-color-yellow);
}

/* ---------------- Legal pages ---------------- */
.legal-page {
	padding: 60px 0 100px;
	max-width: 900px;
}

@media (max-width: 767px) {
	.legal-page {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.legal-page__body h3 {
	margin-top: 40px;
}

.legal-page__body ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.legal-page__body li {
	margin-bottom: 8px;
}