/* Custom NMR component CSS ported from nmr.co.uk (decorative line-fills + offices grid) */
.lines-fill path{fill:transparent;mix-blend-mode:multiply;-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:cubic-bezier(.47,0,.745,.715);animation-timing-function:cubic-bezier(.47,0,.745,.715)}
.lines-fill-l.is-animated path:nth-child(1){-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-name:animate-fill-sky;animation-name:animate-fill-sky}
.lines-fill-l.is-animated path:nth-child(2){-webkit-animation-delay:.9s;animation-delay:.9s;-webkit-animation-name:animate-fill-sun;animation-name:animate-fill-sun}
.lines-fill-l.is-animated path:nth-child(3){-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-name:animate-fill-ghost;animation-name:animate-fill-ghost}
.lines-fill-l.is-animated path:nth-child(4){-webkit-animation-delay:1.1s;animation-delay:1.1s;-webkit-animation-name:animate-fill-mint;animation-name:animate-fill-mint}
.lines-fill-l.is-animated path:nth-child(5){-webkit-animation-delay:1.2s;animation-delay:1.2s;-webkit-animation-name:animate-fill-raspberry;animation-name:animate-fill-raspberry}
.lines-fill-l.is-animated path:nth-child(6){-webkit-animation-delay:1.3s;animation-delay:1.3s;-webkit-animation-name:animate-fill-sky;animation-name:animate-fill-sky}
.lines-fill-l.is-animated path:nth-child(7){-webkit-animation-delay:1.4s;animation-delay:1.4s;-webkit-animation-name:animate-fill-olive;animation-name:animate-fill-olive}
.lines-fill-l.is-animated path:nth-child(8){-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-name:animate-fill-raspberry;animation-name:animate-fill-raspberry}
.lines-fill-l.is-animated path:nth-child(9){-webkit-animation-delay:1.6s;animation-delay:1.6s;-webkit-animation-name:animate-fill-sun;animation-name:animate-fill-sun}
.lines-fill-r.is-animated path:nth-child(1){-webkit-animation-delay:.8s;animation-delay:.8s;-webkit-animation-name:animate-fill-mint;animation-name:animate-fill-mint}
.lines-fill-r.is-animated path:nth-child(2){-webkit-animation-delay:.9s;animation-delay:.9s;-webkit-animation-name:animate-fill-sun;animation-name:animate-fill-sun}
.lines-fill-r.is-animated path:nth-child(3){-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-name:animate-fill-ghost;animation-name:animate-fill-ghost}
.lines-fill-r.is-animated path:nth-child(4){-webkit-animation-delay:1.1s;animation-delay:1.1s;-webkit-animation-name:animate-fill-raspberry;animation-name:animate-fill-raspberry}
.lines-fill-r.is-animated path:nth-child(5){-webkit-animation-delay:1.2s;animation-delay:1.2s;-webkit-animation-name:animate-fill-olive;animation-name:animate-fill-olive}
.lines-fill-r.is-animated path:nth-child(6){-webkit-animation-delay:1.3s;animation-delay:1.3s;-webkit-animation-name:animate-fill-sun;animation-name:animate-fill-sun}
.lines-fill-bg.is-animated path:nth-child(1){-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-name:animate-fill-raspberry;animation-name:animate-fill-raspberry}
.lines-fill-bg.is-animated path:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-name:animate-fill-mint;animation-name:animate-fill-mint}
.lines-fill-bg.is-animated path:nth-child(3){-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:animate-fill-sun;animation-name:animate-fill-sun}
/* /contact's office grid. The lg layout parks the first two cards in a left
   column and pulls the whole block 40rem up over the photo, which needs the
   three-column area template and the room lg:grid-cols-3 gives it. Live gates
   both the pull and the areas at 1024 — the port had dropped the query, so the
   -40rem ran at every width and dragged the addresses back over the heading
   and the photo on a phone. Below lg the block is a plain stack (md: a
   two-column grid) that follows the image, as live has it. */
@media (min-width: 1024px){
.offices{grid-template-areas:"a . ." "b . ." "c d e";margin-bottom:-40rem;top:-40rem}
}
.offices ul{margin-bottom:1rem}
.offices a{font-weight:700;--tw-text-opacity: 1;color:rgb(255 0 79 / var(--tw-text-opacity))}
@media (min-width: 1024px){
.offices-location:nth-child(1){grid-area:a}
.offices-location:nth-child(2){grid-area:b}
.offices-location:nth-child(3){grid-area:c}
.offices-location:nth-child(4){grid-area:d}
.offices-location:nth-child(5){grid-area:e}
.offices-location:nth-child(6){grid-area:f}
}
@-webkit-keyframes animate-fill-sky{0%{fill:transparent}to{fill:#8cd1e9}}
@keyframes animate-fill-sky{0%{fill:transparent}to{fill:#8cd1e9}}
@-webkit-keyframes animate-fill-sun{0%{fill:transparent}to{fill:#fcec09}}
@keyframes animate-fill-sun{0%{fill:transparent}to{fill:#fcec09}}
@-webkit-keyframes animate-fill-ghost{0%{fill:transparent}to{fill:#727382}}
@keyframes animate-fill-ghost{0%{fill:transparent}to{fill:#727382}}
@-webkit-keyframes animate-fill-mint{0%{fill:transparent}to{fill:#00e69d}}
@keyframes animate-fill-mint{0%{fill:transparent}to{fill:#00e69d}}
@-webkit-keyframes animate-fill-raspberry{0%{fill:transparent}to{fill:#ff004f}}
@keyframes animate-fill-raspberry{0%{fill:transparent}to{fill:#ff004f}}
@-webkit-keyframes animate-fill-olive{0%{fill:transparent}to{fill:#48671e}}
@keyframes animate-fill-olive{0%{fill:transparent}to{fill:#48671e}}

.fancy-list{list-style-type:none;line-height:1.5}
.fancy-list li{padding-left:2rem;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGl0bGU+U2hhcGU8L3RpdGxlPjxwYXRoIGZpbGw9IiMwMDlGQzUiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggMGE4IDggMCAxIDEgMCAxNkE4IDggMCAwIDEgOCAwWm0yLjI5MyA1LjI5M0w3IDguNTg2IDUuNzA3IDcuMjkzYTEgMSAwIDAgMC0xLjQxNCAxLjQxNGwyIDJhMSAxIDAgMCAwIDEuNDE0IDBsNC00YTEgMSAwIDAgMC0xLjQxNC0xLjQxNFoiLz48L3N2Zz4=) no-repeat 0 .4rem}
/* Nested level, live's rules verbatim: no tick icon, an em-dash marker
   instead — /health-testing/johnes runs one under Clinical Signs. */
.fancy-list .fancy-list li{background-image:none;padding-left:1rem}
.fancy-list .fancy-list li:before{margin-right:.5rem;content:"—"}

/* animate-spin-90 (option card + icon) */
@keyframes spin90{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}
.group:hover .group-hover\:animate-spin-90{animation:spin90 .25s ease-in-out 1}

/* ---- Forminator forms restyled to match NMR (contact 317, newsletter 318) ---- */
.forminator-ui.forminator-custom-form .forminator-label,
.forminator-ui.forminator-custom-form label.forminator-label {
    font-family: var(--font-digital) !important;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 400 !important;
    color: rgb(19 25 46 / 0.7) !important;
    margin-bottom: 0.5rem !important;
}
.forminator-ui.forminator-custom-form input[type="text"],
.forminator-ui.forminator-custom-form input[type="email"],
.forminator-ui.forminator-custom-form input[type="tel"],
.forminator-ui.forminator-custom-form input[type="url"],
.forminator-ui.forminator-custom-form input[type="number"],
.forminator-ui.forminator-custom-form input[type="search"],
.forminator-ui.forminator-custom-form textarea,
.forminator-ui.forminator-custom-form select {
    height: 3rem !important;
    width: 100% !important;
    border: 1px solid rgb(140 209 233 / 0.4) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #13192e !important;
    padding: 0 0.75rem !important;
    box-shadow: none !important;
    font-size: 1rem !important;
}
.forminator-ui.forminator-custom-form textarea {
    height: auto !important;
    min-height: 8rem !important;
    padding: 0.75rem !important;
    line-height: 1.5 !important;
}
.forminator-ui.forminator-custom-form input:focus,
.forminator-ui.forminator-custom-form textarea:focus,
.forminator-ui.forminator-custom-form select:focus {
    border-color: #12a6ca !important;
    box-shadow: 0 0 0 3px rgb(140 209 233 / 0.5) !important;
    outline: none !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit,
.forminator-ui.forminator-custom-form button[type="submit"] {
    background: #ff004f !important;
    color: #fff !important;
    font-family: var(--font-digital) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.125rem !important;
    transition: background .2s ease !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form button[type="submit"]:hover {
    background: #c7003e !important;
}
/* Newsletter form (318): dark "Sign Up" button to match NMR */
.forminator-ui.forminator-custom-form-318 .forminator-button-submit,
.forminator-ui.forminator-custom-form-318 button[type="submit"] {
    background: #13192e !important;
}
.forminator-ui.forminator-custom-form-318 .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form-318 button[type="submit"]:hover {
    background: #262d44 !important;
}

/* ---- Newsletter (318): inline email + button (NMR layout) ---- */
.forminator-ui.forminator-custom-form-318 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    max-width: 26rem;
    margin-inline: auto;
}
.forminator-ui.forminator-custom-form-318 .forminator-row,
.forminator-ui.forminator-custom-form-318 .forminator-col,
.forminator-ui.forminator-custom-form-318 .forminator-field {
    margin: 0 !important;
    padding: 0 !important;
}
.forminator-ui.forminator-custom-form-318 .forminator-row:not(.forminator-row-last) {
    flex: 1 1 0% !important;
    min-width: 0;
}
.forminator-ui.forminator-custom-form-318 .forminator-row-last {
    flex: 0 0 auto !important;
}
.forminator-ui.forminator-custom-form-318 .forminator-label {
    display: none !important;
}
.forminator-ui.forminator-custom-form-318 input.forminator-input {
    border-right-color: transparent !important;
}
.forminator-ui.forminator-custom-form-318 .forminator-button-submit {
    height: 3rem !important;
    padding: 0 1.5rem !important;
    font-size: 1rem !important;
    line-height: 3rem !important;
    white-space: nowrap;
}
/* if the error/response message shows, span the full width above the field */
.forminator-ui.forminator-custom-form-318 .forminator-response-message {
    flex-basis: 100% !important;
    order: -1;
}

/* ---- Contact form (317): match live's static form metrics ----
   Live renders this section as a hand-built Craft form. The numbers below are
   its computed box model at a 1440px viewport, so the shared Contact Us band
   comes out the same height on both origins:

     label 24 + 8 gap + input 48        = 80 per field row
     24 between field rows              (live's gap-6)
     label 24 + 8 gap + textarea 114    = 146 for the message row
     32 before the button               (live's mb-8 on the field grid)
     text 20/28 + 16 padding            = 60 button
     48 before the consent paragraph, which sits in contact-form.php

   Forminator's own defaults are 30px row margins, a 1.7 label line-height and
   a 128px textarea; together they ran the block short of live. */
.forminator-ui.forminator-custom-form-317 .forminator-row {
    margin-bottom: 24px !important;
    /* Forminator gutters the grid at +/-15px; live uses gap-6, so the columns
       land 276px wide with 24px between them rather than 273px with 30px. */
    margin-left: -12px !important;
    margin-right: -12px !important;
}
.forminator-ui.forminator-custom-form-317 .forminator-col {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
/* Button row: 32px above, nothing below. Forminator's trailing row margin has
   nothing to collapse against inside the form, so it escapes through the
   .max-w-xl column and pads the sky-50 band by an extra 30px. */
.forminator-ui.forminator-custom-form-317 .forminator-row-last {
    margin-top: 32px !important;
    margin-bottom: 0 !important;
}
.forminator-ui.forminator-custom-form-317 .forminator-label {
    line-height: 1.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    margin-bottom: 0.5rem !important;
}
/* 4 rows at 24px + 16px padding + 2px border, as live's rows="4" textarea. */
.forminator-ui.forminator-custom-form-317 textarea.forminator-textarea {
    height: 114px !important;
    min-height: 114px !important;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.5rem !important;
}
/* live: px-5 py-4 text-xl */
.forminator-ui.forminator-custom-form-317 .forminator-button-submit {
    padding: 1rem 1.25rem !important;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}
/* Below 783px Forminator's base sheet stretches every .forminator-button to
   width:100% and hangs a 10px margin under it. Live's button stays its own
   width at every viewport, so put it back. */
@media (max-width: 782px) {
    .forminator-ui.forminator-custom-form-317 .forminator-button-submit {
        width: auto !important;
        margin: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Parity components — see PARITY-PLAN.md, phase 4.

   Hand-written rather than Tailwind utilities because these carry values the
   compiled utility set does not include (the #e5e7eb hairline). Keeping them
   here means no rebuild is needed to ship them. Measurements are from the live
   captures at a 1440px viewport.

   The /events cards used to live here too. They now use live's own utility
   classes verbatim (sky-900 was already in style.css's @theme, it had simply
   never been compiled), so that block ships with the CSS build instead.
   ───────────────────────────────────────────────────────────────────────── */

/* WordPress's screen-reader-only class. The_posts_pagination() and the search
   form emit headings with this class expecting the theme to hide them; without
   the rule DEV printed a literal "Posts pagination" heading above the numbers
   on /news, and still does on the archive and search templates. */
.screen-reader-text {
    position: absolute;
    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;
}

/* Right-hand rail of downloads / related articles.
   Sits in the last third of the intro section, heading aligned to the H2. */
.link-rail { margin-top: 4rem; }
@media (min-width: 768px) {
    .link-rail { margin-top: 0; padding-left: 4rem; }
}
.link-rail-group + .link-rail-group { margin-top: 2rem; }
.link-rail-heading {
    color: var(--color-night-500);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem;
}
.link-rail-item { display: flex; align-items: center; gap: 0.875rem; }
.link-rail-item + .link-rail-item { margin-top: 1rem; }
/* Live rules between plain links, but not between download links. */
.link-rail-item + .link-rail-item.is-ruled { border-top: 1px solid #e5e7eb; padding-top: 1rem; }
.link-rail-item a {
    color: var(--color-raspberry-500);
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-decoration: none;
}
.link-rail-item a:hover { text-decoration: underline; }
.link-rail-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--color-night-500); }

/* Document table — navy header, ruled rows, top-aligned cells. */
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table thead th {
    background: var(--color-night-500);
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 0.875rem 1.5rem;
    font-size: 1.125rem;
}
.doc-table tbody td { border-bottom: 1px solid #e5e7eb; padding: 1.25rem 1.5rem; vertical-align: top; }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { width: 33%; font-weight: 700; color: #898c96; }
.doc-table ul { list-style: none; margin: 0; padding: 0; }
.doc-table li + li { margin-top: 1.5rem; }
.doc-table a { color: var(--color-night-500); text-decoration: underline; text-underline-offset: 2px; }
.doc-table-date { display: block; margin-top: 0.25rem; color: #898c96; font-size: 0.875rem; }

/* Announcement table — tab state only; live's own utility classes carry the
   rest of the strip, and the rows are a flex list built in the template. */
.archive-tab { color: #6b7280; border-bottom-color: #f3f4f6; cursor: pointer; }
.archive-tab[aria-selected="true"] {
    background: var(--color-sky-50);
    color: var(--color-sky-700);
    border-bottom-color: var(--color-sky-500);
}

/* About NMR sub-navigation — brand-palette rule capping two link cards. */
.subnav-bar { display: flex; height: 6px; }
.subnav-bar span { flex: 1 1 0; }
.subnav-cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .subnav-cards { grid-template-columns: 1fr 1fr; } }
.subnav-card { display: flex; align-items: center; justify-content: space-between; padding: 2rem; background: #fff; }
/* The base stylesheet underlines every anchor. Live's cards are not
   underlined — the eyebrow is plain grey and the title plain raspberry. */
.subnav-card, .subnav-card:hover { text-decoration: none; }
@media (min-width: 768px) { .subnav-card + .subnav-card { border-left: 1px solid #d1d5db; } }
.subnav-card-eyebrow { display: block; color: #595e6c; font-size: 1.125rem; }
.subnav-card-title { display: block; color: var(--color-raspberry-500); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }

/* Process steps — live runs three per row on a cream band with white cards,
   centred text and 48px padding. DEV had this inverted (cream cards on white)
   and forced four across, which clipped the email address in card 01. */
.process-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 768px)  { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }
.process-card { background: #fff; padding: 3rem; text-align: center; }
.process-card a { color: var(--color-raspberry-500); text-decoration: none; }
.process-card a:hover { text-decoration: underline; }

/* Article hero band — full-bleed cream, title left, media flush right. */
.hero-band { background: var(--color-sun-50); }
.hero-media { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) { .hero-media { width: 461px; } }
/* Live's narrow hero variant. Its hero component ships the featured image
   under one of two class sets; the narrow one (w-9/12 … md:w-auto) is on the
   two portrait heroes, and below md it runs the image at 75% of a box that
   fit-contents to the 320px mobile transform — a flat 240x320 on every phone
   width, against the 335x446 a full-bleed portrait gives here. Expressed as a
   height cap rather than 75%, because DEV serves its own srcset widths and a
   percentage of those would not land on live's number. Above md both variants
   meet on the same 461px column, so this stops at 767. Which pages carry it is
   read off live — see the note in _article_layouts.json. */
@media (max-width: 767px) {
    .hero-media--narrow img {
        width: auto;
        max-width: 100%;
        max-height: 20rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Knowledge hub listing — live has no card chrome: a category bar with a
   divider, a yellow rule, then title and a three-line excerpt on white. */
.knowledge-item + .knowledge-item { margin-top: 4rem; }
.knowledge-bar { display: flex; align-items: center; gap: 0.75rem; }
.knowledge-category {
    color: var(--color-night-500);
    font-family: var(--font-digital);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.5rem;
    line-height: 1;
}
.knowledge-divider { width: 2px; height: 32px; background: #e5e7eb; }
.knowledge-viewall {
    color: var(--color-raspberry-500);
    font-family: var(--font-digital);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1rem;
    text-decoration: none;
}
.knowledge-viewall:hover { text-decoration: underline; }
.knowledge-media { min-height: 240px; }
.knowledge-title { color: var(--color-night-500); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 2rem; }
.knowledge-title a { color: inherit; text-decoration: none; }
.knowledge-title a:hover { color: var(--color-raspberry-500); }
.knowledge-excerpt {
    margin-top: 1rem;
    color: #595e6c;
    font-size: 1rem;
    line-height: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.knowledge-eyebrow {
    display: block;
    color: #595e6c;
    font-family: var(--font-digital);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

/* Veterinary advisers — two columns, the tint a full-bleed band over the
   right half of the viewport rather than a per-cell background. */
.advisor-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 4rem 148px; padding: 4rem 0; }
@media (min-width: 768px) { .advisor-grid { grid-template-columns: 1fr 1fr; } }
.advisor-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: calc(50% - 50vw);
    background: var(--color-sky-50);
    z-index: 0;
}
@media (max-width: 767px) { .advisor-grid::before { display: none; } }
.advisor { position: relative; z-index: 1; }
.advisor-name { color: #12a6ca; font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1.5rem; }
.advisor-bio { color: #595e6c; font-size: 1.125rem; line-height: 2rem; }
.advisor-photo { display: block; width: 100%; margin-top: 2.25rem; }


/* Search page — the core/search block is swapped for get_search_form() by
   saSearchFormBlock(). Live puts it in a full-width pale panel rather than the
   narrow centred input WordPress renders by default. */
.search-panel { width: 100%; }
.search-panel form { max-width: none; }

/* ---------------------------------------------------------------------------
   Editor buttons (core/button)
   Live renders these as solid raspberry CTAs in the display face: "AB AGRI
   PORTAL", "REGISTER FOR WEBINAR", "DOWNLOAD YOUR DIGITAL COPY HERE!",
   "TEAMVIEWER QUICK START", "2025 NMR / RABDF GOLD CUP APPLICATION FORM".
   Without a style the block falls back to an underlined text link, which is
   what every one of those pages was showing.
   -------------------------------------------------------------------------*/
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.wp-block-button__link,
.prose .wp-block-button__link {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background: var(--color-raspberry-500);
    color: #fff;
    font-family: var(--font-digital);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
}
@media (min-width: 768px) { .wp-block-button__link { padding-top: 1rem; padding-bottom: 1rem; } }
.wp-block-button__link:hover { background: var(--color-raspberry-700, #c4003f); color: #fff; }
/* A btnClass CTA seeded into editor content sits inside the shell's .prose
   (live's richText.twig renders its button as a sibling OUTSIDE the prose div,
   so live never underlines it). Scoped to the display face: no prose link
   wears font-digital except a button. */
.prose a.font-digital { text-decoration: none; }

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--color-raspberry-500);
    box-shadow: inset 0 0 0 2px currentColor;
}

/* ---------------------------------------------------------------------------
   Body imagery
   Live sizes a body image to min(natural width, prose column) — Tailwind
   typography's default, `max-width: 100%` and nothing else. It is worth being
   exact about that: across a 202-pair capture at 1440px (68 of those pages
   carry prose imagery) live upscaled zero images. Not "rarely" — zero.

   This block used to force `width: 100%` on every prose image, on the theory
   that live ran charts and report screenshots at the full column and intrinsic
   sizing left a small export looking like a thumbnail. The full capture says
   otherwise. Of the 13 upscaled images on DEV, 10 are `sa-wide` figures, which
   carry their own fill rule below and are unaffected by anything here; one more
   (the /genomic-testing infographic) is also sa-wide. The three left over were
   all defects — /why-should-i-genomically-test-my-herd rendered two 108px
   portrait thumbnails at 504px, +425px and +396px of page height apiece, and
   /genomic-testing/genocells stretched a 648px flow chart to 768.

   So the ceiling is the default now, and filling the column is opt-in. That
   inverts what the importer assumes it is opting *out* of: `natural: true` in
   _images_data.json (which emits `is-resized`) is a no-op rather than a fix.
   Leave those entries in place — they document which figures were checked
   against live — but a new figure needs no flag to size correctly.
   -------------------------------------------------------------------------*/
.prose > figure,
.prose > .wp-block-image { margin-left: 0; margin-right: 0; }

/* Figure block spacing.
   WordPress's block-library CSS ships `:where(figure){margin:0 0 1em}` and it
   arrives UNLAYERED, so it beats Tailwind typography's `figure { margin: 2em 0 }`
   however specific that rule is — unlayered always wins over @layer. Live is
   Craft, has no block-library CSS, and therefore keeps the typography defaults:
   40px/40px at xl:prose-xl on /genomic-testing/genocells, 32px/32px at
   md:prose-lg on /herdwise. DEV was computing 0/1em on both. Re-assert the
   typography values here — components.css is unlayered too and loads later.
   Values and breakpoints are copied from the typography output in app.css;
   keep the md variants above the xl ones, since they tie on specificity and
   a container carrying both (md:prose-lg xl:prose-xl) resolves on source order. */
.prose :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}
.prose-lg :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.77778em;
    margin-bottom: 1.77778em;
}
@media (min-width: 768px) {
    .md\:prose-lg :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.77778em;
        margin-bottom: 1.77778em;
    }
    .md\:prose-xl :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 2em;
        margin-bottom: 2em;
    }
}
@media (min-width: 1280px) {
    .xl\:prose-xl :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 2em;
        margin-bottom: 2em;
    }
}
/* Typography zeroes the outer edge of the prose column (`.prose > :first-child`
   / `:last-child`) and live shows that on the trailing figure of /herdwise —
   32px above, 0 below. Restoring the block margins above would have reinstated
   the trailing gap, so re-assert the edges too. Figures only: nothing else in
   the column lost its margins to the block-library rule. */
.prose > figure:first-child,
.prose > .wp-block-image:first-child { margin-top: 0; }
.prose > figure:last-child,
.prose > .wp-block-image:last-child { margin-bottom: 0; }

.prose > figure img,
.prose > .wp-block-image img,
.prose > p > img { max-width: 100%; height: auto; }
/* Redundant against the rule above, kept because the importer still writes
   is-resized and WordPress can put a width on the img itself. */
.prose figure.is-resized img,
.prose .wp-block-image.is-resized img { width: auto; }
/* The opt-in that replaces the old global: fill the reading column without
   bleeding past it. sa-wide (below) is the wider variant; this one is for a
   figure that should reach the column edge but no further. Nothing in the
   current content needs it — it exists so that removing the global default
   leaves a way to ask for the old behaviour per figure. */
.prose figure.sa-fill img,
.prose .wp-block-image.sa-fill img { width: 100%; height: auto; }

/* Imported article body figures: live keeps the text at the reading measure
   but bleeds these figures out to the content width (1152px inside screen-xl
   padding) — the sequence-calendar tables, the laptop-competition charts and
   the tag gallery all render 1152 wide on live against 748 here. Opt-in via
   the importer's sa-wide class: migrated figures that already match live at
   the prose measure (e.g. the vet-cpd graphic) must not start upscaling. */
.prose figure.sa-wide {
    width: min(1152px, calc(100vw - 2.5rem));
    margin-left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 768px) {
    .prose figure.sa-wide {
        width: min(1152px, calc(100vw - 8rem));
    }
}
.prose figure.sa-wide img { width: 100%; height: auto; }