/* ==========================================================================
   blog.css — Divi-free blog layout for tmj-anchor
   --------------------------------------------------------------------------
   Card + card-body TYPOGRAPHY (.blog-list .et_pb_post ..., .single-post
   .et_pb_post_content ...) already live in base.css. This file only adds the
   STRUCTURAL layout that base.css does not cover: the section/rounded-card/
   two-column geometry (ported from the live Divi Theme-Builder body & blog
   layouts) + the contact-sidebar styling + single-post title.
   ========================================================================== */

/* --- shared rounded-card scaffold (single + archive) ---------------------- */
.ac-card-section { width: 100%; }

.ac-card-row {
	width: 90%;
	max-width: 1296px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 30px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.ac-card-content {
	width: 74.25%;
	background: #fff;
	border-radius: 25px;
	padding: 30px;
	box-sizing: border-box;
}

.ac-card-sidebar {
	width: 22.75%;
	box-sizing: border-box;
}

/* --- single-post section (dark green frame, white card) ------------------- */
.single-post .ac-single-section {
	background: #1a4a45;
	padding: 150px 0 60px;
}
.single-post .ac-card-row { background: #fff; }

/* --- archive section (white frame, teal-tint card) ------------------------ */
.ac-blog-anchor .ac-card-section {
	background: #fff;
	/* Top pad clears the fixed nav on this hero-less standalone host page
	   (the real /blog/ page has a hero behind the nav). */
	padding: 120px 0 40px;
}
.ac-blog-anchor .ac-card-row { background: rgba(5, 175, 181, 0.06); }
.ac-blog-anchor .ac-card-content .blog-list { width: 100%; }

/* Card title: match live (Cormorant 500, no underline) — the theme's default
   heavier/underlined link style makes titles wrap; base.css only sets the font. */
body .blog-list .et_pb_post .entry-title a {
	font-weight: 500;
	text-decoration: none;
	color: #333;
}
/* Cards are styled by base.css with calc(50% - 15px) + a 1px border. Divi gives
   them border-box via `.et_pb_section *`, but this grid is not inside a section,
   so force it here — otherwise the border overflows and cards drop to 1/row. */
.blog-list .et_pb_ajax_pagination_container,
.blog-list .et_pb_post,
.blog-list .et_pb_post * { box-sizing: border-box; }

/* Equalise the two cards in each grid row (live uses pa-blog-equal-height). */
.blog-list .et_pb_ajax_pagination_container { align-items: stretch; }
.blog-list .et_pb_post .post-content { flex: 1 0 auto; }

/* --- single-post title + body --------------------------------------------- */
.single-post .ac-single-title h1 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: 40px;
	font-weight: 500;
	color: #333;
	/* 76px reproduces the live title-block + empty featured-image slot above the body. */
	margin: 0 0 76px;
}
.single-post .et_pb_post_content { color: #1a2e2b; }
/* Exact px rhythm from the live Divi single (h2 lh 26 / p lh 25.6 / p pad-btm 16)
   to keep the article vertically aligned end-to-end. */
.single-post .et_pb_post_content h2,
.single-post .et_pb_post_content h3 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	line-height: 26px;
}
.single-post .et_pb_post_content h2 { font-size: 26px; }
.single-post .et_pb_post_content p {
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 300;
	color: #1a2e2b;
	margin: 0;
	padding: 0 0 16px;
}
.single-post .et_pb_post_content ul,
.single-post .et_pb_post_content ol { margin: 0; padding: 0 0 16px 20px; }
.single-post .et_pb_post_content ul li,
.single-post .et_pb_post_content ol li { line-height: 25.6px; margin: 0; }

/* --- contact sidebar (single + archive) ----------------------------------- */
.ac-sb-logo { margin: 0 0 18px; }
.ac-sb-logo img { display: block; width: 100%; max-width: 281px; height: auto; }

.ac-sb-divider {
	height: 1px;
	background: #dce3e3;
	margin: 18px 0 20px;
}

.footer-links.sidebar { padding: 0 !important; }
.footer-links.sidebar h3 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 700;
	color: #333;
	margin: 0 0 4px;
}
.footer-links.sidebar a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: #153b37;
	text-decoration: none;
	margin: 16px 0;
	word-break: break-word;
}
.footer-links.sidebar a i {
	width: 16px;
	font-size: 16px;
	color: #153b37;
	flex-shrink: 0;
	text-align: center;
}
.footer-links.sidebar a:hover { color: #3a8780; }
.footer-links.sidebar.ac-sb-find { margin-top: 10px; }
.ac-sb-form { margin: 12px 0 18px; }

/* --- responsive: stack card on tablet/phone ------------------------------- */
@media (max-width: 980px) {
	.ac-card-row { flex-direction: column; padding: 20px; }
	.ac-card-content,
	.ac-card-sidebar { width: 100%; }
	.ac-card-sidebar { margin-top: 30px; }
	.single-post .ac-single-section { padding: 110px 0 40px; }
	.single-post .ac-single-title h1 { font-size: 32px; line-height: 1.1; }
}

/* ==========================================================================
   SINGLE POST — EDITORIAL TYPE SCALE                            2026-08-05
   Headings previously had `margin: 0 0 15px` (no top margin), so sections
   never visually separated, and h3 had no font-size rule at all. Scoped to
   .single-post so pages are unaffected (blog.css also loads on s-loc pages).
   tmj-blog.css depends on tmj-base (inc/enqueue.php), so it loads after and
   wins on equal specificity — no !important needed.
   ========================================================================== */
.single-post .et_pb_post_content h2 {
	font-size: var(--h-post-2);
	line-height: 1.25;
	margin: 2.5rem 0 1rem;
}
.single-post .et_pb_post_content h3 {
	font-size: var(--h-post-3);
	line-height: 1.3;
	margin: 2rem 0 .75rem;
}
.single-post .et_pb_post_content h4 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	font-size: var(--h-post-4);
	font-weight: 700;
	color: #133b37;
	line-height: 1.4;
	margin: 1.75rem 0 .5rem;
}
/* Legacy content wraps some heading text in <strong>; don't double-bold it. */
.single-post .et_pb_post_content h2 > strong,
.single-post .et_pb_post_content h3 > strong,
.single-post .et_pb_post_content h4 > strong {
	font-weight: inherit;
}
/* Never push the first block away from the title. */
.single-post .et_pb_post_content > :first-child {
	margin-top: 0;
}
.single-post .et_pb_post_content p {
	line-height: 1.7;
	padding: 0 0 1.25rem;
}
.single-post .et_pb_post_content ul,
.single-post .et_pb_post_content ol {
	padding: 0 0 1.5rem 1.25rem;
}
.single-post .et_pb_post_content li {
	line-height: 1.7;
	margin: 0 0 .5rem;
}
/* Reference lists carry very long unbroken URLs. */
.single-post .et_pb_post_content li a,
.single-post .et_pb_post_content p a {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   BLOG / POST / SEARCH — hero archetype  (added 2026-08-18)
   --------------------------------------------------------------------------
   Individual posts, /blog/ and the search-results page now open with the same
   .s-hero band as every other page, so the card below no longer has to reserve
   room for the fixed nav. .ac-has-hero drops the old clearance padding.
   ========================================================================== */

.single-post .ac-single-section.ac-has-hero,
.ac-blog-anchor .ac-card-section.ac-has-hero {
	/* Was 150px / 120px purely to clear the fixed header on a hero-less page.
	   The hero now does that, so this is ordinary section rhythm. */
	padding: 60px 0;
	/* Plain white the whole way down under the hero — no dark frame. */
	background: #ffffff;
}

/* --- flat body: the card chrome is gone ----------------------------------
   The old rounded-card-on-green frame was a Divi Theme-Builder artefact. Under
   the new hero archetype the body is just content on white, matching every
   other page. The two-column content + sidebar split is kept; only the card
   background, radius and padding are dropped, and the row is widened to the
   site container (90% / 1440) so the body lines up with the hero above it. */
.ac-has-hero .ac-card-row {
	background: transparent;
	padding: 0;
	border-radius: 0;
	width: 90%;
	max-width: 1440px;
	gap: 64px;
}
.ac-has-hero .ac-card-content {
	background: transparent;
	border-radius: 0;
	padding: 0;
	width: auto;
	flex: 1 1 auto;
	min-width: 0; /* lets long words/URLs wrap instead of forcing the row wider */
}
.ac-has-hero .ac-card-sidebar {
	width: auto;
	flex: 0 0 300px;
}

/* Post title now lives in the hero H1, so the in-card title block is gone and
   its 76px reserved slot with it. */
.single-post .ac-single-content .et_pb_post_content > *:first-child { margin-top: 0; }

/* --- search box ----------------------------------------------------------- */
.ac-blog-search { margin-bottom: 32px; }
.ac-blog-search .site-search { max-width: 560px; }

.ac-search-summary {
	margin: 0 0 28px;
	color: var(--text-muted-dark, #4a5f5c);
	font-size: 1rem;
	line-height: 1.6;
}
.ac-search-summary strong { color: var(--dark, #153b37); font-weight: 600; }
.ac-search-summary a { color: var(--light, #3e857c); text-decoration: underline; }
.ac-search-summary a:hover { color: var(--accent, #e8a087); }

@media (max-width: 980px) {
	/* Stack, and match the container inset the rest of the site uses at this width. */
	.ac-has-hero .ac-card-row { width: 100%; padding: 0 24px; gap: 40px; }
	.ac-has-hero .ac-card-sidebar { flex: 1 1 auto; margin-top: 0; }
}

@media (max-width: 900px) {
	.single-post .ac-single-section.ac-has-hero,
	.ac-blog-anchor .ac-card-section.ac-has-hero { padding: 40px 0; }
	.ac-blog-search { margin-bottom: 24px; }
}