/**
 * Single post (/…/post-name.htm) — built from the client's design.
 *
 * Scoped under .sc-post, for the same reason as the homepage and the blog
 * listing: the legacy pages still render through parent BuddyBoss styles, so a
 * global reset would break them.
 *
 * Measured against the design's 1440 frame. The content band is the same
 * 1176px the header, footer and blog listing use:
 *     1176 = 832 (article) + 64 (gap) + 280 (sidebar)
 *
 * Loaded by seniorcare_template_slug(), which maps is_singular('post') to
 * "single", so nothing here reaches any other template.
 */

/* The BuddyBoss page wrappers constrain and pad their content — css/wordpress.css
   sets "body .site { max-width: 1040px }", and header.php opens #page with
   class="site". Left alone, the article would render 1040px wide under a
   1240px header. Lifted here exactly as front-page.css and archive.css do.

   Scoped to .single-post so only the redesigned template is affected. */
.single-post #main-wrap,
.single-post #inner-wrap,
.single-post #page,
.single-post #main,
.sc-article-page #main-wrap,
.sc-article-page #inner-wrap,
.sc-article-page #page,
.sc-article-page #main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------- foundation */
.sc-post {
	--sc-post-side: 280px;
	--sc-post-gap: 64px;
	--sc-post-line: #e8ecf3;
	--sc-post-card-line: #e2e9f6;
	--sc-post-field: #dfe4ec;
	--sc-post-placeholder: #9aa4b2;
	--sc-post-chip: #e3ebfa;
	--sc-post-divider: #dde5f2;
	--sc-post-danger: #b42318;
	--sc-post-danger-soft: #fdecea;

	padding-block: 56px 88px;
	background: var(--sc-surface);
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-normal);
	color: var(--sc-text-body);
	-webkit-font-smoothing: antialiased;
}

.sc-post *,
.sc-post *::before,
.sc-post *::after {
	box-sizing: border-box;
}

.sc-post img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* :where() so this scores ZERO specificity, exactly like the heading reset
   below. Written as ".sc-post ul" it was (0,1,1) and silently outranked every
   (0,1,0) component class — .sc-syslist's margin-bottom computed to 0px, which
   is why the gap above "Compare all" would not change no matter what value was
   set. Keep :where() here. */
.sc-post :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* :where() so this reset carries ZERO specificity and every component rule
   below still wins. Written plainly it would outrank the component classes and
   flatten all their margins — the same trap archive.css documents. */
.sc-post :where(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--sc-font-heading);
	font-weight: var(--sc-fw-bold);
	color: var(--sc-navy);
}

.sc-post :where(p) {
	margin: 0;
}

.sc-post a {
	text-decoration: none;
}

.sc-post :focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 3px;
	border-radius: var(--sc-radius-sm);
}

/* ------------------------------------------------------------ breadcrumbs */
.sc-crumbs {
	margin-bottom: 30px;
}

.sc-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 14px;
	line-height: 1.4;
}

.sc-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sc-crumbs__link {
	color: var(--sc-navy);
	font-weight: var(--sc-fw-medium);
}

.sc-crumbs__link:hover,
.sc-crumbs__link:focus-visible {
	color: var(--sc-orange);
}

/* The last step is the darkest text token, not the muted grey — it names the
   page you are on, so it should read as the strongest item in the trail. */
.sc-crumbs__current {
	color: var(--sc-text);
}

.sc-crumbs__sep {
	display: inline-flex;
	color: #b7c0cf;
}

/* ----------------------------------------------------------------- layout */
.sc-post__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sc-post-side);
	column-gap: var(--sc-post-gap);
	align-items: start;
}

.sc-post__main {
	min-width: 0;
}

.sc-post__side {
	display: grid;
	gap: 20px;
	min-width: 0;
}

/* ----------------------------------------------------------- article head */
.sc-article__eyebrow {
	margin-bottom: 14px;
	font-size: var(--sc-fs-eyebrow);
	font-weight: var(--sc-fw-bold);
	letter-spacing: var(--sc-track-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
}

.sc-article__eyebrow a {
	color: var(--sc-green-text);
}

.sc-article__eyebrow a:hover,
.sc-article__eyebrow a:focus-visible {
	color: var(--sc-orange);
}

.sc-article__title {
	margin: 0 0 18px;
	font-size: 42px;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.sc-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin-bottom: 26px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sc-text-muted);
}

.sc-article__metaitem {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sc-article__metaitem svg {
	flex: none;
	color: #9aa6b8;
}

/* A page has no eyebrow and no author/date row, so the title carries the whole
   gap down to the content on its own. */
.sc-post--page .sc-article__title {
	margin-bottom: 26px;
}

/* ---------------------------------------------------------- featured image */
.sc-article__media {
	margin: 0 0 32px;
}

.sc-article__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--sc-radius);
}

.sc-article__caption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sc-text-muted);
}

/* -------------------------------------------------------- article content */
/* Everything below styles the_content(), so it has to cope with 800 posts of
   classic editor markup, not just the elements the design happens to show. */
.sc-article__content {
	font-size: 16px;
	line-height: 1.75;
	/* 800 legacy posts, many with bare URLs pasted into the body. */
	overflow-wrap: break-word;
	color: var(--sc-text-body);
}

.sc-article__content > *:first-child {
	margin-top: 0;
}

.sc-article__content > *:last-child {
	margin-bottom: 0;
}

.sc-article__content p {
	margin: 0 0 18px;
}

.sc-article__content h2 {
	margin: 40px 0 14px;
	font-size: 28px;
	line-height: 1.3;
}

.sc-article__content h3 {
	margin: 32px 0 10px;
	font-size: 21px;
	line-height: 1.35;
}

.sc-article__content h4,
.sc-article__content h5,
.sc-article__content h6 {
	margin: 26px 0 10px;
	font-family: var(--sc-font-heading);
	font-size: 18px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.4;
	color: var(--sc-navy);
}

.sc-article__content a {
	color: var(--sc-navy);
	font-weight: var(--sc-fw-medium);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.sc-article__content a:hover,
.sc-article__content a:focus-visible {
	color: var(--sc-orange);
}

.sc-article__content strong,
.sc-article__content b {
	font-weight: var(--sc-fw-bold);
	color: var(--sc-text);
}

.sc-article__content ul,
.sc-article__content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.sc-article__content ul {
	list-style: disc;
}

.sc-article__content ol {
	list-style: decimal;
}

.sc-article__content li {
	margin-bottom: 10px;
	padding-left: 4px;
}

.sc-article__content li::marker {
	color: var(--sc-navy);
}

.sc-article__content li > ul,
.sc-article__content li > ol {
	margin: 10px 0 0;
}

/* The design shows the pull quote as plain italic text — no rule, no indent,
   no quote marks. Kept that way deliberately. */
.sc-article__content blockquote {
	margin: 24px 0;
	padding: 0;
	border: 0;
	font-style: italic;
	color: var(--sc-text);
}

.sc-article__content blockquote p {
	margin-bottom: 12px;
}

.sc-article__content img,
.sc-article__content iframe,
.sc-article__content video {
	max-width: 100%;
	border-radius: var(--sc-radius-sm);
}

.sc-article__content figure {
	margin: 24px 0;
}

.sc-article__content figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sc-text-muted);
}

.sc-article__content hr {
	height: 1px;
	margin: 32px 0;
	border: 0;
	background: var(--sc-post-line);
}

/* Tables come from TablePress on a number of posts and can be wide. */
.sc-article__content table {
	display: block;
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
}

.sc-article__content th,
.sc-article__content td {
	padding: 10px 12px;
	border: 1px solid var(--sc-post-line);
	text-align: left;
	vertical-align: top;
}

.sc-article__content th {
	background: var(--sc-surface-blue);
	color: var(--sc-navy);
	font-weight: var(--sc-fw-semibold);
}

/* ------------------------------------------- legacy child-page listings */
/* Several section pages (Mobility, Housing & Care, Health & Well-Being …)
   list their child pages using the old theme's markup, which sits inside the
   page content: an .entry-header with an .entry-title LINK, a thumbnail, an
   excerpt and a "Continue Reading" button. BuddyBoss paints that button cyan
   (#1db4da), which clashed badly with the redesign.

   The markup is stored content, not ours to rewrite, so it is restyled here
   instead. Every rule is scoped inside .sc-article__content, so the parent
   theme's own screens are untouched. */

.sc-article__content .entry-header {
	margin: 34px 0 0;
}

/* These are H1s in the source — a second H1 on a page that already has one.
   Sized like a section heading so the page reads with one visual hierarchy. */
.sc-article__content .entry-title {
	margin: 0 0 14px;
	font-family: var(--sc-font-heading);
	font-size: 22px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.3;
	color: var(--sc-navy);
}

.sc-article__content .entry-title a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.sc-article__content .entry-title a:hover,
.sc-article__content .entry-title a:focus-visible {
	color: var(--sc-orange);
}

/* The parent theme indents the excerpt by a hardcoded 175px to clear a
   thumbnail it expects to be floated at exactly that width. These thumbnails
   are 300px and are not floated, so the indent landed on empty space and the
   excerpt dropped below the image. Float the thumbnail and let the excerpt
   form its own block formatting context next to it — that works at any
   thumbnail width instead of guessing one. */
.sc-article__content .entry-post-thumbnail {
	float: left;
	overflow: hidden;
	margin: 0 22px 14px 0;
	border-radius: var(--sc-radius-sm);
	line-height: 0;
}

.sc-article__content .entry-post-thumbnail img {
	border-radius: var(--sc-radius-sm);
}

/* The thumbnail's own paragraph holds nothing but the float, so it must not
   reserve a line box of its own. */
.sc-article__content p:has( > .entry-post-thumbnail ) {
	margin: 0;
	line-height: 0;
}

.sc-article__content .entry-summary-thumbnail {
	margin-left: 0;
	overflow: hidden;
}

/* Each listing starts on a clean line, and the last float is closed before the
   comment block. */
.sc-article__content .entry-header {
	clear: both;
}

.sc-article__content::after {
	content: "";
	display: block;
	clear: both;
}

/* The trailing "…" that ends the excerpt — a link, but not a call to action. */
.sc-article__content .read-more {
	text-decoration: none;
	color: var(--sc-text-muted);
}

.sc-article__content .read-more:hover {
	color: var(--sc-orange);
}

/* The cyan BuddyBoss button, brought into the palette. Same treatment as the
   sidebar's "Compare all" — a secondary navigation action, not a primary CTA,
   so ghost rather than orange. */
.sc-article__content a.button,
.sc-article__content a.continue-reading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #cfd9ea;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	color: var(--sc-navy);
	font-family: var(--sc-font-body);
	font-size: 14px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background var(--sc-transition), border-color var(--sc-transition), color var(--sc-transition);
}

.sc-article__content a.button:hover,
.sc-article__content a.button:focus-visible,
.sc-article__content a.continue-reading:hover,
.sc-article__content a.continue-reading:focus-visible {
	border-color: var(--sc-navy);
	background: var(--sc-navy-tint);
	color: var(--sc-navy);
}

/* Add To Any appends its own coloured share row to the bottom of every post.
   The design puts sharing in the sidebar card instead, and the plugin's brand
   buttons clash with it — so the inline row is hidden HERE ONLY. The plugin
   stays active and its buttons still render everywhere else; delete this one
   rule to bring them back. */
.sc-article__content .addtoany_share_save_container,
.sc-article__content .addtoany_content {
	display: none;
}

.sc-article__pages {
	margin-top: 24px;
	font-size: 14px;
	color: var(--sc-text-muted);
}

/* ------------------------------------------------------------- buttons */
.sc-post .sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	font-family: var(--sc-font-body);
	font-size: 14px;
	font-weight: var(--sc-fw-bold);
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background var(--sc-transition), border-color var(--sc-transition), color var(--sc-transition);
}

.sc-post .sc-btn--orange {
	background: var(--sc-orange);
	color: var(--sc-text-invert);
}

.sc-post .sc-btn--orange:hover,
.sc-post .sc-btn--orange:focus-visible {
	background: var(--sc-orange-dark);
	color: var(--sc-text-invert);
}

.sc-post .sc-btn--ghost {
	border: 1px solid #cfd9ea;
	background: var(--sc-surface);
	color: var(--sc-navy);
}

.sc-post .sc-btn--ghost:hover,
.sc-post .sc-btn--ghost:focus-visible {
	border-color: var(--sc-navy);
	background: var(--sc-navy-tint);
	color: var(--sc-navy);
}

.sc-post .sc-btn--block {
	width: 100%;
}

/* ------------------------------------------------------------- comments */
.sc-comments {
	margin-top: 44px;
}

/* This IS WordPress's #respond wrapper, so the reply script can move the whole
   card into a comment. Styling the id keeps it looking right in both places. */
.sc-post .sc-cform,
.sc-post #respond {
	padding: 22px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-post-line);
	border-radius: var(--sc-radius);
	box-shadow: 0 1px 2px rgba(16, 26, 43, 0.04);
}

.sc-cform__title {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.3;
}

.sc-cform__cancel {
	font-family: var(--sc-font-body);
	font-size: 13px;
	font-weight: var(--sc-fw-medium);
}

.sc-cform__cancel a {
	color: var(--sc-text-muted);
}

.sc-cform__cancel a:hover,
.sc-cform__cancel a:focus-visible {
	color: var(--sc-orange);
}

/* Two columns so the name and email fields — which only render for logged-out
   visitors, and which the design does not show — sit side by side above the
   message instead of stacking and pushing the button off the card. */
.sc-cform__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.sc-cform__form > *:not(.sc-cform__field--half) {
	grid-column: 1 / -1;
}

.sc-cform__field {
	margin: 0;
}

.sc-cform__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: var(--sc-fw-medium);
	color: var(--sc-text);
}

.sc-cform__req {
	color: var(--sc-orange);
}

.sc-post .sc-cform input[type="text"],
.sc-post .sc-cform input[type="email"],
.sc-post .sc-cform input[type="url"],
.sc-post .sc-cform textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--sc-post-field);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	box-shadow: none;
	font-family: var(--sc-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--sc-text);
	-webkit-appearance: none;
	appearance: none;
}

.sc-post .sc-cform textarea {
	min-height: 96px;
	resize: vertical;
}

.sc-post .sc-cform input::placeholder,
.sc-post .sc-cform textarea::placeholder {
	color: var(--sc-post-placeholder);
	opacity: 1;
}

.sc-post .sc-cform input:focus,
.sc-post .sc-cform textarea:focus {
	outline: none;
	border-color: var(--sc-navy);
	box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

/* Signed-out state: the same card, with a box the size of the textarea that
   leads to the login page instead of pretending to accept input. */
.sc-cform__gate {
	display: grid;
	gap: 14px;
}

.sc-cform__gatebox {
	display: block;
	min-height: 96px;
	padding: 11px 14px;
	border: 1px solid var(--sc-post-field);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	font-size: 15px;
	line-height: 1.6;
	color: var(--sc-post-placeholder);
	transition: border-color var(--sc-transition), color var(--sc-transition);
}

.sc-cform__gatebox:hover,
.sc-cform__gatebox:focus-visible {
	border-color: var(--sc-navy);
	color: var(--sc-text-body);
}

.sc-cform__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 2px 0 0;
}

.sc-cform__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sc-text-muted);
}

.sc-cform__note a {
	color: var(--sc-navy);
	text-decoration: underline;
}

.sc-cform__note--login {
	margin: 0;
}

/*
 * House rules, under the note/button row. A step up from the 12px status note:
 * that line is a state ("Commenting as Ada"), this one is a request the reader
 * is meant to actually take in.
 */
.sc-cform__guidelines {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sc-text-body);
}

.sc-cform__action {
	margin-left: auto;
}

/* WordPress prints the cookie-consent checkbox as its own paragraph. */
.sc-post .sc-cform .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--sc-text-muted);
}

.sc-post .sc-cform .comment-form-cookies-consent label {
	margin: 0;
	font-weight: var(--sc-fw-regular);
	color: inherit;
}

.sc-post .sc-cform .comment-form-cookies-consent input {
	width: auto;
	margin: 0;
}

/* ---------------------------------------------------------- comment list */
.sc-comments__count {
	margin: 28px 0 14px;
	font-family: var(--sc-font-body);
	font-size: 14px;
	font-weight: var(--sc-fw-medium);
	color: var(--sc-text-muted);
}

.sc-clist {
	display: grid;
	gap: 14px;
}

/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   longest unbreakable run of text. One trackback here pastes a full permalink,
   which pushed the card 20px past the column on a 320px screen. */
.sc-clist > li,
.sc-clist .children > li {
	min-width: 0;
}

.sc-comment__box {
	padding: 16px 18px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-post-line);
	border-radius: var(--sc-radius);
	box-shadow: 0 1px 2px rgba(16, 26, 43, 0.04);
}

.sc-comment__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.sc-comment__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 34px;
	height: 34px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-post-chip);
	font-size: 14px;
	font-weight: var(--sc-fw-bold);
	color: var(--sc-navy);
}

.sc-comment__avatar img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.sc-comment__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	min-width: 0;
}

.sc-comment__name {
	font-size: 14px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.3;
	color: var(--sc-navy);
}

.sc-comment__time {
	font-size: 12px;
	line-height: 1.3;
	color: var(--sc-text-muted);
}

.sc-comment__text {
	font-size: 14px;
	line-height: 1.65;
	/* Visitors paste bare URLs; without this they run off the card. */
	overflow-wrap: anywhere;
	color: var(--sc-text-body);
}

.sc-comment__text p {
	margin: 0 0 10px;
}

.sc-comment__text > *:last-child {
	margin-bottom: 0;
}

.sc-comment__text a {
	color: var(--sc-navy);
	text-decoration: underline;
}

.sc-comment__pending {
	margin-top: 8px;
	font-size: 12px;
	font-style: italic;
	color: var(--sc-orange);
}

/* An edited comment says so, next to the timestamp. .sc-comment__who is a flex
   row with its own gap, so this needs no margin of its own. */
.sc-comment__edited {
	font-size: 12px;
	font-style: italic;
	color: var(--sc-text-muted);
}

/* ------------------------------------------- comment actions (Reply/Edit/Delete) */
.sc-comment__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

/* The Delete control has to be a form, not a link, or a prefetcher could fire
   it. The form itself is only a wrapper — it must not add its own box. */
.sc-comment__actionform {
	display: inline-flex;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * One pill for all three controls.
 *
 * !important is deliberate: the parent theme sets
 * `a.comment-reply-link { background-color: #eef1f1 !important }`
 * (buddyboss/css/wordpress.css:1653), and without answering it Reply would be
 * the only control in the row with a different fill. It also outranks the
 * parent's cyan `button` default, which the two <button> controls would
 * otherwise inherit.
 */
.sc-comment__foot a,
.sc-comment__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface-soft) !important;
	font-family: var(--sc-font-body);
	font-size: 13px;
	font-weight: var(--sc-fw-medium);
	line-height: 1;
	color: var(--sc-navy);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sc-transition), color var(--sc-transition);
}

.sc-comment__foot a:hover,
.sc-comment__foot a:focus-visible,
.sc-comment__action:hover,
.sc-comment__action:focus-visible {
	background: var(--sc-navy-tint) !important;
	color: var(--sc-navy);
}

.sc-comment__action--danger {
	color: var(--sc-post-danger);
}

.sc-comment__action--danger:hover,
.sc-comment__action--danger:focus-visible {
	background: var(--sc-post-danger-soft) !important;
	color: var(--sc-post-danger);
}

/* ---------------------------------------------------- inline edit form */
/* Belt and braces: nothing in this theme or the parent styles [hidden], but a
   plugin that sets `display` on forms or paragraphs would reveal the editor. */
.sc-post [hidden] {
	display: none !important;
}

.sc-post .sc-cedit {
	margin: 0;
}

.sc-post .sc-cedit__field {
	display: block;
	width: 100%;
	min-height: 88px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--sc-post-field);
	border-radius: var(--sc-radius-sm);
	background: var(--sc-surface);
	box-shadow: none;
	font-family: var(--sc-font-body);
	font-size: 14px;
	line-height: 1.65;
	color: var(--sc-text);
	resize: vertical;
	-webkit-appearance: none;
	appearance: none;
}

.sc-post .sc-cedit__field:focus {
	outline: none;
	border-color: var(--sc-navy);
	box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

.sc-post .sc-cedit__msg {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sc-post-danger);
}

.sc-post .sc-cedit__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

/* Smaller than the main "Post comment" button — this sits inside a comment
   card, not at the end of the form. */
.sc-post .sc-cedit__actions .sc-btn {
	height: 36px;
	padding: 0 16px;
	font-size: 13px;
}

/* Result of an edit or delete made without JavaScript. */
.sc-post .sc-comments__notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--sc-radius-sm);
	background: var(--sc-navy-tint);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sc-navy);
}

.sc-post .sc-comments__notice--error {
	background: var(--sc-post-danger-soft);
	color: var(--sc-post-danger);
}

/* Replies. The list is nested, so the indent is applied once per level. */
.sc-clist .children {
	display: grid;
	gap: 14px;
	margin: 14px 0 0;
	padding: 0 0 0 40px;
	list-style: none;
}

/* The reply form gets moved in here by the core script — give it breathing
   room so it does not sit flush against the comment above it. */
.sc-post .sc-comment #respond {
	margin-top: 14px;
}

.sc-comments__closed {
	margin-top: 20px;
	font-size: 14px;
	color: var(--sc-text-muted);
}

.sc-cpager {
	margin-top: 20px;
	font-size: 14px;
}

.sc-cpager a {
	color: var(--sc-navy);
	font-weight: var(--sc-fw-medium);
}

.sc-cpager a:hover,
.sc-cpager a:focus-visible {
	color: var(--sc-orange);
}

/* --------------------------------------------------------- sidebar cards */
/* White, like the comment cards — the blue fill was removed on request
   (2026-07-28). With no fill the border and the soft shadow are the only things
   separating a card from the page, so both have to stay. */
.sc-pwidget {
	padding: 20px 18px;
	background: var(--sc-surface);
	border: 1px solid var(--sc-post-line);
	border-radius: var(--sc-radius);
	box-shadow: 0 1px 2px rgba(16, 26, 43, 0.04);
}

.sc-pwidget__title {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.3;
}

.sc-pwidget__lead {
	margin: -10px 0 14px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sc-text-muted);
}

/* ------------------------------------------------------- author card */
.sc-abox {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.sc-abox__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 44px;
	height: 44px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-post-chip);
	font-size: 17px;
	font-weight: var(--sc-fw-bold);
	color: var(--sc-navy);
}

.sc-abox__avatar img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.sc-abox__who {
	display: grid;
	gap: 2px;
	min-width: 0;
}

/* Serif, matching the card heading above it — the design sets the byline in
   the heading face, not the UI face. */
.sc-abox__name {
	font-family: var(--sc-font-heading);
	font-size: 19px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.25;
	color: var(--sc-navy);
}

.sc-abox__role {
	font-size: 14px;
	font-weight: var(--sc-fw-medium);
	line-height: 1.35;
	color: var(--sc-green-text);
}

/* -------------------------------------------------------- icon buttons */
/* The design's buttons are wide, not square: they share the card width evenly.
   grid-auto-flow keeps that true for however many links actually render — an
   author with only two profiles gets two half-width buttons, not two stubs. */
.sc-iconrow {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px;
}

.sc-iconrow__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 10px;
	background: var(--sc-post-chip);
	color: var(--sc-navy);
	transition: background var(--sc-transition), color var(--sc-transition);
}

.sc-iconrow__link:hover,
.sc-iconrow__link:focus-visible {
	background: var(--sc-navy);
	color: var(--sc-text-invert);
}

/* ------------------------------------------------------- related widget */
.sc-related {
	display: grid;
	gap: 16px;
}

.sc-related__item {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.sc-related__thumb {
	display: block;
	overflow: hidden;
	width: 58px;
	height: 46px;
	border-radius: 8px;
	background: var(--sc-surface-soft);
}

.sc-related__thumb img,
.sc-related__thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-related__thumb-empty {
	background: linear-gradient(135deg, var(--sc-surface-blue), var(--sc-surface-soft));
}

.sc-related__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 13px;
	font-weight: var(--sc-fw-semibold);
	line-height: 1.35;
}

.sc-related__title a {
	color: inherit;
}

.sc-related__title a:hover,
.sc-related__title a:focus-visible {
	color: var(--sc-orange);
}

.sc-related__meta {
	margin-top: 5px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--sc-text-muted);
}

/* ------------------------------------------------------- systems widget */
/* The last row has no bottom padding of its own, so the whole gap down to the
   button lives here. */
.sc-syslist {
	display: grid;
	margin-bottom: 24px;
}

.sc-syslist__item {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var(--sc-post-divider);
}

.sc-syslist__item:first-child {
	padding-top: 0;
}

.sc-syslist__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sc-syslist__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--sc-radius-pill);
	background: var(--sc-post-chip);
	font-size: 11px;
	font-weight: var(--sc-fw-bold);
	color: var(--sc-navy);
}

.sc-syslist__text {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.sc-syslist__name {
	font-size: 13px;
	font-weight: var(--sc-fw-bold);
	line-height: 1.35;
	color: var(--sc-navy);
}

.sc-syslist__name:hover,
.sc-syslist__name:focus-visible {
	color: var(--sc-orange);
}

.sc-syslist__price {
	font-size: 11px;
	line-height: 1.35;
	color: var(--sc-text-muted);
}

/* Taller and roomier than the shared .sc-btn default — it is the only action
   in the card, so it should not read as a small secondary control. The border
   is the brand navy rather than the pale line used elsewhere, so the button
   reads as an outlined control instead of an empty box. */
.sc-pwidget--systems .sc-btn--ghost {
	width: 100%;
	height: 46px;
	padding: 0 22px;
	border-color: var(--sc-navy);
	border-radius: 10px;
	font-size: 15px;
}

/* The card closes with the same 24px that sits above the button, so the button
   is evenly framed instead of hugging the bottom edge. */
.sc-pwidget--systems {
	padding-bottom: 24px;
}

/* --------------------------------------------------- highlighted system */
.sc-pick {
	padding: 20px 18px;
	border-radius: var(--sc-radius);
	background: var(--sc-navy);
	color: var(--sc-text-invert);
}

.sc-pick__badge {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: var(--sc-fw-bold);
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #a9c1f2;
}

.sc-post .sc-pick__name {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--sc-text-invert);
}

.sc-pick__text {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

/* ----------------------------------------------------------- breakpoints */

/* Laptop: the shell gutter tightens here, so the column gap comes in with it
   rather than letting the article column absorb the whole loss. */
@media (max-width: 1240px) {
	.sc-post {
		--sc-post-gap: 44px;
	}
}

@media (max-width: 1024px) {
	.sc-post {
		--sc-post-gap: 36px;
		--sc-post-side: 264px;
		padding-block: 44px 72px;
	}

	.sc-article__title {
		font-size: 36px;
	}

	.sc-article__content h2 {
		font-size: 26px;
	}
}

/* Tablet: the sidebar no longer earns a column of its own. It moves under the
   article as two cards side by side, matching how the blog listing collapses. */
@media (max-width: 900px) {
	.sc-post__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.sc-post__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		/* The cards differ in height; stretching would leave the shorter one
		   with a block of dead space under its button. */
		align-items: start;
	}
}

@media (max-width: 768px) {
	.sc-post {
		padding-block: 36px 60px;
	}

	.sc-crumbs {
		margin-bottom: 22px;
	}

	.sc-article__title {
		font-size: 31px;
	}

	.sc-article__media {
		margin-bottom: 26px;
	}

	.sc-article__content h2 {
		margin-top: 32px;
		font-size: 24px;
	}

	.sc-article__content h3 {
		margin-top: 26px;
		font-size: 19px;
	}

	.sc-comments {
		margin-top: 36px;
	}

	.sc-clist .children {
		padding-left: 24px;
	}

	/* A 300px thumbnail beside text leaves too little room for the excerpt on
	   a phone, so the listing stacks instead. */
	.sc-article__content .entry-post-thumbnail {
		float: none;
		display: block;
		margin: 0 0 14px;
	}

	.sc-article__content .entry-post-thumbnail img {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.sc-post__side {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Name and email stack rather than squeezing to half a phone width. */
	.sc-cform__form {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-cform__form > * {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.sc-post {
		padding-block: 28px 48px;
	}

	.sc-article__title {
		font-size: 27px;
	}

	.sc-article__content {
		font-size: 15px;
	}

	.sc-post .sc-cform,
	.sc-post #respond {
		padding: 18px;
	}

	.sc-cform__foot {
		align-items: stretch;
	}

	.sc-cform__action {
		margin-left: 0;
	}

	.sc-post .sc-cform__action .sc-btn {
		width: 100%;
	}

	.sc-clist .children {
		padding-left: 14px;
	}

	.sc-pwidget {
		padding: 18px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-post *,
	.sc-post *::before,
	.sc-post *::after {
		transition-duration: 0.01ms !important;
	}
}