/* ============================================================
   dreamdrivedigital.com — single post layout fix
   Paste into: wp-admin → Appearance → Customize → Additional CSS
   Written 11 August 2026.

   WHY THIS IS NEEDED
   ------------------
   Two theme-level facts combine badly on this site:

   1. Every page and post renders with the body class
      `content-width-fullwidth`. Kadence's global.min.css then applies:
          .content-width-fullwidth .content-container.site-container
              { max-width: none; padding: 0 }
      So the content column has NO maximum width and NO side padding.
      On a wide monitor the article text runs from one edge of the
      screen to the other, which is unreadable.

   2. Kadence's `content.min.css` is not enqueued on this site at all
      (verified: the file exists and returns 200, but no page links it).
      That stylesheet is what normally sizes `.post-thumbnail` /
      `.post-thumbnail-inner`. Without it the featured image is
      unstyled and blows up to the full width of the container — which,
      because of (1), is the full width of the browser window.

   Pages escape both problems only because their content is hand-built
   inside constrained containers. Posts have no such protection, so
   every one of the 11 published posts is affected.

   This CSS fixes both at the site level, so it also covers any post
   published in future.

   NOTE: post 1174 (reference-integrity-institutional-risk) already
   carries an identical block inline. Leaving it is harmless — the
   rules are the same. It can be deleted from that post once this is
   in Additional CSS.
   ============================================================ */

/* --- 1. Restore a readable measure and side padding ------------- */

body.single-post .content-container.site-container {
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

body.single-post .entry-content.single-content > * {
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}

body.single-post .entry-content.single-content > .alignwide,
body.single-post .entry-content.single-content > figure {
	max-width: 1000px;
}

body.single-post .entry-content.single-content > .alignfull {
	max-width: none;
}

body.single-post .entry-content.single-content {
	font-size: 17px;
	line-height: 1.75;
}

body.single-post .entry-content.single-content > h2 {
	margin-top: 2.4rem;
}

/* --- 2. Featured image: show the whole card, never crop it ------ */
/* The three CitationLab posts use 1200x630 social cards with text in
   them. Any crop cuts the wording, so these are contained, not covered. */

body.single-post .post-thumbnail.article-post-thumbnail {
	display: block !important;
	height: auto !important;
	padding-bottom: 0 !important;
	overflow: visible !important;
	position: static !important;
	max-width: 900px;
	margin: 0 auto 2.2rem;
}

body.single-post .post-thumbnail-inner {
	display: block;
	height: auto !important;
	padding-bottom: 0 !important;
	position: static !important;
}

body.single-post img.post-top-featured {
	position: static !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain !important;
	border-radius: 14px;
	border: 1px solid #EDE4D7;
	background: #fff;
}

/* --- 3. In-content images framed as blocks ---------------------- */

body.single-post .entry-content.single-content figure.wp-block-image {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

body.single-post .entry-content.single-content figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #EDE4D7;
	background: #fff;
}

body.single-post .entry-content.single-content figure.wp-block-image figcaption {
	font-size: 14px;
	line-height: 1.6;
	color: #64748B;
	text-align: center;
	margin-top: 0.7rem;
}

/* --- 4. Clear the fixed header --------------------------------- */

body.single-post .entry-hero .entry-hero-container-inner {
	padding-top: 70px;
}

/* --- 4b. Make the navigation menu visible on posts -------------- */
/* The Kadence Customizer has the primary-navigation link colour saved
   with its ALPHA SLIDER AT ZERO:
        color: rgba(255,255,255,0)      <- invisible
        hover: rgba(245,165,36,0)       <- invisible
   The header background is #ffffff, so on posts the menu renders as
   transparent text on white and looks like it is missing entirely.
   The links are present and clickable the whole time.

   Pages do not show the fault because their inline dd-global-header
   block forces the links white AND flips the header to navy.

   SCOPE: body:not(.home), NOT body.single-post. Category archives
   (/category/citationlab/ etc.), search results and the 404 page are
   affected by the same transparent colour and none of them are single
   posts — scoping to posts alone left the menu invisible there.

   Why this does not break the homepage or the standard pages:
   both carry their own inline dd-global-header <style> block inside
   the page content, using the IDENTICAL selector with !important.
   Equal specificity + equal importance means the later rule in the
   document wins, and a <style> in the body always comes after the
   stylesheet in <head>. So the homepage keeps its white-on-transparent
   nav and pages keep white-on-navy; only the templates with no inline
   block of their own fall through to the rules below.

   This does NOT touch the sticky header that appears on scroll —
   that uses .kadence-sticky-header .header-menu-container, a different
   selector, and it is already legible (white on navy).

   The proper fix is still in the Customizer (see below); this is the
   belt-and-braces override. */

body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: #0B1D3A !important;
}

body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
	color: #C5A26F !important;
}

body:not(.home) .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: #C5A26F !important;
}

body:not(.home) .mobile-toggle-open-container .menu-toggle-open {
	color: #0B1D3A !important;
}

/* Dropdown children under "Consulting" */
body:not(.home) .header-navigation .header-menu-container ul ul.sub-menu {
	background: #0B1D3A !important;
}

body:not(.home) .header-navigation .header-menu-container ul ul.sub-menu li a {
	color: #EDF2F7 !important;
}

/* --- 5. Mobile --------------------------------------------------- */

@media (max-width: 900px) {
	body.single-post .content-container.site-container {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}