/* =========================================================
   Amity — header, footer and sitewide chrome.

   Ported from the old `amityvets` theme's css/style.css. The
   original leaned on Foundation's grid (grid-x / cell / align-*);
   the rules here are the same design expressed in flex and grid
   so the framework build does not need Foundation.
   ========================================================= */

/* Widths here are box widths: live's Foundation containers include their
   gutters in the stated max-width, and content-box quietly adds 30px. */
.amity-header *,
.amity-header *,
.amity-footer *,
.amity-header,
.amity-footer {
	box-sizing: border-box;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.amity-header {
	position: relative;
	z-index: 1000;
	box-shadow: 0 3px 20px 5px rgba(0, 0, 0, 0.35);
	/* The roundel hangs below the menu bar. */
	overflow: visible;
}

/* --- contact bar: forest photo behind a white wash --- */
.amity-contact-bar {
	position: relative;
	overflow: visible;
	/* The 0.8 white wash sits OVER the photo, which is how live is put
	   together. On one element a background-color paints under the image and
	   lightens nothing, so the photo goes on the pseudo-element below. */
	background-color: rgba(255, 255, 255, 0.8);
}

/* The photo covers the 82px contact bar ONLY, not the whole header.
   It used to sit on .amity-header, which is 138px tall once the menu bar is
   counted, and `cover` on a box 56px taller crops the same file to a
   completely different part of the picture — so the two headers looked like
   they were using different images when the file was always the same one. */
.amity-contact-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Behind the bar's own background-color, so the wash lightens it. */
	z-index: -1;
	background-image: url('../images/the-enchanted-forest-GREY.jpg');
	background-size: cover;
	/* Live anchors the wash to the TOP of the bar, not its centre. At `center`
	   a different band of the photograph shows through. */
	background-position: top;
}



.amity-contact-bar__inner {
	position: relative;
	z-index: 1;
	/* 1360 wide INCLUDING the 15px gutters, which is what live's
	   .grid-container resolves to — not 1360 of content inside a 1400 box. */
	max-width: var(--fw-container-max, 85rem);
	margin-inline: auto;
	padding: 0 0.9375rem;
	min-height: 82px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}

.amity-contact-bar__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.amity-contact-bar__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	text-align: right;
}

.amity-contact-bar__phone {
	white-space: nowrap;
	color: var(--fw-grey);
	/* "Call" stays at body size; live only enlarges the number itself. */
	font-size: 16px;
	line-height: 36px;
	text-align: start;
}

.amity-contact-bar__phone a {
	color: var(--fw-primary);
	text-decoration: none;
	font-size: 24px;
	line-height: 36px;
	font-weight: 700;
	margin-top: 8px;
	display: inline-block;
}

.amity-contact-bar__logo img,
.logo {
	max-height: 70px;
	width: auto;
	display: block;
}

/* Search: one pill with the button tucked inside it as a magnifier, which is
   how live reads. The submit keeps its text for screen readers and is hidden
   behind the icon visually. */
.amity-contact-bar .search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 236px;
	height: 34px;
	background: #fff;
	/* Live's pill carries a light grey outline. */
	border: 1px solid #e0e0e0;
	border-radius: 7px;
	/* 15px each side on live — the missing right padding pulled the magnifier
	   6px off its mark and left the gap after it uneven. */
	padding-inline: 15px;
}

.amity-contact-bar .search-form label {
	margin: 0;
	display: block;
}

.amity-contact-bar .search-field {
	width: 180px;
	height: 32px;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-size: 16px;
	line-height: 18px;
	background: #fff;
	color: #000;
}

.amity-contact-bar .search-field::placeholder {
	/* Live's is the brand clay at 14.4px in the heavy weight, not grey body
	   copy at 16. The box was already right; the word inside it was not. */
	color: var(--fw-primary, #B25F55);
	font-size: 14.4px;
	font-weight: 900;
	opacity: 1;
}

.amity-contact-bar .search-submit {
	position: relative;
	width: 16px;
	height: 32px;
	flex: 0 0 16px;
	/* Pins the magnifier to the pill's right padding edge, as live has it.
	   With margin-left: 0 it sat flush against the input instead, 8px in from
	   where live puts it. */
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--fw-secondary);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 16px;
	line-height: 16px;
}

/* The magnifier is a real SVG in a real <button>: WordPress's default form
   emits <input type="submit">, and an input cannot carry a pseudo-element, so
   a CSS-drawn icon renders nothing at all. See searchform.php. */
/* The glyph is drawn filled now (see searchform.php), so it needs no extra
   size or stroke to hold its own — live's is 16 by 16. */
.amity-contact-bar .search-submit svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* --- strapline strip (small screens) --- */
.amity-tagline {
	display: none;
	background-color: var(--fw-primary);
	color: var(--fw-white);
	text-align: center;
	padding: 0.47rem 0.9375rem;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* --- green menu bar --- */
/* No `position: relative` here — see li.homelogo. */
.amity-menu-bar {
	background-color: var(--fw-secondary);
	color: var(--fw-white);
	text-align: center;
}

/* The nav's -15px gutter offset has to come back out of the container, or the
   row sits 15px inside live's on each side. */
.amity-menu-bar__inner {
	max-width: var(--fw-container-max, 85rem);
	padding-inline: 0.9375rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Live's menu is a Foundation grid of equal-width cells with 15px gutters, so
   every item occupies the same slot and the row reads as padded rather than
   flush to the container edges. Reproduced with equal flex bases. */
.amity-menu-bar .fw-nav {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0 -15px;
	padding: 0;
}

.amity-menu-bar .fw-nav > li {
	flex: 1 1 0;
	min-width: 0;
	margin-inline: 15px;
	text-align: center;
}

/* The roundel's slot is fixed, not shared. */
.amity-menu-bar .fw-nav > li.homelogo {
	flex: 0 0 310px;
}

.amity-menu-bar .fw-nav > li > a {
	display: inline-block;
	padding: 1rem 0;
	color: var(--fw-white);
	text-decoration: none;
	font-weight: 400;
}

.amity-menu-bar .fw-nav > li > a:hover {
	color: var(--fw-white);
}

/* Dropdowns */
.amity-menu-bar .fw-nav li {
	position: relative;
}

/* Live scopes the dropdown to TOP-LEVEL items — `#main-menu > .menu-item-
   has-children > .sub-menu`. That matters: the Services mega-menu is three
   levels deep, and its third level is laid out INLINE inside the column, not
   floated out as another absolute dropdown. An unscoped `.sub-menu` rule (and
   the framework's own, which this overrides) turns every level into a
   dropdown, which is why Services came out as a flat single column. */
.amity-menu-bar .fw-nav > li > .sub-menu {
	position: absolute;
	display: none;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	/* Live sizes the panel to its item plus the 15px padding either side,
	   rather than to a fixed 230px. */
	min-width: calc(100% + 1.875rem);
	background-color: var(--fw-highlight);
	list-style: none;
	padding: 0 0.9375rem;
	margin: 0;
	/* Inherited from live's centred `#menu-bar`; the rebuild forced left. */
	text-align: center;
	box-shadow: 0 3px 20px 2px rgba(0, 0, 0, 0.25);
	z-index: 10;
}

/* The first and last panels align to their own edge instead of centring, so
   neither runs off the side of the bar. */
.amity-menu-bar .fw-nav > li:first-child > .sub-menu {
	left: -0.9375rem;
	transform: none;
}

.amity-menu-bar .fw-nav > li:last-child > .sub-menu {
	left: auto;
	right: -0.9375rem;
	transform: none;
}

.amity-menu-bar .fw-nav > li:hover > .sub-menu,
.amity-menu-bar .fw-nav > li:focus-within > .sub-menu {
	display: block;
}

/* --- the Services mega-menu (live's `.mini-menu`) ---
   Two columns, left-aligned, each top-level child acting as an uppercase
   heading over its own children. */
.amity-menu-bar .fw-nav > .mini-menu > .sub-menu {
	text-align: left;
	column-count: 2;
}

.amity-menu-bar .fw-nav > .mini-menu > .sub-menu > li > a {
	color: #c8d2af;
	font-weight: 700;
	text-transform: uppercase;
}

/* The third level is part of the column flow, not a dropdown of its own.
   This has to undo the framework's absolute/hidden defaults explicitly. */
.amity-menu-bar .fw-nav > .mini-menu > .sub-menu > li > .sub-menu {
	position: static;
	display: inline-block;
	list-style: none;
	padding-left: 0;
	min-width: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

/* At desktop the mega-menu anchors to the left edge of its own item instead of
   centring on it — otherwise a panel this wide centres over the logo roundel
   and half of it disappears behind the badge. */
@media only screen and (min-width: 1024px) {
	.amity-menu-bar .fw-nav > .mini-menu > .sub-menu {
		left: -0.9375rem;
		transform: none;
	}
}

/* On phones live collapses it back to one centred column. */
@media only screen and (max-width: 639px) {
	.amity-menu-bar .fw-nav > .mini-menu > .sub-menu {
		column-count: 1;
		text-align: center;
	}
}

.amity-menu-bar .fw-nav .sub-menu a {
	display: block;
	padding: 0.5rem 0;
	color: var(--fw-white);
	white-space: nowrap;
	text-decoration: none;
}

/* The centre "Home" item carries the roundel logo on the live site. */
.amity-menu-bar .fw-nav .homelogo > a {
	padding: 0.25rem 0;
}

/* Sizing lives on .amity-nav-logo further down — a max-height here would
   outrank it and squash the badge back to menu-bar height. */
/* Live's roundel is `fill`; the rebuild had `contain`. */
.amity-menu-bar .fw-nav .homelogo img,
.amity-header img.logo,
.amity-contact-bar__logo img {
	object-fit: fill;
}

.amity-menu-bar .fw-nav .homelogo img {
	display: block;
}

@media (max-width: 1023px) {
	.amity-contact-bar__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.amity-contact-bar__left,
	.amity-contact-bar__right {
		justify-content: center;
	}

	.amity-tagline {
		display: flex;
	}

	.amity-menu-bar {
		display: none;
	}
}

/* ---------------------------------------------------------
   Back-to-top strip
   --------------------------------------------------------- */
.amity-to-top {
	position: relative;
	background-color: var(--fw-secondary);
	color: var(--fw-white);
	text-align: center;
	padding: 0.75rem 1.25rem;
}

.amity-to-top a {
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
	/* Live's disc is 64px across, measured on the rendered page — this was 36,
	   which read as a different control entirely at the foot of every page. */
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--fw-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Live's glyph is 20.4px of Font Awesome chevron-up in white. It is drawn as
   a filled path now (see footer.php), so no rotation or border is involved. */
.amity-to-top__chevron {
	display: block;
	width: 20.4px;
	height: 20.4px;
	color: var(--fw-white);
}

.amity-to-top__strapline {
	font-weight: 600;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.amity-footer {
	/* Transparent with no padding of its own on live — the 35px of air sits on
	   the inner container. */
	background: transparent;
	padding-top: 0;
}

.amity-footer .amity-footer__inner,
.amity-footer__inner {
	max-width: var(--fw-container-max, 85rem);
	margin-inline: auto;
	/* 35px of vertical air and 15px gutters, as live — plus the 15px that
	   live's grid cells carry as their own margin above and below the row. */
	padding: 50px 0.9375rem;
	display: grid;
	/* Four columns: brand (with the signposts under it), then three menu
	   columns sized to their content — equal thirds wrapped live's longest
	   footer link onto two lines. */
	grid-template-columns: 216px repeat(3, max-content);
	justify-content: space-between;
	gap: 1.875rem;
	align-items: start;
}

.amity-footer__brand .logo {
	max-height: 64px;
	margin-bottom: 0.75rem;
}

/* Live's footer brand text is plain 16px body copy on a 24px line with 16px
   of margin above and below — not the 0.95em shrink that was here. */
.amity-footer__brand p {
	margin: 16px 0;
	font-size: 16px;
	line-height: 24px;
}

/* Live's brand column is 222px wide and its email line is 222px long, so the
   address sits on one line by exactly nothing to spare. The rebuild's column
   was 216 and wrapped "friends@amityvets.com" onto a second line. */
.amity-footer__brand {
	min-width: 222px;
}

.amity-footer__brand a {
	color: var(--fw-primary);
	text-decoration: none;
}

.amity-footer__social {
	display: flex;
	gap: 0.5rem;
}

/* The old letter-in-a-pink-disc placeholder lived here and outranked
   .amity-social on specificity. Real brand-coloured icons are further down. */
.amity-footer__social a {
	text-decoration: none;
}

.amity-footer__heading,
.amity-footer h4 {
	display: block;
	color: var(--fw-primary);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	margin: 1rem 0 0.4rem;
	text-align: left;
}

.amity-footer__menu {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}

/* Live's footer menu rows are a flat 24px — the 0.15rem here put every list
   item on 26 and stretched the whole footer. */
.amity-footer__menu li {
	margin-bottom: 0;
	line-height: 24px;
}

.amity-footer__menu a {
	color: var(--fw-grey);
	text-decoration: none;
}

.amity-footer__menu a:hover {
	color: var(--fw-primary);
}

.amity-footer__address {
	font-style: normal;
	color: var(--fw-grey);
}

/* --- the three signpost buttons ---
   A row of their own spanning the grid, left-aligned under the logo column.
   Live puts them below the four menu columns rather than inside one. */
.amity-footer__signposts {
	grid-column: 1 / -1;
	justify-self: start;
	display: flex;
	flex-direction: column;
	/* 15px between cards on live, not 0.6rem (9.6). */
	gap: 15px;
	width: 255px;
	max-width: 100%;
}

.amity-signpost__body {
	display: block;
}

.amity-signpost {
	position: relative;
	display: block;
	border-radius: var(--fw-radius, 10px);
	padding: 0.6rem 3rem 0.6rem 0.9rem;
	color: var(--fw-white) !important;
	text-decoration: none;
	font-size: 0.8em;
	line-height: 1.35;
}

.amity-signpost--green { background: var(--fw-secondary); }
.amity-signpost--pink  { background: var(--fw-primary); }

.amity-signpost:hover { filter: brightness(0.94); }

/* Live FLOATS the icon right (`#button-links a img`), so the title and body
   copy wrap around it and stop short of the glyph. Absolute positioning takes
   the icon out of flow instead, and the text runs underneath it — which is
   exactly what it was doing. Everything here is measured off live. */
.amity-signpost img {
	float: right;
	width: 40px;
	height: 40px;
	margin-left: 0.625rem;
	position: relative;
	top: 6px;
	right: auto;
	transform: none;
}

.amity-signpost__title {
	display: block;
	font-weight: 700;
	font-size: 1.15em;
}

.amity-footer__copyright {
	max-width: var(--fw-container-max, 75rem);
	margin: 2rem auto 0;
	padding: 1.5rem 1.25rem;
	text-align: center;
	border-top: 1px solid var(--fw-light-grey);
	color: var(--fw-grey);
}

.amity-footer__copyright a {
	color: var(--fw-primary);
	text-decoration: none;
}

@media (max-width: 1023px) {
	.amity-footer .amity-footer__inner,
.amity-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 639px) {
	.amity-footer .amity-footer__inner,
.amity-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Accessibility helper. wp-block-library is dequeued, which
   takes core's .screen-reader-text with it, so the skip link
   rendered as visible text at the top of every page.
   --------------------------------------------------------- */
.screen-reader-text:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fw-skip-link:focus {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2000;
	background: var(--fw-white);
	padding: var(--fw-skip-link-padding, 0.75rem 1.25rem);
	border-radius: var(--fw-radius, 10px);
}

/* ---------------------------------------------------------
   The roundel. On the live site it is a single badge centred
   across both bars, overlapping the green menu bar. It lives in
   the menu as the `homelogo` item, so it stays editable.
   --------------------------------------------------------- */
.amity-contact-bar__logo {
	visibility: hidden;
	height: 0;
}

/* Static, not relative: the badge is anchored to the header, not to this menu
   item, so that it lands on the page's centre line rather than the centre of
   whatever width the surrounding menu items happen to add up to. */
.amity-menu-bar .fw-nav > li.homelogo {
	position: static;
	flex: 0 0 auto;
	width: 310px;
}

/* The badge is taller than both bars put together, so it is lifted out of the
   menu row entirely and hung from the top of the header. Anything in its path
   has to allow overflow — see .amity-header / .amity-contact-bar below.

   The link needs an EXPLICIT size. Left to shrink-to-fit it sizes itself to the
   SVG's intrinsic 100px, and `max-width: 100%` on the image then caps the image
   at that same 100px — the two starve each other and the badge comes out a
   third of the size it should be. Matches the live badge: 310 x 324, top edge
   23px above the viewport. */
.amity-menu-bar .fw-nav > li.homelogo > a {
	position: absolute;
	left: 50%;
	top: -23px;
	transform: translateX(-50%);
	width: 310px;
	height: 324px;
	padding: 0;
	display: block;
	z-index: 30;
}

.amity-nav-logo {
	display: block;
	/* Fills the link, which is where the real dimensions live. Explicit rather
	   than auto: logo_2020.svg carries no viewBox, so an auto height resolves
	   to 0 and the roundel renders invisible. */
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

@media (max-width: 1023px) {
	.amity-contact-bar__logo {
		visibility: visible;
		height: auto;
	}
}

/* ---------------------------------------------------------
   Full-bleed sections. theme.json's constrained layout caps
   direct children; alignfull has to invert it explicitly.
   --------------------------------------------------------- */
/* `margin: 0` was the bug: the constrained container has global side padding,
   so a full-bleed child has to pull itself back out with NEGATIVE margins.
   Zeroing them left every band inset by the padding — 16px each side, enough
   to see as a white stripe down both edges of the hero. */
.entry-content > .alignfull,
.entry-content > .wp-block-framework-page-hero,
.entry-content > .wp-block-framework-home-hero {
	max-width: none;
	width: auto;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
	padding-left: 0;
	padding-right: 0;
}

.wp-block-framework-page-hero .fw-page-hero__media,
.wp-block-framework-page-hero .fw-page-hero__inner {
	max-width: none;
}

/* Height is 20vw, set in amity-design.css to match live's `#page #hero`; a
   clamp here was capping it at 380px. */
.wp-block-framework-page-hero .fw-page-hero__media {
	border-radius: 0;
}

/* The title strip runs full width; its CONTENTS sit on the rail. Railing the
   strip itself put a 260px margin on it and undid the full-bleed above — see
   .fw-page-hero__content in amity-design.css, which owns this now. */


/* ---------------------------------------------------------
   Footer detail — measured against live rather than guessed.
   --------------------------------------------------------- */

.amity-footer__brand .logo {
	width: 216px;
	height: 70px;
	max-height: none;
	object-fit: contain;
}

/* Column headings: 16px on a 16px line, tight to the list below. */
.amity-footer .amity-footer__heading,
.amity-footer .amity-footer__heading h4 {
	font-size: 16px;
	line-height: 16px;
	/* 10px beneath on live, not 0.5rem (8). Small, but it is under every
	   heading in every footer column on every page. */
	margin-block: 0 10px;
	text-align: left;
}

.amity-footer .amity-footer__heading + .amity-footer__menu { margin-top: 0; }

/* Socials: 40px brand-coloured discs, as live. */
.amity-footer__social {
	display: flex;
	gap: 16px;
	margin-block: 1rem 0;
}

.amity-footer .amity-social,
.amity-social {
	display: grid;
	font-size: 26px;
	line-height: 26px;
	text-align: center;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff !important;
	text-decoration: none;
	margin-top: 8px;
	margin-right: 16px;
	transition: opacity 0.2s ease;
}

.amity-social:hover { opacity: 0.85; }

.amity-social svg { width: 22px; height: 22px; display: block; }

.amity-social--facebook  { background: #4267B2; }
/* The authentic Instagram brand gradient, as live uses: a radial burst from
   the lower left, not a 45-degree linear ramp. */
.amity-social--instagram {
	background: radial-gradient(circle at 30% 107%,
		#FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.amity-social--youtube   { background: #FE0100; }

/* Signposts: 14px/600 on a 14px line, 20px radius, 12px padding. */
.amity-signpost {
	font-size: 14px;
	line-height: 14px;
	border-radius: 20px;
	/* 12px all round on live — the icon is absolutely positioned over the
	   card, not given a 48px gutter of its own, so the copy runs the full
	   width of the card as it does on live. */
	padding: 12px;
	text-align: left;
}

/* Measured off live: the card runs 14.4px/600 and its title 14.4px/700 on a
   14.4px line. The rebuild had 14px/600 and 14px/400, which reads noticeably
   lighter in a card this small. */
.amity-footer .amity-signpost {
	font-size: 14.4px;
	font-weight: 600;
	/* Live's card runs on a 14.4px line, not 14 — over three lines that is the
	   difference between a 77px card and a 67px one, and there are three of
	   them on every page. */
	line-height: 14.4px;
}

.amity-signpost__title {
	display: block;
	font-size: 14.4px;
	font-weight: 700;
	line-height: 14.4px;
	text-transform: capitalize;
	/* Live's H4 carries 10px beneath it before the body copy starts. */
	margin-block-end: 10px;
}

.amity-signpost__text {
	display: block;
}

.amity-signpost__text {
	font-weight: 600;
	line-height: 1.4;
}

.amity-footer__copyright {
	margin-top: 0;
	padding: 25px 15px;
}


/* ---------------------------------------------------------
   Footer — visual pass against live
   --------------------------------------------------------- */

/* Live centres the brand column: logo, contact details and socials. */
.amity-footer__brand {
	text-align: center;
}

.amity-footer__brand .logo {
	margin-inline: auto;
}

.amity-footer__social {
	justify-content: center;
}

/* Contact details are dark; only the footer menus use the link colour. */
.amity-footer__brand p,
.amity-footer__brand a {
	color: #282424;
	text-decoration: none;
}

/* Signpost text is white on live — all of it, title and body. */
.amity-footer .amity-signpost,
.amity-footer .amity-signpost span,
.amity-signpost__title,
.amity-signpost__text {
	color: var(--fw-white, #fff);
}

/* A column holds more than one menu; live puts air above the second and third
   headings so the groups read apart. */
.amity-footer__col .amity-footer__menu + .amity-footer__heading,
.amity-footer__col .amity-footer__menu + h4.amity-footer__heading {
	margin-block-start: 1.5rem;
	display: block;
}

/* The social glyphs fill more of their disc on live. */
.amity-social svg {
	width: 24px;
	height: 24px;
}


/* The olive to-top strip: live runs its strapline at 24px on a 36px line with
   24px of padding above, giving an 84px band. Ours was body-sized. */
.amity-to-top {
	font-size: 24px;
	line-height: 36px;
	padding: 24px 0;
	text-align: center;
}

.amity-to-top__strapline {
	font-size: inherit;
	line-height: inherit;
}

/* The signpost cards are 77px on live. */
.amity-footer .amity-signpost {
	padding-block: 12px;
}

/* Live spaces the social discs with a margin-RIGHT on each rather than a flex
   gap, so the row starts flush and the trailing space falls after the last. */
.amity-footer__social {
	gap: 0;
}

.amity-footer .amity-social {
	margin-right: 16px;
}

/* Form controls do not inherit the page font — a browser gives them its own
   system default — so the header search box was rendering its placeholder in
   Arial while everything around it used the brand face. Nothing about the box
   moved, which is why only a computed-style comparison caught it. */
.search-form .search-field,
.search-form .search-submit {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   Header and footer, corrected against live's computed styles.
   -------------------------------------------------------------------------- */

/* Live's "Call" label sits on a 24px line with 15px of padding above and
   below; the rebuild had it on a 36px line with none, which is the same total
   height reached a different way and puts the number on a different baseline. */
.amity-contact-bar__phone {
	line-height: 24px;
	padding: 15px 0;
}

/* Live's search pill outline is #C9C9C9. */
.amity-contact-bar .search-form {
	border-color: #C9C9C9;
}

/* Live's footer contact block is body grey throughout, links included — not
   the near-black the rebuild inherited, and not clay. */
.amity-footer__brand p,
.amity-footer__brand p a {
	color: var(--fw-grey, #5A5A5A);
}

/* The copyright LINE is body grey and only its LINKS are #3A3A3A on live.
   Setting both to #3A3A3A darkened the sentence around them. */
.amity-footer__copyright {
	color: var(--fw-grey, #5A5A5A);
}

.amity-footer__copyright a {
	color: #3A3A3A;
}

/* Live's strapline is regular weight. */
.amity-to-top__strapline {
	font-weight: 400;
}

/* Live's signpost body sits on a 14.4px line, not a 1.4 ratio: two tight
   lines inside a small card. */
.amity-signpost__text {
	line-height: 14.4px;
}

/* Live's header CTA is inline-block; as a block it stretches its column. */
.amity-contact-bar__right .button,
.amity-contact-bar__right .wp-block-button__link {
	display: inline-block;
}

.amity-contact-bar .search-field {
	line-height: 18.4px;
}

/* --------------------------------------------------------------------------
   Newsletter popup. Live's is a wide bisque panel inside a white frame with
   the roundel overhanging its top edge and a cross at the top right; the
   rebuild had a narrow white box with a "Close" link underneath. Measured off
   live's .jquery-modal / .modal / .dftPopup.
   -------------------------------------------------------------------------- */

/* The modal is authored inside the content, and Gutenberg's constrained
   layout caps the width of everything in there — including a position:fixed
   overlay, which then stopped 240px short of each side of the viewport and
   left white bands down the edges of the dimmed page. */
.fw-modal {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 20px;
}

/* Live's frame: white, 8px, 15px of padding, 1316 wide. */
.fw-modal .fw-modal__panel {
	width: min(100%, 1316px);
	max-width: 1316px;
	padding: 15px;
	border-radius: 8px;
	overflow: visible;
}

/* The bisque panel inside the frame. */
.fw-modal .fw-modal__content {
	background: #FFE4C4;
	padding: 16px;
}

/* The roundel straddles the top edge rather than sitting inside. Positioned
   rather than pulled up with a negative margin: a negative margin dragged the
   heading up underneath it and the two overlapped. */
.fw-modal .fw-modal__logo {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
}

.fw-modal .fw-modal__logo img {
	width: 110px;
	height: 110px;
	margin: 0;
}

/* Room for the roundel above the copy — live's heading sits 103px below the
   top of the bisque panel. */
.fw-modal .fw-modal__content {
	padding-block-start: 103px;
}

/* Live sets the popup's copy at 24px. */
.fw-modal .fw-modal__content p {
	font-size: 24px;
	line-height: 36px;
	margin-block: 0 1rem;
}

/* A cross at the top right of the frame, not a text link below it. */
.fw-modal .fw-modal__close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #282424;
	color: #fff;
	font-size: 0;
	text-decoration: none;
	line-height: 30px;
	text-align: center;
}

.fw-modal .fw-modal__close::before {
	content: "\00d7";
	font-size: 20px;
	line-height: 30px;
}

.fw-modal .fw-modal__close:hover {
	background: var(--fw-primary, #B25F55);
	color: #fff;
}

/* Live's popup fields are the full third of the row at 24px, and its submit is
   the LIGHTER green — the darker #6F7553 belongs to the contact form, and that
   rule is more specific, so these have to out-specify it rather than rely on
   source order. */
.entry-content .fw-modal .fw-modal__content :is(input[type="text"], input[type="email"]) {
	font-size: 24px;
	padding-inline: 24px;
}

.entry-content .fw-modal .fw-modal__content :is(input[type="submit"], button[type="submit"]) {
	/* Live's Subscribe fills its third, like the two fields beside it. */
	width: 100%;
	font-size: 24px;
	background: var(--fw-secondary, #95A372);
	color: #E1F1EF;
}

/* Live lays the three controls out as equal thirds on one line, vertically
   centred. Contact Form 7 wraps each field in its own <p>, and without this
   they sat at three different heights. */
.fw-modal .fw-modal__content .grid-x {
	display: flex;
	/* wrap, not nowrap: the subscribe line takes a full-width row of its own
	   below, and nowrap kept it on the same line as the three controls and
	   squeezed them off the end of the panel. */
	flex-wrap: wrap;
	/* stretch, so all three cells are the same height and the controls inside
	   them can be centred on one line — Contact Form 7 gives the email field
	   an extra validation wrapper, which made its cell taller and lifted its
	   input above the other two. */
	align-items: stretch;
	justify-content: space-between;
	/* No gap: live's cells are exact thirds and carry their spacing as
	   padding. A gap here made three thirds wider than the row and threw the
	   Subscribe button onto a line of its own. */
	gap: 0;
}

.fw-modal .fw-modal__content .grid-x > .cell {
	/* border-box, or the 10px of padding is added OUTSIDE the third and only
	   two of the three cells fit on the row. */
	box-sizing: border-box;
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	min-width: 0;
	margin: 0;
	padding-inline: 10px;
}

/* Top, not centre. Contact Form 7 gives the email and submit fields extra
   validation markup, so their paragraphs are 76px tall against the name
   field's 40 — centring then dropped the name field 18px below the other two.
   Aligning to the top puts all three inputs on one line whatever is stacked
   invisibly beneath them. */
.fw-modal .fw-modal__content .grid-x > .cell.medium-4 {
	display: flex;
	align-items: flex-start;
}

.fw-modal .fw-modal__content .grid-x > .cell.medium-4 > * {
	width: 100%;
	margin: 0;
}

.fw-modal .fw-modal__content .grid-x > .cell.medium-12 {
	flex-basis: 100%;
	max-width: 100%;
}

.fw-modal .fw-modal__content .wpcf7-form-control-wrap,
.fw-modal .fw-modal__content .wpcf7-form-control-wrap input {
	display: block;
	width: 100%;
}

/* The subscribe line is its own row above the controls. */
.fw-modal .fw-modal__content .grid-x > .title,
.fw-modal .fw-modal__content .grid-x > [role="status"] {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Live's panel is 1316 wide INCLUDING its 15px frame. */
.fw-modal .fw-modal__panel {
	box-sizing: border-box;
}

/* Live fits "Email: friends@amityvets.com" on one line in a 222px column with
   nothing to spare; the rebuild's is a pixel or two wider and broke after the
   label. The <br> in the markup still ends the phone line, so suppressing the
   soft wrap reproduces live's two lines exactly. Desktop only — on a narrow
   screen the address does need to be allowed to break. */
@media (min-width: 783px) {
	.amity-footer__brand p {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Mobile header. amity-chrome.css replaces the starter's fw-chrome.css
   wholesale (see inc/setup.php), and fw-chrome.css was where the hamburger's
   bars were styled — so on a phone the menu button rendered as a bare grey
   browser button with three zero-size spans inside it. Nothing on a desktop
   comparison could ever have shown that.
   -------------------------------------------------------------------------- */

.fw-menu-btn {
	width: 24px;
	height: 18px;
	padding: 0;
	gap: 4.5px;
	background: none;
	border: 0;
	color: var(--fw-white, #fff);
	cursor: pointer;
}

/* Live's is 24 wide by 18 tall: three 3px bars with 4.5px between them. */
.fw-menu-btn__bar {
	display: block;
	width: 24px;
	height: 3px;
	margin-inline: auto;
	background: currentColor;
}

@media (max-width: 1023px) {
	/* Live drops the symptom checker and the search box on a phone; the
	   rebuild kept both, which is what made its header 65px taller. */
	.amity-contact-bar__left {
		display: none;
	}

	/* The number and the booking button stack and centre rather than sitting
	   side by side. */
	.amity-contact-bar__right {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	/* Live's logo sits 15px down and its phone line carries no vertical
	   padding on a phone — the 15px each side is there to make the 82px
	   desktop bar and was adding 30px of header height here. */
	.amity-contact-bar__inner {
		padding-block: 15px 0;
		gap: 0;
		min-height: 0;
	}

	.amity-contact-bar__phone {
		padding-block: 4px 0;
	}
}