/* =====================================================
   ARTICLE TEMPLATE  (template-article.php + single-articles.php)
   Live's long-form "On this page" layout, measured off
   /11-reasons-why-you-should-be-a-puppy-raiser/ 2026-07-14:
   container 1248; sidebar 5/16 (sticky inner top 120, label 28/600,
   quicklinks bg #f6f6f8, rows 20/600 flex, current row = #282829 bg +
   peach arrow rotated -90°); body 10/16 + 1/16 offset, pt 96;
   h2 40/45.2 700 -1px ls; 83×5 accent bar (32 above / 22 below);
   p 20/27 300 mb 32; images in a 12/16 col (≈74%), natural ratio;
   sections 40px apart.
   ===================================================== */

.article-template__container {
	max-width: 1296px;
	margin: 0 auto 80px;
	padding: 0 24px;
}

/* ---- breadcrumbs (Home › Title, 18/600, "Home" underlined) ---- */
.article-template__breadcrumbs ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	color: #282829;
}
.article-template__breadcrumbs li {
	display: flex;
	align-items: center;
	margin: 0;
}
.article-template__breadcrumbs a {
	color: #282829;
	text-decoration: none;
}
.article-template__breadcrumbs a span {
	border-bottom: 1px solid currentColor;
}
.article-template__breadcrumbs a:hover span {
	border-bottom-color: transparent;
}
.article-template__breadcrumbs svg {
	width: 9px;
	height: 13px;
	margin: 0 14px;
	flex-shrink: 0;
}

/* ---- two-column row (16-col grid: sidebar 5, gap 1, body 10) ---- */
.article-template__row {
	display: flex;
	margin: 0 -16px;
}
.article-template__sidebar {
	width: 31.25%; /* 5/16 */
	padding: 0 16px;
}
.article-template__row > .article-template__body,
.article-template__row > .article-template__main {
	width: 62.5%; /* 10/16 */
	margin-left: 6.25%; /* 1/16 offset */
	padding: 96px 16px 40px;
}

/* ---- sidebar ---- */
.article-template__sticky {
	position: sticky;
	top: 120px;
	padding-top: 32px;
	margin-bottom: 32px;
}
.article-template__sidebar-title {
	margin: 0;
	font-size: 28px;
	line-height: 35px;
	font-weight: 600;
	color: #282829;
}
.article-template__nav {
	list-style: none;
	margin: 35px 0;
	padding: 0;
	background: #f6f6f8;
}
.article-template__nav li {
	margin: 0;
	border-bottom: 1px solid #fff;
}
.article-template__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12.5px 18.75px;
	font-size: 20px;
	line-height: 27px;
	font-weight: 600;
	color: #282829;
	text-decoration: none;
	border-bottom: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.article-template__arrow {
	width: 18px;
	height: 20px;
	flex-shrink: 0;
	color: #282829;
	transition: transform 0.2s ease, color 0.2s ease;
}
.article-template__nav a:hover,
.article-template__nav a:focus-visible,
.article-template__nav a.is-current {
	background: #282829;
	color: #fff;
}
.article-template__nav a:hover .article-template__arrow,
.article-template__nav a:focus-visible .article-template__arrow,
.article-template__nav a.is-current .article-template__arrow {
	color: #f8a087;
	transform: rotate(-90deg);
}

/* ---- body copy ---- */
.article-template__body {
	font-size: 20px;
	line-height: 27px;
	font-weight: 300;
	color: #282829;
}
.article-template__body p {
	margin: 0 0 32px;
	font-size: 20px;
	line-height: 27px;
	font-weight: 300;
}
.article-template__body li {
	font-size: 20px;
	line-height: 27px;
	font-weight: 300;
}
.article-template__body ul,
.article-template__body ol {
	margin-bottom: 32px;
}
.article-template__body ul > li,
.article-template__body ol > li {
	margin-bottom: 24px;
}

/* h2 sections: heading + accent bar (live .u-pre-title--border-*) */
.article-template__section {
	padding-top: 40px; /* live: 40px section padding above each heading */
}
.article-template__section:first-child {
	padding-top: 0;
}
/* 40px/45.2 700 -1px — live uses the same h2 on the long-form PAGE articles
   (11-reasons…) AND the articles CPT singles (retinitis-pigmentosa…). */
.article-template__body h2 {
	margin: 0 0 32px;
	/* !important: style.css forces h2 { font-size: var(--font-heading2-size) !important } (60px) */
	font-size: 40px !important;
	line-height: 1.13 !important;
	font-weight: 700 !important;
	letter-spacing: -1px;
	color: #282829;
	scroll-margin-top: 130px; /* clear the sticky header when jumping to an anchor */
}
.single-article .article-template__body h3 {
	margin-top: 4rem;
}
/* live styles the PAGE articles' h3s like their h2s (juleye "Prescribed Spectacles"):
   40/45.2 700 −1px, no bar, not in the sidebar nav */
.page-template-template-article .article-template__body h3 {
	margin: 0 0 32px;
	font-size: 40px !important;
	line-height: 45.2px !important;
	font-weight: 700 !important;
	letter-spacing: -1px;
	color: #282829;
}
.single-article .article-template__body img {
	margin: 3.2rem 0;
}
.article-template__bar {
	display: block;
	width: 83px;
	height: 5px;
	margin: 0 0 22px;
	background: #fcbbe0; /* pink default */
}
.article-template__section--orange .article-template__bar { background: #ff6e33; }
.article-template__section--green  .article-template__bar { background: #01b483; }
.article-template__section--peach  .article-template__bar { background: #f8a087; }
.article-template__section--blue   .article-template__bar { background: #93ccf2; }
.article-template__section--blue-light .article-template__bar { background: #a4dbde; }

/* body images: live puts them in a 12/16 col of the body (568/768 ≈ 74%), natural ratio */
.article-template__img {
	width: 74%;
	margin: 0 0 40px;
}
.article-template__img img,
.article-template__body img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- title printed by single-articles.php (the page template has no h1, like live) ---- */
.article-template__title {
	margin-bottom: 3.2rem;
}

/* ---- stack below tablet ---- */
@media only screen and (max-width: 767.98px) {
	.article-template__container { margin-bottom: 40px; }
	.article-template__row { display: block; margin: 0; }
	.article-template__sidebar { width: 100%; padding: 0; }
	.article-template__sticky { position: static; top: auto; }
	.article-template__row > .article-template__body,
	.article-template__row > .article-template__main {
		width: 100%;
		margin-left: 0;
		padding: 24px 0 40px;
	}
	.article-template__body h2 { font-size: 32px !important; }
	.article-template__img { width: 100%; }
}

/* =====================================================
   ARTICLES CPT SINGLE (single-articles.php) additions:
   breadcrumb spacing, author box, related carousel band
   ===================================================== */

/* breadcrumbs sit OUTSIDE the container (above the banner) on both templates —
   give them the container constraints themselves */
.article-template > .article-template__breadcrumbs {
	max-width: 1296px;
	margin: 0 auto;
	padding: 0 24px;
}
.article-template__crumb-current {
	color: #69696a; /* live greys out the current crumb on article singles */
}

/* ---- green full-bleed title banner (live .c-banner-articles.bg-color--green) ---- */
.article-banner {
	background: #01b483;
	color: #282829;
}
.article-banner__inner {
	max-width: 1296px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.article-banner__title {
	padding: 40px 16px;
}
.article-banner__title h1 {
	margin: 0;
	/* !important: style.css forces h1 { font-size: var(--font-heading1-size) !important } */
	font-size: 56px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: -1px;
	color: #282829;
}
.article-banner__graphic {
	padding: 16px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.article-banner__graphic svg {
	display: block;
	width: 155px;
	height: 104px;
}
/* long titles: live drops to u-h3 40/45.2 in a shallower (109px) banner, smaller chevron */
.article-banner--long .article-banner__title {
	padding: 32px 16px;
}
.article-banner--long .article-banner__title h1 {
	font-size: 40px !important;
	line-height: 45.2px !important;
}
.article-banner--long .article-banner__graphic svg {
	width: 115px;
	height: 77px;
}
@media only screen and (max-width: 767.98px) {
	.article-banner__title { padding: 24px 0; }
	.article-banner__title h1,
	.article-banner--long .article-banner__title h1 { font-size: 32px !important; line-height: 1.13 !important; }
	.article-banner--long .article-banner__title { padding: 24px 0; }
	.article-banner__graphic { padding: 8px 0; }
	.article-banner__graphic svg,
	.article-banner--long .article-banner__graphic svg { width: 90px; height: 60px; }
}

/* ---- author box (live's "By Assistive Technology team") ---- */
.article-author {
	display: flex;
	gap: 2.4rem;
	align-items: flex-start;
	margin-top: 5.6rem;
	padding-top: 3.2rem;
	border-top: 1px solid var(--color-grey, #e2dedd);
}

.article-author__image {
	flex: 0 0 12rem;
}

.article-author__image img {
	width: 12rem;
	height: 12rem;
	object-fit: cover;
	border-radius: 50%;
}

.article-author__by {
	margin-bottom: .8rem;
}

.article-author__by a {
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease;
}

.article-author__by a:hover,
.article-author__by a:focus-visible {
	border-bottom-color: var(--color-p);
}

.article-author__bio {
	font-size: .9em;
}

@media (max-width: 600px) {
	.article-author {
		flex-direction: column;
	}
}

/* ---- related band (live's grey "You might also like" / "Read more about x") ----
   Live: .bg-color--grey-light, pt 80; h2 40/45.2 + random accent bar; slick slider,
   368px cards (400 incl. gap), image ratio 368×243, 8px random highlight bar under
   the image, title 28/35 600 with arrow, 54px circle outline arrows. */
.article-related {
	background: #f6f6f8;
	padding: 80px 0 40px;
}
.article-related__inner {
	max-width: 1296px;
	margin: 0 auto;
	padding: 0 24px;
}
.article-related h2 {
	margin: 0 0 32px;
	font-size: 40px !important;
	line-height: 1.13 !important;
	font-weight: 700 !important;
	letter-spacing: -1px;
	color: #282829;
}
.article-related .article-template__bar { background: #a4dbde; }
.article-related--pink   .article-template__bar { background: #fcbbe0; }
.article-related--orange .article-template__bar { background: #ff6e33; }
.article-related--green  .article-template__bar { background: #01b483; }
.article-related--peach  .article-template__bar { background: #f8a087; }
.article-related--blue-light .article-template__bar { background: #a4dbde; }

/* the track/cards/nav themselves are styled by blocks/cards-slider/cards-slider.css
   (the section carries .block-cards-slider; cards-slider.js randomises card accents
   and drives the sliding) — only the band shell + heading live here */
.article-related .c-card__title {
	font-size: 28px;
	line-height: 35px;
}
@media only screen and (max-width: 767.98px) {
	.article-related { padding: 40px 0 24px; }
	.article-related h2 { font-size: 32px !important; }
}