/**
 * Single blog post — editorial layout.
 *
 * Independent of the Divi-parity stylesheets: posts are the one place where the
 * site steps away from the old Divi design. The brand faces (Sofia Pro,
 * Perfectly Nineties) are declared under private names so they never collide
 * with the substitute aliases in style.css.
 */

@font-face {
	font-family: "sap-sans";
	src: url("../fonts/legacy/sofia_regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "sap-sans";
	src: url("../fonts/legacy/sofia_bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "sap-serif";
	src: url("../fonts/legacy/perfectlynineties-regular-webfont.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "sap-serif";
	src: url("../fonts/legacy/perfectlynineties-italic-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

.single-post {
	--sap-ink: #1f2a28;
	--sap-muted: #6b7b78;
	--sap-line: #e4eae9;
	--sap-teal: #4c8686;
	--sap-forest: #223b35;
	--sap-sand: #f1d27a;
	--sap-cloud: #f6f7f5;
	--sap-measure: 720px;
	--sap-gutter: clamp(20px, 5vw, 40px);

	background: #fff;
	color: var(--sap-ink);
	font-family: "sap-sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* The block theme's root layout puts a gap between the header, main and
   footer; this page's bands sit flush against each other. */
.single-post .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.single-post .sap-topbar {
	background: var(--sap-forest);
	color: #fff;
}
.single-post .sap-topbar__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 14px var(--sap-gutter);
	gap: 20px;
}
.single-post .sap-topbar__logo {
	display: block;
	line-height: 0;
}
.single-post .sap-topbar__logo img {
	width: 132px;
	height: auto;
}
.single-post .sap-topbar__actions {
	gap: 18px;
}
.single-post .sap-topbar__cta {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--sap-sand);
	color: #1a1a1a;
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease;
}
.single-post .sap-topbar__cta:hover {
	filter: brightness(1.06);
}
.single-post .sap-topbar__nav .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* ==========================================================================
   Hero — a brand band carrying the title.

   No featured image here: on these posts it is a title card that already
   carries the headline, so showing it repeated the band underneath it.
   ========================================================================== */
.single-post .sap-phero {
	background: var(--sap-forest);
	color: #fff;
}
.single-post .sap-phero__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(44px, 6.5vw, 76px) var(--sap-gutter);
	text-align: center;
}
.single-post .sap-phero__kicker {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--sap-sand);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}
.single-post .sap-phero__kicker:hover {
	text-decoration: underline;
}
.single-post .sap-phero__title {
	margin: 0;
	font-family: "sap-serif", Georgia, serif;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	font-weight: 400;
	line-height: 1.08;
	color: #fff;
}
.single-post .sap-phero__meta {
	margin: 18px 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.78);
}
.single-post .sap-phero__meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   Article
   ========================================================================== */
.single-post .sap-post__article {
	max-width: var(--sap-measure);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 64px) var(--sap-gutter) clamp(24px, 4vw, 40px);
	font-size: 1.1875rem;
	line-height: 1.78;
}
.single-post .sap-post__article > .entry-content > *:first-child {
	margin-top: 0;
}
.single-post .sap-post__article p {
	margin: 0 0 1.45em;
}
.single-post .sap-post__article h2,
.single-post .sap-post__article h3,
.single-post .sap-post__article h4 {
	font-family: "sap-serif", Georgia, serif;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sap-forest);
	margin: 2em 0 0.6em;
}
.single-post .sap-post__article h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.single-post .sap-post__article h3 { font-size: clamp(1.35rem, 3vw, 1.65rem); }
.single-post .sap-post__article h4 { font-size: 1.2rem; }
.single-post .sap-post__article a {
	color: var(--sap-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.single-post .sap-post__article strong { font-weight: 700; }
.single-post .sap-post__article ul,
.single-post .sap-post__article ol {
	margin: 0 0 1.45em;
	padding-left: 1.3em;
}
.single-post .sap-post__article li { margin-bottom: 0.5em; }
.single-post .sap-post__article blockquote {
	margin: 2em 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--sap-teal);
	font-family: "sap-serif", Georgia, serif;
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--sap-forest);
}

/* Images: classic-editor markup (img, .wp-caption) and blocks alike. */
.single-post .sap-post__article img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}
.single-post .sap-post__article figure,
.single-post .sap-post__article .wp-caption {
	max-width: 100% !important;
	margin: 2em 0;
}
.single-post .sap-post__article .alignleft,
.single-post .sap-post__article .alignright,
.single-post .sap-post__article .aligncenter {
	float: none;
	margin: 2em auto;
	text-align: center;
}
.single-post .sap-post__article .wp-caption-text,
.single-post .sap-post__article figcaption {
	margin: 0.7em 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--sap-muted);
	text-align: center;
}

/* ==========================================================================
   Related posts
   ========================================================================== */
.single-post .sap-related {
	background: var(--sap-cloud);
	margin-top: clamp(40px, 6vw, 72px);
	padding: clamp(44px, 6vw, 72px) var(--sap-gutter);
}
.single-post .sap-related__inner {
	max-width: 1080px;
	margin: 0 auto;
}
.single-post .sap-related__title {
	margin: 0 0 32px;
	font-family: "sap-serif", Georgia, serif;
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	font-weight: 400;
	color: var(--sap-forest);
	text-align: center;
}
.single-post .sap-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
}
.single-post .sap-related__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sap-line);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.single-post .sap-related__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(31, 42, 40, 0.1);
}
.single-post .sap-related__thumb {
	display: block;
	width: 100%;
	height: auto; /* let aspect-ratio win over the img height attribute */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--sap-cloud);
}
.single-post .sap-related__body {
	display: block;
	padding: 20px 22px 24px;
}
.single-post .sap-related__name {
	display: block;
	margin: 0 0 8px;
	font-family: "sap-serif", Georgia, serif;
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--sap-forest);
}
.single-post .sap-related__date {
	display: block;
	margin: 0;
	font-size: 0.85rem;
	color: var(--sap-muted);
}

/* ==========================================================================
   Comments
   ========================================================================== */
.single-post .sap-post__comments {
	max-width: var(--sap-measure);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 72px) var(--sap-gutter);
}
.single-post #comment-wrap > h2,
.single-post .comment-reply-title {
	margin: 0 0 8px;
	font-family: "sap-serif", Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	font-weight: 400;
	color: var(--sap-forest);
}
.single-post .comment-reply-title small {
	display: block;
	margin-top: 6px;
	font-size: 0.9rem;
}
.single-post .sap-comments__empty {
	margin: 0 0 28px;
	color: var(--sap-muted);
}
.single-post .commentlist {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.single-post .commentlist .comment-body {
	padding: 22px 0;
	border-top: 1px solid var(--sap-line);
}
.single-post .comment_postinfo .fn {
	font-weight: 700;
	font-style: normal;
}
.single-post .comment_date {
	margin-left: 8px;
	font-size: 0.85rem;
	color: var(--sap-muted);
}
.single-post .comment-form {
	display: grid;
	gap: 16px;
}
.single-post .comment-notes {
	margin: 0;
	font-size: 0.9rem;
	color: var(--sap-muted);
}
.single-post .comment-form p {
	margin: 0;
}
.single-post .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sap-forest);
}
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"],
.single-post .comment-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--sap-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--sap-ink);
}
.single-post .comment-form textarea {
	min-height: 160px;
	resize: vertical;
}
.single-post .comment-form input:focus,
.single-post .comment-form textarea:focus {
	outline: 2px solid var(--sap-teal);
	outline-offset: 1px;
	border-color: transparent;
}
.single-post .comment-form .form-submit { margin-top: 4px; }
.single-post .comment-form input[type="submit"] {
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--sap-teal);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s ease;
}
.single-post .comment-form input[type="submit"]:hover { filter: brightness(1.07); }
.single-post .comment-form .comment-form-cookies-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.9rem;
}
.single-post .comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--sap-muted);
}

/* Two columns for name/email once there is room. */
@media (min-width: 640px) {
	.single-post .comment-form {
		grid-template-columns: 1fr 1fr;
	}
	.single-post .comment-form > .comment-notes,
	.single-post .comment-form > .comment-form-comment,
	.single-post .comment-form > .comment-form-url,
	.single-post .comment-form > .comment-form-cookies-consent,
	.single-post .comment-form > .form-submit,
	.single-post .comment-form > p:last-child {
		grid-column: 1 / -1;
	}
}

/* The shared footer part keeps the brand faces on this page too. */
.single-post footer.wp-block-template-part {
	font-family: "sap-sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
.single-post footer.wp-block-template-part h1,
.single-post footer.wp-block-template-part h2,
.single-post footer.wp-block-template-part h3 {
	font-family: "sap-serif", Georgia, serif;
	font-weight: 400;
}

/* Slightly tighter type on small screens. */
@media (max-width: 600px) {
	.single-post .sap-post__article {
		font-size: 1.0625rem;
		line-height: 1.72;
	}
	.single-post .sap-related__grid {
		gap: 20px;
	}
}