/**
 * Technical Blog variant — blogpost CPT
 *
 * A restricted rendering of the blogpost single. Same design tokens as a
 * regular blogpost (Cormorant / Crimson Pro / Albert Sans, same blue), but a
 * narrower component set: no card grids, no decorative surfaces.
 * Structure comes from headings, tables and lists.
 *
 * HOW TO PROMOTE THIS:
 *   1. Append below the existing rules in assets/css/blogpost-article.css
 *      (or ship as assets/css/tech-blog.css and enqueue it AFTER that file —
 *      several rules below tie on specificity and rely on source order).
 *   2. In single-blogpost.php, add the flag class to the existing
 *      $wrapper_classes filter (currently line 79):
 *
 *          $wrapper_classes = apply_filters( 'blogpost_wrapper_classes', ['blogpost-single'] );
 *          if ( <is technical blog> ) {
 *              $wrapper_classes[] = 'tech-blog';
 *          }
 *
 *   3. Add the same stylesheet to the editor via load_blogpost_css_in_editor()
 *      in functions.php so the Visual tab matches.
 *
 * Elements are only allowed to change their OWN surface here — nothing in this
 * file re-styles a component that a regular blogpost also uses in the same
 * form, with the exception of h3 (see note 3).
 */


/* ---------------------------------------------------------------------------
   1. TL;DR box — white surface, black list markers
   The theme's .solution-box is a saturated --primary-light slab. Here it goes
   white with a hairline border, and the markers drop to black so the list
   reads plainly rather than in brand blue.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .solution-box {
	background: #FFFFFF;
	border: 1px solid var(--rule);
	border-left: 1px solid var(--rule); /* cancels the theme's 4px brand bar */
	border-radius: 8px;
}

.tech-blog .entry-content .solution-box .sb-title {
	color: var(--ink);
}

/* Scoped at .entry-content, not at .solution-box: the theme paints ::marker
   with var(--primary) for every list in the article, so a box-level override
   leaves the running lists and the sources list showing blue dots. */
.tech-blog .entry-content li::marker {
	color: #000000;
}


/* ---------------------------------------------------------------------------
   2. Chart figure — white surface
   blogpost-article.css has no figure style at all, so this defines the whole
   component rather than overriding one. If a regular blogpost ever embeds a
   chart, move the structural block (margin/padding/border/radius/caption) up
   to blogpost-article.css unscoped and leave only `background` here.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .chart-figure {
	margin: 44px 0;
	padding: 28px 26px 20px;
	background: #FFFFFF;
	border: 1px solid var(--rule);
	border-radius: 8px;
}

.tech-blog .entry-content .chart-figure svg {
	display: block;
	width: 100%;
	height: auto;
}

.tech-blog .entry-content .chart-figure figcaption {
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
	margin-top: 18px;
}

.tech-blog .entry-content .chart-figure figcaption strong {
	color: var(--ink);
	font-weight: 600;
}

/* Chart type — theme stacks, replacing the source file's system stack */
.tech-blog .chart-figure .c-title {
	font-family: 'Albert Sans', 'Calibri', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
}

.tech-blog .chart-figure .c-note {
	font-family: 'Albert Sans', 'Calibri', sans-serif;
	font-size: 11.5px;
}

.tech-blog .chart-figure .c-mono {
	font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
}

/*
 * The chart fills are defaults, not overrides. An explicit fill attribute on
 * the text element wins (it is how SVG authors colour text that sits on a
 * dark surface — e.g. fill="#FFFFFF" on a navy block), which a plain
 * `fill:` declaration here would silently beat: presentation attributes sit
 * below every CSS rule in the cascade. Rules with fills keep the defaults.
 */
.tech-blog .chart-figure .c-title:not([fill]) {
	fill: var(--ink);
}

.tech-blog .chart-figure .c-note:not([fill]) {
	fill: var(--muted);
}

.tech-blog .chart-figure .c-mono:not([fill]) {
	fill: var(--muted);
}


/* ---------------------------------------------------------------------------
   3. Mid-content subheads
   The one rule here that is NOT surface-only: the theme sets h3 in Cormorant
   at clamp(23px, 2.8vw, 30px), and the Technical Blog renders it in Crimson
   Pro at a fixed 24px instead.

   Specificity note: `.blogpost-single :where(h3)` carries one class, so this
   selector (two classes + element) wins regardless of source order.

   The Figma export this was specified from also carried `font-style: Bold`,
   `leading-trim: NONE` and `vertical-align: middle`. Those are dropped:
   `font-style: Bold` is not a valid value, `leading-trim` is an unsupported
   CSS Text 4 draft property, and `vertical-align` does not apply to a block.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content h3 {
	font-family: 'Crimson Pro', Georgia, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	line-height: 36px;
	letter-spacing: 0;
	color: var(--ink);
}


/* ---------------------------------------------------------------------------
   4. FAQ — each question is an <h3>, each answer a plain paragraph
   The questions were specified as <strong>, but a bold paragraph gives the
   FAQ no heading structure at all: the outline jumps h2 -> nothing, and the
   Q/A pairing is invisible to a crawler. An <h3> carries the same weight
   visually and puts the six questions into the document outline.

   Every property rule 3 sets has to be restated here, or the questions would
   inherit the 24px mid-content subhead treatment instead of body size.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .faq-q {
	margin: 1.7em 0 0.35em;
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 19px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0;
	color: var(--ink);
}

/* Gap between the FAQ heading and the first question.
 *
 * 32px - the same fixed scale the other block margins use (section-header 64,
 * chart-figure 44, sources-box 48, ornament 52). It needs no fluid treatment:
 * at 32px the gap is under a tenth of a 375px viewport, so the phone problem
 * the old 80px value had does not arise. The h2 rule below keeps its 56px top
 * margin unchanged.
 *
 * Note this makes the rule after it inert: the first .faq-q still asks for a
 * 0.7em top margin, but it collapses against this, so this margin is what
 * renders. Left in place because it is what keeps the pair tight if the
 * heading margin is ever reduced. */
.tech-blog .entry-content .faq h2 {
	margin-bottom: 32px;
}

.tech-blog .entry-content .faq h2 + .faq-q {
	margin-top: 0.7em;
}

/* An answer paragraph carries no top margin. The space below a question is
   owned entirely by .faq-q's 0.35em bottom margin, so the pair reads as one
   unit rather than as two separate paragraphs. */
.tech-blog .entry-content .faq p {
	margin-top: 0;
}


/* ---------------------------------------------------------------------------
   5. Closing CTA — a single line, not a surface
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .tech-cta {
	margin: 24px 0 0;
	font-size: 19px;
	line-height: 1.8;
}


/* ---------------------------------------------------------------------------
   6. Sources box — neutral slab, grey left strip
   The theme's .challenge-box (pale blue fill, teal bar) is the shape being
   reproduced; only the colours change. The inline callout higher up the page
   is still a .challenge-box and keeps its brand colour — if the Technical
   Blog should flatten that one too, add:
       .tech-blog .entry-content .challenge-box {
           background: #F0F2F5; border-left-color: #B8BEC6;
       }
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .sources-box {
	margin: 48px 0 0;
	padding: 24px 36px;
	background: #F0F2F5;
	border-left: 4px solid #B8BEC6;
	border-radius: 8px;
}

.tech-blog .entry-content .sources-box .src-title {
	font-family: 'Albert Sans', 'Calibri', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.98px;
	text-transform: uppercase;
	color: #111A27;
	margin: 0 0 12px; /* also overrides the h3 top margin now it is a heading */
}

.tech-blog .entry-content .sources-box p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

.tech-blog .entry-content .sources-box ul {
	margin: 14px 0 0;
	padding-left: 20px;
}

.tech-blog .entry-content .sources-box li {
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 8px;
	color: var(--primary-text);
}

.tech-blog .entry-content .sources-box li:last-child {
	margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   7. Opening drop cap — body colour, not brand blue
   The theme's .lead-paragraph::first-letter is var(--primary). Matching the
   body text colour keeps the cap from reading as a link or an accent.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .lead-paragraph::first-letter {
	color: var(--primary-text);
}


/* ---------------------------------------------------------------------------
   8. Section dividers removed
   The theme draws a 1px rule above every .section-header. In this variant the
   headings carry enough weight on their own, so the rule and the padding that
   spaced it off go, and the margin takes over the separation instead.
   --------------------------------------------------------------------------- */
.tech-blog .section-header {
	margin: 64px 0 24px;
	padding-top: 0;
	border-top: 0;
}

.tech-blog .section-header h2 {
	margin: 0;
}


/* ---------------------------------------------------------------------------
   9. Table body cells — white surface
   The article body paints no background of its own, so a `td` shows whatever
   is behind it: `.site-content .ast-container` in blogpost-article.css, which
   is #F6F7F9. That reads as a grey grid against the white boxes elsewhere in
   the variant. Only `td` needs this — `th` already carries the dark brand
   fill, and the table's own border sits outside the cells.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content td {
	background: #FFFFFF;
}


/* ---------------------------------------------------------------------------
   10. Star separator inside the article body
   The header's .blogpost-hero-rule carries only `margin-bottom: 40px`, because
   the subtitle above it already supplies the 40px gap. In the body there is no
   such neighbour - the rule sits under a paragraph whose 1.6em bottom margin is
   smaller - so it needs a top margin of its own or it rides up against the text.

   Scoped here rather than added to blogpost-article.css: that stylesheet is
   shared with regular BlogPosts, where the subtitle is optional. Giving the
   shared rule a top margin would double the title->rule gap on any post with no
   subtitle, since with no subtitle the h1's 16px bottom margin no longer
   collapses up to 40px.
   --------------------------------------------------------------------------- */
.tech-blog .entry-content .blogpost-hero-rule {
	margin-top: 40px;
}