/*
 * Module: Homepage
 * Owns: .spg-eyebrow, .spg-dark, .spg-cards-row, .spg-card, .spg-feature, .spg-grid-3,
 *       .spg-stats, .spg-stat-label, .spg-stars, .spg-quote, .spg-review, .spg-review-name,
 *       .spg-blog-date, .spg-link-arrow, .spg-role, .spg-cta-phone, .spg-cta-addr,
 *       .spg-btn-gold (uagb buttons), .spg-img
 * Depends on: tokens.css
 */

/* ============================================================
   LAYOUT OWNERSHIP
   Spectra's server CSS from minimal seeded attributes is incomplete,
   so the child theme owns the flex layout for homepage containers.
   ============================================================ */

/* Cap + center inner content of every full-width root section */
.entry-content .uagb-is-root-container > .uagb-container-inner-blocks-wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	width: 100%;
}

/* Every container stacks its children by default */
.entry-content .uagb-container-inner-blocks-wrap {
	display: flex !important;
	flex-direction: column;
}

/* Row sections: side-by-side columns.
   Block-id selectors + !important to beat Spectra's generated column CSS. */
.entry-content .uagb-block-spgintro > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgcon1  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgcon2  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgcon3  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgcon4  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgcon5  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgatt0  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgcta0  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgparow > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgtrow  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgwrow  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgbrow  > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgawrow > .uagb-container-inner-blocks-wrap,
.entry-content .uagb-block-spgstat0 > .uagb-container-inner-blocks-wrap {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: var(--gap-card);
	align-items: center;
}
/* Stats row: compact, left-aligned */
.entry-content .uagb-block-spgstat0 > .uagb-container-inner-blocks-wrap {
	gap: 40px;
	justify-content: flex-start;
	margin-top: 20px;
}
.entry-content .uagb-block-spgstat0 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	flex: 0 0 auto;
	width: auto !important;
}

/* HERO: full-bleed background image, text overlaid left */
.entry-content .spg-hero {
	background-color: var(--color-hero-fade);   /* grey-blue base (not white) */
	background-image:
		linear-gradient(90deg, var(--color-hero-fade) 0%, var(--color-hero-fade) 50%, rgba(var(--color-hero-fade-rgb),0.72) 62%, rgba(var(--color-hero-fade-rgb),0.28) 72%, rgba(var(--color-hero-fade-rgb),0) 84%),
		url('/wp-content/uploads/2026/07/hero-image-3.jpg');
	background-repeat: no-repeat, no-repeat;
	background-position: center, right center;
	background-size: cover, auto 118%;          /* image extends left under the solid-white gradient, then fades in — no hard edge */
	min-height: 540px;
	padding-block: 0 !important;
}
.entry-content .spg-hero > .uagb-container-inner-blocks-wrap {
	min-height: 540px;
	justify-content: center;
	align-items: flex-start;
}
.entry-content .spg-hero-content {
	max-width: 600px !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	align-self: flex-start !important;
	text-align: left;
}
/* QA #53: hero tagline kicker above the H1 */
.entry-content .spg-hero-content .spg-hero-tagline {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: var(--weight-semibold);
	font-size: clamp(18px, 2vw, 22px);
	color: var(--color-alt-brand);
	margin: 0 0 12px;
}
.entry-content .spg-hero-content h1 {
	/* QA #1: smaller so it fits on 2 lines (reviewer suggested ~42–48px) */
	font-size: clamp(32px, 3vw, 44px);
	line-height: 1.15;
	margin-bottom: 22px;
}
.entry-content .spg-hero-content .spg-btn-gold { margin-bottom: 26px; }
.entry-content .spg-hero .spg-stats > .uagb-container-inner-blocks-wrap { margin-top: 8px; }

/* Two-column rows: children share the row */
.entry-content .uagb-block-spgintro > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgcon1  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgcon2  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgcon3  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgcon4  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgcon5  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgatt0  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
.entry-content .uagb-block-spgcta0  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	flex: 1 1 320px;
	min-width: 280px;
}

/* Card rows: 3 equal cards */
.entry-content .spg-cards-row > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	flex: 1 1 260px;
	width: auto !important;
	align-self: stretch;
}
.entry-content .spg-cards-row > .uagb-container-inner-blocks-wrap {
	align-items: stretch;
}

/* Section vertical rhythm fallback */
.entry-content .uagb-is-root-container {
	padding-block: var(--section-padding-y);
	padding-inline: var(--container-padding);
}
.entry-content .spg-cards-row,
.entry-content .spg-stats,
.entry-content .spg-awards-row {
	padding: 0;
}

/* Section heading spacing + size (Astra defaults h2 too small) */
.entry-content .uagb-is-root-container > .uagb-container-inner-blocks-wrap > .wp-block-heading {
	margin-bottom: var(--gap-section-title);
}
.entry-content .uagb-is-root-container h2.wp-block-heading {
	font-size: clamp(34px, 3.8vw, 48px);
	line-height: 1.2;
}

/* Eyebrow labels */
.spg-eyebrow {
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-subheading);
	text-transform: uppercase;
	color: var(--color-alt-brand);
	margin-bottom: 16px !important;   /* QA #6: consistent 16px eyebrow -> heading gap */
}
/* Section-level eyebrows sit in a flex column with a 20px row-gap, so the 16px
   margin was stacking to 36px. Cancel the gap contribution to net ~16px (QA #6). */
.entry-content .uagb-is-root-container > .uagb-container-inner-blocks-wrap > .spg-eyebrow {
	margin-bottom: -4px !important;
}
/* Keep the eyebrow tight to its heading */
.entry-content .spg-eyebrow + .wp-block-heading,
.entry-content .uagb-is-root-container h2.wp-block-heading {
	margin-top: 0;
}
/* Section-level eyebrows (direct child of a root container) center with their heading */
.uagb-is-root-container > .uagb-container-inner-blocks-wrap > .spg-eyebrow {
	text-align: center;
}
/* Awards eyebrow: slimmer + grey */
.entry-content .uagb-block-spgaward .spg-eyebrow {
	color: var(--gray-500);
	font-weight: var(--weight-medium);
	letter-spacing: 0.18em;
}

/* Dark (oxblood) sections: light text */
.spg-dark h1, .spg-dark h2, .spg-dark h3, .spg-dark h4,
.spg-dark p, .spg-dark li {
	color: #ffffff;
}
.spg-dark .spg-eyebrow { color: var(--color-accent); }
.spg-dark .spg-role { color: var(--color-accent); font-weight: var(--weight-semibold); }

/* Attorney section: gradient background */
.entry-content .uagb-block-spgatt0.spg-attorney {
	background-image: radial-gradient(ellipse at 25% 35%, #7d1512 0%, #5b0807 55%, #490604 100%);
}
/* Attorney photo: two gold squares behind the image */
.entry-content .spg-attorney-photo {
	position: relative;
	isolation: isolate;
	display: inline-block;   /* hug the image so the squares tuck behind its corners */
	width: 340px !important;
	max-width: 100% !important;
	align-self: flex-start;
	margin: 0 !important;
}
.entry-content .spg-attorney-photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 340px;
	max-width: 100%;
	height: auto;
}
/* Outlined gold square, top-left */
.entry-content .spg-attorney-photo::before {
	content: "";
	position: absolute;
	top: -22px;
	left: -22px;
	width: 130px;
	height: 130px;
	border: 3px solid var(--color-accent);
	background: transparent;
	z-index: 0;
	pointer-events: none;
}
/* Solid gold square, bottom-right */
.entry-content .spg-attorney-photo::after {
	content: "";
	position: absolute;
	bottom: -22px;
	right: -22px;
	width: 104px;
	height: 104px;
	background: var(--color-accent);
	z-index: 0;
	pointer-events: none;
}

/* Attorney credential badges */
.entry-content .spg-badges > .uagb-container-inner-blocks-wrap {
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 14px;
	margin: 8px 0 24px;
}
.entry-content .spg-badge {
	flex: 0 0 auto;
	width: auto !important;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: var(--radius-sm);
	background: rgba(255,255,255,0.08);
	padding: 10px 16px !important;
	font-size: var(--text-small);
	color: #ffffff !important;
	margin: 0 !important;
}
.entry-content .spg-badge::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var(--color-accent);
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}
.entry-content .spg-badges .spg-badge:nth-child(1)::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='7'/><polyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='7'/><polyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/></svg>");
}
.entry-content .spg-badges .spg-badge:nth-child(2)::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

/* Card rows: flex gap + wrap */
.spg-cards-row > .uagb-container-inner-blocks-wrap {
	gap: var(--gap-card);
	align-items: stretch;
	flex-wrap: wrap;
}
.spg-cards-row.spg-grid-3 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	flex: 1 1 30%;
}

/* Content / testimonial / feature cards */
.spg-card,
.spg-review,
.spg-feature {
	background: #ffffff;
	padding: 28px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	flex: 1 1 0;
}
.spg-dark .spg-feature,
.spg-dark .spg-review {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.18);
	box-shadow: none;
}
.spg-dark .spg-feature h4,
.spg-dark .spg-review p { color: #ffffff; }

/* Testimonials: background image with oxblood overlay + white review cards */
.entry-content .uagb-block-spgtest {
	background-image:
		linear-gradient(rgba(91,8,7,0.88), rgba(91,8,7,0.88)),
		url('/wp-content/uploads/2026/07/reviews-section-background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.entry-content .uagb-block-spgtest .spg-review {
	background: #ffffff !important;
	border: none !important;
	box-shadow: 0 12px 34px rgba(0,0,0,0.22) !important;
}
.entry-content .uagb-block-spgtest .spg-review .spg-quote { color: #3d3d3d !important; font-style: italic; }
.entry-content .uagb-block-spgtest .spg-review .spg-review-name { color: var(--color-brand) !important; }
.entry-content .uagb-block-spgtest .spg-review .spg-stars { color: var(--color-accent) !important; }
/* QA #7: center the "View All Reviews" button under the reviews row */
.entry-content .uagb-block-spgtest .wp-block-buttons {
	justify-content: center !important;
	text-align: center;
}

/* Practice cards: flush uniform image, padded text, no card padding */
.entry-content .spg-card,
.entry-content .spg-card:hover {
	padding: 0 !important;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
	transform: none !important;
	transition: none !important;
	display: flex;
	flex-direction: column;
}
.spg-card figure { margin: 0 !important; border-radius: 0; }
.spg-card figure img {
	display: block;
	width: 100%;
	height: 188px;
	object-fit: cover;
	border-radius: 0;
}
.spg-card h3, .spg-card h4 { padding: 24px 28px 0; margin-bottom: 10px; font-size: var(--text-h5); }
.spg-card p:not(.spg-link-arrow) { padding: 0 28px !important; line-height: 1.6; margin-bottom: 8px !important; }
/* QA #5: tighter gap above "Learn More"; QA #4: ~50% less space below it.
   The old gaps came from the paragraph's default ~26px margins, not padding. */
.spg-card .spg-link-arrow { padding: 4px 28px 0 !important; margin: 0 0 12px !important; }

/* ---- Practice Areas slider ---- */
.entry-content .spg-slider > .uagb-container-inner-blocks-wrap {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 28px !important;
	padding: 12px 0 22px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: stretch !important;
}
.entry-content .spg-slider > .uagb-container-inner-blocks-wrap::-webkit-scrollbar { display: none; }
.entry-content .spg-slider > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	flex: 0 0 calc((100% - 56px) / 3) !important;
	width: calc((100% - 56px) / 3) !important;
	scroll-snap-align: start;
}
/* Round slider nav (injected by slider.js) */
.spg-slider-nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}
.spg-slider-btn {
	width: 48px;
	height: 48px;
	min-width: 48px;
	max-width: 48px;
	padding: 0 !important;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid var(--gray-300);
	background: #ffffff;
	color: var(--color-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
	flex: 0 0 auto;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.spg-slider-btn svg { width: 18px; height: 18px; }
.spg-slider-btn.spg-next { background: var(--color-brand); color: #ffffff; border-color: var(--color-brand); }
.spg-slider-btn:hover { background: var(--color-alt-brand); color: #ffffff; border-color: var(--color-alt-brand); }
@media (max-width: 921px) {
	.entry-content .spg-slider > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container { flex: 0 0 300px !important; width: 300px !important; }
}
@media (max-width: 600px) {
	.entry-content .spg-slider > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container { flex: 0 0 82vw !important; width: 82vw !important; }
}

/* Hero credentials: two stacked lines — "25+ YEARS EXPERIENCE" in the red serif,
   "BOARD CERTIFIED SPECIALIST" in grey beneath it. */
.entry-content .spg-stats > .uagb-container-inner-blocks-wrap {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px !important;
	margin-top: 24px;
}
.entry-content .spg-stats .spg-cred-line {
	font-family: var(--font-heading);
	color: var(--color-brand);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.15;
	margin: 0 !important;
}
.entry-content .spg-stats .spg-cred-sub {
	font-size: var(--text-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-body);
	margin: 0 !important;
}

/* Reviews */
.spg-stars { color: var(--color-accent); font-size: 20px; letter-spacing: 3px; margin-bottom: 12px; }
.spg-quote { font-style: italic; margin-bottom: 12px; }
.spg-review-name { font-weight: var(--weight-bold); }

/* ---- Why Choose Us: gradient bg + white icon cards ---- */
.entry-content .uagb-block-spgwhy0.spg-dark {
	background-image: radial-gradient(ellipse at 72% 15%, #96160f 0%, #5b0807 58%, #470604 100%);
}
.entry-content .uagb-block-spgwhy0 .spg-feature {
	background: #ffffff !important;
	border: none !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
	padding: 32px 30px !important;
	display: block !important;
}
.entry-content .uagb-block-spgwhy0 .spg-feature h4 { color: var(--color-brand) !important; margin-bottom: 12px; }
.entry-content .uagb-block-spgwhy0 .spg-feature p { color: var(--color-body) !important; }
/* QA #8: client-supplied box icons (self-contained red tiles + white glyph) */
.entry-content .uagb-block-spgwhy0 .spg-feature::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.entry-content .uagb-block-spgwhy0 .spg-feature:nth-child(1)::before { background-image: url("../../icons/decades-of-dedicated-practice.svg"); }
.entry-content .uagb-block-spgwhy0 .spg-feature:nth-child(2)::before { background-image: url("../../icons/board-certified.svg"); }
.entry-content .uagb-block-spgwhy0 .spg-feature:nth-child(3)::before { background-image: url("../../icons/tailored-legal-solutions.svg"); }
.entry-content .uagb-block-spgwhy0 .spg-feature:nth-child(4)::before { background-image: url("../../icons/deep-local-roots.svg"); }
.entry-content .uagb-block-spgwhy0 .spg-feature:nth-child(5)::before { background-image: url("../../icons/compassionate-advocacy.svg"); }
.entry-content .uagb-block-spgwhy0 .spg-feature:nth-child(6)::before { background-image: url("../../icons/direct-access.svg"); }

/* Blog date */
.spg-blog-date {
	font-size: var(--text-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-alt-brand);
	margin-bottom: 6px;
}

/* ---- FAQ accordion (borderless rows, gold toggles) ---- */
.entry-content .spg-faq { max-width: 840px !important; margin-inline: auto !important; }
.entry-content .spg-faq .uagb-faq-item {
	border: none !important;
	border-bottom: 1px solid var(--gray-300) !important;
	border-radius: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	box-shadow: none !important;
}
.entry-content .spg-faq .uagb-faq-questions-button {
	padding: 22px 0 !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center;
	gap: 16px;
}
.entry-content .spg-faq .uagb-question { order: 0; flex: 1 1 auto; }
.entry-content .spg-faq .uagb-faq-icon-wrap { order: 1; margin-left: auto; flex: 0 0 auto; }
.entry-content .spg-faq .uagb-question {
	color: var(--color-brand) !important;
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: var(--text-h6);
}
/* QA #20: +/- toggles in a stronger red for legibility (was gold on white) */
.entry-content .spg-faq .uagb-faq-icon-wrap svg,
.entry-content .spg-faq .uagb-icon svg,
.entry-content .spg-faq .uagb-icon-active svg {
	fill: #a51512 !important;
	color: #a51512 !important;
}
.entry-content .spg-faq .uagb-faq-content { padding: 0 0 24px !important; }
.entry-content .spg-faq .uagb-faq-content,
.entry-content .spg-faq .uagb-faq-content p { color: var(--color-body) !important; }

/* QA #3 / #9: whole-card click affordance (JS handles the navigation) */
.spg-clickable { cursor: pointer; }

/* Learn more / read more arrows */
.spg-link-arrow a {
	font-weight: var(--weight-semibold);
	color: var(--color-brand);
	text-decoration: none !important;
}
.spg-link-arrow a:hover { color: var(--color-alt-brand); }

/* QA #21: contact/CTA section background image behind a maroon overlay */
.entry-content .uagb-block-spgcta0 {
	background-image:
		linear-gradient(rgba(91,8,7,0.84), rgba(91,8,7,0.9)),
		url('/wp-content/uploads/2026/07/contact-section-background.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* CTA contact info */
.spg-cta-phone a, .spg-cta-phone { font-size: var(--text-h5); font-weight: var(--weight-bold); color: var(--color-accent); }
.spg-cta-addr { color: #ffffff; }
/* QA #10: icons to the left of the CTA phone + address */
.spg-cta-phone, .spg-cta-addr { display: flex; gap: 10px; }
.spg-cta-phone { align-items: center; }
.spg-cta-addr { align-items: flex-start; }
/* QA #56: two phone numbers in the CTA, each with a small label underneath
   (labels are CSS content, so the block markup stays a plain CFM shortcode). */
.spg-cta-phone--existing,
.spg-cta-phone--new { flex-wrap: wrap; margin-bottom: 4px; }
.spg-cta-phone--existing::after,
.spg-cta-phone--new::after {
	flex-basis: 100%;
	margin-left: 28px;                 /* clear the phone icon (18px + 10px gap) */
	margin-top: 1px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}
.spg-cta-phone--existing::after { content: "Existing Clients"; }
.spg-cta-phone--new::after { content: "New Clients"; }
.spg-cta-phone::before, .spg-cta-addr::before {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: var(--color-accent);
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}
.spg-cta-addr::before { margin-top: 3px; }
.spg-cta-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.spg-cta-addr::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.spg-form-wrap > .uagb-container-inner-blocks-wrap {
	background: #ffffff;
	padding: 32px;
	border-radius: var(--radius-md);
}

/* Gold CTA buttons (core buttons) */
.spg-btn-gold .wp-block-button__link {
	background-color: var(--color-accent) !important;
	border: 2px solid var(--color-accent) !important;
	color: var(--color-brand) !important;
	font-family: var(--font-button);
	font-weight: var(--weight-semibold);
	border-radius: var(--radius-sm) !important;
	padding: 14px 30px;
}
.spg-btn-gold .wp-block-button__link:hover {
	background-color: var(--color-brand) !important;
	border-color: var(--color-brand) !important;
	color: #ffffff !important;
}
/* CTA button spacing */
.spg-btn-gold { margin-top: 8px; }

/* Maroon CTA button (e.g. Read More Blogs) */
.spg-btn-maroon .wp-block-button__link {
	background-color: var(--color-brand) !important;
	border: 2px solid var(--color-brand) !important;
	color: #ffffff !important;
	font-family: var(--font-button);
	font-weight: var(--weight-semibold);
	border-radius: var(--radius-sm) !important;
	padding: 14px 30px;
}
.spg-btn-maroon .wp-block-button__link:hover {
	background-color: var(--color-alt-brand) !important;
	border-color: var(--color-alt-brand) !important;
	color: #ffffff !important;
}

/* Gold offset frame on content images */
.spg-img img { border-radius: var(--radius-md); }
.entry-content .spg-framed {
	position: relative;
	isolation: isolate;
}
.entry-content .spg-framed::before {
	content: "";
	position: absolute;
	top: -18px;
	right: -18px;
	bottom: 24px;
	left: 32%;
	border: 3px solid var(--color-accent);
	z-index: -1;
	pointer-events: none;
}
.entry-content .spg-framed img {
	position: relative;
	z-index: 1;
	box-shadow: 0 16px 34px rgba(0,0,0,0.12);
}
/* This section's frame sits at the bottom-right instead of top-right */
.entry-content .uagb-block-spgcon4 .spg-framed::before {
	top: 24px;
	bottom: -18px;
	right: -18px;
	left: 32%;
}
/* Left-offset gold frame (image-left sections) */
.entry-content .spg-framed-left { position: relative; isolation: isolate; }
.entry-content .spg-framed-left::before {
	content: "";
	position: absolute;
	top: -18px;
	left: -18px;
	right: 32%;
	bottom: 24px;
	border: 3px solid var(--color-accent);
	z-index: -1;
	pointer-events: none;
}
.entry-content .spg-framed-left img {
	position: relative;
	z-index: 1;
	box-shadow: 0 16px 34px rgba(0,0,0,0.15);
}

/* Gravity Forms in CTA */
.spg-form-wrap .gform_wrapper .gform_footer input[type="submit"],
.spg-form-wrap .gform_wrapper .gform_footer button,
.spg-form-wrap .gform_wrapper button.gform_button {
	background-color: var(--color-brand) !important;
	border: none !important;
	color: #ffffff !important;
	font-family: var(--font-button);
	font-weight: var(--weight-semibold);
	width: 100%;
	padding: 16px 24px !important;
	border-radius: var(--radius-sm) !important;
	cursor: pointer;
}
.spg-form-wrap .gform_wrapper .gform_footer input[type="submit"]:hover,
.spg-form-wrap .gform_wrapper button.gform_button:hover {
	background-color: var(--color-alt-brand) !important;
}
.spg-form-wrap .gform_wrapper .gfield_label { font-weight: var(--weight-semibold); }
/* Form disclaimer (a raw HTML field): it sits inside the maroon (.spg-dark) CTA
   section, so it inherited WHITE text — invisible on the white form card and
   ~96px of dead space above the submit button. Make it compact grey small-print. */
.spg-form-wrap .spg-form-disclaimer {
	color: var(--gray-500) !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
	margin: 4px 0 0 !important;
	text-align: left;
}
/* QA #11: tighten the whole form — the big gaps were the 40px row-gap between
   fields, plus the space above the submit button. */
.spg-form-wrap .gform_wrapper .gform_fields { row-gap: 18px !important; }
.spg-form-wrap .gform_wrapper .gform_footer {
	margin-top: 8px !important;
	padding-top: 0 !important;
}

/* Awards row */
.entry-content .spg-awards-row { overflow: hidden !important; padding-inline: 12px; }
.spg-awards-row > .uagb-container-inner-blocks-wrap {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	width: max-content;
	gap: 96px !important;
	align-items: center;
	justify-content: flex-start;
	animation: spg-marquee 22s linear infinite;
}
.spg-awards-row:hover > .uagb-container-inner-blocks-wrap { animation-play-state: paused; }
.spg-awards-row figure {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0;
}
.spg-awards-row figure img { max-height: 74px; width: auto; }   /* QA #19: larger so award badges are readable */
@keyframes spg-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.spg-awards-row > .uagb-container-inner-blocks-wrap { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* Mobile hero readable background — desktop gradient exposes the image under the copy on mobile */
@media (max-width: 921px) {
	.entry-content .spg-hero,
	.spg-hero {
		background-image: none !important;
		background-color: var(--color-hero-fade) !important;
	}
	/* #38 (mobile) — instead of matching the whole Claude mobile mockup (which
	   would clash with the maroon header), just bring the hero photo back as a
	   full-width image BELOW the copy/stats, so it's shown without text on top. */
	.entry-content .spg-hero > .uagb-container-inner-blocks-wrap::after {
		content: "";
		display: block;
		order: 99;                              /* always last, under the stats */
		/* Break out to the section (viewport) edges without causing overflow:
		   the hero root pads by --container-padding, so widen by 2x and shift 1x. */
		width: calc(100% + 2 * var(--container-padding));
		margin-left: calc(-1 * var(--container-padding));
		margin-top: 28px;
		height: 300px;
		background-image: url('/wp-content/uploads/2026/07/hero-image-3.jpg');
		background-size: cover;
		background-position: center 28%;         /* keep faces in frame */
		background-repeat: no-repeat;
	}
	/* Mobile hero: kill the tall min-height and the big gaps around the two
	   stats — they were stacking with 40px gaps + 20/22px stat margins. Sit
	   them side-by-side and tighten so the hero isn't mostly whitespace. */
	.entry-content .spg-hero { min-height: 0 !important; }
	.entry-content .spg-hero-content .spg-btn-gold { margin-bottom: 10px !important; }
	.entry-content .spg-hero .spg-stats > .uagb-container-inner-blocks-wrap {
		margin-top: 4px !important;
	}
}

/* ============================================================
   MOBILE QA — round 3 (Abbey). Phone/tablet polish only;
   the desktop layout is untouched.
   ============================================================ */

/* #37 — the hero tagline sat too close to the header on mobile. */
@media (max-width: 921px) {
	.entry-content .spg-hero > .uagb-container-inner-blocks-wrap {
		min-height: 0;
		padding-top: 34px;
		padding-bottom: 8px;
	}
}

/* #39 / #40 / #42 / #46 — the 80px section padding is too tall on phones, and
   the image+text sections (spgcon*) were staying 2-column and cramped, which is
   what read as "uneven padding". Trim the vertical padding and STACK the
   columns so each is full-width with even spacing. (Hero keeps its own padding.) */
@media (max-width: 768px) {
	.entry-content .uagb-is-root-container:not(.spg-hero) {
		padding-block: 46px !important;
	}
	.entry-content .uagb-block-spgintro > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgcon1  > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgcon2  > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgcon3  > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgcon4  > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgcon5  > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgatt0  > .uagb-container-inner-blocks-wrap,
	.entry-content .uagb-block-spgcta0  > .uagb-container-inner-blocks-wrap {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 24px !important;
	}
	.entry-content .uagb-block-spgintro > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgcon1  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgcon2  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgcon3  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgcon4  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgcon5  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgatt0  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	.entry-content .uagb-block-spgcta0  > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
		width: 100% !important;
		flex: 1 1 auto !important;
	}
}

/* #41 — center the "View All Reviews" button on phones/tablet */
@media (max-width: 768px) {
	.entry-content .uagb-block-spgtest .wp-block-buttons {
		justify-content: center !important;
		width: 100%;
	}
}

/* PA slider: the nav arrows had 36px top margin (78px total above) vs 46px
   below — trim the top so the gap above the arrows matches the gap below. */
@media (max-width: 768px) {
	.entry-content .spg-slider-nav { margin-top: 4px !important; }
}

/* #43 — Why Choose Us: swipe carousel on phones (desktop keeps the grid).
   `:has(> .spg-feature)` targets whichever inner wrap directly holds the cards. */
@media (max-width: 600px) {
	.entry-content .uagb-block-spgwhy0 .uagb-container-inner-blocks-wrap:has(> .spg-feature) {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: 14px !important;
		padding-bottom: 14px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.entry-content .uagb-block-spgwhy0 .uagb-container-inner-blocks-wrap:has(> .spg-feature)::-webkit-scrollbar {
		display: none;
	}
	.entry-content .uagb-block-spgwhy0 .spg-feature {
		flex: 0 0 80vw !important;
		width: 80vw !important;
		max-width: 330px;
		scroll-snap-align: center;
	}
}

/* #44 — Blogs: swipe carousel on phones (overrides Spectra's CSS grid). */
@media (max-width: 600px) {
	.entry-content .spg-blog-grid {
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: 14px;
		padding-bottom: 14px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.entry-content .spg-blog-grid::-webkit-scrollbar { display: none; }
	.entry-content .spg-blog-grid > article.uagb-post__inner-wrap {
		flex: 0 0 80vw !important;
		width: 80vw !important;
		max-width: 330px;
		scroll-snap-align: center;
	}
}

/* #45 — clamp blog card description to 3 lines so the cards aren't so tall
   (site-wide; keeps the equal-height grid tidy on every breakpoint). */
.entry-content .spg-blog-grid .uagb-post__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* #47 — trim the whitespace between the Case Details field and the submit
   button on mobile (the last field's block gets no extra tail gap). */
@media (max-width: 768px) {
	.spg-form-wrap .gform_wrapper .gform_fields { row-gap: 16px !important; }
	.spg-form-wrap .gform_wrapper .gform_footer { margin-top: 6px !important; }
	.spg-form-wrap .gform_wrapper textarea { min-height: 118px; }
}