/**
 * Barnes Firm — design layer
 *
 * Elementor writes colors inline per widget, so the site had accumulated four
 * accent colors: the logo green, a navy-slate, a gold, and two leftover Elementor
 * stock defaults (#6EC1E4 blue, #61CE70 green) that nobody ever replaced.
 *
 * This file reduces that to one system:
 *   ink    — structure (bars, footer, dark bands, headings)
 *   gold   — action (buttons, and nothing else)
 *   green  — the logo, and confirming accents (checkmarks, list icons)
 *
 * !important is used deliberately. Elementor's generated selectors are (0,4,0)
 * and its element class names are per-widget, so an override layer cannot win on
 * specificity alone.
 *
 * NOTE ON --bf-dark: Elementor gives every section a stable per-element class, so
 * the dark surfaces are enumerated by id below. Any text rule that forces a color
 * has to be reversed inside those, otherwise body copy on the navy bands goes dark
 * on dark. If a new dark section is added in Elementor, add its id to that list.
 */

:root {
	--bf-ink: #1b2a38;
	--bf-ink-deep: #142230;
	--bf-slate: #2c3e50;

	--bf-gold: #c9a84c;
	--bf-gold-hi: #d8b85e;

	--bf-green: #71bf45;

	--bf-body: #3d4550;
	--bf-muted: #5c6672;

	--bf-mist: #f4f6f8;
	--bf-line: #dde3ea;

	--bf-on-dark: rgba(255, 255, 255, 0.88);
	--bf-on-dark-dim: rgba(255, 255, 255, 0.68);

	/*
	 * Link color is its own token, not an alias of --bf-slate. They were the same
	 * variable once, so flipping slate to white for the dark bands also turned
	 * links white on light sections that happened to sit inside one.
	 */
	--bf-link: #2c3e50;

	--bf-radius: 6px;
	--bf-radius-lg: 10px;
	--bf-ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);
	--bf-shadow: 0 1px 2px rgba(20, 34, 48, 0.08), 0 2px 8px rgba(20, 34, 48, 0.06);
	--bf-shadow-hi: 0 2px 4px rgba(20, 34, 48, 0.12), 0 8px 20px rgba(20, 34, 48, 0.12);
}

/* ---------------------------------------------------------------- type ---- */

body {
	color: var(--bf-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-image-box-title,
.elementor-icon-box-title {
	font-family: "Roboto Slab", Georgia, "Times New Roman", serif !important;
	letter-spacing: -0.01em;
	line-height: 1.22;
}

/* Body copy was #7A7A7A. Readable but washy for long passages. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p {
	color: var(--bf-body) !important;
	line-height: 1.72;
}

.elementor-widget-text-editor p + p {
	margin-top: 1.1em;
}

/* --------------------------------------------------------------- links ---- */

/*
 * Global link color was the logo green (#71BF45), which is 2.27:1 on white.
 * Slate reads as a link because of the underline, and passes at 10.4:1.
 */
/*
 * :not(.elementor-button) is load-bearing. The page templates wrap their content
 * in a theme-post-content widget, so `.elementor-widget-theme-post-content a`
 * matches every button on the site at (0,1,1) and outranks `.elementor-button`
 * at (0,1,0) — buttons inherited link color instead of their own.
 */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button),
.elementor-image-box-title a:not(.elementor-button),
.elementor-icon-box-title a:not(.elementor-button) {
	color: var(--bf-link) !important;
	text-decoration-color: rgba(44, 62, 80, 0.35);
	text-underline-offset: 3px;
	transition: color var(--bf-ease), text-decoration-color var(--bf-ease);
}

.elementor-widget-text-editor a:not(.elementor-button):hover,
.elementor-widget-theme-post-content a:not(.elementor-button):hover {
	color: var(--bf-ink) !important;
	text-decoration-color: var(--bf-gold);
}

/* Card titles link to a whole card — underlining them reads as noise. */
.elementor-image-box-title a,
.elementor-icon-box-title a {
	text-decoration: none;
}

.elementor-image-box-title a:hover,
.elementor-icon-box-title a:hover {
	color: var(--bf-gold) !important;
}

/* -------------------------------------------------------- dark surfaces ---- */

/*
 * Every navy/black section on the site. The rules above force text colors for the
 * light pages; these reverse them so copy on the dark bands stays legible.
 */
.elementor-element-hdrutilbar,
.elementor-element-884d1ae,
.elementor-element-ae5b818,
.elementor-element-bl001,
.elementor-element-bl005,
.elementor-element-re001aa,
.elementor-element-re005aa,
.elementor-element-fl001aa,
.elementor-element-fl005aa,
.elementor-element-hub0hero,
.elementor-element-f0a1b2c3,
.elementor-element-jb-s4,
.elementor-element-jl-s4,
.elementor-element-ot-s4,
.elementor-element-au_s4,
.elementor-location-footer {
	--bf-body: var(--bf-on-dark);
	--bf-muted: var(--bf-on-dark-dim);
	--bf-link: #ffffff;
	--bf-line: rgba(255, 255, 255, 0.28);
}

/*
 * a:not(.elementor-button) in the descendant selector, not a bare a. Elementor
 * wraps a button label in two nested spans, and this rule matched them at
 * (0,1,2) while `.elementor-button-content-wrapper { color: inherit }` only
 * reaches (0,1,0). The label was pinned white no matter what the anchor did,
 * which was invisible at rest because the anchor is white too, and became white
 * on white the moment the ghost button hovered to a white fill.
 */
.elementor-element-hdrutilbar :is(a:not(.elementor-button), .elementor-heading-title) :is(a, span),
.elementor-element-hdrutilbar .elementor-heading-title,
.elementor-element-hdrutilbar a:not(.elementor-button),
.elementor-location-footer a:not(.elementor-button) {
	color: #fff !important;
	text-decoration: none;
	transition: color var(--bf-ease);
}

.elementor-element-hdrutilbar a:not(.elementor-button):hover,
.elementor-location-footer a:not(.elementor-button):hover {
	color: var(--bf-gold) !important;
}

/* ------------------------------------------------------------- buttons ---- */

.elementor-button,
.elementor-button-link,
input[type="submit"],
button[type="submit"] {
	border-radius: var(--bf-radius) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	transition: background-color var(--bf-ease), color var(--bf-ease),
		border-color var(--bf-ease), box-shadow var(--bf-ease), transform var(--bf-ease);
	background-color: var(--bf-gold) !important;
	color: var(--bf-ink) !important;
	border: none !important;
	box-shadow: var(--bf-shadow);
}

/*
 * Elementor puts the label in a nested span and colors that span, not the anchor,
 * so setting color on .elementor-button alone leaves white-on-gold at 2.29:1.
 */
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-icon,
.elementor-button-content-wrapper {
	color: inherit !important;
}

.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-button-link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--bf-gold-hi) !important;
	color: var(--bf-ink-deep) !important;
	box-shadow: var(--bf-shadow-hi);
	transform: translateY(-1px);
}

.elementor-button:active,
.elementor-button-link:active {
	transform: translateY(0);
	box-shadow: var(--bf-shadow);
}

.elementor-button:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible {
	outline: 2px solid var(--bf-gold);
	outline-offset: 3px;
}

.elementor-widget-button .elementor-button {
	padding-block: 14px;
	padding-inline: 32px;
}

/*
 * Top-bar utilities are navigation, not conversion. Three gold buttons stacked
 * above the hero flattens the hierarchy, so these go ghost against the ink bar.
 */
.elementor-element-hdrutilbar .elementor-button {
	background-color: transparent !important;
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
	box-shadow: none;
	padding-block: 7px;
	padding-inline: 16px;
}

.elementor-element-hdrutilbar .elementor-button:hover {
	background-color: #fff !important;
	color: var(--bf-ink) !important;
	border-color: #fff !important;
	box-shadow: none;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------ surfaces ---- */

/*
 * The header bar and footer were #54595F (Elementor stock warm gray) while the
 * in-page bands were #2C3E50 navy. On the service pages a navy CTA sat directly
 * on top of the gray footer and the seam was visible. One dark now.
 */
.elementor-element-hdrutilbar,
.elementor-element-aa11bb22 {
	background-color: var(--bf-ink) !important;
}

/* Disclaimer strip sits under the footer proper and should recede. */
.elementor-element-ff66aa77 {
	background-color: var(--bf-ink-deep) !important;
}

/* ----------------------------------------------------- footer + header ---- */

/*
 * Footer headings were #6EC1E4 on gray — 2.9:1. Gold on ink is 6.3:1.
 * The extra specificity beats Elementor's per-widget (0,4,0) title_color rule.
 */
body .elementor-location-footer .elementor-widget-heading > .elementor-widget-container > .elementor-heading-title {
	color: var(--bf-gold) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-icon-list-text {
	color: var(--bf-on-dark) !important;
}

/*
 * The four footer columns are 285px wide with padding 0, so they butt edge to
 * edge and only avoid colliding because the current copy happens to be short.
 */
.elementor-location-footer .elementor-top-section:first-of-type .elementor-column {
	padding-inline-end: 36px;
}

.elementor-location-footer .elementor-top-section:first-of-type .elementor-column:last-child {
	padding-inline-end: 0;
}

@media (max-width: 1024px) {
	.elementor-location-footer .elementor-top-section:first-of-type .elementor-column {
		padding-inline-end: 24px;
		margin-bottom: 28px;
	}
}

/*
 * The header sits on white, where gold text is 2.29:1. The active and hover states
 * carry the gold as an underline instead and keep the label at full contrast.
 */
.elementor-location-header .elementor-nav-menu .elementor-item {
	font-weight: 500;
	position: relative;
	transition: color var(--bf-ease);
}

.elementor-location-header .elementor-nav-menu .elementor-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--bf-gold);
	transform: scaleX(0);
	transition: transform var(--bf-ease);
}

.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--bf-ink) !important;
}

.elementor-location-header .elementor-nav-menu .elementor-item:hover::after,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active::after {
	transform: scaleX(1);
}

/* Dropdown children sit on their own panel and have no room for the underline. */
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item::after,
.elementor-location-header .sub-menu .elementor-item::after {
	display: none;
}

/*
 * The dropdown was white-on-white on hover. Elementor ships hover as #FFF text on
 * a #3F444B panel, but a later inline rule resets the background to transparent
 * and the color to `inherit`, so the dark panel vanished and the white text stayed
 * on a white menu. Both ends are stated here rather than left to inherit.
 */
.elementor-location-header .elementor-nav-menu--dropdown {
	background-color: #fff !important;
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	box-shadow: var(--bf-shadow-hi);
	overflow: hidden;
	padding-block: 4px;
}

.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
	color: var(--bf-ink) !important;
	background-color: transparent !important;
	border-left: 3px solid transparent;
	transition: background-color var(--bf-ease), border-color var(--bf-ease);
}

.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item:focus-visible,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
	color: var(--bf-ink) !important;
	background-color: var(--bf-mist) !important;
	border-left-color: var(--bf-gold);
}

/* -------------------------------------------------------------- forms ---- */

.elementor-field-group .elementor-field,
.elementor-field-textual,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	border-radius: var(--bf-radius) !important;
	border: 1px solid var(--bf-line) !important;
	background-color: #fff !important;
	color: var(--bf-body) !important;
	padding: 12px 14px !important;
	transition: border-color var(--bf-ease), box-shadow var(--bf-ease);
}

.elementor-field-textual:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--bf-gold) !important;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.28) !important;
	outline: none;
}

.elementor-field-group > label {
	color: var(--bf-ink) !important;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

::placeholder {
	color: var(--bf-muted) !important;
	opacity: 1;
}

/* Footer inputs sit on ink and keep a light face for contrast with the bar. */
.elementor-location-footer .elementor-field-textual {
	color: var(--bf-ink) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

.elementor-location-footer ::placeholder {
	color: #5c6672 !important;
}

/* ------------------------------------------------------------- accents ---- */

/*
 * Green stays as the "included / verified" mark, which is where it already is.
 * It is never text on white — 2.27:1 — so only icons keep it.
 */
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
	color: var(--bf-green) !important;
	fill: var(--bf-green) !important;
}

/* Stock Elementor blue had leaked into icon boxes alongside the gold. */
.elementor-icon-box-icon .elementor-icon,
.elementor-icon-box-icon .elementor-icon i,
.elementor-icon-box-icon .elementor-icon svg {
	color: var(--bf-gold) !important;
	fill: var(--bf-gold) !important;
}

/* --------------------------------------------------------------- cards ---- */

.elementor-testimonial {
	border-radius: var(--bf-radius-lg);
	border: 1px solid var(--bf-line);
	background: #fff;
	box-shadow: var(--bf-shadow);
}

/*
 * Swiper sizes every slide to the tallest quote in the set. One nine-line review
 * was forcing a 328px row while most cards need ~220px, so short cards sat in a
 * pool of empty white. Clamping the quote pulls the row height down, and
 * stretching the card to the slide keeps the bottoms aligned.
 */
.elementor-widget-reviews .swiper-slide {
	height: auto;
	display: flex;
}

.elementor-widget-reviews .elementor-testimonial {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: 4px;
}

.elementor-widget-reviews .elementor-testimonial__content {
	flex: 1;
}

.elementor-widget-reviews .elementor-testimonial__text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.swiper-pagination-bullet-active {
	background-color: var(--bf-gold) !important;
}

/*
 * Rating stars carry meaning, so they fall under the 3:1 non-text contrast rule.
 * The stock amber was 2.13:1 on white; this reads the same at a glance and passes.
 * The Reviews page renders its own markup and sets its own star color in
 * barnes-redirects.php — that copy is fixed there.
 */
.elementor-star-rating i,
.elementor-star-rating__wrapper i,
.elementor-widget-reviews .elementor-star-rating i {
	color: #b8860b !important;
}

/* ------------------------------------------------------ service pages ---- */

/*
 * Business Law, Family Law and Real Estate are the three children of Legal
 * Services (id 158), so WordPress gives all three `parent-pageid-158`. That is
 * preferred over the Elementor element ids used further up, because the three
 * pages share a structure but not a single id — bl001 / fl001aa / re001aa are
 * the same section three times.
 *
 * Every selector here also carries `.elementor-widget-theme-post-content`. The
 * body class covers the whole document, so without it these rules reach the
 * header and footer too — the first version wrapped the footer address
 * mid-line and turned the disclaimer strip into a narrow column.
 */

/*
 * The hero was 400px of min-height inside 80px of padding, so 560px of
 * photograph sat between the page title and the first sentence. On a 900px
 * screen the intro paragraph started below the fold entirely.
 *
 * Only the min-height is set here, because it wants to be responsive and the
 * Elementor control cannot hold a clamp. The padding is a flat 48px and lives
 * in the database, applied by 05-service-pages.php, so the editor and the front
 * end agree on it.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-section-height-min-height > .elementor-container {
	min-height: clamp(180px, 22vw, 280px) !important;
}

/*
 * All three heroes already carried a flat 50% black overlay, so the "hero text
 * has no scrim" note in the handoff was wrong. What is true is that a flat 50%
 * is not enough everywhere: on Real Estate the tagline ends over the pale
 * clipboard, where white text measures about 2.9:1 against the darkened
 * photograph and misses the 3:1 that large text needs.
 *
 * A directional gradient fixes the corner the text actually occupies and lets
 * the rest of the photograph come back up, which raising the flat overlay would
 * not. Elementor sets background-color plus opacity on this element, so both
 * have to be neutralised or the flat black stays underneath the gradient.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-section-height-min-height > .elementor-background-overlay {
	background-color: transparent !important;
	background-image: linear-gradient(
		100deg,
		rgba(12, 20, 28, 0.82) 0%,
		rgba(12, 20, 28, 0.66) 60%,
		rgba(12, 20, 28, 0.32) 100%
	) !important;
	opacity: 1 !important;
}

/*
 * The page H1 prints "Family Law" and the hero printed a second line under it
 * at 36px, so the hero outranked the actual page title and neither read as the
 * headline. The hero line is a tagline and is now sized and weighted as one.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-section-height-min-height .elementor-heading-title {
	font-size: clamp(20px, 2vw, 26px) !important;
	font-weight: 400;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/*
 * The intro paragraph ran the full 1100px container at 16px, which is about 140
 * characters per line against a comfortable 60 to 75.
 *
 * It is set as a lede at 19px rather than dropped to body size. At 17px a
 * comfortable measure is only 575px, which left half the container empty and
 * made the paragraph look orphaned under a full-width photograph. 19px carries
 * the same character count across 670px, so the column has enough presence to
 * read as a deliberate text block and its right edge lands near where the
 * checklist's second column starts.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-widget-text-editor,
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-widget-text-editor p {
	font-size: 19px !important;
	line-height: 1.7;
}

/*
 * 62ch, not 70. The ch unit is the width of a zero, which is wider than the
 * average lowercase letter in Roboto, so the measure runs about 15% longer than
 * the ch count suggests. 62ch lands at roughly 71 real characters.
 *
 * Flush left, so the intro starts on the same edge as the H1 above it, the hero
 * tagline, and the checklist below. Centered, it sat in a 250px indent that
 * lined up with nothing.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-widget-text-editor > .elementor-widget-container {
	max-width: 62ch;
}

/*
 * The CTA band is the exception: one short centered line, so its box gets
 * centered instead. These are the same three section ids the dark surfaces
 * block above already enumerates.
 */
.elementor-element-bl005 .elementor-widget-text-editor > .elementor-widget-container,
.elementor-element-fl005aa .elementor-widget-text-editor > .elementor-widget-container,
.elementor-element-re005aa .elementor-widget-text-editor > .elementor-widget-container {
	margin-inline: auto;
}

body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-icon-list-text {
	font-size: 17px;
}

/*
 * The quote sat at 20.8px with the review headline under it at 16px bold, so
 * the label read as more important than the quote it belonged to. The quote now
 * carries the weight and the line under it is real attribution — see
 * 06-service-testimonials.php, which put a named review on each page.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-testimonial-content {
	font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
	font-size: clamp(19px, 1.7vw, 22px) !important;
	line-height: 1.6;
	color: var(--bf-ink) !important;
	max-width: 62ch;
	margin-inline: auto;
}

/*
 * Decorative opening quote mark. It is generated content rather than a
 * character in the quote itself, so screen readers do not announce it and the
 * copy in the database stays exactly what the client wrote.
 */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-testimonial-content::before {
	content: "\201C";
	display: block;
	/* Georgia first here. Roboto Slab draws this glyph small and thin in its em
	   box, so at any size that reads as a mark it looks like two stray ticks. */
	font-family: Georgia, "Times New Roman", serif;
	font-size: 72px;
	line-height: 0.72;
	color: var(--bf-gold);
	margin-bottom: 6px;
}

body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-testimonial-meta {
	margin-top: 22px;
}

/* A person's name, so sentence case rather than the label treatment. */
body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-testimonial-name {
	font-size: 15px !important;
	font-weight: 600;
	color: var(--bf-ink) !important;
}

body.parent-pageid-158 .elementor-widget-theme-post-content .elementor-testimonial-job {
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bf-muted) !important;
	margin-top: 5px;
}

/* ----------------------------------------------------- attorney pages ---- */

/*
 * Jeffrey Barnes and Jennifer Lehr are the two children of Our Team (18).
 *
 * Elementor gives a column no horizontal padding of its own, so the two-column
 * rows in the grey block met with nothing between them but the 10px that each
 * widget wrap carries. On Lehr's page the Background prose stopped 20px short of
 * the "Bar Admissions" heading and the two columns read as one ragged block.
 *
 * :not(:only-child) keeps this off the single-column CTA band, which would
 * otherwise take the inset on both sides for no reason.
 */
body.parent-pageid-18 .elementor-widget-theme-post-content .elementor-top-section > .elementor-container > .elementor-column:first-child:not(:only-child) {
	padding-inline-end: 24px;
}

body.parent-pageid-18 .elementor-widget-theme-post-content .elementor-top-section > .elementor-container > .elementor-column:last-child:not(:only-child) {
	padding-inline-start: 24px;
}

/* Columns stack below 767px, where a gutter is just a dead inset. */
@media (max-width: 767px) {
	body.parent-pageid-18 .elementor-widget-theme-post-content .elementor-top-section > .elementor-container > .elementor-column {
		padding-inline: 0;
	}
}

/* ------------------------------------------------------------- rhythm ---- */

/* Page titles sat 32px above a full-bleed hero and read as orphaned. */
.elementor-widget-theme-page-title .elementor-heading-title,
.page .entry-title {
	color: var(--bf-ink) !important;
	font-size: clamp(30px, 3.4vw, 42px) !important;
	margin-bottom: 0.5em;
}

@media (max-width: 767px) {
	.elementor-element-hdrutilbar .elementor-button {
		width: 100%;
	}
}

/* ------------------------------------------ mobile type and targets ---- */

/*
 * The home page and the shared header and footer were built at desktop sizes
 * and never got a mobile pass: body copy sat at 12px to 14px and the footer
 * links were 19px tall against a 44px tap target guideline. The service pages
 * were already fine at 19px, so nothing here touches them.
 *
 * Every size below is written inline into _elementor_data by the page build,
 * so an external stylesheet only wins with !important. Same reason the colour
 * rules further up this file carry it.
 */
@media (max-width: 767px) {

	/* --- the four "Our Principles" and three "What We Handle" cards ------ */

	.elementor-element-hp-exp-c1w p,
	.elementor-element-hp-exp-c2w p,
	.elementor-element-hp-exp-c3w p,
	.elementor-element-9p7h6vq p,
	.elementor-element-o2g0v9z p,
	.elementor-element-1hvhv84 p,
	.elementor-element-oyo0ya9 p {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	/* The card heading is the first paragraph, the copy is the second. */
	.elementor-element-hp-exp-c1w p:first-of-type,
	.elementor-element-hp-exp-c2w p:first-of-type,
	.elementor-element-hp-exp-c3w p:first-of-type,
	.elementor-element-9p7h6vq p:first-of-type,
	.elementor-element-o2g0v9z p:first-of-type,
	.elementor-element-1hvhv84 p:first-of-type,
	.elementor-element-oyo0ya9 p:first-of-type {
		font-size: 18px !important;
	}

	/* --- Jeff's home page bio ------------------------------------------- */

	.elementor-element-73bc762 p {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	/* The gold uppercase role sits above the name as a label, not body copy,
	   so it stays small but gets enough size to survive the letter-spacing. */
	.elementor-element-73bc762 p:first-of-type {
		font-size: 14px !important;
	}

	/* "Full Profile" carries its own inline size and is an inline element, so
	   it escaped both the paragraph rule and any tap target. */
	.elementor-element-73bc762 a {
		font-size: 16px !important;
		display: inline-block;
		padding-block: 12px;
	}

	/* --- reviews carousel ------------------------------------------------ */

	.elementor-widget-reviews .elementor-testimonial__text {
		font-size: 16px !important;
		line-height: 1.6 !important;
	}

	.elementor-widget-reviews .elementor-testimonial__name {
		font-size: 16px !important;
	}

	.elementor-widget-reviews .elementor-testimonial__title {
		font-size: 13px !important;
	}

	/* --- header utility bar ---------------------------------------------- */

	/* The phone number is the main conversion on a handset and was an 18px
	   tall, 15px line of text. */
	.elementor-element-utilphone,
	.elementor-element-utilphone p,
	.elementor-element-utilphone a {
		font-size: 17px !important;
	}

	/* Every phone link, not just the header one: the CTA bars on the service
	   and attorney pages carry their own, sitting inline at 22px tall. */
	a[href^="tel:"] {
		display: inline-block;
		padding-block: 12px;
	}

	/* Elementor's per-widget rule for this button is (0,3,1) and carries no
	   !important, so it beats a plain override here on specificity alone. */
	.elementor-element-hdrutilbar .elementor-button {
		font-size: 15px !important;
		padding-block: 12px !important;
	}

	/* --- buttons --------------------------------------------------------- */

	.elementor-button,
	input[type="submit"],
	button[type="submit"] {
		font-size: 16px !important;
	}

	/* --- forms ------------------------------------------------------------ */

	/*
	 * iOS Safari zooms the whole viewport when a field with a font size below
	 * 16px takes focus, and then leaves the page zoomed. The contact form and
	 * the footer mailing list both sat at 15px, so tapping the first field on
	 * an iPhone threw the layout every time.
	 */
	.elementor-field-textual,
	.elementor-field-group .elementor-field,
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea,
	select {
		font-size: 16px !important;
	}

	.elementor-field-group > label {
		font-size: 15px !important;
	}

	/* --- footer ---------------------------------------------------------- */

	/* The attorney advertising disclaimer is the one block on the site that
	   has to stay legible, and it was the smallest text on the page. */
	.elementor-element-ff66cc99 p {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}

	/* The four column headings sit at 15px, below the copy they introduce. The
	   selector mirrors the footer heading rule further up this file, which is
	   also !important and would otherwise win on specificity. */
	body .elementor-location-footer .elementor-widget-heading > .elementor-widget-container > .elementor-heading-title {
		font-size: 16px !important;
	}

	/* Quick links were inline elements with no padding, giving a 19px target
	   against the 44px guideline. */
	.elementor-location-footer .elementor-widget-text-editor a,
	.elementor-location-footer .elementor-widget-theme-post-content a {
		display: inline-block;
		padding-block: 11px;
	}

	.elementor-location-footer .elementor-widget-text-editor p {
		margin-block: 0;
	}
}

/* --------------------------------------------- mobile section rhythm ---- */

/*
 * Sections were built on a desktop cadence of 40px to 64px top and bottom, so
 * on a handset consecutive sections stacked into 100px to 120px voids, close to
 * a quarter of the viewport doing nothing. The attorney page ran 4,588px tall,
 * about nine and a half screens.
 *
 * This cannot be a blanket rule on top-level sections: the home hero and the
 * post content wrappers sit at 0 padding, and a shared value would *add* space
 * to them. Only sections that actually carry 40px or more are listed, which is
 * every one of them site-wide as of this pass. A new page built at desktop
 * spacing needs its section adding here.
 */
@media (max-width: 767px) {

	/* Padding on both edges. */
	.elementor-element-aa11bb22,
	.elementor-element-ot-s1,
	.elementor-element-ot-s2,
	.elementor-element-ot-s3,
	.elementor-element-jb-s1,
	.elementor-element-jb-s2,
	.elementor-element-jl-s1,
	.elementor-element-jl-s2,
	.elementor-element-hub0hero,
	.elementor-element-a1b2c3d4,
	.elementor-element-b2c3d4e5,
	.elementor-element-f0a1b2c3,
	.elementor-element-fl001aa,
	.elementor-element-fl002aa,
	.elementor-element-fl004aa,
	.elementor-element-fl005aa,
	.elementor-element-re001aa,
	.elementor-element-re002aa,
	.elementor-element-re004aa,
	.elementor-element-re005aa,
	.elementor-element-bl001,
	.elementor-element-bl002,
	.elementor-element-bl004,
	.elementor-element-bl005 {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}

	/* These deliberately butt against the section above, so only the bottom
	   edge comes down. */
	.elementor-element-jb-s3,
	.elementor-element-jl-s3,
	.elementor-element-fl003aa,
	.elementor-element-re003aa,
	.elementor-element-bl003,
	.elementor-element-revpg01 {
		padding-bottom: 26px !important;
	}

	/*
	 * The page title banner comes from the Single template, so its 34px above
	 * and 16px below applied on every page. Combined with the first content
	 * section's own padding it opened a 90px gap between the page title and the
	 * content it introduces.
	 */
	.elementor-element-sp01title {
		padding-top: 18px !important;
		padding-bottom: 6px !important;
	}

	/*
	 * Horizontal padding was built for a wide column and never adjusted: the
	 * "Who We Are" section carried 80px each side, so on a 485px screen 160px
	 * went to margins and the copy ran at 36 characters a line against a
	 * comfortable 45 to 75.
	 *
	 * 16px here plus the wrapper's own 10px leaves a 26px gutter, which is
	 * enough to keep text off the edge.
	 *
	 * Scoped to `section` because the same padding values appear on button
	 * widgets, where they set the button's own width.
	 */
	section.elementor-element-ot-s1,
	section.elementor-element-ot-s2,
	section.elementor-element-ot-s3,
	section.elementor-element-jb-s1,
	section.elementor-element-jb-s2,
	section.elementor-element-jb-s3,
	section.elementor-element-jl-s1,
	section.elementor-element-jl-s2,
	section.elementor-element-jl-s3,
	section.elementor-element-fzdeent,
	section.elementor-element-mfan8g4,
	section.elementor-element-vp3ge5u,
	section.elementor-element-4li2mvi {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/*
	 * Two Elementor defaults that apply to every widget on every page, so they
	 * compound: 20px under each widget and 10px of vertical padding inside each
	 * column wrapper. On the attorney page alone that was 660px, more than the
	 * section padding above it.
	 *
	 * The horizontal 10px stays: it is the gutter that keeps text off the
	 * screen edge.
	 */
	.elementor-widget:not(:last-child) {
		margin-bottom: 14px;
	}

	/* Elementor sets this through a (0,3,0) selector, so the plain class alone
	   loses on specificity. */
	.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
	.elementor-widget-wrap.elementor-element-populated {
		padding-block: 5px !important;
	}
}

/*
 * Desktop carries the same desktop-built spacing, and on the service pages it
 * reads worse than the home page: 47% of a family law page was padding and
 * margin, with a 215px void between the hero image and the first paragraph and
 * 140px before the testimonial band.
 *
 * Desktop can hold more air than a handset, so these come down by roughly a
 * third rather than the half applied above.
 */
@media (min-width: 768px) {
	/* Currently 60 to 64px. */
	.elementor-element-hub0hero,
	.elementor-element-a1b2c3d4,
	.elementor-element-f0a1b2c3,
	.elementor-element-fl002aa,
	.elementor-element-fl004aa,
	.elementor-element-fl005aa,
	.elementor-element-re002aa,
	.elementor-element-re004aa,
	.elementor-element-re005aa,
	.elementor-element-bl002,
	.elementor-element-bl004,
	.elementor-element-bl005 {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}

	/* Currently 48 to 50px. */
	.elementor-element-ot-s1,
	.elementor-element-ot-s2,
	.elementor-element-ot-s3,
	.elementor-element-jb-s1,
	.elementor-element-jl-s1,
	.elementor-element-b2c3d4e5,
	.elementor-element-fl001aa,
	.elementor-element-re001aa,
	.elementor-element-bl001 {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}

	/* Bottom edge only: these butt against the section above by design. */
	.elementor-element-fl003aa,
	.elementor-element-re003aa,
	.elementor-element-bl003,
	.elementor-element-jb-s3,
	.elementor-element-jl-s3,
	.elementor-element-revpg01 {
		padding-bottom: 38px !important;
	}

	/* Elementor's 10px of vertical padding inside every column wrapper totalled
	   620px on the home page alone. */
	.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
	.elementor-widget-wrap.elementor-element-populated {
		padding-block: 7px !important;
	}
}

/* The CTA band and the two home page section headers sit just under the 40px
   threshold above but still read heavy on a handset. */
@media (max-width: 767px) {
	.elementor-element-ot-s4,
	.elementor-element-fcb57d4,
	.elementor-element-hp-exp-hdr,
	.elementor-element-hp-prin-hdr,
	.elementor-element-mfan8g4,
	.elementor-element-ae5b818 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* ------------------------------------------------ long-form content ---- */

/*
 * Pages whose body is ordinary WordPress content rather than Elementor widgets
 * (the privacy policy is the only one with headings today) inherited a broken
 * scale: h2 rendered at 32px against a 30px page title, so section headings
 * outranked the title, and h3 sat 2px under that. Everything was weight 500,
 * so nothing read as a heading at all.
 *
 * The steps below run 30 / 24 / 19 / 16 off the existing h1.
 *
 * Spacing was also inverted: 8px above a heading and 16px below put each one
 * nearer the previous section's last line than its own copy. Headings now lead
 * their section.
 */
.elementor-widget-theme-post-content h2 {
	font-size: 24px !important;
	font-weight: 700 !important;
	margin-top: 48px !important;
	margin-bottom: 12px !important;
	line-height: 1.3;
}

.elementor-widget-theme-post-content h3 {
	font-size: 19px !important;
	font-weight: 700 !important;
	margin-top: 30px !important;
	margin-bottom: 8px !important;
	line-height: 1.35;
}

/* An h2 opening the page should not push itself away from the title banner. */
.elementor-widget-theme-post-content > h2:first-child,
.elementor-widget-theme-post-content > *:first-child > h2:first-child {
	margin-top: 0 !important;
}

/* An h3 directly under its parent h2 belongs to it, so it loses the full gap. */
.elementor-widget-theme-post-content h2 + h3 {
	margin-top: 16px !important;
}

.elementor-widget-theme-post-content p {
	margin-bottom: 16px !important;
}

/*
 * Legal copy ran the full 1120px column, about 140 characters a line against a
 * comfortable 65 to 75. Capped per page rather than on the post content widget
 * itself, because every Elementor-built page renders its sections inside that
 * same widget and a width cap there would break their full-bleed bands.
 */
body.page-id-3 .elementor-widget-theme-post-content h2,
body.page-id-3 .elementor-widget-theme-post-content h3,
body.page-id-3 .elementor-widget-theme-post-content p,
body.page-id-3 .elementor-widget-theme-post-content ul,
body.page-id-3 .elementor-widget-theme-post-content ol,
body.page-id-77 .elementor-widget-theme-post-content h2,
body.page-id-77 .elementor-widget-theme-post-content h3,
body.page-id-77 .elementor-widget-theme-post-content p,
body.page-id-77 .elementor-widget-theme-post-content ul,
body.page-id-77 .elementor-widget-theme-post-content ol {
	max-width: 68ch;
}

/* -------------------------------------------------------- our team ---- */

/*
 * The service cards get a shared 3:2 ratio so their columns line up whatever
 * the source image. The attorney headshots are portrait (252x317), so that
 * landscape ratio cropped them top and bottom and took the tops of their heads
 * off. They were also rendering at 144px from the widget's 30% image width.
 *
 * Page 18 is the only place these two headshots appear, so the ratio is
 * released back to the file's own and the image sized close to its native
 * 252px instead of a third of that.
 */
body.page-id-18 .elementor-widget-image-box .elementor-image-box-img {
	width: min(240px, 70%) !important;
}

body.page-id-18 .elementor-widget-image-box .elementor-image-box-img img {
	aspect-ratio: auto;
	object-fit: fill;
}

/* ------------------------------------------------------ mobile nav ---- */

/*
 * The collapsed menu panel and every nested sub-menu both carry
 * .elementor-nav-menu--dropdown, so the panel chrome further up this file
 * painted a bordered card inside a bordered card. On a handset that read as a
 * cramped floating box with the attorney names walled off in their own tile.
 *
 * The chrome belongs to the outer panel only. Sub-menus become plain indented
 * rows, and the panel spans the full width so "Our Team" stops wrapping onto
 * two lines.
 */
@media (max-width: 767px) {
	/*
	 * Elementor leaves the panel in normal flow, so opening the menu grew the
	 * header from 160px to 250px and shoved the logo down the page. Taking it
	 * out of flow keeps the header a fixed height and lets the menu overlay the
	 * content instead.
	 *
	 * Its nearest positioned ancestor was the menu widget, only 126px wide, so
	 * `width: 100%` resolved to 126px. Elementor animates `transform` on this
	 * panel to slide it open, so centring with translateX is not available
	 * either: that declaration gets overwritten mid-animation.
	 *
	 * Clearing `position: relative` off the wrappers between the panel and the
	 * header section leaves the section itself as the anchor, which is already
	 * full width. Nothing inside the header is absolutely positioned against
	 * those wrappers, so dropping them costs nothing.
	 */
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .elementor-widget-wrap,
	.elementor-location-header .elementor-column,
	.elementor-location-header .elementor-container {
		position: static;
	}

	.elementor-location-header nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 99;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	/*
	 * Elementor animates max-height and scaleY together on close. It sets
	 * max-height to 8440px against a panel 138px tall, so that half of the pair
	 * does nothing for most of its 0.3s and then snaps, while scaleY squashes
	 * smoothly the whole time. The two disagreeing is the stutter on close.
	 *
	 * The panel already clips with overflow:hidden, so max-height alone hides
	 * it and the transform is redundant. Dropping both the transform and the
	 * transition gives a clean instant open and close.
	 */
	.elementor-location-header nav.elementor-nav-menu--dropdown {
		transform: none !important;
		transition: none !important;
	}

	/* max-height:0 clips the list but not the panel's own padding and border,
	   leaving a 10px white sliver under the header while closed. */
	.elementor-location-header nav.elementor-nav-menu--dropdown[aria-hidden="true"] {
		padding-block: 0;
		border-width: 0;
	}

	/* The burger sat 118px short of the edge, stranded in open space. Its
	   container is a *column* flex box, so the horizontal axis is controlled by
	   align-items, not justify-content. */
	.elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container {
		align-items: flex-end;
	}

	.elementor-location-header .elementor-menu-toggle {
		margin-left: auto !important;
		margin-right: 0 !important;
	}

	/* The logo is centred inside a 320px widget, floating it 75px off the left
	   edge. A header logo belongs at the margin. */
	.elementor-location-header .elementor-widget-theme-site-logo,
	.elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container {
		text-align: left;
	}

	.elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
		background-color: transparent !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding-block: 0;
	}

	/* 13px is a desktop size and reads small on a handset. 16px with 11px of
	   padding gives a ~42px row, past the 44px-ish tap target once the border
	   is counted, and full width means labels still fit on one line. */
	.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item,
	.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
		padding: 11px 20px;
		font-size: 16px;
		line-height: 1.25;
		white-space: nowrap;
	}

	/* Children read as children by indent, not by being boxed off. */
	.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
		padding-left: 38px;
		padding-block: 10px;
		font-size: 15px;
	}

	/* Hairline between top-level rows so the list scans as a list. */
	.elementor-location-header .elementor-nav-menu--dropdown > ul > li + li {
		border-top: 1px solid var(--bf-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button,
	.elementor-button-link,
	input[type="submit"],
	button[type="submit"] {
		transition: none;
	}

	.elementor-button:hover,
	.elementor-button-link:hover {
		transform: none;
	}
}