/* =====================================================================
   Sobiaonline single-article styling

   Visual language is taken entirely from the current live site, not from
   the Stitch reference design:
     - type: Inter for body and headings (Kadence base_font / h1-h6_font)
     - page: #f0e9e3, surfaces #ffffff, subtle #f7f4f1
     - ink: #181415, muted #656464, link #003174, hover #00215c
     - category label #003174. The theme's post_title_category_color is
       #f75003, which measures 2.86:1 on the page background and fails
       WCAG AA at 13px, so the existing link navy is used instead.
     - CTA #181415 / #d4081f on white, 8px radius (matches the existing
       .so-sidebar-cta and .so-portfolio-archive__button rules)
     - focus ring: 3px #0b57d0, offset 2px (site standard, offset 3px on
       the portfolio pages)

   Layout, hierarchy, measure and spacing come from the Stitch work.
   No gradients, no webfonts of its own, no counters, no icon tiles.
   ===================================================================== */

:root {
	/* Surfaces */
	--so-blog-bg: #f0e9e3;
	--so-blog-surface: #ffffff;
	--so-blog-surface-subtle: #f7f4f1;

	/* Text */
	--so-blog-ink: #181415;
	--so-blog-ink-soft: #4A5568;
	--so-blog-muted: #656464;

	/* Interactive */
	--so-blog-link: #003174;
	--so-blog-link-hover: #00215c;
	--so-blog-accent: #d4081f;
	--so-blog-accent-hover: #b3061a;

	/* Lines */
	--so-blog-border: #e7e0d8;
	--so-blog-border-subtle: #f0e9e3;

	/* Shape */
	--so-blog-radius-sm: 6px;
	--so-blog-radius: 8px;
	--so-blog-radius-lg: 12px;
	--so-blog-shadow: 0 1px 3px rgba(24, 20, 21, 0.05);

	/* Rhythm */
	--so-blog-measure: 760px;
	--so-blog-wide: 880px;
	--so-blog-shell: 1180px;
	--so-blog-gap: 1.5rem;

	/*
	 * Both values are overwritten at runtime from the measured site header by
	 * so_stitch_layout_script(), so the offsets always track the real header
	 * and the WordPress admin bar. These are the no-JS fallbacks.
	 */
	--so-blog-header-offset: 24px;
	--so-blog-sticky-top: 24px;

	/* Type */
	--so-blog-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.single-post {
	background-color: var(--so-blog-bg);
	color: var(--so-blog-ink);
}

.single-post .site-main,
.single-post .content-container {
	background-color: transparent;
}

.single-post .content-container.site-container {
	max-width: var(--so-blog-shell);
}

@media screen and (min-width: 1025px) {
	/* Kadence renders this hook inside `.content-wrap`, so the two-column
	   shell is built here rather than on `.content-container`. */
	.single-post .so-blog-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 290px;
		gap: var(--so-blog-gap);
		align-items: start;
	}
	.single-post .so-blog-main {
		min-width: 0;
	}
}

/* ---------- Article header ----------
   Sits above the content/sidebar grid and spans the full blog container.
   Centred, with no fill or border, so it reads as an editorial masthead
   directly on the page background. */
.so-blog-hero {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	margin: 0 0 var(--so-blog-gap);
	text-align: center;
}
.so-blog-breadcrumb {
	font-family: var(--so-blog-font);
	font-size: 0.8125rem;
	color: var(--so-blog-muted);
	margin-bottom: 1.25rem;
}
.so-blog-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
	align-items: center;
}
.so-blog-breadcrumb a {
	color: var(--so-blog-link);
	text-decoration: none;
}
.so-blog-breadcrumb a:hover {
	color: var(--so-blog-link-hover);
	text-decoration: underline;
}
.so-blog-breadcrumb a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
	border-radius: var(--so-blog-radius-sm);
}
.so-blog-breadcrumb li[aria-current="page"] {
	color: var(--so-blog-muted);
}

/* Plain uppercase label styles are no longer used: the category appears once
   in the breadcrumb and once in the metadata row, so no eyebrow is output. */

/* Metadata row items */
.so-blog-meta__category a {
	color: var(--so-blog-link);
	font-weight: 600;
	text-decoration: none;
}
.so-blog-meta__category a:hover {
	text-decoration: underline;
}
.so-blog-meta__published,
.so-blog-meta__updated {
	white-space: nowrap;
}
.so-blog-meta__reading-time {
	white-space: nowrap;
}

.so-blog-hero h1 {
	font-family: var(--so-blog-font);
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--so-blog-ink);
	margin: 0 auto 0.75rem;
	max-width: 30ch;
	text-wrap: balance;
}
.so-blog-hero .so-blog-breadcrumb,
.so-blog-hero .so-blog-meta {
	max-width: 64rem;
	margin-left: auto;
	margin-right: auto;
}
.so-blog-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 1.25rem;
	font-family: var(--so-blog-font);
	font-size: 0.875rem;
	color: var(--so-blog-muted);
	border-top: 1px solid var(--so-blog-border);
	padding-top: 1rem;
	margin: 0;
}
.so-blog-meta time,
.so-blog-meta span,
.so-blog-meta a {
	text-align: center;
}
.so-blog-meta a {
	color: var(--so-blog-link);
	text-decoration: none;
}
.so-blog-meta a:hover {
	text-decoration: underline;
}
.so-blog-meta a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
	border-radius: var(--so-blog-radius-sm);
}
.so-blog-meta .so-blog-author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--so-blog-ink);
	font-weight: 600;
}
.so-blog-meta .so-blog-author img {
	border-radius: 9999px;
}
.so-blog-meta time {
	white-space: nowrap;
}

/* ---------- Wide featured image ---------- */
.so-blog-figure {
	max-width: var(--so-blog-wide);
	margin: 0 auto 1.5rem;
}
.so-blog-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--so-blog-radius-lg);
}
.so-blog-figure figcaption {
	font-size: 0.8125rem;
	color: var(--so-blog-muted);
	text-align: center;
	margin-top: 0.5rem;
}

/* ---------- Article body ---------- */
.so-blog-article {
	background-color: var(--so-blog-surface);
	border: 1px solid var(--so-blog-border);
	border-radius: var(--so-blog-radius-lg);
	box-shadow: var(--so-blog-shadow);
	padding: clamp(1.5rem, 3.5vw, 3.5rem);
	max-width: var(--so-blog-measure);
	margin: 0 auto;
}
.single-post .so-blog-article .entry-content {
	font-family: var(--so-blog-font);
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--so-blog-ink);
}
.single-post .so-blog-article > *:first-child {
	margin-top: 0;
}
.single-post .so-blog-article p {
	margin: 0 0 1.25rem;
}
.single-post .so-blog-article strong {
	font-weight: 700;
	color: var(--so-blog-ink);
}

/* Section rhythm: headings, space and a light rule carry the structure.
   Paragraphs stay plain text and are never turned into cards. */
.single-post .so-blog-article h1,
.single-post .so-blog-article h2,
.single-post .so-blog-article h3,
.single-post .so-blog-article h4,
.single-post .so-blog-article h5,
.single-post .so-blog-article h6 {
	font-family: var(--so-blog-font);
	color: var(--so-blog-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	scroll-margin-top: var(--so-blog-header-offset);
}
.single-post .so-blog-article h2 {
	font-size: 1.625rem;
	line-height: 1.3;
	margin: 2.75rem 0 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--so-blog-border);
}
.single-post .so-blog-article h3 {
	font-size: 1.25rem;
	line-height: 1.35;
	margin: 2rem 0 0.625rem;
}
.single-post .so-blog-article h4 {
	font-size: 1.0625rem;
	line-height: 1.4;
	margin: 1.75rem 0 0.5rem;
}
.single-post .so-blog-article h5,
.single-post .so-blog-article h6 {
	font-size: 1rem;
	line-height: 1.4;
	margin: 1.5rem 0 0.5rem;
}

/* Anchor target feedback uses the brand accent, not an amber highlight. */
.single-post .so-blog-article :target {
	background-color: transparent;
	box-shadow: inset 3px 0 0 var(--so-blog-accent);
	padding-left: 0.875rem;
}

.single-post .so-blog-article a:not(.wp-block-button__link):not(.kb-btn) {
	color: var(--so-blog-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.single-post .so-blog-article a:not(.wp-block-button__link):not(.kb-btn):hover {
	color: var(--so-blog-link-hover);
	text-decoration-thickness: 2px;
}
.single-post .so-blog-article a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}

/* Ordinary semantic lists with their own markers. */
.single-post .so-blog-article ul,
.single-post .so-blog-article ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
	list-style: revert;
}
.single-post .so-blog-article li {
	margin-bottom: 0.5rem;
}
.single-post .so-blog-article li > ul,
.single-post .so-blog-article li > ol {
	margin: 0.5rem 0 0.25rem;
}
.single-post .so-blog-article ul ul {
	list-style: circle;
}
.single-post .so-blog-article ul ul ul {
	list-style: square;
}
.single-post .so-blog-article li::marker {
	color: var(--so-blog-muted);
}

/* Editorial quote: a rule and typographic contrast only, no tinted panel. */
.single-post .so-blog-article blockquote,
.single-post .so-blog-article .wp-block-quote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	background-color: transparent;
	border-left: 3px solid var(--so-blog-border);
	border-radius: 0;
	color: var(--so-blog-ink-soft);
	font-style: italic;
}
.single-post .so-blog-article blockquote p:last-child {
	margin-bottom: 0;
}
.single-post .so-blog-article blockquote cite,
.single-post .so-blog-article blockquote .wp-block-quote__citation {
	font-style: normal;
	font-size: 0.875rem;
	color: var(--so-blog-muted);
}

.single-post .so-blog-article hr {
	border: 0;
	border-top: 1px solid var(--so-blog-border);
	margin: 2.5rem 0;
}

/* Tables scroll inside their own container */
.single-post .so-blog-article .wp-block-table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.75rem 0;
	font-size: 0.9375rem;
}
.single-post .so-blog-article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	min-width: 34rem;
}
.single-post .so-blog-article .wp-block-table th,
.single-post .so-blog-article .wp-block-table td {
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--so-blog-border);
	text-align: left;
	vertical-align: top;
}
.single-post .so-blog-article .wp-block-table thead th {
	background-color: var(--so-blog-surface-subtle);
	font-weight: 600;
}

/* Media never overflows */
.single-post .so-blog-article img,
.single-post .so-blog-article svg,
.single-post .so-blog-article video,
.single-post .so-blog-article iframe {
	max-width: 100%;
	height: auto;
}
.single-post .so-blog-article .wp-block-image {
	margin: 1.75rem 0;
}
.single-post .so-blog-article .wp-block-image img {
	border-radius: var(--so-blog-radius);
}
.single-post .so-blog-article figcaption {
	font-size: 0.8125rem;
	color: var(--so-blog-muted);
	text-align: center;
	margin-top: 0.5rem;
}
.single-post .so-blog-article pre {
	overflow-x: auto;
	max-width: 100%;
	border-radius: var(--so-blog-radius);
}
.single-post .so-blog-article code {
	background-color: var(--so-blog-surface-subtle);
	border-radius: var(--so-blog-radius-sm);
	padding: 0.1em 0.35em;
	font-size: 0.9em;
}

/* ---------- Google preferred source ----------
   Two placements per article: below the featured image before the body, and
   immediately before the comment form. Restrained so the first one reads as a
   single line rather than a panel. The button is the existing .so-blog-btn
   brand style, unchanged. */
.so-blog-source {
	margin: 0 0 1.75rem;
}
.so-blog-source--compact {
	margin: 0 0 1.5rem;
}
.so-blog-source__note {
	margin: 0 0 0.75rem;
	font-family: var(--so-blog-font);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4a5568;
	max-width: 60ch;
}
.so-blog-comments .so-blog-source {
	margin: 0 0 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--so-blog-border);
}
/*
   The source links use an outlined brand button rather than the dark filled
   `.so-blog-btn`. A large near-black block reads as heavy and discourages
   clicking; an outlined button in the site's link navy (#003174, 12.4:1 on
   white) reads as an invitation and keeps the same hit area. Hover fills with
   navy so the affordance is still unmistakable.
   Padding drops by 2px per side to absorb the 2px border.
*/
.so-blog-source .so-blog-btn {
	display: inline-block;
	padding: 9px 16px;
	background-color: transparent;
	color: #003174;
	border: 2px solid #003174;
	border-radius: 8px;
	font-family: var(--so-blog-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}
.so-blog-source .so-blog-btn:hover {
	background-color: #003174;
	color: #ffffff;
	text-decoration: none;
}
.so-blog-source .so-blog-btn:active {
	background-color: #00215c;
	color: #ffffff;
}
.so-blog-source .so-blog-btn:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}
@media screen and (max-width: 767px) {
	.so-blog-source .so-blog-btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ---------- Closing CTA ----------
   No panel at all: no fill, no border, no radius. Heading, copy and button sit
   straight on the article card, separated by space alone.

   The section is set in the same type as the article body so it does not read
   as a separate box: 1.125rem, line-height 1.8, Inter, ink #181415 — the exact
   values on `.entry-content`. The heading keeps bold for hierarchy but matches
   the body size and colour. Contrast of #181415 on the white card is 18.27:1.

   The button stays the theme's main button: `--global-palette-btn-bg` with the
   site's own a.kb-button metrics (52px, 0 32px, pill, 600). */
.single-post .so-blog-cta {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: clamp(1.75rem, 4vw, 2.75rem) 0;
	margin: 2.5rem auto 0;
	max-width: var(--so-blog-measure);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	color: var(--so-blog-ink);
}
.single-post .so-blog-cta h2 {
	font-family: var(--so-blog-font);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--so-blog-ink);
	margin: 0 0 0.5rem;
}
.single-post .so-blog-cta p {
	font-family: var(--so-blog-font);
	margin: 0;
	color: var(--so-blog-ink);
	font-size: 1.125rem;
	line-height: 1.8;
	max-width: none;
}
.single-post .so-blog-cta a:not(.so-blog-btn) {
	color: var(--so-blog-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.single-post .so-blog-cta a:not(.so-blog-btn):hover {
	text-decoration-thickness: 2px;
}
.single-post .so-blog-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
/*
   The theme's own button rule, reproduced exactly:
     button, .button, .wp-block-button__link, .wp-element-button,
     input[type=button|reset|submit] {
       border-radius:3px; background:var(--global-palette-btn-bg);
       color:var(--global-palette-btn); padding:.4em 1em; border:0;
       font-size:1.125rem; line-height:1.6; display:inline-block;
       font-family:inherit; cursor:pointer; text-decoration:none;
       transition:all .2s ease; box-shadow:0 0 0 -7px rgba(0,0,0,0);
     }

   `background` MUST be the shorthand here. The variable holds a
   linear-gradient(), which is an image, not a colour, so assigning it to
   `background-color` is invalid and gets dropped, leaving white text on a
   transparent button. That was the defect fixed here.
   The theme's 1.125rem label already matches the article body.
*/
.single-post .so-blog-cta .so-blog-btn,
.single-post .so-blog-cta .so-blog-btn--primary {
	display: inline-block;
	padding: .4em 1em;
	background: var(--global-palette-btn-bg);
	color: var(--global-palette-btn);
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.6;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s ease;
	box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
}
.single-post .so-blog-cta .so-blog-btn:hover,
.single-post .so-blog-cta .so-blog-btn--primary:hover,
.single-post .so-blog-cta .so-blog-btn:active,
.single-post .so-blog-cta .so-blog-btn--primary:active,
.single-post .so-blog-cta .so-blog-btn:focus,
.single-post .so-blog-cta .so-blog-btn--primary:focus {
	background: var(--global-palette-btn-bg-hover);
	color: var(--global-palette-btn-hover);
	text-decoration: none;
	box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}
.single-post .so-blog-cta .so-blog-btn:focus-visible,
.single-post .so-blog-cta .so-blog-btn--primary:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}

/* Matches the existing live blog CTA button:
   .single-post .primary-sidebar .so-sidebar-cta .wp-block-button__link */
.so-blog-btn {
	display: inline-block;
	padding: 11px 18px;
	background-color: var(--so-blog-ink);
	color: #ffffff;
	border-radius: var(--so-blog-radius);
	font-family: var(--so-blog-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}
.so-blog-btn:hover {
	background-color: #000000;
	text-decoration: underline;
}
.so-blog-btn:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}

/* ---------- Related ---------- */
.so-blog-related {
	max-width: var(--so-blog-measure);
	margin: 2.5rem auto 0;
}
.so-blog-related > h2 {
	font-family: var(--so-blog-font);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--so-blog-ink);
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--so-blog-border);
	margin: 0 0 1rem;
}
.so-blog-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}
.so-blog-related__card {
	background-color: var(--so-blog-surface);
	border: 1px solid var(--so-blog-border);
	border-radius: var(--so-blog-radius-lg);
	padding: 1rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.so-blog-related__card a {
	color: var(--so-blog-ink);
	font-weight: 600;
	text-decoration: none;
}
.so-blog-related__card a:hover {
	color: var(--so-blog-link);
	text-decoration: underline;
}
.so-blog-related__card a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}
.so-blog-related__card time {
	font-size: 0.8125rem;
	color: var(--so-blog-muted);
}

/* ---------- Sidebar ---------- */
/* ---------- Sidebar ----------
   Sticky is opt-in and driven by the `.so-sticky-ok` class, which the layout
   script adds only when the sidebar actually fits beneath the real site
   header. There is deliberately no fixed height, no max-height and no
   overflow clipping, so a sidebar taller than the viewport simply scrolls in
   normal flow and every widget stays reachable instead of being trapped.
   Below 1025px the class is removed and the column stacks normally. */
.so-blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-width: 100%;
	min-width: 0;
	align-self: start;
}
@media screen and (min-width: 1025px) {
	.so-blog-sidebar.so-sticky-ok {
		position: sticky;
		top: var(--so-blog-sticky-top, 24px);
	}
}
.so-blog-widget {
	background-color: var(--so-blog-surface);
	border: 1px solid var(--so-blog-border);
	border-radius: var(--so-blog-radius-lg);
	box-shadow: var(--so-blog-shadow);
	padding: 1.75rem;
}
.so-blog-widget__title {
	font-family: var(--so-blog-font);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--so-blog-ink);
	margin: 0 0 1.125rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--so-blog-border);
}

/* Table of contents: semantic list, no counters, no decoration. */
.so-blog-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.so-blog-toc li + li {
	margin-top: 0.625rem;
}
.so-blog-toc a {
	display: block;
	color: var(--so-blog-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	text-decoration: none;
}
.so-blog-toc a:hover {
	color: var(--so-blog-link);
	text-decoration: underline;
}
.so-blog-toc a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
	border-radius: var(--so-blog-radius-sm);
}

/* Search */
.so-blog-search form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.so-blog-search label {
	flex: 1 1 10rem;
}
.so-blog-search input[type="search"] {
	width: 100%;
	height: 3rem;
	padding: 0 1rem;
	font-family: var(--so-blog-font);
	font-size: 1rem;
	color: var(--so-blog-ink);
	background-color: #ffffff;
	border: 1px solid var(--so-blog-border);
	border-radius: var(--so-blog-radius);
}
.so-blog-search input[type="search"]::placeholder {
	color: var(--so-blog-muted);
}
.so-blog-search input[type="search"]:focus {
	border-color: var(--so-blog-link);
}
.so-blog-search input[type="search"]:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}
.so-blog-search button {
	height: 3rem;
	padding: 0 1.25rem;
	font-family: var(--so-blog-font);
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	background-color: var(--so-blog-ink);
	border: 0;
	border-radius: var(--so-blog-radius);
	cursor: pointer;
}
.so-blog-search button:hover {
	background-color: #000000;
}
.so-blog-search button:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}

/* Enquiry: same surface as every other widget, no accent panel. */
.so-blog-enquiry {
	background-color: var(--so-blog-surface);
	border-color: var(--so-blog-border);
}
.so-blog-enquiry p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--so-blog-ink-soft);
	margin: 0 0 1.25rem;
}
/*
   The sidebar enquiry button uses Kadence's own global button variables, so it
   inherits the theme customiser exactly like a native `.button` element and
   stays in sync if the brand button is ever changed in Customiser.
   White on both gradient stops measures 5.83:1 and 5.47:1, so AA passes.
*/
/* Same shorthand requirement as the closing CTA button; see 4A.6m. */
.so-blog-enquiry .so-blog-btn,
.so-blog-enquiry .so-blog-btn:hover,
.so-blog-enquiry .so-blog-btn:focus,
.so-blog-enquiry .so-blog-btn:active {
	display: inline-block;
	padding: .4em 1em;
	background: var(--global-palette-btn-bg);
	color: var(--global-palette-btn);
	border: 0;
	border-radius: 3px;
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.6;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s ease;
}
.so-blog-enquiry .so-blog-btn:hover,
.so-blog-enquiry .so-blog-btn:active,
.so-blog-enquiry .so-blog-btn:focus {
	background: var(--global-palette-btn-bg-hover);
	color: var(--global-palette-btn-hover);
	text-decoration: none;
	box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.1);
}
.so-blog-enquiry .so-blog-btn:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}

/* Recent + categories */
.so-blog-recent ul,
.so-blog-cats ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.so-blog-recent li + li,
.so-blog-cats li + li {
	border-top: 1px solid var(--so-blog-border-subtle);
	margin-top: 0.875rem;
	padding-top: 0.875rem;
}
.so-blog-recent a,
.so-blog-cats a {
	color: var(--so-blog-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	text-decoration: none;
}
.so-blog-recent a:hover,
.so-blog-cats a:hover {
	color: var(--so-blog-link);
	text-decoration: underline;
}
.so-blog-recent a:focus-visible,
.so-blog-cats a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
	border-radius: var(--so-blog-radius-sm);
}
.so-blog-recent time {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--so-blog-muted);
}

/* ---------- Comments ---------- */
.so-blog-comments {
	max-width: var(--so-blog-measure);
	margin: 2.5rem auto 0;
	background-color: var(--so-blog-surface);
	border: 1px solid var(--so-blog-border);
	border-radius: var(--so-blog-radius-lg);
	box-shadow: var(--so-blog-shadow);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.so-blog-comments .comments-title,
.so-blog-comments .comment-reply-title {
	font-family: var(--so-blog-font);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--so-blog-ink);
	margin: 0 0 1rem;
}
.so-blog-comments .comment-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.so-blog-comments .comment-list .children {
	list-style: none;
	margin: 0.75rem 0 0 1.25rem;
	padding: 0 0 0 0.875rem;
	border-left: 2px solid var(--so-blog-border);
}
.so-blog-comments .comment-body {
	border-bottom: 1px solid var(--so-blog-border-subtle);
	padding: 1rem 0;
}
.so-blog-comments .comment-author .avatar {
	border-radius: 9999px;
	margin-right: 0.5rem;
	vertical-align: middle;
}
.so-blog-comments .comment-author .fn {
	color: var(--so-blog-ink);
	font-weight: 600;
	text-decoration: none;
}
.so-blog-comments .comment-metadata {
	font-size: 0.8125rem;
	color: var(--so-blog-muted);
	margin-bottom: 0.5rem;
}
.so-blog-comments .comment-reply-link {
	color: var(--so-blog-link);
	font-size: 0.875rem;
	text-decoration: underline;
}
.so-blog-comments .comment-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--so-blog-ink);
	margin-bottom: 0.375rem;
}
.so-blog-comments .comment-form p {
	margin: 0 0 1rem;
}
.so-blog-comments .comment-form input[type="text"],
.so-blog-comments .comment-form input[type="email"],
.so-blog-comments .comment-form input[type="url"],
.so-blog-comments .comment-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.75rem 0.875rem;
	font-family: var(--so-blog-font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--so-blog-ink);
	background-color: #ffffff;
	border: 1px solid var(--so-blog-border);
	border-radius: var(--so-blog-radius);
}
.so-blog-comments .comment-form textarea {
	min-height: 9rem;
}
.so-blog-comments .comment-form input:focus,
.so-blog-comments .comment-form textarea:focus {
	border-color: var(--so-blog-link);
}
.so-blog-comments .comment-form input:focus-visible,
.so-blog-comments .comment-form textarea:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 2px;
}
.so-blog-comments .comment-form input[type="submit"] {
	display: inline-block;
	width: auto;
	padding: 11px 18px;
	font-family: var(--so-blog-font);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #ffffff;
	background-color: var(--so-blog-ink);
	border: 0;
	border-radius: var(--so-blog-radius);
	cursor: pointer;
}
.so-blog-comments .comment-form input[type="submit"]:hover {
	background-color: #000000;
}
.so-blog-comments .comment-notes,
.so-blog-comments .logged-in-as {
	font-size: 0.8125rem;
	color: var(--so-blog-muted);
}
.so-blog-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
}
.so-blog-comments .comment-form-cookies-consent input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}
.single-post .so-blog-comments .comment-form-float-label label {
	position: static;
	transform: none;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--so-blog-ink);
	margin-bottom: 0.375rem;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 1024px) {
	.single-post .content-container.site-container {
		max-width: 100%;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--so-blog-gap: 1rem;
	}
	.so-blog-hero {
		padding: 0 0 1.5rem;
	}
	.so-blog-hero h1 {
		max-width: none;
		font-size: 1.625rem;
	}
	.so-blog-article {
		padding: 1.5rem 1.125rem;
	}
	.single-post .so-blog-article .entry-content {
		font-size: 1.0625rem;
		line-height: 1.75;
	}
	.single-post .so-blog-article h2 {
		font-size: 1.375rem;
		margin-top: 2.25rem;
		padding-top: 1.25rem;
	}
	.single-post .so-blog-article h3 {
		font-size: 1.125rem;
	}
	.single-post .so-blog-cta {
		flex-direction: column;
		align-items: flex-start;
	}
	.single-post .so-blog-cta .so-blog-btn,
	.single-post .so-blog-cta .so-blog-btn--primary {
		display: block;
		width: 100%;
		text-align: center;
	}
	/* The article body steps down to 1.0625rem here, so the CTA follows it. */
	.single-post .so-blog-cta h2,
	.single-post .so-blog-cta p,
	.single-post .so-blog-cta .so-blog-btn,
	.single-post .so-blog-cta .so-blog-btn--primary {
		font-size: 1.0625rem;
	}
	.single-post .so-blog-cta p {
		line-height: 1.75;
	}
	.so-blog-comments {
		padding: 1.25rem 1rem;
	}
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
	.so-blog-sidebar,
	.so-blog-article,
	.so-blog-widget {
		transition: none;
	}
}

@media print {
	.so-blog-sidebar,
	.so-blog-cta,
	.so-blog-related,
	.so-blog-comments {
		display: none;
	}
	.single-post .so-blog-article {
		box-shadow: none;
		border: 0;
	}
}