/* ============================================================================
   Xircuit brand theme for the Postnomic blog — MarkupStyle = Semantic.

   The Postnomic SDK (1.3.0+) renders the blog with framework-free `pn-*` classes
   and ships a variable-driven stylesheet
   (_content/Postnomic.Client.AspNetCore/postnomic-blog.css), which _Layout.cshtml
   loads FIRST. That stylesheet styles every `pn-*` class purely from `--pn-*`
   custom properties declared on `.pn-blog` (the SDK's outermost container).

   This file only re-declares those variables to match the Xircuit marketing site
   (Inter, navy #172c47 / green #13C296, rounded soft-shadow cards) plus a few
   small accents — no re-implementation of the layout/components. Loaded on blog
   pages only, after the SDK stylesheet so these overrides win.

   (Replaces the pre-1.3 hand-rolled Bootstrap re-implementation: the SDK used to
   emit Bootstrap classes with no CSS, so the whole vocabulary had to be styled
   here. Semantic mode makes that unnecessary.)
   ========================================================================== */

.pn-blog {
	/* Type */
	--pn-font: "Inter", sans-serif;
	--pn-font-heading: "Inter", sans-serif;

	/* Container — match the marketing site's max width */
	--pn-max-width: 1140px;

	/* Surfaces & lines */
	--pn-surface: #ffffff;
	--pn-surface-variant: #f4f8fb;
	--pn-border: #e6ebf2;

	/* Text */
	--pn-text: #223547;
	--pn-text-muted: #7a8aa0;

	/* Brand */
	--pn-primary: #172c47;   /* navy — primary buttons, active page, category tags */
	--pn-on-primary: #ffffff;
	--pn-link: #0f9e7a;      /* green — links */

	/* Shape */
	--pn-radius: 10px;
	--pn-radius-lg: 16px;

	/* Breathing room below the host hero band */
	padding-top: var(--pn-space-lg);
	padding-bottom: var(--pn-space-xl);
}

/* Headings in brand navy (the SDK colours them with --pn-text). */
.pn-blog .pn-title,
.pn-blog .pn-post-title,
.pn-blog .pn-widget__title,
.pn-blog .pn-post-content h2,
.pn-blog .pn-post-content h3,
.pn-blog .pn-post-content h4 {
	color: #172c47;
}

/* Soft shadow + hover lift on cards/widgets, matching the marketing site. */
.pn-blog .pn-card,
.pn-blog .pn-widget {
	box-shadow: 0 6px 24px rgba(16, 44, 71, 0.06);
}
.pn-blog .pn-main .pn-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pn-blog .pn-main .pn-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 42px rgba(16, 44, 71, 0.13);
}

/* Green link hover. */
.pn-blog a:hover { color: #172c47; }

/* The SDK's in-content index header ("Xircuit | Blog" + lead) duplicates the
   host's dark hero band, so hide it. `.pn-header` is emitted only on the blog
   index, so post/author titles are untouched. */
.pn-blog .pn-header { display: none; }