/**
 * Amity — the homepage bands.
 *
 * Everything here is keyed off a class an editor sets on a framework/section
 * (Advanced > Additional CSS class), or off a framework block's own classes.
 * Nothing is keyed off a page id or a template, so the same band can be reused
 * on any page.
 *
 * Loads after amity-chrome.css; see inc/setup.php.
 */

/* --------------------------------------------------------------------------
   Shared: the dotted rule under every band heading
   -------------------------------------------------------------------------- */

/* The section selector is not decoration: amity-design.css styles bare `hr`,
   and without the extra specificity that wins and the rule renders solid grey
   on every band. */
.fw-section .amity-rule,
.amity-rule {
	border: 0;
	border-top: 2px dotted var(--amity-rule-color, #d0d0d0);
	max-width: 60rem;
	margin: 0 auto 2.5rem;
	opacity: 1;
	background: none;
	height: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* 33vw, not a pixel height: the old theme sized the hero off the viewport so
   the staff photo keeps its crop at every width. */
.amity-hero {
	min-height: 33vw;
}

.amity-hero .fw-section__inner {
	padding: 0;
	min-height: 33vw;
}

@media (max-width: 640px) {
	.amity-hero,
	.amity-hero .fw-section__inner { min-height: 56vw; }
}

/* --------------------------------------------------------------------------
   Intro band — heading, copy, buttons, Fear Free badge
   -------------------------------------------------------------------------- */

.amity-intro {
	text-align: center;
}

.amity-intro h1 {
	margin-top: 0;
	text-align: center;
	/* Live's is 32px on a 48px line with 30px beneath it. The rebuild used the
	   default 1.2 ratio and no bottom margin, which closed the gap under the
	   heading by 30px and shortened the line by 10. */
	line-height: 48px;
	margin-bottom: 30px;
}

/* Live's text column is 1050 of the 1330 rail — 78.95%, not 80. The extra
   14px let one more word onto each line and dropped the intro paragraph from
   three lines to two, which is the difference you actually see.

   Desktop only. Below the breakpoint live stacks the columns full width, and
   holding the text to 78.95% there squeezed the homepage copy into 284px of a
   360px column. */
@media (min-width: 783px) {
	.amity-intro .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 78.95%;
		max-width: 78.95%;
	}
}

/* Live's intro copy fills the text column — no reading-width cap, no auto
   centring. Capping it pulled every line 112px in from the left. The column
   selector outranks Gutenberg's `:where(.is-layout-flow) > *` blockGap, which
   was adding 24px above every paragraph where live has none. */
.amity-intro .wp-block-column p,
.amity-intro p {
	max-width: none;
	margin-inline: 0;
	margin-block: 0 16px;
}

.amity-ff-badge {
	margin: 0;
}

.amity-ff-badge img {
	display: block;
	width: 100%;
	max-width: 190px;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 782px) {
	.amity-ff-badge img { max-width: 150px; margin-block-start: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Video band
   -------------------------------------------------------------------------- */

.amity-video {
	text-align: left;
}

/* Gutenberg's layout CSS — `:root :where(.is-layout-flow) > :first-child` —
   computes to (0,2,0) and beats a plain `.amity-video p`. The column selector
   is here to outrank it, not for readability. */
.amity-video .wp-block-column p,
.amity-video p {
	text-align: left;
	margin-block: 16px 0;
}

.amity-video .amity-readmore {
	display: inline-block;
	color: var(--amity-pink, #B25F55);
	font-weight: 600;
}

.amity-video .wp-block-buttons {
	margin-block-start: 1.25rem;
}

/* --------------------------------------------------------------------------
   Newsletter band
   -------------------------------------------------------------------------- */

.amity-newsletter {
	text-align: center;
	/* The rabbit hangs below the band and over the olive testimonials strip,
	   exactly as it does on the live site, so this one band must not clip.
	   Not clipping is only half of it: the olive band is the next sibling,
	   so without a stacking order of its own it painted over the overhang
	   and cut the rabbit off at the band edge. */
	overflow: visible;
	position: relative;
	z-index: 1;
}

.amity-newsletter .fw-section__inner {
	overflow: visible;
}

.amity-newsletter__title {
	color: var(--amity-grey, #5A5A5A);
	font-weight: 400;
	text-transform: none;
	text-align: center;
	margin-block-end: 1rem;
}

/* The rabbit is the newsletter band's decoration, not a column. As a column it
   set the row height and made the band 120px taller than live's; as a
   decoration it is out of flow and simply overhangs into the olive band below,
   which is exactly what it does on the live site. */
/* Aligned to the content rail, not the viewport edge: on a full-bleed band
   `left: 0` puts the rabbit against the browser chrome, half a screen away
   from the form it belongs to. */
.amity-newsletter .fw-section__decor {
	/* Live drops it 45px past the band edge, not 56. */
	bottom: -45px;
	left: max(1.25rem, calc((100% - 87.5rem) / 2 + 1.25rem));
	max-width: none;
}

@media (max-width: 782px) {
	.amity-newsletter .fw-section__decor { display: none; }
}

/* The Contact Form 7 markup carries its own title paragraph, so there is no
   heading block above it. Live sets it grey at 24/36 and LEFT aligned — not
   pink and centred — sitting in the right-hand two thirds of the rail. */
.amity-newsletter .wpcf7 .title {
	color: var(--fw-grey, #5A5A5A);
	font-size: 24px;
	line-height: 36px;
	text-align: left;
	margin-block: 2px 1rem;
}

/* The empty first third live leaves for the rabbit. */
.amity-newsletter .wpcf7 {
	margin-left: 33.33%;
}

.amity-newsletter .wpcf7 .grid-x {
	justify-content: flex-start;
}

.amity-newsletter .wpcf7 .grid-x > .cell.medium-4 {
	flex: 0 0 287px;
}

/* The signup form: name, email and submit on one line, rounded pills.
   Contact Form 7 wraps every field in its own <p>, so the flex items are those
   paragraphs — the title and the live-region status line have to be forced onto
   their own rows or they push the fields into a column. */
.amity-newsletter form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}

.amity-newsletter form > p {
	margin: 0;
	flex: 0 1 auto;
}

.amity-newsletter form > p.title,
.amity-newsletter form > p[role="status"],
.amity-newsletter form > .wpcf7-response-output {
	flex: 0 0 100%;
}

.amity-newsletter form > p[role="status"]:empty {
	display: none;
}

.amity-newsletter .wpcf7-form-control-wrap {
	display: block;
}

.amity-newsletter input[type="text"],
.amity-newsletter input[type="email"] {
	flex: 1 1 12rem;
	height: 40px;
	padding-inline: 1rem;
	border: 1px solid #c5ce9f;
	border-radius: 20px;
	background: #fff;
}

/* Out-specifies the content-form submit rule further down, which paints the
   contact form's darker #6F7553. Live's newsletter strip uses the lighter
   green, and adding that rule quietly darkened this button. */
.entry-content .amity-newsletter :is(input[type="submit"], button[type="submit"]),
.amity-newsletter input[type="submit"],
.amity-newsletter button[type="submit"] {
	flex: 0 1 14rem;
	height: 40px;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 20px;
	background: var(--amity-green, #95A372);
	color: #E1F1EF;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.amity-newsletter input[type="submit"]:hover,
.amity-newsletter button[type="submit"]:hover {
	background: #899164;
}

/* --------------------------------------------------------------------------
   Testimonials band — olive, white text, gold stars
   -------------------------------------------------------------------------- */

.amity-testimonials {
	--amity-rule-color: #b0b592;
	text-align: center;
}

.amity-testimonials h2 {
	color: #fff;
}

.amity-testimonials .wp-block-buttons {
	margin-block-start: 2.5rem;
}

/* Live wraps this button row in `#testimonials-link`, which carries an
   absolutely positioned <hr> across its middle. The buttons sit on top of it
   on a white fill, so the dotted rule reads as running behind them. The row is
   inside `#testimonials` on every page live renders it, so the rule is always
   the olive tint rather than the default grey.

   Drawn as a ::before rather than a separator block, because `core/buttons`
   accepts only buttons as children — this is live's RENDERING reproduced, not
   its markup. */
.amity-testimonials-link {
	position: relative;
	margin-block-start: 1.875rem;
}

.amity-testimonials-link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	border-top: 2px dotted #b0b592;
	transform: translateY(-50%);
}

.amity-testimonials-link .wp-block-button {
	position: relative;
	z-index: 1;
}

/* Live drops the rule on narrow screens, where the buttons stack. */
@media only screen and (max-width: 749px) {
	.amity-testimonials-link::before {
		display: none;
	}
}

.fw-testimonial-cards {
	--fw-slider-arrow-bg: rgba(255, 255, 255, 0.85);
	--fw-slider-arrow-color: #5A5A5A;
}

/* With a limit set there is nothing to scroll, so drop the snap track and let
   the cards be a plain row that wraps. */
.fw-testimonial-cards--static .fw-slider__track {
	overflow: visible;
	scroll-snap-type: none;
	flex-wrap: wrap;
	justify-content: center;
}

.fw-testimonial-card {
	text-align: center;
	gap: 0.75rem;
	color: inherit;
}

/* White belongs to the olive band, where these cards sit on colour. In
   page content - the testimonials page - they sit on white, and live
   renders the quote in body grey. Inheriting covers both. */
.amity-testimonials .fw-testimonial-card {
	color: #fff;
}

/* A 3:2 rounded rectangle, not a circle: live frames these with the same
   `ratio-3to2` box it uses everywhere else, and a circle crops the speaker's
   head out of a 16:9 video still. */
.fw-testimonial-card__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: 0 0 1.25rem;
	overflow: hidden;
	background: transparent;
}

.fw-testimonial-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The play badge is white-on-transparent here, not the pink disc the standard
   video thumbnail uses — it sits over a photo inside an olive band. */
.fw-testimonial-card__media .fw-video-thumb__play {
	width: 58px;
	height: 58px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--amity-pink, #B25F55);
}

/* Inherit from the card: white in the olive band, body grey in page
   content. Hard-coding #fff here rendered the quotes white on white on
   the testimonials page, where the grid is not in a band. */
.fw-testimonial-card__quote p,
.fw-testimonial-card__author p {
	color: inherit;
	margin-block: 0 0.75rem;
	font-size: 0.95rem;
	line-height: 1.5;
}


.fw-testimonial-card__author p {
	margin-block-end: 0.5rem;
}

/* Live renders the attribution in clay where the card sits on white. In the
   olive band it stays white with the rest of the card. */
.fw-testimonial-card__author p {
	color: var(--fw-primary);
}

.amity-testimonials .fw-testimonial-card__author p {
	color: #fff;
}

/* Directly under the author, not pinned to the bottom of the card: pinning
   leaves the stars in a detached row of their own when the quotes are
   different lengths. */
.fw-testimonial-card__stars {
	margin: 0;
	padding-block-start: 0.25rem;
	color: #FFC107;
	line-height: 1;
}

.fw-testimonial-card__stars svg {
	display: inline-block;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Amity Academy band
   -------------------------------------------------------------------------- */

.amity-academy {
	--amity-rule-color: #d9c3c0;
	text-align: center;
}

/* The section selector beats amity-design.css's bare h3 rule, which sets
   text-transform: none and would otherwise win on source order. */
.fw-section .amity-academy .amity-slide-title,
.amity-academy .amity-slide-title,
.amity-academy h3.amity-slide-title {
	color: var(--amity-pink, #B25F55);
	text-transform: uppercase;
	text-align: center;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	margin-block-end: 1.25rem;
}

/* Live's education slider uses `.button.big`: uppercase, wider, a touch
   larger. Everything inside this band gets it. */
.amity-academy .wp-block-button__link,
.amity-academy .button {
	text-transform: uppercase;
	/* Uppercase yes, tracking no — live's are `normal`, and 0.03em widened
	   every button in the band by 4 to 6px. */
	letter-spacing: normal;
	padding-inline: 2rem;
}

.amity-academy .wp-block-columns {
	gap: 1.5rem;
}

.amity-academy .wp-block-image img {
	border-radius: 0.9375rem;
}

/* Live's dots sit at the LEFT of the content rail, not centred under the
   slide: its `.slick-dots` is 150px wide and starts on the rail's left edge.
   Centring them put the whole group 610px out of position, which no page
   height check could ever have noticed. */
.amity-academy .fw-slider__dots {
	--fw-slider-dot: transparent;
	--fw-slider-dot-active: var(--amity-pink, #B25F55);
	justify-content: flex-start;
	gap: 15px;
	margin-block-start: 2rem;
}

/* Live shows hollow squares that fill in when active, not circles.
   18px on an 18px pitch of 15px, and a 3px corner — measured off live's
   `.slick-dots button`, not estimated. */
.amity-academy .fw-slider__dot {
	width: 18px;
	height: 18px;
	border: 2px solid var(--amity-pink, #B25F55);
	border-radius: 3px;
}

.amity-academy .fw-slider__dot[aria-selected="true"] {
	transform: none;
}

/* The band heading is centred but the slides are not: live's `.slick-slide`
   is text-align start, and the rebuild inherited the band's centring right
   through to the body copy. Slides that live DOES centre carry the modifier
   class below, set on the block in the editor. */
.amity-academy .fw-slide__inner { text-align: left; }

.amity-academy .fw-slide.amity-slide--center .fw-slide__inner { text-align: center; }

/* A slide that is not in view must not be reachable by tab: a keyboard user
   would otherwise walk through five slides' worth of hidden links. */
.amity-academy .fw-slide[aria-hidden="true"] { visibility: hidden; }

/* --------------------------------------------------------------------------
   Services band — salmon, white text, dotted rule
   -------------------------------------------------------------------------- */

.amity-services {
	--amity-rule-color: #dab3ae;
	text-align: center;
}

.amity-services h2 {
	color: #fff;
}

.amity-services .fw-service-card {
	color: #fff;
}

.amity-services .fw-service-card__media {
	border-radius: 15px;
}

.amity-services .fw-service-card__title,
.amity-services .fw-service-card__title a {
	color: #fff;
	font-size: 1.05rem;
	text-transform: none;
}

.amity-services .fw-slider__dot {
	background: transparent;
	border: 2px solid #fefefe;
}

.amity-services .fw-slider__dot[aria-selected="true"] {
	background: #fefefe;
}

.amity-services {
	--fw-slider-arrow-bg: transparent;
	--fw-slider-arrow-color: #fff;
	/* Live's arrows are bare Font Awesome chevrons: `.slick-arrow:hover` sets
	   nothing but `cursor: pointer`. The framework block defaults the hover
	   background to #fff, which drew a white disc over the chevron. */
	--fw-slider-arrow-bg-hover: transparent;
}

.amity-services .fw-slider__arrow {
	box-shadow: none;
}

/* Live draws these as a 40px Font Awesome chevron, not the framework's small
   rotated-border tick: 25 wide by 40 tall, in white, sitting clear of the
   cards rather than overlapping them. A 28px square with 5px borders rotated
   45 degrees is the same V — height is side x sqrt(2), so 28 gives 40. */
.amity-services .fw-slider__arrow span {
	width: 28px;
	height: 28px;
	border-width: 5px;
}

/* Live's chevrons sit at x=320 and x=1575 against cards that start at 395 and
   end at 1525 — 50px clear on each side. The framework's default offset of
   half the button width tucks them inside the first and last card instead. */
@media (min-width: 768px) {
	.amity-services .fw-slider__arrow--prev { left: -85px; }
	.amity-services .fw-slider__arrow--next { right: -85px; }
}

/* Room for the arrows to sit outside the cards, as they do on live — which
   also sets the card width, and through it the 3:2 image height. */
@media (min-width: 768px) {
	.amity-services .fw-slider {
		width: calc(100% - 200px);
		margin-inline: auto;
	}
}

/* Live's service card: an 18.72px title tight under the image, then the button.
   No excerpt on these pages, so nothing between them. */
.amity-services .fw-service-card { gap: 0; }

.amity-services .fw-service-card__media { margin-block-end: 0.75rem; }

.amity-services .fw-service-card__title,
.amity-services .fw-service-card__title a {
	font-size: 1.17rem;
	line-height: 1.15;
	margin-block-end: 0.5rem;
}

.amity-services .fw-service-card__cta { padding-block-start: 0.25rem; }

/* --------------------------------------------------------------------------
   Blog index — post cards
   -------------------------------------------------------------------------- */

.amity-postgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 1.875rem;
	margin-block: 2.5rem;
}

/* Live's blog card is a clay panel, not a white one: the image runs flush to
   the top with square corners, and everything below it sits on
   rgb(178, 95, 85) in white, left aligned. The rebuild had a white card with a
   centred clay title and a green pill button — the same content in a
   completely different design. Measured off live's `.cell.post` / `.nav-box`. */
.amity-postcard {
	display: flex;
	flex-direction: column;
	background: var(--fw-primary, #B25F55);
	color: #fff;
	text-align: left;
	overflow: hidden;
}

.amity-postcard__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	/* Square, and hard against the panel below it. */
	border-radius: 0;
	background: var(--fw-light-grey, #E2E2E2);
	margin-block-end: 0;
}

.amity-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.amity-postcard:hover .amity-postcard__media img { transform: scale(1.04); }

/* The clay panel. 30px all round on live. */
.amity-postcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 30px;
}

.amity-postcard__title {
	margin: 0 0 1rem;
	color: #fff;
	font-size: 18.72px;
	line-height: 30px;
	font-weight: 700;
	text-align: left;
	text-transform: none;
}

.amity-postcard__title a { color: inherit; text-decoration: none; }
.amity-postcard__title a:hover { text-decoration: underline; }

.amity-postcard__excerpt {
	margin: 0 0 1.375rem;
}

.amity-postcard__excerpt p {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	text-align: left;
}

/* "Read more" is the tail of the excerpt on live, not a button under it. */
.amity-postcard__more {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.amity-postcard__more small { font-size: 12.8px; }
.amity-postcard__more:hover { text-decoration: underline; }

/* The byline sits on the floor of the panel, so a row of cards with unequal
   excerpts still lines its bylines up. */
.amity-postcard__meta {
	margin: auto 0 0;
	color: #fff;
	font-size: 12.8px;
	line-height: 30px;
	text-align: left;
}

.amity-postcard__meta a,
.amity-postcard__meta a:hover {
	color: #fff;
	/* The design layer underlines links in body copy; live leaves the byline's
	   author link plain. */
	text-decoration: none;
}

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


/* --------------------------------------------------------------------------
   Contact Form 7 — Foundation grid shim

   The forms were authored years ago against Foundation and their markup still
   carries `grid-x` / `cell` / `medium-N`. The new theme dropped Foundation, so
   without these rules every field is a full-width block and the newsletter
   signup becomes a three-row column.

   Scoped to .wpcf7 deliberately: this is a compatibility shim for form markup
   we do not control, not a general grid, and it retires with the Forminator
   port.
   -------------------------------------------------------------------------- */

.wpcf7 .grid-x {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.wpcf7 .grid-x > .cell {
	flex: 1 1 12rem;
	min-width: 0;
}

.wpcf7 .grid-x > .cell > p { margin: 0; }

.wpcf7 .grid-x > .cell.medium-12 { flex: 0 0 100%; }
.wpcf7 .grid-x > .cell.medium-6  { flex: 1 1 calc(50% - 0.75rem); }
.wpcf7 .grid-x > .cell.medium-4  { flex: 1 1 calc(33.333% - 0.75rem); }
.wpcf7 .grid-x > .cell.medium-8  { flex: 1 1 calc(66.666% - 0.75rem); }

.wpcf7 .wpcf7-form-control-wrap { display: block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
}



.amity-newsletter .wpcf7 input[type="submit"] { width: 100%; }

@media (max-width: 640px) {
	.wpcf7 .grid-x > .cell { flex: 0 0 100%; }
}


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

/* Bands butt against each other. theme.json's blockGap puts 24px of white
   between every top-level block, which on a page built from full-bleed
   coloured sections reads as a gap in the design rather than spacing. */
.entry-content > .fw-section,
.entry-content > .wp-block-framework-section {
	margin-block: 0;
}

/* Live's buttons are 0.9 of whatever they sit in — 14.4px in body copy, but
   27px inside a paragraph an editor has sized up. A rem here pinned them all
   to 14.4 and broke the two oversized ones. */
.wp-block-button__link,
.button {
	font-size: 0.9em;
	line-height: 1.5;
}

/* The dotted rule has air above it as well as below — live sets 40px both
   sides, and without the top margin it collars the heading. */
.fw-section .amity-rule,
.amity-rule {
	margin-block: 2.5rem;
	max-width: none;
}


/* --------------------------------------------------------------------------
   Team — framework/people

   Live sizes the staff photo at 272px square and the name at 18.72px. The
   framework's defaults are half again as large, which on a seven-person page
   with full biographies compounds into several hundred pixels.
   -------------------------------------------------------------------------- */

.fw-person__photo {
	width: 272px;
	max-width: 100%;
	padding: 0;
}

/* Live's 8/12 cell carries 15px of padding on BOTH sides, so its text runs
   574px wide, not 589. Eleven pixels of extra measure per line compounds into
   several hundred over seven biographies. */
.fw-person__body {
	padding-inline: 0.9375rem;
}

.fw-person__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 272 / 267;
	object-fit: cover;
}

/* Live's staff name is an h2: 24px uppercase on a 24px line, flush to the top
   of the text column. */
.fw-person__name {
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	margin-block: 0 0.25rem;
}

.fw-person__role {
	font-size: 0.95rem;
	margin-block: 0 0.75rem;
}


/* --------------------------------------------------------------------------
   Classic [gallery] shortcode

   Older pages still use WordPress's classic gallery shortcode, which lays
   itself out with floats and a percentage width emitted in an inline <style>.
   That inline block is fragile and the floats do not survive a modern theme —
   without these rules the images stack one per row and a three-column gallery
   becomes 2,000px tall.

   Expressed as a grid, keyed off the `gallery-columns-N` class the shortcode
   already writes, so nothing has to be re-authored.
   -------------------------------------------------------------------------- */

.gallery {
	display: grid;
	gap: 10px;
	/* Live's gallery has no margin of its own: the 10px above it is the
	   preceding paragraph's, and the 16px below is the gallery items'. */
	margin-block: 0;
	padding-block: 0 16px;
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

/* The shortcode's own inline float rules have to lose to the grid. */
.gallery .gallery-item {
	float: none;
	width: auto;
	margin: 0;
	text-align: center;
}

.gallery .gallery-icon { margin: 0; }

/* Natural ratio, not a forced 3:2 — the classic gallery's images are 1024x717
   and cropping them to 3:2 lost 10px a row. Live also frames them with a 2px
   grey border. */
.gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid #cfcfcf;
	border-radius: 0;
	margin-top: 10px;
}

.gallery .gallery-caption {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

@media (max-width: 782px) {
	.gallery-columns-3,
	.gallery-columns-4,
	.gallery-columns-5,
	.gallery-columns-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.gallery { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Measured corrections — from _amity_diff.py home
   -------------------------------------------------------------------------- */

/* Live's h2 runs on a 24px line, not the 26px a 1.5 body leading gives it. */
.fw-section h2,
.amity-testimonials h2,
.amity-academy h2,
.amity-services h2 {
	line-height: 24px;
}

/* Testimonial quote and author: 16px body at 400, the attribution at 700 on a
   16px line. The card was running everything at 15/23 and bolding the quote. */
.fw-testimonial-card__quote p {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	font-style: normal;
	margin-block: 16px 0;
}

.fw-testimonial-card__author p {
	font-size: 16px;
	line-height: 16px;
	font-weight: 700;
	margin-block: 21px 0;
}

/* The three review buttons are white with pink text on live — `.button.white` —
   not the solid pink fill they had here. */
.amity-testimonials .wp-block-button__link,
.amity-testimonials .button {
	background: #fff;
	color: var(--amity-pink, #B25F55);
}

.amity-testimonials .wp-block-button__link:hover,
.amity-testimonials .button:hover {
	background: #fff;
	color: var(--amity-pink-hover, #A5534A);
}

/* Academy slide titles: 19px/700, left-aligned, with air above — not the
   centred 22px/600 they inherited. */
.fw-section .amity-academy .amity-slide-title,
.amity-academy .amity-slide-title,
.amity-academy h3.amity-slide-title {
	font-size: 19px;
	line-height: 19px;
	font-weight: 700;
	/* inherit, not left: the slide decides. Live left-aligns most academy
	   slides but centres the YouTube and Blog ones, and a hard `left` here
	   stopped a centred slide from centring its own title. */
	text-align: inherit;
	margin-block: 19px 1rem;
}

/* The uppercase treatment must not also widen the button: live keeps 24px. */
.amity-academy .wp-block-button__link,
.amity-academy .button {
	padding-inline: 1.5rem;
	margin-block-start: 30px;
}

/* Service card titles: 700 on a 19px line, with 19px above. */
.amity-services .fw-service-card__title,
.amity-services .fw-service-card__title a {
	font-weight: 700;
	line-height: 19px;
	margin-block: 19px 0;
}


/* Live's card is the full slide width and carries the 8px itself; putting the
   padding on the track item instead made every card 16px narrower. The radius
   sits on the image, not on the frame around it. */
.amity-services .fw-service-card {
	padding-inline: 8px;
}

.amity-services .fw-service-card__media {
	border-radius: 0;
	background: transparent;
}

.amity-services .fw-service-card__media img {
	border-radius: 15px;
}


/* Newsletter fields: live runs them at 16px on an 18px line with #9c9c9c text,
   287px wide, left-aligned under the title. */
.amity-newsletter .wpcf7 input[type="text"],
.amity-newsletter .wpcf7 input[type="email"] {
	font-size: 16px;
	line-height: 18px;
	color: #9c9c9c;
}

.amity-newsletter .wpcf7 input[type="submit"] {
	font-size: 16px;
	line-height: 18px;
	padding-inline: 6px;
	max-width: 287px;
}

.amity-newsletter .wpcf7 .grid-x > .cell.medium-4 {
	flex: 0 1 287px;
}

/* Live pins the card's button into the slide's bottom padding, so the card
   measures shorter than its visual extent. Tightening the gap lands ours on
   the same total. */
.amity-services .fw-service-card__cta {
	padding-block-start: 0;
	margin-block-start: 0.5rem;
}

.amity-services .fw-service-card__title,
.amity-services .fw-service-card__title a {
	margin-block: 0 0.5rem;
}


/* The gap is 0 in the block's own attributes — render.php writes it inline, so
   a stylesheet rule here would never win. Left as a comment rather than a dead
   declaration: live's slides sit flush and space themselves with 8px of card
   padding, giving a 16px visual gutter and a slide that is exactly a third of
   the track. */

/* And the button sits in the slide's bottom padding rather than in flow, which
   is why live's card measures 295 to our 337. */
.amity-services .fw-slide {
	position: relative;
	padding-bottom: 40px;
}

.amity-services .fw-service-card__cta {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Second measured pass — intro, badge, video band
   -------------------------------------------------------------------------- */

/* Live's two intro CTAs are the `.button.big` treatment: 22px on a 34px line,
   50px tall. Ours were running at the default 14px. */
.amity-intro .wp-block-button__link,
.amity-intro .button {
	font-size: 22px;
	line-height: 34px;
	padding-block: 8px;
}

/* The Fear Free badge is a plain link around an image — no brand colour, and
   no corner radius on live. */
.amity-ff-badge,
.amity-ff-badge a,
.amity-ff-badge img,
.wp-block-image.amity-ff-badge img {
	color: #282424;
	border-radius: 0;
}

/* "Read More" is dark and normal weight on live, not pink and semibold. */
.amity-video .amity-readmore {
	color: #282424;
	font-weight: 400;
}

/* Live rounds the video still by 15px — but on the IMAGE, not on the link
   around it, which is why this looked square when only the link was checked.
   The link keeps square corners and no placeholder tint. */
.amity-video .fw-video-thumb__trigger {
	border-radius: 0;
	background: transparent;
}

.fw-video-thumb__poster {
	border-radius: 15px;
}



/* --------------------------------------------------------------------------
   Inner pages — measured against a service page
   -------------------------------------------------------------------------- */

/* Live justifies body copy on inner pages (`#page #content p`) — page content
   only. Scoped to columns that are DIRECT children of .entry-content so it
   cannot reach inside a framework/section band, where the homepage's video and
   newsletter copy is left-aligned. And skipped where the paragraph carries its
   own alignment, or it outranks core's `.has-text-align-*` and flattens every
   centred line. */
/* Live justifies body copy on inner pages (`#page #content p`) — ALL of it,
   however deeply nested. Scoping this to direct children of .entry-content
   left every paragraph inside a group or a nested column unjustified, which
   was most of the contact page.

   Bands are the exception: they set their own alignment on the container, so
   paragraphs inside one inherit it rather than being forced to justify. Same
   for the popup, which is centred. */
.entry-content:not(.entry-content--post) p:not([class*="has-text-align"]) {
	text-align: justify;
}

.entry-content :is(.fw-section, .fw-modal) p:not([class*="has-text-align"]) {
	text-align: inherit;
}

/* Card excerpts are not body copy: live left-aligns them in every listing.
   Written at the same specificity as the justify rule above and placed after
   it, because the excerpt's own rule is two classes lighter and was losing. */
.entry-content:not(.entry-content--post) :is(.amity-postcard__excerpt, .fw-news-card, .fw-content-card, .fw-service-card) p:not([class*="has-text-align"]) {
	text-align: left;
}

.entry-content p.has-text-align-center { text-align: center; }
.entry-content p.has-text-align-right  { text-align: right; }
.entry-content p.has-text-align-left   { text-align: left; }

/* HEADINGS need these too. This theme does not enqueue core's block-library
   stylesheet, so `has-text-align-*` has no definition except the ones written
   here — and these were written for `p` only. A heading an editor centres, or
   that the alignment migration centres to match live, would carry the class
   and still render left: the class would be set, the attribute saved, the
   editor showing it centred, and the front end ignoring it. */
.entry-content :is(h1, h2, h3, h4, h5, h6).has-text-align-center { text-align: center; }
.entry-content :is(h1, h2, h3, h4, h5, h6).has-text-align-right  { text-align: right; }
.entry-content :is(h1, h2, h3, h4, h5, h6).has-text-align-left   { text-align: left; }

/* Lists as well — core/list carries the class on the ul/ol. */
.entry-content :is(ul, ol).has-text-align-center { text-align: center; }
.entry-content :is(ul, ol).has-text-align-right  { text-align: right; }
.entry-content :is(ul, ol).has-text-align-left   { text-align: left; }

/* Live's page headings are left-aligned; only the band headings are centred.
   The design layer centres every h2 because that is right for a band, and on a
   content page that put "PRICING" and its siblings in the middle of the rail.
   Same scoping as the paragraph rule above, and the same escape hatch for a
   heading that carries its own alignment. */
.entry-content > .wp-block-columns > .wp-block-column > h2:not([class*="has-text-align"]),
.entry-content:not(.entry-content--post) > h2:not([class*="has-text-align"]) {
	text-align: left;
}

/* Live's content tables size to their contents — 727px and 666px on the
   membership page — rather than stretching across the whole 1330 rail, which
   spread three columns of prices right across the page. */
.entry-content .wp-block-table table {
	width: auto;
	max-width: 100%;
	/* Live carries 16px top and bottom on the table itself, which is what
	   keeps two consecutive price tables apart. */
	margin-block: 16px;
}

/* One exception to the shrink-to-fit rule above: live gives the membership
   price table an inline `width: 100%`, so it fills its column (727px) where
   shrink-to-fit leaves it at 310px. Live's column is a Foundation large-7
   cell, 727px of a 1298px row, which the rebuild has no equivalent of, so
   that measured width is the cap. Carried as a class on the block rather
   than an inline style, so core/table still validates in the editor. */
.entry-content .wp-block-table.amity-table-full table {
	width: 100%;
}

/* How to Join is the exception: live puts that one table in a Foundation
   large-7 cell, 727px of a 1298px row, rather than the full body column. */
.page-how-to-join .entry-content .wp-block-table.amity-table-full table {
	max-width: 727px;
}

.entry-content .wp-block-table:not(.alignwide):not(.alignfull) {
	width: auto;
	max-width: 100%;
}

/* `justify` completes the set. It was missing, and because this theme does not
   enqueue core's block-library stylesheet there was no fallback definition
   either — so a paragraph explicitly marked justified rendered left, while one
   with no alignment at all rendered justified by the rule above. */
.entry-content p.has-text-align-justify,
.entry-content li.has-text-align-justify,
.entry-content :is(h1, h2, h3, h4, h5, h6).has-text-align-justify {
	text-align: justify;
}

/* The side gallery sits in the right-hand 34% with 60px of air to its left and
   15px to its right, which lands its images on live's 378px. Square corners. */
.entry-content .wp-block-column:last-child .wp-block-gallery {
	padding-left: 61px;
	padding-right: 0;
	margin-top: -8px;
}

.entry-content .wp-block-gallery img,
.entry-content .wp-block-gallery figure img {
	border-radius: 0;
	margin-top: 8px;
}

/* Gutenberg's blockGap puts 24px above the first block after the hero; live
   has none. */
.entry-content > .wp-block-columns:first-of-type {
	margin-block-start: 0;
}


/* --------------------------------------------------------------------------
   Breadcrumbs — live's trail is uppercase with » separators, dark links and
   the current page in pink.
   -------------------------------------------------------------------------- */

.fw-page-hero .fw-breadcrumbs,
.fw-breadcrumbs {
	font-size: 14px;
	line-height: 24px;
	text-transform: uppercase;
	color: #282424;
}

.fw-breadcrumbs a {
	color: #282424;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

.fw-breadcrumbs a:hover {
	text-decoration: underline;
}

/* The list is an <ol> of .fw-breadcrumbs__item; live shows it as a single
   inline trail. */
.fw-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The current page — the last item, which carries no link. */
.fw-breadcrumbs__item:last-child {
	color: var(--amity-pink, #B25F55);
}

/* Live's separator is », drawn between items rather than emitted as markup.
   Written as the literal character: a backslash-00BB escape was being parsed as a
   null plus "BB" and rendering as a replacement glyph. */
.fw-breadcrumbs__item + .fw-breadcrumbs__item::before {
	content: "»";
	/* Live writes " » " as literal text inside a 16px line, which measures
	   15px from the end of one crumb to the start of the next. */
	padding-inline: 0.25rem;
	/* The separator takes the trail's own colour on live — pink, not the dark
	   the links use. */
	color: var(--amity-pink, #B25F55);
}

/* The trail is an <ol>, and `.entry-content ol` gives every list a 1.25em
   indent that outranks the block's own `padding: 0`. That indent pushed the
   whole trail 17.5px right of live's. */
.entry-content .fw-breadcrumbs__list,
.fw-breadcrumbs .fw-breadcrumbs__list {
	padding-left: 0;
}

/* The list items sit tight against their separators — the block's own
   stylesheet spaces them out with a gap that live does not have. */
.fw-breadcrumbs__list {
	gap: 0;
}

.fw-breadcrumbs__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Phone numbers in body copy: live's `.click-phone` is dark and bold, not a
   pink underlined link. */
.entry-content a[href^="tel:"] {
	color: #282424;
	font-weight: 700;
	text-decoration: none;
}


/* The framework's people block adds 48px/20px of its own padding; live has
   none, and it was shifting every profile 20px right and costing 40px of
   column width. */
/* Live's first rule sits 56px under the intro copy - its own 40px margin
   on top of the paragraph's 16px. The block carried only the paragraph's. */
.fw-people {
	padding: 0;
	margin-block-start: 3.5rem;
}

/* Team profiles: live puts the photo beside the biography, one person per row,
   with the bio at full body size across the rest of the rail, and a dotted
   rule between people. */
.fw-person {
	display: grid;
	/* Live's cells are 4/12 and 8/12 with 15px of internal padding and no
	   gutter between them — not a fixed photo width plus a flex gap. */
	grid-template-columns: 287px 1fr;
	gap: 0;
	align-items: start;
	/* 30px either side of the dotted rule. (An earlier pass cut this to 16px
	   because the profiles ran long — but that was the bio column being 11px
	   narrow and wrapping extra lines, not the spacing.) */
	padding-block: 0 2.5rem;
}

/* Live draws the rule above EVERY profile, including the first - seven
   rules for seven people - so the list opens with one under the intro
   copy rather than running straight into Dr Foo. Live's is #d3d3d3. */
.fw-person {
	border-top: 2px dotted #d3d3d3;
	padding-block-start: 2.5rem;
}

/* The bio's own paragraphs carry the rhythm; the block does not need to add
   to it. */
.fw-person__body p:last-child {
	margin-block-end: 0;
}

/* The role is bold and dark under the name, not a light grey caption. */
/* Flush under the name — the body's 16px paragraph lead must not apply here. */
.fw-person__body .fw-person__role,
.fw-person__role {
	color: var(--fw-grey, #5A5A5A);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	margin-block: 0 0.75rem;
}

.fw-person__body p,
.fw-person__body li {
	font-size: 16px;
	line-height: 24px;
	text-align: justify;
	margin-block: 16px 0;
}

@media (max-width: 782px) {
	.fw-person {
		grid-template-columns: 1fr;
	}
}


/* The sidebar layout is a 67/33 split with no gutter between the columns —
   live's cells sit flush and space themselves with their own padding, so a
   flex gap here narrows the body column by 15px.

   The negative inline margin reproduces Foundation's grid, whose row spans the
   container's full 1360 INCLUDING the gutters rather than sitting inside them.
   Without it the body column is 16px narrow, which on a long page wraps enough
   extra lines to cost a few hundred pixels. */
.entry-content > .wp-block-columns {
	gap: 0;
	/* Foundation's row spans the container's full 1360 INCLUDING its gutters,
	   so live's body cell is 907 where a rail-width row gives 891. Stated in
	   pixels: `width: calc(100% + …)` with `max-width: none` resolved 100%
	   against the viewport and blew the row out to 1920. */
	margin-inline: -0.9375rem;
	max-width: 85rem;
	width: 85rem;
}

/* Foundation's `.grid-padding-x` puts 15px inside every cell, so live's 907px
   body column holds 877px of text. Without it the text ran 911 wide and wrapped
   a line short of live down the length of every long page. */
.entry-content > .wp-block-columns > .wp-block-column {
	padding-inline: 0.9375rem;
}

/* A wide child breaks back out of that inset, the way live's nested
   `.grid-x` spans the whole cell rather than the text measure — the team grid
   and the child-page grid both do. Without this the team cards lost 30px and
   every biography wrapped an extra line. */
.entry-content > .wp-block-columns > .wp-block-column > .alignwide {
	margin-inline: -0.9375rem;
	width: auto;
	max-width: none;
}


/* The large in-content button: live renders these at 27px in an 8px/24px pad,
   giving 57px tall. Carried on the block's own style rather than applied to
   all page content — the Contact page's buttons are the standard 14.4px. */
/* Live's oversized buttons are not a variation — they are an editor-set font
   size on the paragraph, reproduced as `style.typography.fontSize` on the
   block. Nothing here needs a rule; `.button` inherits at 0.9em.
   The `is-style-big` variation this file used to carry was a wrong guess and
   has been removed from the content too. */


/* The child-page grid is live's `#sub-pages`: centred, and carrying the old
   theme's `.rabbit-padding` — 200px of clearance for the rabbit that overlaps
   down from the band below it. */
.amity-subpages {
	text-align: center;
	padding-bottom: 12.5rem;
}

.amity-subpages .fw-service-card__title {
	font-size: 1.17rem;
	line-height: 19px;
	margin-block: 19px 0;
}


/* The old theme's scripts.js adds 200px of `.rabbit-padding` when the
   testimonials band directly follows the page content — clearance for the
   rabbit, which overhangs the top of the olive band.

   An earlier attempt at this over-applied and was reverted, because the check
   used a raw HTML fetch: the class is added by JavaScript and is invisible to
   anything that does not run scripts. Measured with a real browser, live
   carries it on EVERY page except the homepage.

   Three exclusions, each load-bearing:
     :not(.fw-section)     the homepage's newsletter band precedes testimonials
     :not(.amity-subpages) the section pages carry it on their grid already
     body:not(.home)       belt and braces for the front page
*/
/* On a two-column page the clearance belongs to the BODY COLUMN, exactly as
   live puts it on `.cell.auto` — so it only grows the row when that column is
   the taller one. Putting it on the columns block instead added 200px
   unconditionally, even where the sidebar was already taller. */
body:not(.home) .entry-content > .wp-block-columns:has(+ .amity-testimonials) > .wp-block-column:first-child {
	padding-bottom: 12.5rem;
}

/* Pages whose content is loose blocks rather than columns. */
body:not(.home) .entry-content > *:not(.fw-section):not(.amity-subpages):not(.wp-block-columns):has(+ .amity-testimonials) {
	padding-bottom: 12.5rem;
}


/* --------------------------------------------------------------------------
   Single blog post

   Live gives posts their own shape: no hero, no title strip, and a narrow
   centred reading column rather than the full page rail. The body runs 660px
   wide, headings inside it are 24px uppercase, and the featured image sits in
   a 16:9 frame above the title.
   -------------------------------------------------------------------------- */

/* The rail's gutters live on the column, not here: live's cell is flush to
   the 1360 box edge at x=280. */
/* Live opens a post 188px below the header and closes it 52 above the
   footer, not the band default. */
.amity-post {
	padding-block: 188px 52px;
	max-width: 85rem;
	margin-inline: auto;
	box-sizing: border-box;
	/* Live's rail splits into a 1020px main cell and a 340px sidebar. */
	display: grid;
	grid-template-columns: 1020px 340px;
	align-items: start;
}

.amity-post__cell {
	min-width: 0;
}

/* #blog-sidebar: category list and monthly archive. */
.amity-post__sidebar {
	padding-inline: 0.9375rem;
	font-size: 16px;
	line-height: 24px;
}

.amity-post__sidebar h3 {
	font-size: 1.17rem;
	line-height: 1.2;
	margin-block: 0 0.5rem;
}

.amity-post__sidebar h3 + ul {
	margin: 0 0 1.875rem;
	padding: 0;
	list-style: none;
}

.amity-post__sidebar li {
	margin-block-end: 15px;
}

.amity-post__sidebar a {
	color: var(--fw-grey, #5A5A5A);
	text-decoration: none;
}

.amity-post__sidebar a:hover {
	color: var(--amity-pink, #B25F55);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.amity-post {
		grid-template-columns: 1fr;
	}
}

/* 660px of CONTENT, so the box carries the gutters on top. Live's measure is
   660, and the extra 30 here wrapped a line off every paragraph — a hundred
   pixels on a long post, across a hundred posts. */
.amity-post__column {
	max-width: 690px;
	width: 690px;
	margin-inline: auto;
	padding-inline: 0.9375rem;
	box-sizing: border-box;
}

.amity-post__thumb {
	margin: 0 0 1.875rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.amity-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Live's post title is 32px on a 48px line, with 30 above and 16 below. */
.amity-post__title {
	line-height: 48px;
	margin-block: 30px 16px;
}

/* Live's date is an inline <small> followed by a <br>, which takes up less
   room than a block paragraph carrying a full 16px margin. */
.amity-post__date {
	margin-block: 0 9px;
	font-size: 12.8px;
	line-height: 19.2px;
	text-align: left;
	color: var(--fw-grey, #5A5A5A);
}

/* Post body headings: 24px uppercase, as live. */
.amity-post__body h2,
.amity-post__body h3 {
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	margin-block: 1.875rem 1rem;
}

/* 16px on a 24px line and left-aligned: the starter scoped posts to a smaller
   size, and the page-content justify rule was reaching in here too. */
.amity-post__body,
.amity-post__body p,
.amity-post__body li {
	font-size: 16px;
	line-height: 24px;
	text-align: left;
}

.amity-post__body p {
	margin-block: 0 1rem;
}

.amity-post__body img,
.amity-post__body figure {
	max-width: 100%;
	height: auto;
}

/* Live stacks the "Share This" heading above a row of 32px icons — 76px in
   all, not a single 40px flex line. */
.amity-post__share {
	margin-block-start: 16px;
	display: block;
}

.amity-post__share h2 {
	margin: 0 0 16px;
	font-size: 24px;
	line-height: 24px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--amity-pink, #B25F55);
}

.amity-post__share-link {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 32px;
	margin-inline-end: 12px;
	vertical-align: top;
}

.amity-post__share-link svg { width: 28px; height: 28px; }

/* Live's icons carry each network's own colour. */
.amity-post__share-link:nth-child(2) { color: #1DA1F2; }
.amity-post__share-link:nth-child(3) { color: #4267B2; }
.amity-post__share-link:nth-child(4) { color: var(--fw-grey, #5A5A5A); }

.amity-post__share-link:hover { opacity: 0.8; }

.amity-post__back {
	margin-block: 30px 0;
}


/* A 67/33 split puts the gallery where live has it. No padding on the body
   column: a 14px inset here brought the body TEXT to live's 877 on the service
   pages, but on Our Team it squeezed the profile grid and wrapped an extra
   line into every long biography — several hundred pixels over seven of them.
   Five pixels of measure on the service pages is the cheaper error. */


/* The video still is a link wrapping an image; live leaves it the body colour
   rather than the link pink (invisible either way, but it is a difference). */
.amity-video .fw-video-thumb__trigger {
	color: var(--fw-grey, #5A5A5A);
}

/* Live's newsletter title sits 2px down. */
.amity-newsletter .wpcf7 .title {
	margin-top: 2px;
}


/* --------------------------------------------------------------------------
   Contact — body copy beside the enquiry form

   Live splits the rail into a 907px body cell and a 453px form cell, each with
   15px of internal padding, and the form sits in the sidebar rather than under
   the content.
   -------------------------------------------------------------------------- */

/* border-box, or the 15px gutters add to the 33% basis and steal 20px from the
   body column — enough extra wrapping to cost a couple of hundred pixels down
   a long page. */
.amity-contact-form {
	padding-inline: 0.9375rem;
	box-sizing: border-box;
}

.entry-content > .wp-block-columns > .wp-block-column {
	box-sizing: border-box;
}

.amity-contact-form .wpcf7 {
	margin: 0;
}

/* The form's own fields stack in the narrow column, so the Foundation shim's
   row layout has to give way here. */
.amity-contact-form .wpcf7 .grid-x > .cell {
	flex: 0 0 100%;
}

.amity-contact-form .wpcf7 input[type="text"],
.amity-contact-form .wpcf7 input[type="email"],
.amity-contact-form .wpcf7 input[type="tel"],
.amity-contact-form .wpcf7 textarea {
	width: 100%;
}


/* --------------------------------------------------------------------------
   Contact — live puts the enquiry form in a right-hand cell beside the body
   copy, not below it. Live's cells are 907 and 453 with 15px of internal
   padding on the form.
   -------------------------------------------------------------------------- */

/* border-box, or the 15px gutters add to the 33% basis and steal 20px from the
   body column — enough extra wrapping to cost a couple of hundred pixels down
   a long page. */
.amity-contact-form {
	padding-inline: 0.9375rem;
	box-sizing: border-box;
}

.entry-content > .wp-block-columns > .wp-block-column {
	box-sizing: border-box;
}

.amity-contact-form__panel {
	max-width: 423px;
}

/* Contact's fields stack: the cell is too narrow for the inline row the
   newsletter uses. Field labels are plain white text — the heading treatment
   below is for the panel title only. */
.amity-contact-form .wpcf7 .grid-x > .cell {
	flex: 0 0 100%;
}

.amity-contact-form .wpcf7 input[type="text"],
.amity-contact-form .wpcf7 input[type="email"],
.amity-contact-form .wpcf7 input[type="tel"],
.amity-contact-form .wpcf7 textarea {
	width: 100%;
	border: 1px solid #c5ce9f;
	border-radius: 20px;
	padding: 0.5rem 1rem;
	margin-block-end: 0.5rem;
}

.amity-contact-form .wpcf7 textarea {
	border-radius: 10px;
	min-height: 120px;
}


/* --------------------------------------------------------------------------
   Contact form panel

   Live wraps the enquiry form in a pink card with a white "CONTACT FORM"
   heading, white rounded inputs and white labels.
   -------------------------------------------------------------------------- */

/* The panel is the group wrapping the heading AND the form — live's
   `.form-container`. Backgrounding the form alone left the heading outside it. */
.amity-contact-form__panel {
	background: var(--amity-pink, #B25F55);
	border-radius: var(--fw-radius, 10px);
	padding: 1.5rem;
	color: #fff;
}

.amity-contact-form__panel .wpcf7 {
	background: transparent;
	padding: 0;
	color: #fff;
}

/* Panel title only — `p:first-of-type` also matched every field paragraph and
   turned each label into a centred 24px heading. */
.amity-contact-form__title {
	color: #fff;
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	margin-block: 0 1.25rem;
}

.amity-contact-form .wpcf7 label,
.amity-contact-form .wpcf7 p {
	color: #fff;
}

.amity-contact-form .wpcf7 input[type="text"],
.amity-contact-form .wpcf7 input[type="email"],
.amity-contact-form .wpcf7 input[type="tel"],
.amity-contact-form .wpcf7 textarea {
	background: #fff;
	border: 0;
	color: #282424;
}

.amity-contact-form .wpcf7 input[type="submit"] {
	background: var(--amity-green, #95A372);
	color: #fff;
	border: 0;
	border-radius: 20px;
	padding: 0.5rem 1.5rem;
	cursor: pointer;
}

.amity-contact-form .wpcf7 input[type="submit"]:hover {
	background: #899164;
}


/* Page-body headings default to left; the centred, uppercase h2 is a band
   treatment, not a global one.

   But this is only the DEFAULT. Live's page content carries per-element
   `style="text-align: center"` written by the old WYSIWYG — author choices,
   not theme CSS — and on a native build those are block alignments
   (`has-text-align-*`). Without the :not() guard this rule scores (0,1,1)
   against core's `.has-text-align-center` at (0,1,0) and silently overrides
   every heading an editor has deliberately centred. */
.entry-content > .wp-block-columns h2:not([class*="has-text-align"]),
.entry-content > .wp-block-columns h3:not([class*="has-text-align"]),
.entry-content > h2:not([class*="has-text-align"]),
.entry-content > h3:not([class*="has-text-align"]) {
	text-align: left;
}

/* The panel title keeps its centred treatment — the page-body left-align rule
   above is more specific than a bare class, so this is scoped to the panel. */
.entry-content .amity-contact-form__panel .amity-contact-form__title,
.amity-contact-form .amity-contact-form__title {
	text-align: center;
}

/* Body separators are the dotted Amity rule, not a solid line. */
.entry-content .wp-block-separator:not(.amity-rule) {
	border: 0;
	border-top: 2px dotted #d0d0d0;
	background: none;
	height: 0;
	opacity: 1;
	margin-block: 2rem;
}

/* Email and phone links in body copy are not underlined on live. */
.entry-content a[href^="mailto:"],
.entry-content a[href^="tel:"] {
	text-decoration: none;
}


/* Body-content heading rhythm, measured off live: h3 is 18.72px on a 19px line
   with 1em above and 16px below, and the paragraph that follows sits flush
   rather than taking Gutenberg's 24px blockGap.

   `:not([class*="fw-"])` keeps it off block-owned headings — the team profile
   name is an h3 with its own 24px treatment, and this rule outranked it. */
.entry-content h3:not([class*="fw-"]):not(.amity-landing__title):not(.amity-slide-title) {
	font-size: 1.17rem;
	line-height: 19px;
	margin-block: 18.72px 16px;
}

.entry-content h2:not([class*="fw-"]) + p,
.entry-content h3:not([class*="fw-"]) + p,
.entry-content h2:not([class*="fw-"]) + .wp-block-buttons,
.entry-content h3:not([class*="fw-"]) + .wp-block-buttons {
	margin-block-start: 0;
}

.entry-content p + .wp-block-buttons {
	margin-block-start: 16px;
}


/* --------------------------------------------------------------------------
   Tabs and body tables, measured off How to Join
   -------------------------------------------------------------------------- */

/* Live's tab buttons are 38px tall: 8px of padding all round on a 21.6px
   line, with no bottom border. The framework draws its active indicator as a
   3px border, which would make every tab 41 — an inset shadow paints the same
   bar without taking part in layout. */
.entry-content .fw-tabs__tab {
	padding: 8px;
	font-size: 0.9rem;
	line-height: 21.6px;
	border-bottom-width: 0;
	margin-block-end: 0;
}

.entry-content .fw-tabs__tab.is-active {
	box-shadow: inset 0 -3px 0 0 var(--fw-tabs-accent, #B25F55);
}

/* And the open panel carries 30px of air above and below its content. */
.entry-content .fw-tabs__panel {
	padding-block: 30px;
}

/* Body tables. Live's are unruled data grids: a single hairline around the
   whole table, no cell borders at all, and cells padded 1px/15px so a row is
   26px tall on a 24px line. Gutenberg's default gives every cell a 1px border
   and 8px of padding, which is 16px taller per row — 142px on the membership
   comparison alone, and far more across the 42 tables on Prices. They also
   size to their content rather than stretching to the full rail. */
.entry-content table {
	width: auto;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--fw-light-grey, #E2E2E2);
	border-collapse: separate;
	border-spacing: 2px;
}

.entry-content table th,
.entry-content table td {
	border: 0;
	padding: 1px 15px 1px 1px;
	text-align: left;
	word-break: normal;
}

/* A centred column keeps its alignment. */
.entry-content table th.has-text-align-center,
.entry-content table td.has-text-align-center { text-align: center; }
.entry-content table th.has-text-align-right,
.entry-content table td.has-text-align-right  { text-align: right; }

.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
	margin-inline: 0;
}


/* --------------------------------------------------------------------------
   In-content heading metrics, measured off Contact and How to Join
   -------------------------------------------------------------------------- */

/* Live's body H2 is 24px on a 24px line — leading of exactly 1 — with no space
   above and 16 below. Gutenberg's 1.1 and its 24px top margin made every one
   of them 26 tall and moved the block it followed. */
.entry-content h2:not([class*="fw-"]):not(.amity-testimonials__title):not(.amity-landing__title) {
	line-height: 1;
	margin-block: 0 16px;
}

/* And the H3 is bold, not semibold, on a flat line. */
.entry-content h3:not([class*="fw-"]):not(.amity-landing__title):not(.amity-slide-title) {
	font-weight: 700;
	line-height: 1;
}


/* --------------------------------------------------------------------------
   Accordions — the Prices page

   framework/faqs ships as structure only: a two-column grid with everything
   decorative left to the site. Amity's is a single full-width stack of olive
   header bars, and its panels inset to a 1024px measure inside the 1330 rail.

   Live's own accordion is broken in the browser — the old theme loads a CDN
   jQuery 1.9 over WordPress's 3.7, jQuery UI 1.14 throws on `$.uniqueSort`,
   and every panel renders open. The measurements below come from live's
   markup and CSS, not from that broken render.
   -------------------------------------------------------------------------- */

.entry-content .fw-faqs {
	grid-template-columns: 1fr;
	gap: 0;
}

.entry-content .fw-faqs > .wp-block-details > summary {
	background: var(--fw-secondary, #95A372);
	color: #fff;
	font-size: 1.17rem;
	font-weight: 700;
	line-height: 1;
	padding: 20px;
}

.entry-content .fw-faqs > .wp-block-details > summary:hover {
	background: color-mix(in srgb, var(--fw-secondary, #95A372) 88%, #000);
}

/* Live insets the open panel to 1024 of the 1330 rail, on 40px of air. The
   starter pads every answer block by 20px, which here is the summary bar's
   padding leaking onto the copy — each paragraph came out 64 tall instead of
   24, and the tables 40px narrow. */
.entry-content .fw-faqs > .wp-block-details > *:not(summary) {
	margin-inline: 153px;
	padding: 0;
}

/* Body rhythm inside a panel is live's plain 16px. */
.entry-content .fw-faqs > .wp-block-details > p:not(summary) {
	margin-block: 16px;
}

/* Gutenberg rules a 3px line under a table head. Live's tables have no cell
   borders at all — only the hairline round the outside. */
.entry-content table thead,
.entry-content table tbody,
.entry-content table tfoot,
.entry-content table tr {
	border: 0;
}

.entry-content .fw-faqs > .wp-block-details > *:not(summary):first-of-type {
	margin-block-start: 40px;
}

.entry-content .fw-faqs > .wp-block-details > *:last-child {
	margin-block-end: 40px;
}

/* The price tables inside a panel are padded 2px/15px, not the 1px/15px/1px/1px
   of the tables in ordinary body copy. */
.entry-content .fw-faqs table th,
.entry-content .fw-faqs table td {
	padding: 2px 15px;
}

.entry-content .fw-faqs table {
	width: 100%;
}


/* The full testimonials page shows every review at once, wrapped, rather than
   three at a time on a track. Same cards, no carousel. */
.fw-testimonial-cards--grid .fw-slider__track {
	display: grid;
	grid-template-columns: repeat(var(--fw-slider-per, 3), 1fr);
	overflow: visible;
	scroll-snap-type: none;
}

.fw-testimonial-cards--grid .fw-slide {
	width: auto;
	flex: none;
	scroll-snap-align: none;
}

/* The slide's own `display` outranks the UA's `[hidden]` rule, so a batched
   card stayed on screen with the attribute set. */
.fw-testimonial-cards--grid .fw-slide[hidden] {
	display: none;
}

@media (max-width: 1024px) {
	.fw-testimonial-cards--grid .fw-slider__track {
		grid-template-columns: repeat(var(--fw-slider-per-md, 2), 1fr);
	}
}

@media (max-width: 640px) {
	.fw-testimonial-cards--grid .fw-slider__track { grid-template-columns: 1fr; }
}

/* The Load More button under a batched grid. */
.fw-loadmore {
	display: block;
	margin: 2rem auto 0;
	padding: 8px 24px;
	border: 0;
	border-radius: var(--fw-radius, 10px);
	background: var(--fw-primary, #B25F55);
	color: #fff;
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.fw-loadmore:hover { background: var(--fw-secondary, #95A372); }

/* Live leaves 82px under the Load More before the olive strip - the button's
   own 30px plus 52px of section padding. In page content the rebuild's grid
   ends flush at the button, so the strip and the back-to-top disc sat on top
   of it. Scoped to the in-content grid; in a band the band's padding does it. */
.entry-content > .fw-testimonial-cards > .fw-loadmore {
	margin-block-end: 82px;
}

/* A dotted rule in page content - live has one between the video and the
   written reviews. Core's .wp-block-separator style is enqueued after the
   theme and forces solid/currentcolor, and .amity-rule's max-width:none is
   meant for bands, so in content it spanned the full 1890. Live: 1330 wide,
   2px dotted #b0b592, 40px either side. */
.entry-content hr.amity-rule.wp-block-separator {
	border-style: dotted none none;
	border-top-width: 2px;
	border-top-color: #b0b592;
	max-width: var(--wp--style--global--content-size, 1330px);
	width: 100%;
	margin-block: 40px;
}

/* Live's service cards do nothing on hover: no zoom, no underline. Both come
   from the framework's own style.css. :focus-visible keeps its underline -
   that is the keyboard affordance and a mouse user never sees it. */
.fw-service-card:hover .fw-service-card__media img {
	transform: none;
}

.fw-service-card__title a:hover {
	text-decoration: none;
}

/* Live's sidebar gallery sits in a cell with 30px of bottom margin, and its
   images carry another 8px, so the last picture clears what follows by 38px.
   The gallery block has neither - and `figure { margin: 0 }` in
   fw-overrides.css zeroes it - so on the pages where the gallery ends the
   content it ran straight into the olive band. */
.entry-content figure.wp-block-gallery {
	margin-block-end: 38px;
}

/* The card byline is already 12.8px, and the <small> inside it shrank that
   again to 10.24px. Live's runs at 12.8px: its parent is 16px and the
   <small> does the shrinking. */
.amity-postcard__meta small {
	font-size: inherit;
}

/* Pagination. Live renders white numbers on green boxes, clay for the
   current page and for Next, 2px 5px of padding, 3px apart and centred.
   `the_posts_pagination()` ships none of that. */
.navigation.pagination .nav-links {
	text-align: center;
}

/* Live leaves 52px under the pagination before the olive strip; the
   listing ended flush at it, so the strip and the back-to-top disc were
   sitting over the page numbers. */
.entry-content .navigation.pagination {
	margin-block-end: 52px;
}

.entry-content .navigation.pagination .page-numbers {
	display: inline-block;
	padding: 2px 5px;
	margin-inline-end: 3px;
	background: var(--fw-secondary, #95A372);
	color: #fff;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
}

.entry-content .navigation.pagination .page-numbers.current,
.entry-content .navigation.pagination .page-numbers.next,
.entry-content .navigation.pagination .page-numbers.prev {
	background: var(--fw-primary, #B25F55);
}

/* The eBook page's subscribe form. Live wraps it in `.subscribe_to_ebook`:
   a clay panel, 15px radius, 16px padding, a white 25.6px title and an
   olive submit. Measured off live at 1920. */
.amity-ebook-form .wpcf7 {
	background: var(--fw-primary);
	border-radius: 15px;
	padding: 16px;
}

.amity-ebook-form .wpcf7 .title {
	color: #fff;
	font-size: 25.6px;
	line-height: 1.2;
}

.amity-ebook-form .wpcf7 input[type="submit"] {
	background: #6F7553;
	color: #E1F1EF;
	border-radius: 20px;
}

/* Live lightens every CF7 submit on hover; the rule above is more specific
   than the theme's, so this button needs its own hover to keep it. */
.amity-ebook-form .wpcf7 input[type="submit"]:hover {
	background: #899164;
}

/* A page with no hero and no title strip — live's FAQs template — opens 132px
   below the header rather than hard against it. */
.entry-content--bare {
	padding-block-start: 132px;
}

/* Live's video page is a three-across grid of 3:2 posters. */
.amity-video-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.amity-video-grid > * { margin: 0; }

.amity-video-grid > [hidden] { display: none; }

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

@media (max-width: 640px) {
	.amity-video-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Floated images

   `alignleft` / `alignright` on a core/image are how live wraps copy around a
   picture — the Contact page's map photo, the eBook cover, the ten product
   shots in the Supplements tabs. The theme carried no float rule for them, so
   each one sat in the flow at full height and pushed the text below it.
   -------------------------------------------------------------------------- */

.entry-content .alignleft,
.entry-content figure.alignleft,
.amity-post__body .alignleft {
	float: left;
	margin: 0.5em 1.5em 0.5em 0;
}

.entry-content .alignright,
.entry-content figure.alignright,
.amity-post__body .alignright {
	float: right;
	margin: 0.5em 0 0.5em 1.5em;
}

.entry-content figure.aligncenter,
.amity-post__body .aligncenter {
	margin-inline: auto;
}

/* A band must not let a float escape into the next one — but only where there
   IS a float. An unconditional clearfix also stops the last child's bottom
   margin collapsing out of its container, which put 16px on 171 pages. */
.fw-section__inner:has(> .alignleft, > .alignright)::after,
.fw-tabs__panel:has(> .alignleft, > .alignright)::after,
.amity-post__body:has(> .alignleft, > .alignright)::after,
.wp-block-column:has(> .alignleft, > .alignright)::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 640px) {
	.entry-content .alignleft,
	.entry-content .alignright,
	.amity-post__body .alignleft,
	.amity-post__body .alignright {
		float: none;
		margin-inline: auto;
	}
}

/* Grid rows stretch, as live's do — a CSS grid already sizes each ROW to its
   own tallest card, so `align-items: start` left every card at its natural
   height and the rows ragged. */
.fw-testimonial-cards--grid .fw-slider__track { align-items: stretch; }

/* Live's review buttons sit in cells carrying 15px of margin inside a row that
   already has 30 above it — 98px in all between the cards and the reviews
   widget, where the band's own 40px gap gave 78. */
.entry-content .amity-testimonials .wp-block-buttons {
	margin-block: 30px;
}


/* --------------------------------------------------------------------------
   Testimonial card rhythm

   The card is a flex column, so its 12px gap ADDS to every margin inside it
   rather than collapsing with them — the media's 20px bottom margin and the
   quote's 16px top became a 48px gap where live has 16, and the same again
   between the quote, the attribution and the stars. Live's card is
   282 / 16 / quote / 21 / attribution / 16 / stars; this states that directly
   and takes the gap out of the equation.
   -------------------------------------------------------------------------- */

.amity-testimonials .fw-slide__inner {
	gap: 0;
}

.amity-testimonials .fw-testimonial-card__media {
	margin-block: 0 16px;
}

.amity-testimonials .fw-testimonial-card__quote p {
	margin-block: 0;
}

/* Live keeps the pull quote and the context on separate lines — a blank line
   between them inside one paragraph. Two paragraphs with no margin ran them
   together and lost a line. */
.amity-testimonials .fw-testimonial-card__quote p + p {
	margin-block-start: 24px;
}

.amity-testimonials .fw-testimonial-card__author p {
	margin-block: 21px 0;
}

.amity-testimonials .fw-testimonial-card__stars {
	margin-block: 16px 0;
	padding-block-start: 0;
	line-height: 24px;
}


/* --------------------------------------------------------------------------
   Small screens

   Several of the rules above state widths in pixels to match live's 1920
   render — the 1360 body row, the 690 reading column, the 1020/340 post split.
   Below the rail those have to give way or the content is simply clipped:
   the page does not scroll sideways, it just loses its right-hand edge.
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
	.entry-content > .wp-block-columns {
		width: auto;
		max-width: none;
		margin-inline: 0;
	}
}

@media (max-width: 1024px) {
	.entry-content > .wp-block-columns {
		display: block;
	}

	.entry-content > .wp-block-columns > .wp-block-column {
		width: auto;
		flex-basis: auto !important;
		padding-inline: 0;
	}

	.entry-content > .wp-block-columns > .wp-block-column > .alignwide {
		margin-inline: 0;
	}

	.amity-post__column {
		width: auto;
		max-width: 100%;
	}

	.entry-content .amity-landing__list {
		padding-left: 24px;
	}
}

/* The accordion panels are inset 153px to live's 1024 measure; on a phone that
   inset is wider than the screen. */
@media (max-width: 1024px) {
	.entry-content .fw-faqs > .wp-block-details > *:not(summary) {
		margin-inline: 0;
	}

	.entry-content .fw-faqs table th,
	.entry-content .fw-faqs table td {
		padding: 2px 8px;
	}

	.entry-content .fw-faqs {
		overflow-x: auto;
	}
}

/* --------------------------------------------------------------------------
   Corrections found by comparing computed styles against live, not by eye.
   Each value below was measured on https://amityvets.co.uk at 1920 wide.
   -------------------------------------------------------------------------- */

/* Live's in-content H1 is 32px on a 48px line with 30px beneath it. Dev was
   inheriting the default 1.2 ratio and no bottom margin, which closed up the
   gap under the homepage heading by 30px and shortened the line by 10. */
.entry-content > h1,
.entry-content > .wp-block-heading:is(h1) {
	line-height: 48px;
	margin-block-end: 30px;
}

/* Live's play button is Font Awesome's play-circle at 80px in white: a filled
   white disc with the triangle knocked OUT of it, so the poster shows through
   the arrow. The framework block draws the inverse — a coloured disc with a
   solid white triangle — which reads as a completely different control.
   Masking the disc with the glyph's own outline reproduces live exactly and
   needs no icon font. */
.amity-band .fw-video-thumb__play,
.entry-content .fw-video-thumb__play {
	width: 80px;
	height: 80px;
	background: #fff;
	border-radius: 0;
	-webkit-mask-image: var(--amity-play-glyph);
	mask-image: var(--amity-play-glyph);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

:root {
	--amity-play-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z'/%3E%3C/svg%3E");
}

/* The block's own triangle would sit on top of the mask. */
.amity-band .fw-video-thumb__play svg,
.entry-content .fw-video-thumb__play svg {
	display: none;
}

.fw-video-thumb__trigger:hover .fw-video-thumb__play,
.fw-video-thumb__trigger:focus-visible .fw-video-thumb__play {
	background: #fff;
}

/* Live runs the VetHelpDirect widget in an 8-of-12 cell — 857px inside the
   1330 rail — when it sits in a band. At full width its review cards reflow
   into a different shape entirely.

   In page content it fills its column instead, which is what live does on the
   testimonials page; the fixed fraction was squeezing it to 630 of a 1020
   column there. The container is what varies, not the widget. */
.fw-section .fw-practice-widget--reviews {
	width: calc(66.6667% - 30px);
	margin-inline: auto;
}

.wp-block-column > .fw-practice-widget--reviews,
.entry-content > .fw-practice-widget--reviews {
	width: 100%;
}

/* The reviews widget block reserves its height inline from its own
   `minHeight` attribute - 832px, on 81 published pages - which leaves about
   117px of empty band below the reviews. Live reserves nothing and lets the
   widget size to its content; 715px is the value that lands this band on
   live's measured 1615px. `!important` because the block writes the height
   inline; the tidier fix is the attribute itself, on all 81 pages. */
/* In page content live reserves nothing - the widget is exactly as tall as
   its reviews. The block writes a min-height inline (802px on the
   testimonials page), which left 57px of dead space above the review
   buttons, so it is cleared here and reinstated for bands below. */
.fw-practice-widget--reviews {
	min-height: 0 !important;
}

/* In a band the reserve is what lands the band on live's height. */
.fw-section .fw-practice-widget--reviews {
	min-height: 715px !important;
}


/* Live centres the widget's contents — the stars, the review text and the
   "read more" links all sit centred. In a band the rebuild inherited that from
   the band; in page content it did not, and the whole widget read left. */
.fw-practice-widget {
	text-align: center;
}

/* Live hangs the rabbit off the top of the olive band on interior pages — on
   the homepage it belongs to the newsletter band directly above and overhangs
   downward, but interior pages have no newsletter band, so it attaches here
   instead. It is out of flow and costs no page height, which is why eighty
   pages went without it unnoticed. */
.amity-testimonials {
	overflow: visible;
}

.amity-testimonials .fw-section__decor--top-left {
	/* Live's rabbit stands 186px clear of the band and dips 45px into it. */
	top: -186px;
	bottom: auto;
	/* On the content rail, not the viewport edge: the band is full bleed. */
	left: max(1.25rem, calc((100% - 87.5rem) / 2 + 1.25rem));
	max-width: none;
}

@media (max-width: 782px) {
	.amity-testimonials .fw-section__decor--top-left { display: none; }
}

/* --------------------------------------------------------------------------
   Last-pass corrections. Everything here is a value measured on live that an
   earlier rule in this file gets wrong; they sit at the end so source order
   settles it rather than another round of specificity escalation.
   -------------------------------------------------------------------------- */

/* Live's academy slide title is 19.2px on a 19.2px line with no tracking.
   Earlier rules set 19px with 0.02em, which is a visible half-step out. */
.fw-section .amity-academy .amity-slide-title,
.amity-academy .amity-slide-title,
.amity-academy h3.amity-slide-title {
	font-size: 19.2px;
	line-height: 19.2px;
	letter-spacing: normal;
}

/* Live's service card title is a block heading filling the card, so it centres
   against the card. Dev's is an inline link that shrinks to its text — same
   look at a glance, a box up to 300px narrower. */
.fw-service-card__title a {
	display: block;
}

/* Live's newsletter submit carries the same 1px #C5CE9F outline as the fields
   beside it. */
.amity-newsletter input[type="submit"],
.amity-newsletter button[type="submit"] {
	border: 1px solid #C5CE9F;
}

/* --------------------------------------------------------------------------
   Content forms. Form controls do not inherit the page font or size, so
   without this they render at the browser's 13.3px default in its own face —
   which is what the contact form was doing, 9px shorter than live's fields and
   with no outline at all.

   Scoped away from the newsletter band, which is a different, tighter design.
   -------------------------------------------------------------------------- */

.entry-content form:not(.search-form) :is(
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], input[type="number"], input[type="date"], select
) {
	font-family: inherit;
	font-size: 16px;
	background: #FEFEFE;
	border: 1px solid #C5CE9F;
	/* Live sets the field's own colour to #9C9C9C, so both the placeholder and
	   anything typed into it render light grey. */
	color: #9C9C9C;
}

/* Contact Form 7 wraps every control in a span. Live leaves that span inline;
   on the rebuild it was display:block, which added a line box of its own and
   pushed every field 25px further apart than live's. */
.entry-content form:not(.search-form) .wpcf7-form-control-wrap {
	display: inline;
}

.entry-content form:not(.search-form) :is(input[type="text"], input[type="email"],
	input[type="tel"], input[type="url"], input[type="number"]) {
	margin-block-end: 15px;
	line-height: 18.4px;
}

/* Live's message box is 32px tall — it sets an explicit height and ignores the
   field's rows=5 — and carries no border, unlike the single-line fields.
   Matched here for parity; it is worth asking whether live meant it, because a
   32px textarea is a poor thing to type into. */
.entry-content form:not(.search-form) textarea {
	height: 32px;
	min-height: 32px;
	margin-block-end: 15px;
	font-family: inherit;
	font-size: 16px;
	background: #FEFEFE;
	/* No border on live's message box, unlike the single-line fields. */
	border: 0;
	color: #000;
}

/* Live's single-line fields are 40px tall pills. */
.entry-content form:not(.search-form) :is(
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], input[type="number"], input[type="date"]
) {
	min-height: 40px;
	border-radius: 20px;
	padding: 1px 16px;
}

/* The message box is a soft rectangle, not a pill. */
.entry-content form:not(.search-form) textarea {
	border-radius: 3px;
	padding: 8px 16px;
}

/* Live's submit fills the column and runs a darker green than the band
   buttons, with the pale mint text the rest of the form uses. */
.entry-content form:not(.search-form) :is(input[type="submit"], button[type="submit"]) {
	width: 100%;
	min-height: 40px;
	border: 0;
	border-radius: 20px;
	background: #6F7553;
	color: #E1F1EF;
	font-family: inherit;
	font-size: 14.4px;
	cursor: pointer;
}

.amity-newsletter form :is(input, textarea, select, button) {
	/* The newsletter strip keeps its own sizing — see above. */
	min-height: 0;
	width: auto;
}

/* The testimonial card renders its own poster markup rather than the video
   thumb block's, so the 15px on .fw-video-thumb__poster never reached it and
   twenty-seven video stills across the site stayed square. */
.fw-testimonial-card__media img,
.fw-testimonial-card__media {
	border-radius: 15px;
}

/* --------------------------------------------------------------------------
   Tabs. Live draws them as filled buttons — clay for the open one, green for
   the rest, white text, square corners — above a panel with a light grey
   border and 30px of padding. The framework's default is transparent text with
   a coloured active label and a borderless panel, which reads as a completely
   different control.
   -------------------------------------------------------------------------- */

.entry-content .fw-tabs__tab {
	background: var(--fw-secondary, #95A372);
	color: #fff;
	border-radius: 0;
	border: 0;
}

.entry-content .fw-tabs__tab.is-active,
.entry-content .fw-tabs__tab[aria-selected="true"] {
	background: var(--fw-primary, #B25F55);
	color: #fff;
}

.entry-content .fw-tabs__tab:hover {
	background: var(--fw-highlight, #889763);
	color: #fff;
}

.entry-content .fw-tabs__panel {
	border: 1px solid var(--fw-light-grey, #E2E2E2);
	padding: 30px;
}

/* Headings inside a tab panel follow the page, not the bands: live's are left
   aligned. The rule further up only reaches direct children of .entry-content,
   and these sit two containers deeper. */
.entry-content .fw-tabs__panel > h2:not([class*="has-text-align"]),
.entry-content .fw-tabs__panel > .wp-block-heading:is(h2):not([class*="has-text-align"]) {
	text-align: left;
}

/* The mobile accordion triggers are the same control at a narrow width, and
   they had no styling at all — default grey browser buttons with a black
   border. They are display:none above the breakpoint, so nothing on a desktop
   comparison ever showed it. */
.entry-content .fw-tabs__accordion {
	width: 100%;
	margin: 0 0 2px;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 0;
	background: var(--fw-secondary, #95A372);
	color: #fff;
	font-family: inherit;
	font-size: 14.4px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.entry-content .fw-tabs__accordion.is-active,
.entry-content .fw-tabs__accordion[aria-expanded="true"] {
	background: var(--fw-primary, #B25F55);
	color: #fff;
}

/* The content-form rules above are more specific than the newsletter band's
   own, and they come later in this file, so adding them repainted the
   newsletter strip's Subscribe button in the contact form's darker green.
   Live's newsletter submit is the lighter green with a 1px #C5CE9F outline,
   the same as the fields beside it. Placed here, after those rules, so source
   order settles it rather than another round of specificity escalation. */
.entry-content .amity-newsletter .wpcf7 form :is(input[type="submit"], button[type="submit"]),
.amity-newsletter :is(input[type="submit"], button[type="submit"]) {
	background: var(--amity-green, #95A372);
	border: 1px solid #C5CE9F;
	color: #E1F1EF;
	/* Fills its 287px cell, as live's does. `auto` was here to undo the
	   content-form rule's width:100%, and shrink-wrapped it to 78px instead. */
	width: 100%;
	font-size: 16px;
}

/* Live's newsletter fields are pure white; only the contact form's are
   #FEFEFE. The content-form rule had painted both the same. */
.entry-content .amity-newsletter .wpcf7 form :is(input[type="text"], input[type="email"]) {
	background: #fff;
}

.entry-content .amity-newsletter .wpcf7 form :is(input[type="submit"], button[type="submit"]):hover,
.amity-newsletter :is(input[type="submit"], button[type="submit"]):hover {
	background: #899164;
}


/* --------------------------------------------------------------------------
   Page-level layout the old theme carried in per-page PHP templates.
   `#testimonials-page` / `#front-page` / `#videos-page` there; a slug body
   class here (see the body_class filter in functions.php).
   -------------------------------------------------------------------------- */

/* Live centres the whole testimonials page — heading and body copy — where the
   rest of the site is left-aligned and justified. */
.page-testimonials .entry-content,
.page-testimonials .fw-page-hero__content h1 {
	text-align: center;
}

/* The site-wide justify rule is
   `.entry-content:not(.entry-content--post) p:not([class*="has-text-align"])`,
   which scores (0,3,1) because :not() carries its argument's specificity. A
   plain `.page-testimonials .entry-content p` is (0,2,1) and loses however
   late it appears — source order cannot rescue a lower specificity. Matching
   the shape and adding `body` puts this at (0,3,2). */
body.page-testimonials .entry-content:not(.entry-content--post) p,
body.page-testimonials .entry-content:not(.entry-content--post) li,
body.page-testimonials .entry-content :is(h1, h2, h3, h4, h5, h6) {
	text-align: center;
}


/* The blog post "Share This" heading is theme markup, not a block, so the
   alignment content-migration cannot reach it. Live left-aligns it; the global
   `h2 { text-align: center }` was centring it on every post. */
.amity-post__share h2 {
	text-align: left;
}


/* The newsletter form's intro line is CF7's own markup (`<p class="title">`
   inside .wpcf7-form), so the alignment migration cannot reach it — the band
   centres its contents and live left-aligns this one paragraph. */
.amity-newsletter .wpcf7-form p.title {
	text-align: left;
}

/* --------------------------------------------------------------------------
   Accordion titles must run the full width of the bar, as they do on live.
   The starter draws its chevron with summary::after sized from
   --fw-wp-block-details-width, which is 100%, and flex-shrink: 0. The
   pseudo-element therefore claims the entire summary and refuses to give any
   back, squeezing every title into a narrow column on the left. Nothing is
   ever painted into it (no background, no mask) so the bar simply looks empty.
   Live has no chevron either. Taking it out of the flex row restores live.
   Root cause is the token in amity-tokens.css, which affects any site using
   the framework faqs block. Added 2026-09-28 by lisa.
   -------------------------------------------------------------------------- */
.entry-content .fw-faqs > .wp-block-details > summary::after {
	display: none;
}
/* Hover colour. Live turns the bar its pink/red, not a darker green:
   .accordion-title:hover { background-color: var(--amity-pink) } where
   --amity-pink is #b25f55 in the live theme. The base green already matches
   (live --amity-green #95A372 = dev --fw-secondary). Added 2026-09-28 by lisa.
   -------------------------------------------------------------------------- */
.entry-content .fw-faqs > .wp-block-details > summary:hover {
	background: #b25f55;
}
/* Gap above tables inside a panel. The inset rule above uses
   *:not(summary):first-of-type, and :first-of-type matches the first element
   of EVERY tag name, not the first child. Panels run <p>…</p> then
   <figure class="wp-block-table">, so the figure is never the first child but is
   always the first figure, and picks up the 40px meant only for the opening
   block, stacking on the table's own 16px. Live has no gap there. Reset it, then
   put the inset back on the one element that actually follows the summary.
   Added 2026-09-28 by lisa.
   -------------------------------------------------------------------------- */
.entry-content .fw-faqs > .wp-block-details > *:not(summary):first-of-type {
	margin-block-start: 0;
}
.entry-content .fw-faqs.fw-faqs > .wp-block-details > summary + * {
	margin-block-start: 40px;
}