/*
  htr-blog 0.1 — article stylesheet (21 Oct 2026): the page, the post body and Elementor overrides. The modules
  (design §5) are in htr-blog-modules.css, which loads even when Settings → "Article stylesheet" is off.

  Loaded only on posts htr-blog renders: the plugin adds body.htrb (and body.htrb-elementor on Elementor builder posts),
  so every rule below starts with body.htrb (one exception, html:has(body.htrb), for the scroller in §4). Depends on
  htrb-tokens (ht-tokens.css v2.1.0, B7 article tokens).

  Rules of this file
  - Tokens only: every colour, font, size, radius, shadow, spacing and motion value comes from a token. Never rem:
    Martfury sets html { font-size: 10px }. Unitless line heights other than the two tokens (1.3 headings, 1.7 body)
    and 1 px hairlines have no token and are written as numbers.
  - Approved look: Design canvas v12 (guide + picks) and founder decision B7: white page, 17 px body at 1.7, title
    32 px (26 px on phones), H2 24 px, H3 19 px, 720 px centred column, 16 px sides on phones; ink headings, never
    green text; links --ht-green-dark, underlined; small text --ht-muted; primary buttons --ht-green-dark; 44 px
    targets (48 px primary); 4 px control corners, 8 px cards; ink/green-tinted shadows; subtle motion, none under
    prefers-reduced-motion.
  - Weights, so that the theme, Elementor and the modules each win where they should:
      (a) page frame and Elementor overrides: explicit selectors, heavier than the theme or Elementor rule they replace
          (Elementor per-widget CSS is (0,3,0) on text widgets and (0,4,0) on heading titles);
      (b) prose: body.htrb + a zero-weight :where() scope + the element = (0,1,2). Beats the theme's element rules,
          loses to any module rule (two classes) and to component CSS with two classes;
      (c) modules: body.htrb .htrb-… (0,2,1) and up. Each module sets its own type, alignment, spacing and list
          styles, so nothing it inherits from Elementor (justify, 15 px, line height, letter spacing) leaks in.
    !important appears only against inline styles (text-align: justify, a fixed inline image height) and in print.
  - Prose reaches Elementor posts only inside text widgets (.elementor-widget-text-editor) and heading widgets;
    banners, buttons, image boxes and other widgets keep their own CSS.

  Module markup: docs/HTR-BLOG-0.1-DESIGN-21Oct2026.md §5. Icons: <svg class="htrb-ico"> with no colour attributes
  (CSS strokes them with currentColor); the play icon inside .htrb-video__btn is filled with currentColor.
*/

/* ── 1. Page ─────────────────────────────────────────────────────────────────────────────────────────────────── */

body.htrb {
	background-color: var(--ht-white);
}

/* Header band, as canvas v12 draws it: the title, then the byline row (the plugin's top block, which its inline script
   moves here and which replaces Martfury's byline), at the left of the article column, in line with the text below.
   Martfury centres the band (.text-center); htr-blog-modules.css keeps the top block centred for that case. */
body.htrb .single-post-header {
	padding: var(--space-8) 0 var(--space-4);
	background-color: var(--ht-white);
}

body.htrb .single-post-header .page-content {
	max-width: var(--measure-article);
	margin: 0 auto;
	text-align: left;
}

/* Out-weighs the site's Additional CSS (.single-post-header .entry-title, 25 px, line-height 1) and the wellness skin
   (h1.entry-title { font-size: var(--text-h1-size, 26px); padding: 8px 0 22px }). */
body.htrb .single-post-header .page-content h1.entry-title {
	max-width: var(--measure-article);
	margin: 0 0 var(--space-3);
	padding: 0;
	font-family: var(--ht-font-head);
	font-size: var(--type-article-h1);
	font-weight: 700;
	font-style: normal;
	line-height: var(--text-heading-leading);
	letter-spacing: var(--text-heading-tracking);
	text-transform: none;
	color: var(--ht-ink);
	overflow-wrap: break-word;
}

/* The byline row in the header: at the left, the share buttons to the right of the byline while the column has room
   (the module stylesheet centres it for a header this stylesheet does not lay out). */
body.htrb .single-post-header .htrb-top--header {
	max-width: none;
	margin: 0;
	text-align: left;
}

body.htrb .single-post-header .htrb-top--header .htrb-top__row {
	justify-content: space-between;
}

body.htrb .single-post-header .htrb-top--header .htrb-byline {
	flex: 1 1 16em;
}

/* Martfury's own byline, where the top block did not move in (it is hidden where it did). */
body.htrb .single-post-header .entry-metas {
	margin: 0;
	font-family: var(--ht-font-body);
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-muted);
}

/* Byline links: ink (3:1 against the muted line) and medium weight, so they stand apart without colour alone. */
body.htrb .single-post-header .entry-metas a {
	color: var(--ht-ink);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-default);
}

body.htrb .single-post-header .entry-metas a:hover {
	color: var(--ht-ink);
	text-decoration: underline;
}

body.htrb .single-post-header .entry-metas .sep {
	color: var(--ht-muted);
}

/* The post column: centred at the B7 measure. */
body.htrb .single-post-wrapper {
	max-width: var(--measure-article);
	margin-right: auto;
	margin-left: auto;
}

/* The author box sits under the article in the same column (Martfury makes it as wide as the container). */
body.htrb .post-author-box {
	max-width: var(--measure-article);
	margin-right: auto;
	margin-left: auto;
}

/* Featured image (the site's Additional CSS hides .entry-format on single posts; when it shows, it stays in the column). */
body.htrb .single-post-wrapper > .entry-header .entry-format {
	margin-bottom: var(--space-6);
}

body.htrb .single-post-wrapper > .entry-header .featured-image-post img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* Phones: 16 px sides (Martfury gives the containers 15 px below 992 px). */
@media (max-width: 767px) {
	body.htrb #content > .container,
	body.htrb .single-post-header > .container {
		padding-right: var(--space-4);
		padding-left: var(--space-4);
	}

	body.htrb .single-post-header {
		padding-top: var(--space-6);
	}

	body.htrb .single-post-header .page-content h1.entry-title {
		font-size: var(--type-article-h1-phone);
	}
}

/* ── 2. Post body ────────────────────────────────────────────────────────────────────────────────────────────── */

/* Inherited by everything in the post: B7 size and leading, Roboto, ink, left aligned. */
body.htrb .single-post-wrapper > .entry-content {
	font-family: var(--ht-font-body);
	font-size: var(--type-article);
	line-height: var(--leading-article);
	color: var(--ht-ink);
	text-align: left;
	overflow-wrap: break-word;
}

/* Inline justify in old posts (style="text-align: justify") and the block editor's justify class. */
body.htrb .single-post-wrapper > .entry-content [style*="text-align: justify"],
body.htrb .single-post-wrapper > .entry-content [style*="text-align:justify"] {
	text-align: left !important;
}

body.htrb .single-post-wrapper > .entry-content .has-text-align-justify {
	text-align: left;
}

/* Paragraphs in the flow: the content root, block groups and columns, and Elementor text widgets. */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > p,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) p {
	margin: 0 0 var(--space-5);
}

/* Headings: plain headings in the flow, block-editor headings anywhere in the post, headings typed into Elementor text
   widgets. Component headings (Hostinger cards, banners, image boxes) are not matched. Roboto Slab, ink, never green. */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h1,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h2,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h3,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h4,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h5,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h6,
body.htrb :where(.single-post-wrapper > .entry-content) h1:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h2:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h3:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h4:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h5:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h6:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h1,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h2,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h3,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h4,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h5,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h6 {
	font-family: var(--ht-font-head);
	font-weight: 700;
	font-style: normal;
	line-height: var(--text-heading-leading);
	letter-spacing: var(--text-heading-tracking);
	text-transform: none;
	color: var(--ht-ink);
}

/* H2 24 px (an H1 typed into a post is shown as an H2: the title is the page's only H1). */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h1,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h2,
body.htrb :where(.single-post-wrapper > .entry-content) h1:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h2:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h1,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h2 {
	margin: var(--space-8) 0 var(--space-3);
	font-size: var(--type-article-h2);
}

/* H3 19 px. */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h3,
body.htrb :where(.single-post-wrapper > .entry-content) h3:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h3 {
	margin: var(--space-6) 0 var(--space-2);
	font-size: var(--type-h2);
}

/* H4 17 px; H5 and H6 16 px. */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h4,
body.htrb :where(.single-post-wrapper > .entry-content) h4:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h4 {
	margin: var(--space-5) 0 var(--space-2);
	font-size: var(--type-h3);
}

body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h5,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > h6,
body.htrb :where(.single-post-wrapper > .entry-content) h5:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content) h6:where(.wp-block-heading),
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h5,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) h6 {
	margin: var(--space-5) 0 var(--space-2);
	font-size: var(--type-body);
}

/* Lists. */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > ul,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > ol,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) ul,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) ol {
	margin: 0 0 var(--space-5);
	padding-left: var(--space-6);
}

body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > ul,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) ul {
	list-style-type: disc;
}

body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > ol,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) ol {
	list-style-type: decimal;
}

body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > ul > li,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > ol > li,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) li {
	margin: 0 0 var(--space-2);
}

/* Nested lists, in the same places only (an Elementor table of contents nests lists too, and keeps its own look). */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > :where(ul, ol) li > ul,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > :where(ul, ol) li > ol,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) li > ul,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) li > ol {
	margin: var(--space-2) 0 0;
}

body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > :where(ul, ol) li > ul,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) li > ul {
	list-style-type: circle;
}

/* Links in the text: --ht-green-dark, underlined. Classed links are buttons or components (Elementor, block editor,
   Hostinger, banners, our modules) and keep their own look; on Elementor posts only links in text widgets. */
body.htrb:where(:not(.htrb-elementor)) :where(.single-post-wrapper > .entry-content) a:where(:not([class])),
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) a:where(:not([class])),
body.htrb :where(.single-post-wrapper > .entry-content) a:where(.-reference-note-text) {
	color: var(--ht-green-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
	transition: color var(--duration-fast) var(--ease-default);
}

body.htrb:where(:not(.htrb-elementor)) :where(.single-post-wrapper > .entry-content) a:where(:not([class])):hover,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) a:where(:not([class])):hover,
body.htrb :where(.single-post-wrapper > .entry-content) a:where(.-reference-note-text):hover {
	color: var(--ht-ink);
}

/* Hostinger affiliate cards keep their own type: no underlined titles, titles no bigger than a section heading. */
body.htrb :where(.single-post-wrapper > .entry-content [class*="hostinger-affiliate"]) a:where(:not([class])),
body.htrb :where(.single-post-wrapper > .entry-content [class*="hostinger-affiliate"]) a:where(:not([class])):hover {
	color: inherit;
	text-decoration: none;
}

body.htrb .single-post-wrapper > .entry-content [class*="hostinger-affiliate-block"] h3 {
	font-family: var(--ht-font-body);
	letter-spacing: normal;
}

body.htrb .single-post-wrapper > .entry-content .hostinger-affiliate-block-single-type__product-title h3 {
	font-size: var(--type-h2);
	line-height: var(--text-heading-leading);
}

/* Images stay inside the column. The block editor sometimes writes width and height inline (style="width:1200px;
   height:406px"): only !important can release that height. */
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > img,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > p img,
body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > figure img,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) img {
	max-width: 100%;
	height: auto;
}

body.htrb .single-post-wrapper > .entry-content figure img[style*="height"] {
	height: auto !important;
}

/* A linked image sits in an inline-block link (block library, Elementor image widget). Until the image has loaded
   (LiteSpeed's lazy-load placeholder, a failed load) the link takes the image's width attribute, 1200 px and more,
   and the page grows wider than a phone: the link stays inside the column too. */
body.htrb :where(.single-post-wrapper > .entry-content) figure > a,
body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-image) a {
	max-width: 100%;
}

/* Captions: small, muted. */
body.htrb :where(.single-post-wrapper > .entry-content) figcaption,
body.htrb :where(.single-post-wrapper > .entry-content) .wp-caption-text,
body.htrb .single-post-wrapper > .entry-content .widget-image-caption {
	margin: var(--space-2) 0 0;
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-muted);
}

/* Tables: hairlines, a soft-green header row, small type. On phones a table scrolls inside its own box. */
body.htrb :where(.single-post-wrapper > .entry-content) table {
	width: 100%;
	margin: 0 0 var(--space-6);
	border: 1px solid var(--ht-line);
	border-collapse: collapse;
	border-spacing: 0;
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-ink);
}

body.htrb :where(.single-post-wrapper > .entry-content) th,
body.htrb :where(.single-post-wrapper > .entry-content) td {
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-bottom: 1px solid var(--ht-line);
	text-align: left;
	vertical-align: top;
}

body.htrb :where(.single-post-wrapper > .entry-content) th {
	background-color: var(--ht-green-soft);
	font-weight: 600;
	color: var(--ht-ink);
}

body.htrb :where(.single-post-wrapper > .entry-content) thead,
body.htrb :where(.single-post-wrapper > .entry-content) tfoot {
	border: 0;
}

body.htrb :where(.single-post-wrapper > .entry-content) figure:where(.wp-block-table) {
	max-width: 100%;
	margin: 0 0 var(--space-6);
	overflow-x: auto;
}

body.htrb :where(.single-post-wrapper > .entry-content .wp-block-table) table {
	margin: 0;
}

@media (max-width: 767px) {
	/* A table without a wrapper becomes its own scroll box; the figure of a block-editor table already is one. */
	body.htrb :where(.single-post-wrapper > .entry-content, .single-post-wrapper > .entry-content :where(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-media-text__content)) > table,
	body.htrb :where(.single-post-wrapper > .entry-content .elementor-widget-text-editor) table {
		display: block;
		width: max-content;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Cells keep a readable width; a wide table scrolls instead of squeezing every column. */
	body.htrb :where(.single-post-wrapper > .entry-content) th,
	body.htrb :where(.single-post-wrapper > .entry-content) td {
		min-width: 7em;
	}
}

/* Quotes: a green rule on the left, the body face, no theme serif. Martfury pads block-editor quotes 60 px at (0,3,0)
   (.wp-block-quote:not(.is-large):not(.is-style-large)), so this one rule carries the full scope. */
body.htrb .single-post-wrapper > .entry-content blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-5);
	border: 0;
	border-left: var(--space-1) solid var(--ht-green);
	background: none;
	font-family: var(--ht-font-body);
	font-size: var(--type-article);
	font-style: normal;
	line-height: var(--leading-article);
	color: var(--ht-ink);
}

body.htrb :where(.single-post-wrapper > .entry-content) blockquote p {
	margin: 0 0 var(--space-3);
}

body.htrb :where(.single-post-wrapper > .entry-content) blockquote p:last-child {
	margin-bottom: 0;
}

body.htrb :where(.single-post-wrapper > .entry-content) blockquote cite {
	display: block;
	margin: var(--space-2) 0 0;
	font-family: var(--ht-font-body);
	font-size: var(--type-small);
	font-style: normal;
	font-weight: 600;
	text-transform: none;
	color: var(--ht-muted);
}

body.htrb :where(.single-post-wrapper > .entry-content) blockquote cite::before {
	content: none;
}

body.htrb :where(.single-post-wrapper > .entry-content) hr {
	height: 0;
	margin: var(--space-8) 0;
	border: 0;
	border-top: 1px solid var(--ht-line);
	background: none;
}

/* Questions people ask: details/summary separated by hairlines (as on the canvas). */
body.htrb :where(.single-post-wrapper > .entry-content) details {
	margin: 0;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--ht-line);
	border-bottom: 1px solid var(--ht-line);
}

body.htrb :where(.single-post-wrapper > .entry-content) details + details {
	border-top: 0;
}

body.htrb :where(.single-post-wrapper > .entry-content) summary {
	font-size: var(--type-body);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ht-ink);
	cursor: pointer;
}

body.htrb :where(.single-post-wrapper > .entry-content) details > p {
	margin: var(--space-2) 0 0;
}

/* ── 3. Elementor builder posts ─────────────────────────────────────────────────────────────────────────────── */

/* Text widgets: per-widget CSS sets text-align: justify and 15 px at (0,3,0); B7 wins here at (0,4,1). */
body.htrb .single-post-wrapper > .entry-content .elementor-widget-text-editor {
	font-family: var(--ht-font-body);
	font-size: var(--type-article);
	line-height: var(--leading-article);
}

/* Left aligned, except inside a section or container with its own background (a coloured band keeps its centring). */
body.htrb .single-post-wrapper > .entry-content .elementor-widget-text-editor:not([data-settings*="background_background"] .elementor-widget-text-editor) {
	text-align: left;
}

/* Heading widgets: per-widget CSS sets 20 px Roboto in the brand green at (0,4,0). Sized by their tag, Roboto Slab, ink. */
body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading .elementor-heading-title {
	font-family: var(--ht-font-head);
	font-weight: 700;
	font-style: normal;
	line-height: var(--text-heading-leading);
	letter-spacing: var(--text-heading-tracking);
	text-transform: none;
}

/* Ink, except inside a section or container with its own background (white text on colour stays as the author set it). */
body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading .elementor-heading-title:not([data-settings*="background_background"] .elementor-heading-title) {
	color: var(--ht-ink);
}

body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading h1.elementor-heading-title,
body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading h2.elementor-heading-title {
	margin: var(--space-4) 0 var(--space-3);
	font-size: var(--type-article-h2);
}

body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading h3.elementor-heading-title {
	margin: var(--space-3) 0 var(--space-2);
	font-size: var(--type-h2);
}

body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading h4.elementor-heading-title,
body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading h5.elementor-heading-title,
body.htrb .single-post-wrapper > .entry-content .elementor-widget-heading h6.elementor-heading-title {
	margin: var(--space-2) 0;
	font-size: var(--type-h3);
}

/* Elementor 4 headings (atomic widgets, h2.e-heading-base): the post's local CSS sets Roboto in the brand green at
   (0,2,0) (.elementor .e-<id>) and the theme 30 px. The same type as the heading widgets, at (0,4,2). No margin, as
   Elementor has it: the container's own padding spaces them (about 40 px above, 20 px below, near the canvas's 36/12). */
body.htrb .single-post-wrapper > .entry-content :is(h1, h2, h3, h4, h5, h6).e-heading-base {
	margin: 0;
	font-family: var(--ht-font-head);
	font-weight: 700;
	font-style: normal;
	line-height: var(--text-heading-leading);
	letter-spacing: var(--text-heading-tracking);
	text-transform: none;
}

body.htrb .single-post-wrapper > .entry-content :is(h1, h2, h3, h4, h5, h6).e-heading-base:not([data-settings*="background_background"] .e-heading-base) {
	color: var(--ht-ink);
}

body.htrb .single-post-wrapper > .entry-content :is(h1, h2).e-heading-base {
	font-size: var(--type-article-h2);
}

body.htrb .single-post-wrapper > .entry-content h3.e-heading-base {
	font-size: var(--type-h2);
}

body.htrb .single-post-wrapper > .entry-content :is(h4, h5, h6).e-heading-base {
	font-size: var(--type-h3);
}

/* Elementor insets every column by its gap (10 px, or 15 px "extended"); top-level sections without a background reach
   the column edges again, so Elementor text lines up with the modules and keeps the 16 px phone sides. A section with a
   background keeps the inset as padding inside its colour. (The 10 and 15 px are Elementor's own values.) */
body.htrb .single-post-wrapper > .entry-content .elementor-top-section:not([data-settings*="background_background"]) > .elementor-column-gap-default {
	margin-right: -10px;
	margin-left: -10px;
}

body.htrb .single-post-wrapper > .entry-content .elementor-top-section:not([data-settings*="background_background"]) > .elementor-column-gap-extended {
	margin-right: -15px;
	margin-left: -15px;
}

/* Flex containers (.e-con) inset their content by the kit's default container padding (10 px, Elementor's fallback):
   a top-level container without a background reaches the column edges, like the sections above, so its heading lines
   up with the text. Only that default goes: a padding the author set on the container stays, and nested containers
   get the default back. */
body.htrb .single-post-wrapper > .entry-content .elementor[data-elementor-type] > .e-con:not([data-settings*="background_background"]) {
	--container-default-padding-left: 0px;
	--container-default-padding-right: 0px;
}

body.htrb .single-post-wrapper > .entry-content .elementor[data-elementor-type] > .e-con .e-con {
	--container-default-padding-left: initial;
	--container-default-padding-right: initial;
}

/* ── 4. Keyboard: the sticky header and the theme's focus ──────────────────────────────────────────────────────── */

/* Focus and in-page links stop below Martfury's sticky header (61 px on wide screens, 57 px on phones once it
   minimises; measured 22 Oct 2026), so a focused element is never hidden under it (WCAG 2.4.11). The viewport scrolls
   on html, the one rule here that cannot start with body.htrb; the body rule covers a theme that makes body the
   scroller. Separate rules: a browser without :has() drops only the first. */
html:has(body.htrb) {
	scroll-padding-top: calc(var(--space-12) + var(--space-8));
}

body.htrb {
	scroll-padding-top: calc(var(--space-12) + var(--space-8));
}

/* The site's CSS removes focus outlines (a:focus, button): the header, the phone menu and the post navigation get the
   modules' ring back, on white or the top bar's light grey (green-dark: 5.06:1 and 4.6:1). */
body.htrb .site-header a:focus-visible,
body.htrb .site-header button:focus-visible,
body.htrb .primary-mobile-nav a:focus-visible,
body.htrb .primary-mobile-nav button:focus-visible,
body.htrb .post-navigation a:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* The search plugin removes the field's outline with !important (Ivory Search): the same ring, drawn as a shadow. */
body.htrb .site-header input:focus-visible {
	box-shadow: 0 0 0 var(--focus-ring-offset) var(--ht-white), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}