/**
 * Blog module — all front-end styling.
 * [2026-08-11] New file. Built to the client-approved mockup.
 *
 * SCOPING RULE: every selector is scoped under .page-blog (or .blog-hero /
 * .blog-sidebar inside it). Nothing here can leak into the header, the footer,
 * or any other page on the site.
 *
 * Contents
 *   1.  Tokens
 *   2.  Layout overrides (unwrap Themify's constrained page shell)
 *   3.  Banner
 *   4.  Body grid + column divider
 *   5.  Section heading (script)
 *   6.  Post list
 *   7.  Pagination
 *   8.  Sidebar — Categories
 *   9.  Sidebar — Recent Post
 *   10. Sidebar — Ready to Franchise CTA
 *   11. Single post
 *   12. Responsive
 */

/* ============================================================
   1. TOKENS
   Brand values reused from the existing site so the blog cannot
   drift from it: navy #163668 and shadow-navy #1d3868 come from
   single-unit-page.css, gold #ffa600 from .su-btn, cream #F4F1EA
   from .su-hero__form-card, yellow #ffd700 from .color-yellow.
============================================================ */
.page-blog {
	--pos-navy: #163668;
	--pos-navyL: #2E6BB8;
	--pos-navyL2: #02409A;
	--pos-navy-soft: #1d3868;
	--pos-gold: #ffa600;
	--pos-yellow: #ffd700;
	--pos-yellowD: #FFD334;
	--pos-cream: #f4f1ea;
	--pos-date: #e09b2d;
	--pos-body: #3a425e;
	--pos-muted: #6b7280;
	--pos-rule: #e3e5ea;
	--pos-white: #ffffff;
	--pos-gray: #566079;
	--pos-grayL: #EEEDEE;
	--pos-grayL2: #E6EAEF;
	--pos-grayL3: #EBEFF3;
	--pos-grayL4: #AEAEB0;

	--pos-font: 'Poppins', Arial, Helvetica, sans-serif;

	/*
	 * All measured off the approved mockup at 1600px viewport width.
	 * Reference points: main column content 878px, vertical rule 67px after it,
	 * sidebar content 367px starting 60px past the rule → total 1376px.
	 * --pos-sidebar is the whole grid column, i.e. content + padding + border.
	 */
	--pos-shell: 1440px;
	--pos-gap: 67px;            /* grid gap: main content edge -> vertical rule */
	--pos-sidebar: 428px;       /* 367 content + 60 padding + 1 border */
	--pos-sidebar-pad: 60px;    /* rule -> sidebar content */
	--pos-thumb-w: 321px;
	--pos-thumb-h: 205px;       /* raised on request 2026-08-11 (mockup ~180px) */
	--pos-thumb-radius: 14px;   /* ditto (mockup ~8px) */
	--pos-recent-w: 106px;
	--pos-recent-h: 78px;        /* raised on request 2026-08-11 (mockup ~62px) */
	--pos-recent-radius: 10px;   /* ditto (mockup ~6px) */
}

/* ============================================================
   2. LAYOUT OVERRIDES
   Themify wraps #content in a padded, max-width shell. The banner
   has to run full-bleed, so the shell is unwrapped here and the
   inner sections re-apply their own max-width instead.
   Header and footer are untouched.
============================================================ */
#content.blog-content-override,
#layout.blog-layout-override {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
	float: none;
}

.page-blog {
	font-family: var(--pos-font);
	color: var(--pos-body);
}

.page-blog *,
.page-blog *::before,
.page-blog *::after {
	box-sizing: border-box;
}

/* Themify's default page title / description are redundant here. */
.page-blog-active .page-title,
.page-blog-active #page-title {
	display: none;
}

/* ============================================================
   3. BANNER
============================================================ */
/*
 * IDENTICAL TREATMENT TO THE SINGLE UNIT HERO (.su-hero), per the client's
 * instruction "Banner is already implemented on single-unit-latest — this
 * banner". Copied verbatim from single-unit-page.css:
 *   - same background image, background-size:cover, background-position:center top
 *   - NO colour overlay: the navy tint is already baked into image.png, so
 *     adding a gradient on top crushes the photo and hides the wave graphic
 *   - pattern.png (the blue wave, 1018x150) sits top-right at its NATURAL size
 *     with width:auto/height:auto, exactly as .su-hero__pattern does
 * The only deliberate differences: the form card and video are gone, a
 * description column is added, and the height is reduced to the mockup's ~490px
 * (Single Unit is ~860px because it has to contain the form).
 */
.page-blog .blog-hero {
	position: relative;
	max-width: none;
	margin: 0;
	padding: 70px 40px 78px;
	background-color: var(--pos-navy);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	overflow: hidden;
	min-height: 490px;
	display: flex;
	align-items: center;
}

.page-blog .blog-hero__pattern {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: auto;
	z-index: 1;
	object-fit: contain;
	pointer-events: none;
}

.page-blog .blog-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--pos-shell);
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

.page-blog .blog-hero__left {
	flex: 1 1 620px;
	min-width: 0;
}

.page-blog .blog-hero__right {
	/* flex: 0 1 480px; */
	flex: 0 1 600px;
	padding-bottom: 14px;
	padding-right: 5rem;
}

.page-blog .blog-hero__eyebrow {
	display: block;
	color: var(--pos-white);
	font-family: var(--pos-font);
	font-size: 43px;
	font-weight: 700;
	line-height: normal;
	margin: 0 0 4px;
	letter-spacing: 0;
}

/*
 * Script headline. .single-unit-shadow / .shadow / .main come from the theme's
 * style.css — two stacked copies of the text, the shadow font behind and the
 * script font in front. See the height-safety note below for how the stacking
 * is reworked here.
 */
.page-blog .blog-hero__title.single-unit-shadow {
	display: block;
	position: relative;
	width: 100%;
	max-width: 830px;   /* forces the mockup's two-line wrap */
	margin: 0 !important;
	padding: 0;
	font-size: 95px !important;
	line-height: 110px !important;
	text-transform: none;
}

/*
 * THE SHADOW EFFECT, MADE HEIGHT-SAFE.
 * style.css absolutely positions BOTH copies of the text (.shadow and .main),
 * which leaves the parent with zero natural height — so every use of it on the
 * Single Unit page hardcodes a pixel height per breakpoint. That is brittle:
 * as soon as the copy wraps to one more line than the hardcoded height allows
 * (e.g. this headline going to three lines at 390px), the text overflows and
 * collides with whatever sits below it.
 *
 * Fix: keep `.main` in NORMAL FLOW so it defines the parent's height from the
 * real rendered text, and absolutely position only the `.shadow` copy behind
 * it. Visually identical, but the height is now correct automatically at any
 * viewport and for any length of copy — so no fixed heights anywhere below.
 *
 * Also re-aligns left: style.css centres these spans globally
 * (left:50%; transform:translateX(-50%)), the mockup is left-aligned.
 */
.page-blog .blog-hero__title.single-unit-shadow .main,
.page-blog .blog-main__heading.single-unit-shadow .main {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	display: block;
	width: 100%;
	white-space: normal !important;
	z-index: 2;
}

.page-blog .blog-hero__title.single-unit-shadow .shadow,
.page-blog .blog-main__heading.single-unit-shadow .shadow {
	position: absolute;
	top: 0;
	left: 0;
	transform: none;
	display: block;
	width: 100%;
	white-space: normal !important;
	z-index: 1;
}

.page-blog .blog-hero__title .shadow.color-white {
	color: var(--pos-white);
	top: -1px;
}

.page-blog .blog-hero__title .main.color-yellow {
	color: var(--pos-yellowD);
}

.page-blog .blog-hero__description,
.page-blog .blog-hero__description p {
	margin: 0;
	color: var(--pos-white);
	font-family: var(--pos-font);
	font-size: 20px;
	font-weight: 400;
	line-height: normal;
}

.page-blog .blog-hero__description p + p {
	margin-top: 12px;
}

/* --- Single-post variant --- */
.page-blog .blog-hero--single {
	min-height: 300px;
	padding: 56px 40px 60px;
}

.page-blog .blog-hero--single .blog-hero__inner {
	align-items: center;
}

.page-blog .blog-hero__post-title {
	margin: 0;
	color: var(--pos-white);
	font-family: var(--pos-font);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.22;
	max-width: 900px;
	text-transform: none;
	letter-spacing: 0;
}

.page-blog .blog-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
}

.page-blog .blog-hero__meta-cat {
	color: var(--pos-yellow);
	text-decoration: none;
}

.page-blog .blog-hero__meta-cat:hover {
	text-decoration: underline;
}

.page-blog .blog-hero__meta-date {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 400;
}

.page-blog .blog-hero__meta-sep {
	color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   4. BODY GRID
   Two columns split by the mockup's vertical rule, drawn as a
   border on the sidebar so it always spans the taller column.
============================================================ */
.page-blog .blog-body {
	padding: 76px 40px 90px;
	background: var(--pos-white);
}

.page-blog .blog-body__inner {
	max-width: var(--pos-shell);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--pos-sidebar);
	gap: var(--pos-gap);
	align-items: start;
}

.page-blog .blog-main {
	min-width: 0;
}

.page-blog .blog-sidebar {
	min-width: 0;
	border-left: 1px solid var(--pos-rule);
	padding-left: var(--pos-sidebar-pad);
	align-self: stretch;
}

/* ============================================================
   5. SECTION HEADING ("All Blog Posts")
============================================================ */
.page-blog .blog-main__heading.single-unit-shadow {
	display: block;
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 0 42px !important;
	padding: 0;
	font-size: 58px !important;
	line-height: 62px !important;
	text-transform: none;
}

.page-blog .blog-main__heading .shadow.color-navy-soft {
	color: var(--pos-navy-soft);
	opacity: 1;
	/* top: 4px;
	opacity: 0.35; */
}

.page-blog .blog-main__heading .main.color-navy {
	color: var(--pos-navy);
}

/* ============================================================
   6. POST LIST
============================================================ */
.page-blog .blog-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Row rhythm from the mockup: 43px above the content, 35px below it, then the
 * divider — giving the measured 258px pitch with a 180px-tall thumbnail.
 */
.page-blog .blog-list__item {
	display: flex;
	align-items: flex-start;
	gap: 42px;
	padding: 0 0 35px;
	margin: 0 0 43px;
	border-bottom: 1px solid var(--pos-grayL3);
	animation: blog-fade-in 0.45s ease-out both;
	animation-delay: calc(var(--i, 0) * 60ms);
}

.page-blog .blog-list__item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

@keyframes blog-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.page-blog .blog-list__item { animation: none; }
}

.page-blog .blog-card__media {
	flex: 0 0 var(--pos-thumb-w);
	width: var(--pos-thumb-w);
	display: block;
	overflow: hidden;
	border-radius: var(--pos-thumb-radius);
	background: #f1f2f5;
	line-height: 0;
}

.page-blog .blog-card__img {
	display: block;
	width: 100%;
	height: var(--pos-thumb-h);
	object-fit: cover;
	transition: transform 0.35s ease;
}

.page-blog .blog-card__media:hover .blog-card__img {
	transform: scale(1.04);
}

.page-blog .blog-card__img--placeholder {
	display: block;
	width: 100%;
	height: var(--pos-thumb-h);
	background: linear-gradient(135deg, #e9ebf0 0%, #dfe2e9 100%);
}

.page-blog .blog-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Card type is ~10% smaller than a naive read of the mockup. The design was
 * authored on a wider canvas than this 1440px shell, so its px values do not
 * transfer 1:1 — at 22px the title wrapped to two lines where the mockup shows
 * one. These sizes reproduce the mockup's actual line breaks: title on one line,
 * excerpt breaking after "expanding, the".
 */
.page-blog .blog-card__date {
	margin: 0 0 7px;
	color: var(--pos-gold);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.page-blog .blog-card__title {
	margin: 0 0 9px;
	font-family: var(--pos-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--pos-navy);
	text-transform: none;
	letter-spacing: 0;
}

.page-blog .blog-card__title a {
	color: inherit;
	text-decoration: none;
}

.page-blog .blog-card__title a:hover {
	text-decoration: underline;
}

.page-blog .blog-card__excerpt {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--pos-body);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.page-blog .blog-card__more {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--pos-navyL);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.page-blog .blog-card__more:hover {
	border-bottom-color: var(--pos-navyL);
}

.page-blog .blog-empty {
	margin: 0;
	padding: 34px 0;
	font-size: 16px;
	color: var(--pos-muted);
}

/* ============================================================
   7. PAGINATION
============================================================ */
.page-blog .blog-pagination {
	margin-top: 46px;
}

.page-blog .blog-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.page-blog .blog-pagination__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-blog .blog-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--pos-grayL2);
	border-radius: 999px;
	background: var(--pos-white);
	color: var(--pos-navyL2);
	font-family: var(--pos-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-blog .blog-pagination__link--prev,
.page-blog .blog-pagination__link--next {
	min-width: 104px;
}

.page-blog .blog-pagination__link:hover:not(.is-current):not(.is-disabled) {
	border-color: var(--pos-navyL2);
	background: #f4f6fa;
}

.page-blog .blog-pagination__link.is-current {
	background: var(--pos-navy);
	border-color: var(--pos-navy);
	color: var(--pos-white);
	cursor: default;
}

.page-blog .blog-pagination__link.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.page-blog .blog-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	border: 1px solid var(--pos-grayL2);
	border-radius: 999px;
	color: var(--pos-navyL2);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
}

/* ============================================================
   8. SIDEBAR — CATEGORIES
============================================================ */
.page-blog .blog-widget {
	margin: 0 0 44px;
}

.page-blog .blog-widget:last-child {
	margin-bottom: 0;
}

.page-blog .blog-widget__title {
	margin: 0 0 18px;
	font-family: var(--pos-font);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pos-navy);
	text-transform: none;
	letter-spacing: 0;
}

.page-blog .blog-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-blog .blog-categories__item {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--pos-grayL);
}

.page-blog .blog-categories__item:last-child {
	border-bottom: 0;
}

.page-blog .blog-categories__link {
	position: relative;
	display: block;
	padding: 11px 0 11px 16px;
	color: var(--pos-gray);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* The mockup's bullet marker. */
.page-blog .blog-categories__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--pos-gray);
}

.page-blog .blog-categories__link:hover {
	color: var(--pos-date);
}

.page-blog .blog-categories__item.is-active .blog-categories__link {
	font-weight: 700;
}

/* ============================================================
   9. SIDEBAR — RECENT POST
============================================================ */
.page-blog .blog-recent {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Mockup measurements: 106x62 thumbnail, 18px gap, and a divider line between
 * items (17px of padding above it, 17px of margin below) for the measured 97px
 * item pitch. No divider after the last item, matching the Categories list.
 */
.page-blog .blog-recent__item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0 0 17px;
	padding: 0 0 17px;
	list-style: none;
	border-bottom: 1px solid var(--pos-grayL);
}

.page-blog .blog-recent__item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.page-blog .blog-recent__thumb {
	flex: 0 0 var(--pos-recent-w);
	width: var(--pos-recent-w);
	display: block;
	overflow: hidden;
	border-radius: var(--pos-recent-radius);
	background: #f1f2f5;
	line-height: 0;
}

.page-blog .blog-recent__img {
	display: block;
	width: 100%;
	height: var(--pos-recent-h);
	object-fit: cover;
}

.page-blog .blog-recent__img--placeholder {
	display: block;
	width: 100%;
	height: var(--pos-recent-h);
	background: linear-gradient(135deg, #e9ebf0 0%, #dfe2e9 100%);
}

.page-blog .blog-recent__body {
	flex: 1 1 auto;
	min-width: 0;
}

.page-blog .blog-recent__title {
	margin: 0 0 5px;
	font-family: var(--pos-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.34;
	color: var(--pos-navy);
	text-transform: none;
	letter-spacing: 0;
}

.page-blog .blog-recent__title a {
	color: inherit;
	text-decoration: none;
}

.page-blog .blog-recent__title a:hover {
	text-decoration: underline;
}

.page-blog .blog-recent__date {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pos-gray);
}

/* ============================================================
   10. SIDEBAR — READY TO FRANCHISE CTA
============================================================ */
.page-blog .blog-cta {
	background: var(--pos-navy);
	border-radius: 14px;
	padding: 30px 26px 28px;
	text-align: center;
}

.page-blog .blog-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--pos-gold);
}

.page-blog .blog-cta__icon svg {
	width: 26px;
	height: 26px;
	display: block;
}

.page-blog .blog-cta__title {
	margin: 0 0 10px;
	font-family: var(--pos-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pos-white);
	text-transform: none;
	letter-spacing: 0;
}

.page-blog .blog-cta__text {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.page-blog .blog-cta__form {
	margin: 0;
}

/*
 * [2026-08-14] "Request More Info" button — the CTA's current default state
 * (subscribe form below is switched off, see part-blog-sidebar.php). Reuses
 * the same pill shape/typography as the subscribe form's own submit button
 * so the two states stay visually interchangeable if the form is ever
 * re-enabled.
 */
.page-blog .blog-cta__btn {
	display: block;
	width: 90%;
	padding: 14px 20px;
	border: 0;
	border-radius: 22px;
	background: var(--pos-gold);
	color: var(--pos-white);
	font-family: var(--pos-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	transition: filter 0.2s ease;
	box-sizing: border-box;
}
.page-blog .blog-cta__btn:hover,
.page-blog .blog-cta__btn:focus {
    background-color: #e69500;
    color: var(--pos-navy);
}

.page-blog .blog-cta__btn:hover,
.page-blog .blog-cta__btn:focus {
	filter: brightness(0.94);
	color: var(--pos-navy);
	text-decoration: none;
}

/*
 * Targets the N2 Simple Newsletter plugin's actual markup directly
 * (wp-content/plugins/n2_newsletter — shortcode [n2_newsletter_form]):
 *   <form id="n2_nl_frm" class="footer_email">
 *     <input type="email" id="email_id" ...>
 *     <input type="hidden" name="action" ...><input type="hidden" ... nonce>
 *     <input class="submit" type="submit" value="Submit">
 *   </form>
 *   <div id="form-response"></div>
 * No wrapper <p>/<span> around each field (unlike CF7), so spacing is set
 * directly on the input/submit elements instead of a shared wrapper rule.
 */
.page-blog .blog-cta__form input[type="email"] {
	display: block;
	width: 100%;
	height: 45px;
	margin: 0 0 12px;
	padding: 0 18px;
	border: 1px solid var(--pos-navy);
	border-radius: 12px;
	background: var(--pos-white);
	color: var(--pos-grayL4);
	font-family: var(--pos-font);
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.page-blog .blog-cta__form input[type="email"]::placeholder {
	color: #9aa1ad;
	opacity: 1;
}

.page-blog .blog-cta__form input[type="email"]:focus {
	outline: none;
	border-color: var(--pos-navyL2);
}

.page-blog .blog-cta__form input[type="submit"] {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 22px;
	background: var(--pos-gold);
	color: var(--pos-navy);
	font-family: var(--pos-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.page-blog .blog-cta__form input[type="submit"]:hover {
	filter: brightness(0.94);
}

/*
 * The plugin's own AJAX success/error message, injected into #form-response.
 * Its bundled CSS sets dark green/red text (#1a1 / #f00) meant for a light
 * background — overridden here since this card is navy.
 */
.page-blog .blog-cta__form #form-response {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: center;
}

.page-blog .blog-cta__form #form-response p {
	margin: 0;
}

.page-blog .blog-cta__form #form-response.success p {
	color: #7CFC9E;
}

.page-blog .blog-cta__form #form-response.error p {
	color: var(--pos-yellow);
}

.page-blog .blog-cta__note {
	margin: 15px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   11. SINGLE POST
============================================================ */
.page-blog .blog-single {
	margin: 0;
}

.page-blog .blog-single__media {
	margin: 0 0 28px;
	overflow: hidden;
	border-radius: 8px;
	line-height: 0;
}

.page-blog .blog-single__img {
	display: block;
	width: 100%;
	height: auto;
}

.page-blog .blog-single__content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--pos-body);
}

.page-blog .blog-single__content > *:first-child {
	margin-top: 0;
}

.page-blog .blog-single__content > *:last-child {
	margin-bottom: 0;
}

.page-blog .blog-single__content p {
	margin: 0 0 1.25em;
	font-size: 16px;
	line-height: 1.75;
}

.page-blog .blog-single__content h1,
.page-blog .blog-single__content h2,
.page-blog .blog-single__content h3,
.page-blog .blog-single__content h4,
.page-blog .blog-single__content h5,
.page-blog .blog-single__content h6 {
	margin: 1.7em 0 0.6em;
	color: var(--pos-navy);
	font-family: var(--pos-font);
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}

.page-blog .blog-single__content h2 { font-size: 28px; }
.page-blog .blog-single__content h3 { font-size: 22px; }
.page-blog .blog-single__content h4 { font-size: 18px; }

.page-blog .blog-single__content a {
	color: var(--pos-navy);
	text-decoration: underline;
}

.page-blog .blog-single__content a:hover {
	color: var(--pos-date);
}

.page-blog .blog-single__content ul,
.page-blog .blog-single__content ol {
	margin: 0 0 1.25em 1.35em;
	padding: 0;
}

.page-blog .blog-single__content li {
	margin: 0 0 0.5em;
	line-height: 1.7;
}

.page-blog .blog-single__content img,
.page-blog .blog-single__content iframe,
.page-blog .blog-single__content video {
	max-width: 100%;
	height: auto;
}

.page-blog .blog-single__content figure {
	margin: 0 0 1.5em;
}

.page-blog .blog-single__content blockquote {
	margin: 0 0 1.5em;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--pos-gold);
	color: var(--pos-navy);
	font-style: italic;
}

.page-blog .blog-single__content .wp-block-image,
.page-blog .blog-single__content .wp-block-gallery,
.page-blog .blog-single__content .wp-block-embed {
	margin: 0 0 1.5em;
}

/* --- Term chips --- */
.page-blog .blog-single__terms {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--pos-rule);
}

.page-blog .blog-single__terms-label {
	margin-right: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pos-navy);
}

.page-blog .blog-single__term {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid var(--pos-rule);
	border-radius: 16px;
	background: #f7f8fa;
	color: var(--pos-navy);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.page-blog .blog-single__term:hover {
	background: var(--pos-cream);
	border-color: var(--pos-gold);
}

/* --- Prev / Next --- */
.page-blog .blog-single__nav {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--pos-rule);
}

.page-blog .blog-single__nav-link {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	text-decoration: none;
	color: var(--pos-navy);
}

.page-blog .blog-single__nav-link--next {
	text-align: right;
}

.page-blog .blog-single__nav-spacer {
	flex: 1 1 0;
}

.page-blog .blog-single__nav-label {
	display: block;
	margin-bottom: 3px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pos-date);
}

.page-blog .blog-single__nav-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pos-navy);
}

.page-blog .blog-single__nav-link:hover .blog-single__nav-title {
	text-decoration: underline;
}

.page-blog .blog-single__nav-all {
	flex: 0 0 auto;
	align-self: center;
	padding: 9px 18px;
	border: 1px solid var(--pos-rule);
	border-radius: 20px;
	color: var(--pos-navy);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.page-blog .blog-single__nav-all:hover {
	background: var(--pos-cream);
}

/* ============================================================
   12. FOOTER FIX FOR BLOG SINGLES  (works around a pre-existing bug)
   ------------------------------------------------------------
   PROBLEM: the child theme's footer styling in style.css (line ~1084,
   "Global footer — pixel-match Figma") is scoped to `.page`, which
   WordPress only adds on Pages. On ANY singular non-page view the body
   class is `single single-<type>` instead, so none of those rules apply:
   #footer-logo loses its width/height/background-repeat, the background
   image set by n2_global_footer_logo_override() tiles across the block,
   and .site-logo-image is no longer hidden.

   THIS IS PRE-EXISTING AND NOT CAUSED BY THIS MODULE — it already affects
   all 187 published `post` records for the same reason. The proper fix is
   to widen the selector in style.css from `.page` to also cover singles,
   but that means editing shared footer CSS, which the brief puts off
   limits. So the rules are replicated here instead, scoped to
   `.blog-single-active` (added by pos_blog_body_class), which touches only
   this module's own pages and changes the footer nowhere else.

   If the selector in style.css is ever widened, this whole section can be
   deleted with no other change.
============================================================ */
.blog-single-active #footerwrap {
	background-color: #0f2547;
}

.blog-single-active #footerwrap #footer-logo {
	display: inline-block;
	width: 225px;
	height: 58px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	margin: 0;
}

.blog-single-active #footerwrap #footer-logo a {
	display: block;
	width: 100%;
	height: 100%;
}

.blog-single-active #footerwrap #footer-logo .site-logo-image {
	display: none;
}

.blog-single-active #footerwrap .main-col {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 40px;
	align-items: center;
	float: none;
	width: auto;
	margin-left: 0;
	position: relative;
}

.blog-single-active #footerwrap .footer-left-wrap {
	float: none;
	width: auto;
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 10px;
}

.blog-single-active #footerwrap .footer-right-wrap {
	float: none;
	width: auto;
	display: contents;
	margin-bottom: 10px;
}

.blog-single-active #footerwrap .footer-nav-wrap {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: end;
}

.blog-single-active #footerwrap .footer-text {
	grid-column: 1 / -1;
	grid-row: 2;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 16px;
	margin-top: 0;
	font-family: var(--pos-font);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.7;
	color: #8294b3;
}

.blog-single-active #footerwrap .footer-text-inner .one > span:first-child {
	display: inline-block;
	margin-bottom: 10px;
	font-family: var(--pos-font);
	font-weight: 400;
	font-size: 13px;
	color: #9fb0cc;
}

.blog-single-active #footerwrap .footer-text-inner .one a {
	color: #9fb0cc;
}

.blog-single-active #footerwrap .footer-text-inner .one a:hover {
	color: #ffffff;
}

.blog-single-active #footerwrap .footer-text-inner .two {
	margin-top: 10px;
}

.blog-single-active #footerwrap .footer-text-inner .two .footer-port-title {
	display: block;
	margin-bottom: 0;
	font-family: var(--pos-font);
	font-weight: 700;
	font-size: 13px;
	color: #aebccf;
}

@media screen and (max-width: 900px) {
	.blog-single-active #footerwrap .main-col {
		display: block;
		text-align: center;
	}
	.blog-single-active #footerwrap .footer-left-wrap,
	.blog-single-active #footerwrap .footer-nav-wrap,
	.blog-single-active #footerwrap .footer-text {
		grid-column: auto;
		grid-row: auto;
	}
	.blog-single-active #footerwrap #footer-logo {
		margin: 0 auto 16px;
	}
	.blog-single-active #footerwrap .footer-text {
		text-align: left;
	}
}

@media screen and (max-width: 767px) {
	.blog-single-active #footerwrap .footer-text-inner .one > span:first-child {
		display: block;
	}
}

@media screen and (max-width: 480px) {
	.blog-single-active #footerwrap #footer-logo {
		width: 160px;
		height: 41px;
	}
	.blog-single-active #footerwrap .footer-text {
		font-size: 10.5px;
	}
}

/* ============================================================
   13. RESPONSIVE
   The mockup is desktop-only, so these breakpoints are my own,
   matched to the ones already used in single-unit-page.css
   (1366 / 1024 / 768 / 480).
============================================================ */
@media only screen and (max-width: 1366px) {
	.page-blog {
		--pos-gap: 46px;
		--pos-sidebar: 356px;      /* 310 content + 45 padding + 1 border */
		--pos-sidebar-pad: 45px;
		--pos-thumb-w: 262px;
		--pos-thumb-radius: 12px;
		--pos-thumb-h: 168px;
		--pos-recent-w: 92px;
		--pos-recent-h: 68px;
	}
	.page-blog .blog-list__item {
		gap: 32px;
	}
	.page-blog .blog-hero__title.single-unit-shadow {
		font-size: 64px !important;
		line-height: 62px !important;
		max-width: 520px;
	}
	.page-blog .blog-hero__eyebrow { font-size: 26px; }
	.page-blog .blog-main__heading.single-unit-shadow {
		font-size: 50px !important;
		line-height: 54px !important;
	}
}

@media only screen and (max-width: 1024px) {
	.page-blog .blog-body__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 50px;
	}
	/* The vertical rule becomes a horizontal one when stacked. */
	.page-blog .blog-sidebar {
		border-left: 0;
		border-top: 1px solid var(--pos-rule);
		padding-left: 0;
		padding-top: 40px;
	}
	.page-blog .blog-hero {
		min-height: 0;
		padding: 52px 28px 56px;
	}
	/* Below the desktop breakpoint the wave would dominate; cap its width. */
	.page-blog .blog-hero__pattern {
		max-width: 62%;
		height: auto;
	}
	.page-blog .blog-hero__inner {
		align-items: flex-start;
		gap: 26px;
	}
	.page-blog .blog-hero__left,
	.page-blog .blog-hero__right {
		flex: 1 1 100%;
		padding-bottom: 0;
		padding-right: 0;
	}
	.page-blog .blog-body {
		padding: 54px 28px 70px;
	}
	.page-blog .blog-hero__post-title { font-size: 36px; }
}

@media only screen and (max-width: 768px) {
	.page-blog .blog-hero {
		padding: 42px 20px 46px;
	}
	.page-blog .blog-hero__eyebrow {
		font-size: 22px;
		margin-bottom: 4px;
	}
	.page-blog .blog-hero__title.single-unit-shadow {
		font-size: 46px !important;
		line-height: 46px !important;
		max-width: 360px;
	}
	.page-blog .blog-hero__description,
	.page-blog .blog-hero__description p { font-size: 15px; }
	.page-blog .blog-hero__post-title { font-size: 28px; }
	.page-blog .blog-body {
		padding: 42px 20px 56px;
	}
	.page-blog .blog-main__heading.single-unit-shadow {
		font-size: 40px !important;
		line-height: 44px !important;
		margin-bottom: 30px !important;
	}
	/* Stack thumbnail above the text. */
	.page-blog {
		--pos-thumb-h: 200px;
		--pos-recent-w: 92px;
		--pos-recent-h: 68px;
	}
	.page-blog .blog-list__item {
		flex-direction: column;
		gap: 16px;
	}
	.page-blog .blog-card__media {
		flex: 0 0 auto;
		width: 100%;
	}
	.page-blog .blog-card__title { font-size: 19px; }
	.page-blog .blog-pagination__link--prev,
	.page-blog .blog-pagination__link--next {
		min-width: 88px;
	}
	.page-blog .blog-single__nav {
		flex-direction: column;
		gap: 18px;
	}
	.page-blog .blog-single__nav-link--next { text-align: left; }
	.page-blog .blog-single__nav-spacer { display: none; }
	.page-blog .blog-single__nav-all { align-self: flex-start; }
}

@media only screen and (max-width: 480px) {
	.page-blog .blog-hero__title.single-unit-shadow {
		font-size: 38px !important;
		line-height: 38px !important;
		max-width: 280px;
	}
	.page-blog .blog-hero__post-title { font-size: 24px; }
	.page-blog .blog-main__heading.single-unit-shadow {
		font-size: 32px !important;
		line-height: 36px !important;
	}
	.page-blog { --pos-thumb-h: 168px; }
	.page-blog .blog-pagination__list { gap: 7px; }
	.page-blog .blog-pagination__link {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		font-size: 13px;
	}
	.page-blog .blog-pagination__ellipsis {
		min-width: 38px;
		height: 38px;
	}
	.page-blog .blog-pagination__link--prev,
	.page-blog .blog-pagination__link--next {
		min-width: 78px;
	}
	.page-blog .blog-cta { padding: 24px 18px 22px; }
}