/* =========================================================
   Amity Veterinary Care — the design layer.

   The framework starter ships with no design. This file is
   the build's own stylesheet: it carries Amity's typography,
   buttons and section rhythm, and sets the --fw-* layout
   tokens that default to 0 in the starter.

   Ported 2026-08-13 from the old `amityvets` theme's
   css/style.css and css/Master.min.css. Brand colour is NOT
   repeated here — it comes from the variables in
   fw-overrides.css, which mirror theme.json.
   ========================================================= */

/* ---------------------------------------------------------
   Intelo Alt. The client's licensed face, carried over from
   the old theme's webfonts/ directory.
   --------------------------------------------------------- */
@font-face {
	font-family: 'Intelo Alt';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('fonts/InteloAlt-Medium.otf') format('opentype');
}

@font-face {
	font-family: 'Intelo Alt';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('fonts/InteloAlt-SemiBold.otf') format('opentype');
}

@font-face {
	font-family: 'Intelo Alt';
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url('fonts/InteloAlt-Bold.otf') format('opentype');
}

/* ---------------------------------------------------------
   Amberly. The display pair the landing pages are set in —
   the script for headings, the sans for their intro lines.
   Converted from the old theme's TTFs to woff2, so the 442KB
   script face ships as 94KB, and only when a rule uses it.
   --------------------------------------------------------- */
@font-face {
	font-family: 'Amberly Script';
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
	src: url('fonts/Amberly-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Amberly Sans';
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
	src: url('fonts/AmberlySans-Bold.woff2') format('woff2');
}

/* ---------------------------------------------------------
   Base typography. Matches the old theme: body #5A5A5A at
   16px, headings on the brand colours.
   --------------------------------------------------------- */
body {
	color: var(--fw-grey);
	font-size: 16px;
	font-family: 'Intelo Alt', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

h1,
.wp-block-heading.is-style-h1 {
	color: var(--fw-secondary);
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1rem;
	text-align: left;
	/* Live sets a flat 32px at every width. The clamp matched it at 1920 and
	   shrank to 24px on a phone, where live is still 32. */
	font-size: 32px;
}

h2 {
	color: var(--fw-primary);
	font-weight: 600;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 1rem;
	text-align: center;
	text-transform: uppercase;
	/* Live is a flat 24px. */
	font-size: 1.5rem;
}

h3,
h4 {
	color: var(--fw-primary);
	/* Live's h3 and h4 are 700, not 600. h1 and h2 are 600 and already match;
	   this one was out on 115 routes — every card title on the site. */
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	/* Live is a flat 18.72px (1.17rem). */
	font-size: 1.17rem;
}

/* Live does not underline links. Across home, contact and how-to-join it
   underlines exactly one per page — "See all our reviews" — and that one
   belongs to the VetHelpDirect widget and is styled by them. Its own links are
   distinguished by the clay colour alone. The rebuild defaulted to underlined
   and was carrying 9 to 11 per page.

   Hover still underlines (see the nav/footer rule further down), which is
   where live puts it too. */
a {
	color: var(--fw-primary);
	text-decoration: none;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--fw-accent);
}

/* ---------------------------------------------------------
   Buttons. Border radius 10px, semibold, generous padding —
   as the old theme. Default is white with pink text, which
   is what sits on the hero; .pink and .green are the solid
   variants used through the body copy.
   --------------------------------------------------------- */
.wp-block-button__link,
.button {
	display: inline-block;
	border: none;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	font-size: 0.9em;
	font-weight: 600;
	/* 24px inline, matching live. */
	padding: 0.5rem 1.5rem;
	transition: 0.3s;
	background-color: var(--fw-white);
	color: var(--fw-primary);
}

.wp-block-button__link:hover,
.button:hover {
	text-decoration: none;
	background-color: var(--fw-primary);
	color: var(--fw-white);
}

.is-style-fill .wp-block-button__link,
.button.pink {
	background-color: var(--fw-primary);
	color: var(--fw-white);
}

.is-style-fill .wp-block-button__link:hover,
.button.pink:hover {
	background-color: var(--fw-accent);
	color: var(--fw-white);
}

.is-style-green .wp-block-button__link,
.button.green {
	background-color: var(--fw-secondary);
	color: var(--fw-white);
}

.is-style-green .wp-block-button__link:hover,
.button.green:hover {
	background-color: var(--fw-highlight);
	color: var(--fw-white);
}

/* ---------------------------------------------------------
   Section rhythm. The starter's --fw-* spacing tokens all
   default to 0 so the design layer can assert the scale.
   These are the values the old theme used.
   --------------------------------------------------------- */
:root {
	--fw-section-padding: 3.75rem 0;
	--fw-section-padding-tight: 0.9375rem 0;
	--fw-container-max: 85rem;
	--fw-container-pad: 1.25rem;
	--fw-grid-gap: 1.875rem;
	--fw-radius: 10px;

	/* content rhythm */
	--fw-content-margin: 1.875rem;
	--fw-heading-margin: 1rem;
}

/* The framework's own --fw-* block and hero tokens live in amity-tokens.css,
   which is generated. Do not redeclare them here — one source of truth. */

/* NOTE: this used to also match
   `.wp-block-group.is-layout-constrained > :where(...)`, which broke
   Gutenberg's constrained layout. Core emits a per-group rule for a group's
   own contentSize — `.wp-container-core-group-is-layout-<hash> > :where(...)`
   at (0,1,0) — and that blanket selector scored (0,2,0), so it overrode EVERY
   group's width with the container width. A group set to 998px rendered at the
   full 1330 rail and there was no way to narrow anything from the editor.

   Core already applies theme.json's contentSize to constrained groups, so
   nothing is lost by letting it do its job. */
.fw-container {
	max-width: var(--fw-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--fw-container-pad);
	padding-right: var(--fw-container-pad);
}

/* First paragraph of a content region sits flush to the heading above it. */
.fw-content > p:first-of-type {
	margin-top: 0;
}

/* ---------------------------------------------------------
   Images. The old theme used a 4:3 ratio crop widely, with
   the same 10px radius as the buttons.
   --------------------------------------------------------- */
.ratio-4to3 {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--fw-radius);
}

.ratio-4to3 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

figure.wp-block-image img {
	border-radius: 0;
}

/* Amity Financials: the report links read as body copy rather than as clay,
   and take the brand clay on hover. Live has them near-black but does not
   change them on hover - the hover is Lisa's call, not live's behaviour. */
.page-amity-financials .entry-content a:not(.wp-element-button):not(.button) {
	color: #282424;
}

.page-amity-financials .entry-content a:not(.wp-element-button):not(.button):hover,
.page-amity-financials .entry-content a:not(.wp-element-button):not(.button):focus-visible {
	color: var(--fw-primary);
}

/* Live renders in-content links in body near-black, not in the brand clay.
   Buttons are excluded - they carry their own colour - and a band's links
   inherit the band's colour, which is white on the olive one. */
.entry-content a:not(.wp-element-button):not(.button) {
	color: #282424;
}

/* Components that carry their own colour: a band, a blog card (white on
   clay) and the pagination. They keep it. */
.entry-content .fw-section a:not(.wp-element-button):not(.button),
.entry-content .amity-postcard a:not(.wp-element-button):not(.button) {
	color: inherit;
}

/* Live renders these two external links in #339966. That is not an Amity
   palette colour - it is an inline style that arrived with the original
   pasted copy, and the block conversion dropped it, so they render in the
   brand clay here. Reproduced as a rule rather than by putting paste debris
   back into the content. They appear on Out of Hours Emergency Services
   (2304) and Contact Us (18). */
/* They need the extra specificity now that content links are set above. */
.entry-content a[href*="minightvet.com"]:not(.wp-element-button):not(.button),
.entry-content a[href*="medivetgroup.com"]:not(.wp-element-button):not(.button) {
	color: #339966;
}

/* Live sets every image to `vertical-align: middle` — the usual reset that
   removes the few pixels of descender space a baseline-aligned inline image
   leaves beneath it. The rebuild left images on the default, which put that
   gap back under 3,760 images across 168 routes. */
img,
svg,
video,
iframe {
	vertical-align: middle;
}

/* ---------------------------------------------------------
   The sitewide Services / What Others Say bands used to be
   printed by template-parts/global-sections.php and styled
   here. They are blocks now (framework/section carrying an
   `amity-services` / `amity-testimonials` class), so those
   rules have been removed — `.amity-services { padding }`
   in particular was adding a second band's worth of padding
   on top of the block's own.

   The band styling lives in amity-bands.css.
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   Blog post sidebar (template-parts/post-sidebar.php).
   --------------------------------------------------------- */
.amity-post-aside {
	margin-top: var(--fw-content-margin, 1.875rem);
	padding-top: 1.875rem;
	border-top: 1px solid var(--fw-light-grey);
}

.amity-post-aside__label,
.amity-post-aside__heading {
	display: block;
	font-weight: 600;
	color: var(--fw-primary);
	text-transform: none;
	text-align: left;
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.amity-post-aside__share-link {
	margin-right: 0.75rem;
}

.amity-post-aside__group {
	margin-top: 1.5rem;
}

.amity-post-aside__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.amity-post-aside__list li {
	margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------
   Page hero — Amity treatment.

   The framework hero overlays its content on the image. Amity's
   design is a full-width image band with the H1 in a white title
   strip beneath it, so the heading stays legible. Reproduced by
   taking the media out of the absolute overlay.
   --------------------------------------------------------- */
.fw-page-hero .fw-page-hero__inner {
	display: block;
	max-width: none;
	margin-inline: 0;
	padding: 0;
	min-height: 0;
}

/* Block stylesheets are enqueued after the theme's, so at equal specificity
   blocks/page-hero/style.css wins. These rules are scoped to the block to
   outrank it — the token defaults inset the photo and rail the title strip. */
/* The block ships a full-bleed escape hatch — `position: absolute` with a
   negative `right` — for its overlay layout. Switching to `position: relative`
   leaves that offset behind as a 260px shove, so both insets are reset here. */
.fw-page-hero .fw-page-hero__media {
	position: relative;
	inset: auto;
	left: auto;
	right: auto;
	width: 100%;
	/* 20vw, matching live's `#page #hero`. Viewport-relative rather than a
	   pixel clamp so the crop holds at every width, and no border radius —
	   the band runs edge to edge. */
	height: 20vw;
	min-height: 180px;
	background-size: cover;
	background-position: center;
}

/* The white title strip under the image. Live runs it FULL WIDTH with the H1
   left-aligned inside the content rail, 15px of padding above, and a 48px
   line — not a centred heading in a constrained box. */
.fw-page-hero .fw-page-hero__content {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	/* Live's #title strip is 150px tall and the space inside it is carried by
	   the margins, not by a made-up bottom pad: 15 padding, 16 above the
	   trail, 24 trail, 16 below it, 48 heading, 16 under the heading, 15
	   padding = 150. The 51px bottom was compensating for margins that were
	   not there, which put the trail and heading 16-20px too high. */
	padding: 15px 0;
	text-align: left;
}

/* Live's hero heading carries 16px beneath it. */
.fw-page-hero .fw-page-hero__content h1 {
	margin-block-end: 1rem;
}

/* Breadcrumbs sit on the rail with the heading, above it. Live's `#breadcrumbs`
   carries 16px above AND below — 15px of strip padding, then 16, puts the trail
   on 489 and the heading on 529. At 0/12 the whole strip rode 16-20px high. */
.fw-page-hero .fw-page-hero__content .fw-breadcrumbs {
	margin-block: 1rem;
	text-align: left;
}

/* The strip is full width; its contents sit on the 1330 content rail, which
   is where live's heading and breadcrumb trail land. */
/* A title strip with no hero above it still needs to break out of the
   constrained container and carry the band's own top padding. */
.fw-page-hero--titleonly {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/* A hero with no image is live's plain title strip: 266px, with the heading on
   132px of clearance rather than 15. The media div is not rendered at all in
   that case — an empty one still took its 20vw of height. */
.fw-page-hero:not(.fw-page-hero--has-image):not(.fw-page-hero--titleonly):not(.fw-page-hero--empty-band) .fw-page-hero__content {
	padding: 15px 0;
}

.fw-page-hero:not(.fw-page-hero--has-image):not(.fw-page-hero--titleonly):not(.fw-page-hero--empty-band) .fw-page-hero__content h1 {
	margin-block: 132px 16px;
}

/* A title strip with nothing above it is 266 on live, not 150: the heading
   sits on 132px of clearance rather than 15. With a band above — the Contact
   page's map — it is the usual 150. */
.fw-page-hero--titleonly:not(.fw-page-hero--after-band) .fw-page-hero__content {
	padding: 15px 0;
}

.fw-page-hero--titleonly:not(.fw-page-hero--after-band) .fw-page-hero__content h1 {
	margin-block: 132px 16px;
}

/* Live's trail carries 16px above it as well as below on a bare strip. */
.fw-page-hero--titleonly:not(.fw-page-hero--after-band) .fw-breadcrumbs,
.fw-page-hero:not(.fw-page-hero--has-image):not(.fw-page-hero--titleonly):not(.fw-page-hero--empty-band) .fw-breadcrumbs {
	margin-block: 16px;
}

/* An empty band still has a band above it, so its title strip is the standard
   150 — the 266 above is for a page with no band at all. */
.fw-page-hero--empty-band .fw-page-hero__media {
	height: 20vw;
	min-height: 180px;
}

.fw-page-hero .fw-page-hero__content > * {
	max-width: 83.125rem;
	margin-inline: auto;
}

.fw-page-hero .fw-page-hero__content h1 {
	line-height: 48px;
	text-align: left;
}

.fw-page-hero__content h1 {
	color: var(--fw-secondary);
	margin-block: 0;
}

/* ---------------------------------------------------------
   Links: underline body copy, never navigation or buttons.
   --------------------------------------------------------- */
.fw-nav a,
.fw-footer a,
.wp-block-button__link,
.button,
.amity-services__link,
.custom-logo-link {
	text-decoration: none;
}

/* This selector list used to end in a comma with no declaration block after
   it. Comments are stripped before the parser sees them, so it ran straight on
   into the hero rule below and every nav and footer link inherited
   `height: 20vw` on hover — 384px at 1920 — which stretched the menu item, and
   with it the whole bar, and dropped the submenu 384px down the page. */
.fw-footer a:hover {
	text-decoration: underline;
}

/* The empty hero band live leaves above a title strip on pages with no hero
   image of their own. Same 20vw as a hero with a picture in it. */
.fw-page-hero--titleonly .fw-page-hero__media--empty {
	height: 20vw;
	min-height: 180px;
}


/* The title strip is deliberately full bleed, so on a narrow screen its
   contents would otherwise start 15px off the left edge. */
@media (max-width: 782px) {
	.fw-page-hero__content > * {
		padding-inline: 0.9375rem;
		box-sizing: border-box;
	}
}

/* --------------------------------------------------------------------------
   Shared chrome, corrected against live's computed styles. Each of these was
   wrong on every one of the ten routes sampled, so each is ten pages' worth of
   difference for one rule.
   -------------------------------------------------------------------------- */

/* The browser's default <small> is 0.8333em — 13.33px against a 16px base.
   Live's is 0.8em on a 1.5 line, which is what its footer, copyright line and
   strapline all measure. */
small {
	font-size: 0.8em;
	line-height: 1.5;
}

/* Live's breadcrumb trail is 16px, not 14. */
.fw-breadcrumbs,
.fw-breadcrumbs a,
.fw-breadcrumbs li {
	font-size: 16px;
}

/* "Read more" is not underlined on live. The design layer underlines links in
   body copy, and these are links in body copy, so they need saying explicitly. */
.entry-content a.button:not(:hover),
.entry-content .wp-block-button__link:not(:hover),
a.fw-read-more:not(:hover),
.fw-service-card a:not(:hover),
.fw-content-card a:not(:hover) {
	text-decoration: none;
}

/* Live bolds the page you are on in the breadcrumb trail. */
.fw-breadcrumbs [aria-current="page"] {
	font-weight: 700;
}

/* Live's testimonial attribution is 700, not the 900 the bold face resolves
   to — Intelo Alt ships a 900 and <strong> was reaching for it. */
.fw-testimonial__author,
.fw-testimonial-card strong,
.fw-testimonial strong {
	font-weight: 700;
}


/* ---------------------------------------------------------
   Flow margins in body copy.

   Live uses the browser's default flow margins — `p { margin: 1em 0 }`, and
   h3-h6 keep their 1em top margin. The block editor replaces that with the
   blockGap model, `:root :where(.is-layout-flow) > * { margin-block: 1em 0 }`:
   top margin only, bottom zero.

   Where margins collapse the two render the same, which is why this hid for so
   long. They diverge at container boundaries, inside flex and grid where
   margins do not collapse at all, and on the last child of any block — 115
   paragraphs across 9 sampled routes.
   --------------------------------------------------------- */
.entry-content p {
	margin-block: 1em;
}

.entry-content :is(h3, h4, h5, h6) {
	margin-block-start: 1em;
}

/* Restoring the bottom margin above must not also reinstate a TOP margin on
   the first element of a container: core zeroes that, live zeroes it, and the
   blanket rule above was overriding both. */
.entry-content :is(.is-layout-flow, .is-layout-constrained, .wp-block-column) > p:first-child {
	margin-block-start: 0;
}

/* On live the first body element sits flush under the title strip — the strip
   carries the space itself. On the rebuild the hero is a sibling block, so the
   element after it is not a :first-child and picked up a 16px margin live
   does not have. */
.entry-content > .fw-page-hero + * {
	margin-block-start: 0;
}

/* Free Downloads: the list of guides is a page of links, and live renders body
   links near-black (global `a { color: #282424 }`) rather than brand pink.
   Scoped to the page rather than changed globally, same as amity-financials
   above. Added 2026-09-28 by lisa. */
.page-free-downloads .entry-content a {
	color: #282424;
}
.page-free-downloads .entry-content a:hover,
.page-free-downloads .entry-content a:focus-visible {
	color: var(--fw-primary);
}
.page-free-downloads .entry-content .wp-block-button__link {
	color: var(--fw-white);
}