/* ==========================================================================
   Single article page
   --------------------------------------------------------------------------
   The layout the reference design (bluebuffalo.com/articles/...) uses: a
   centred header on a narrow measure, a full-width hero image inside the
   shell, then the body in a reading column, with related cards and a closing
   band under it.

   Loaded after articles.css, so the card grid (.rmp-acards / .rmp-acard) and
   every token (--rmp-red, the 8px spacing steps, the type scale) already
   exist here.

   TYPE: nothing in this file invents a font size. Every heading and paragraph
   reads the sitewide scale set in theme.json and exposed by pages.css --
   --rmp-h1 (H1) / --rmp-h2 (H2) / --rmp-h3 (H3) / --rmp-copy (body), with the
   same weights and line-heights as .rmp-h1/.rmp-h2/.rmp-h3/.rmp-h4 and
   `.rmp-page p`. Change a size in theme.json and this page follows. The only
   difference from the section furniture is case: article headlines stay in
   sentence case instead of the uppercase used for .rmp-h1/.rmp-h2, because
   they are prose, not labels.

   NB the whole page sits inside .rmp-page, whose `.rmp-page p{margin:0 0
   1.1em;line-height:1.7}` is (0,1,1) and outbids a single-class rule -- every
   paragraph rule below is therefore scoped with .rmp-page.
   ========================================================================== */

.rmp-article{
	/* One width for the whole article: the header (eyebrow, H1, intro), the
	   banner image and the body -- headings, copy, lists, FAQ -- all line up
	   edge to edge. It is the shell less the 24px gutter .rmp-art__wrap puts
	   either side of the image; below about 1370px everything simply fills
	   the viewport inside that same gutter, so it all stays in step.
	   Set --rmp-art-measure to something narrower (720px was the previous
	   value) to pull the body back into a reading column on its own. */
	--rmp-art-head:calc(var(--rmp-shell) - 2 * var(--rmp-gutter, 24px));
	--rmp-art-measure:var(--rmp-art-head);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.rmp-art__head{padding:var(--rmp-sec-pad) 24px var(--rmp-s4);text-align:center}
.rmp-art__headinner{max-width:var(--rmp-art-head);margin:0 auto}

.rmp-page .rmp-art__eyebrow{margin:0 0 var(--rmp-s2);color:var(--rmp-red)}

/* Sitewide H1, in sentence case. */
.rmp-page .rmp-art__title{
	margin:0;
	font-size:var(--rmp-h1);
	font-weight:700;
	line-height:1.06;
	color:var(--rmp-ink);
	text-transform:none;
	text-wrap:balance;
}

/* Same rule as .rmp-lede. */
.rmp-page .rmp-art__standfirst{
	margin:var(--rmp-s3) 0 0;
	font-size:var(--rmp-copy);
	line-height:1.65;
	color:var(--rmp-body);
}

/* --------------------------------------------------------------------------
   Hero
   Reading order is header, banner image, body. The "Back to all blogs" link
   that used to sit under the image was removed on 15 Sep 2026 -- the crumb
   trail above the header covers the same journey -- so the hero now carries
   the gap to the body itself (s4 rather than s3).
   -------------------------------------------------------------------------- */
.rmp-art__wrap{max-width:var(--rmp-shell);margin:0 auto;padding:0 24px var(--rmp-sec-pad)}

.rmp-art__hero{margin:0 0 var(--rmp-s4);border-radius:var(--rmp-radius);overflow:hidden;background:var(--rmp-ph)}
.rmp-art__hero img.rmp-art__img{display:block;width:100%;aspect-ratio:1170/520;object-fit:cover}
.rmp-art__hero .rmp-ph.rmp-art__img{width:100%;aspect-ratio:1170/520;min-height:0;border-radius:0}

/* --------------------------------------------------------------------------
   Body: the reading column
   The post content is core-rendered, so blocks arrive with their own layout
   wrappers; the column is set here and everything inside simply fills it.
   -------------------------------------------------------------------------- */
.rmp-art__body{max-width:var(--rmp-art-measure);margin:0 auto}

/* Body copy: the sitewide paragraph, restated only so the colour and the
   spacing between paragraphs are explicit here. */
.rmp-page .rmp-art__body p{
	margin:0 0 1.1em;
	font-size:var(--rmp-copy);
	line-height:1.7;
	color:var(--rmp-body);
}
.rmp-page .rmp-art__body>:last-child{margin-bottom:0}

/* Headings inside the body: sitewide H2/H3/H4 sizes, weights and
   line-heights, in sentence case. */
.rmp-page .rmp-art__body h2{
	margin:var(--rmp-s5) 0 var(--rmp-s2);
	font-size:var(--rmp-h2);font-weight:700;line-height:1.12;
	color:var(--rmp-ink);text-transform:none;
}
.rmp-page .rmp-art__body h3{
	margin:var(--rmp-s4) 0 var(--rmp-s1);
	font-size:var(--rmp-h3);font-weight:700;line-height:1.2;
	color:var(--rmp-ink);text-transform:none;
}
/* .rmp-h4 is a label style sitewide (17px, letterspaced, uppercase); kept as
   it is so an H4 looks the same here as everywhere else. */
.rmp-page .rmp-art__body h4{
	margin:var(--rmp-s3) 0 var(--rmp-s1);
	font-size:1.0625rem;font-weight:700;line-height:1.3;
	letter-spacing:.06em;text-transform:uppercase;
	color:var(--rmp-ink);
}
.rmp-page .rmp-art__body>h2:first-child,
.rmp-page .rmp-art__body>h3:first-child{margin-top:0}

.rmp-page .rmp-art__body ul,
.rmp-page .rmp-art__body ol{
	margin:0 0 1.1em;padding-left:1.35em;
	font-size:var(--rmp-copy);line-height:1.7;color:var(--rmp-body);
}
.rmp-page .rmp-art__body li{margin-bottom:.5em}
.rmp-page .rmp-art__body li::marker{color:var(--rmp-red)}

.rmp-page .rmp-art__body a{color:var(--rmp-red);text-decoration:underline;text-underline-offset:2px}
.rmp-page .rmp-art__body a:hover{color:var(--rmp-red-dark)}

.rmp-page .rmp-art__body blockquote{
	margin:var(--rmp-s4) 0;padding:var(--rmp-s2) 0 var(--rmp-s2) var(--rmp-s3);
	border-left:3px solid var(--rmp-red);
}
/* A pull quote sits one step up the scale, at H3. */
.rmp-page .rmp-art__body blockquote p{font-size:var(--rmp-h3);line-height:1.4;color:var(--rmp-ink)}

.rmp-page .rmp-art__body figure,
.rmp-page .rmp-art__body .wp-block-image{margin:var(--rmp-s4) 0}
.rmp-page .rmp-art__body img{max-width:100%;height:auto;border-radius:var(--rmp-radius)}

.rmp-page .rmp-art__body hr{
	margin:var(--rmp-s5) 0;border:0;border-top:1px solid var(--rmp-line);
}

/* --------------------------------------------------------------------------
   FAQ accordion
   A Group carrying rmp-art__faq at the end of the body, holding core Details
   blocks -- so the questions and answers stay ordinary editable blocks and no
   JavaScript is involved: <details> opens and closes on its own.
   -------------------------------------------------------------------------- */
.rmp-art__faq{margin-top:var(--rmp-sec-pad);padding-top:var(--rmp-sec-pad);border-top:1px solid var(--rmp-line)}
.rmp-art__faq>.rmp-eyebrow{display:block;margin-bottom:var(--rmp-s1);color:var(--rmp-red);text-align:center}
.rmp-page .rmp-art__faq>h2{margin:0 0 var(--rmp-s4);text-align:center}

.rmp-art__faq .wp-block-details{
	border-bottom:1px solid var(--rmp-line);
	padding:0;
}
/* The question is a control rather than a heading, so it stays at body size,
   bolded. */
.rmp-art__faq .wp-block-details summary{
	position:relative;
	display:block;
	list-style:none;
	cursor:pointer;
	padding:var(--rmp-s2) 40px var(--rmp-s2) 0;
	font-size:var(--rmp-copy);font-weight:700;line-height:1.4;
	color:var(--rmp-ink);
}
.rmp-art__faq .wp-block-details summary::-webkit-details-marker{display:none}
.rmp-art__faq .wp-block-details summary:hover{color:var(--rmp-red)}
/* Clicking a question focuses it, and the browser's own focus ring then draws
   a box round the whole row (it picks up the red hover colour). Mouse users
   get the colour change only; keyboard users still get a ring, from
   :focus-visible below. */
.rmp-art__faq .wp-block-details summary:focus{outline:none}
.rmp-art__faq .wp-block-details summary:focus-visible{outline:3px solid var(--rmp-ink);outline-offset:2px}
/* Chevron, rotated when the row is open. */
.rmp-art__faq .wp-block-details summary:after{
	content:"";position:absolute;right:8px;top:50%;
	width:9px;height:9px;
	border-right:2px solid var(--rmp-red);border-bottom:2px solid var(--rmp-red);
	transform:translateY(-70%) rotate(45deg);
	transition:transform .2s ease;
}
.rmp-art__faq .wp-block-details[open] summary:after{transform:translateY(-20%) rotate(-135deg)}
.rmp-page .rmp-art__faq .wp-block-details p{margin:0 0 var(--rmp-s3);padding-right:40px}

/* --------------------------------------------------------------------------
   Related articles + closing band
   -------------------------------------------------------------------------- */
/* White, like the article body — the hairline border does the separating.
   (A grey #F1F1F1 shelf was tried on 14 Sep 2026 and reverted.) */
.rmp-art__related{border-top:1px solid var(--rmp-line)}
.rmp-art__relhead{text-align:center}
.rmp-art__relctas{justify-content:center;margin-top:var(--rmp-s4)}

.rmp-art__band{background:var(--rmp-red-tint)}

/* --------------------------------------------------------------------------
   Narrow screens
   The sitewide scale is fixed, not fluid, so nothing here changes a font
   size -- only the padding and the hero's shape.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
	.rmp-art__hero img.rmp-art__img,
	.rmp-art__hero .rmp-ph.rmp-art__img{aspect-ratio:16/9}
}
@media (max-width:639px){
	.rmp-art__head{padding:var(--rmp-sec-pad) 20px var(--rmp-s3)}
	.rmp-art__wrap{padding:0 20px var(--rmp-sec-pad)}
	.rmp-art__hero img.rmp-art__img,
	.rmp-art__hero .rmp-ph.rmp-art__img{aspect-ratio:4/3}
}

/* --------------------------------------------------------------------------
   Legal / policy pages (Terms, Privacy, Cookies)
   These are ordinary pages, not articles, so they reuse the reading column
   above -- but the measure is a variable set on .rmp-article, which is not in
   play here. The section carrying .rmp-legal sets it instead, a touch
   narrower than an article because policy copy is read, not scanned.
   -------------------------------------------------------------------------- */
.rmp-legal{--rmp-art-head:820px;--rmp-art-measure:820px}

/* The cookie table is five columns of prose and will never fit the measure on
   a phone, so the figure scrolls sideways rather than forcing the page wide. */
.rmp-page .rmp-art__body .wp-block-table{margin:var(--rmp-s4) 0;overflow-x:auto}
.rmp-page .rmp-art__body .wp-block-table table{width:100%;min-width:620px;border-collapse:collapse}
.rmp-page .rmp-art__body .wp-block-table th,
.rmp-page .rmp-art__body .wp-block-table td{
	padding:10px 12px;
	border:1px solid var(--rmp-line);
	font-size:.875rem;
	line-height:1.55;
	text-align:left;
	vertical-align:top;
	color:var(--rmp-body);
}
.rmp-page .rmp-art__body .wp-block-table thead th{
	background:var(--rmp-soft);
	font-weight:700;
	color:var(--rmp-ink);
}

/* Glossary list (page 2536): bold ink term, more space between entries.
   Body weight is 300 (renders 400), so a plain <strong> wasn't visibly bold. */
.rmp-page .rmp-art__body .rmp-glossary li{margin-bottom:1.1em}
.rmp-page .rmp-art__body .rmp-glossary strong{font-weight:700;color:var(--rmp-ink)}