/*
 * Blog post text (blocks from the editor), from
 * docs/preview/inspiracje_szablon.png, measured at 1440 px (2026-10-28).
 * Loaded on single posts (.hf-prose) and in the editor frame
 * (.editor-styles-wrapper, inc/block-editor.php), so both look the same.
 *
 * Text 22 px at 1440 (the preview: about 24 px, 74 characters a line in the
 * 930 px column; a little smaller on the user's request 2026-10-29), H2 as
 * in the preview (the H2 size under subpage headings, 45 px at 1440) with
 * the short line under it,
 * images and frames the width of the column. Questions (Accordion block):
 * each in a light frame like the FAQ on Kontakt, a chevron instead of „+”
 * as in the preview, one open at a time.
 */

:is(.hf-prose, .editor-styles-wrapper)
{
	color: var(--hf-color-text);
	font-family: var(--hf-font-text);
	/* 22 px at 1440, 20 at 1024, 18.5 at 768, 17 on phones (was --hf-text-l:
	   24 / 21.6 / 20 / 18). Smaller still would make the lines in the 922 px
	   column too long: about 90 characters at 22 px. */
	font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.375rem);
	line-height: 1.55;
}

:is(.hf-prose, .editor-styles-wrapper) p
{
	margin-block: 0 1em;
}

:is(.hf-prose, .editor-styles-wrapper) a
{
	color: var(--hf-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:is(.hf-prose, .editor-styles-wrapper) a:hover
{
	color: var(--hf-color-primary-hover);
}

:is(.hf-prose, .editor-styles-wrapper) strong
{
	color: var(--hf-color-heading);
	font-weight: 700;
}

/* Headings */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-heading
{
	color: var(--hf-color-heading);
	font-family: var(--hf-font-display);
	font-weight: 400;
	line-height: var(--hf-leading-tight);
	text-wrap: balance;
}

:is(.hf-prose, .editor-styles-wrapper) h2.wp-block-heading
{
	margin-block: var(--hf-space-l) var(--hf-space-m);
	/* 38 px at 1440, 35 at 1024, 31 at 768, 24.6 on phones (user's request
	   2026-10-29; was 46 / 40 / 34.5 / 26): about 1.75 times the text, the
	   proportion of the preview (45 : 24), with the text now 22 px. */
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.375rem);
}

/* The short line under the heading, as under the page title. */
:is(.hf-prose, .editor-styles-wrapper) h2.wp-block-heading::after
{
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: var(--hf-space-xs);
	background: var(--hf-color-primary);
	content: "";
}

:is(.hf-prose, .editor-styles-wrapper) h3.wp-block-heading
{
	margin-block: var(--hf-space-l) var(--hf-space-s);
	font-size: var(--hf-text-card-title);
}

:is(.hf-prose, .editor-styles-wrapper) h4.wp-block-heading
{
	margin-block: var(--hf-space-m) var(--hf-space-xs);
	font-size: 1em;
}

/* Lists */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-list
{
	margin-block: 0 1em;
	padding-left: 1.25em;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-list li + li
{
	margin-top: 0.3em;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-list li::marker
{
	color: var(--hf-color-heading);
}

/* Images: the width of the column, rounded like the photo above. */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-image
{
	margin-block: var(--hf-space-l);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-image img
{
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hf-radius-m);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-image figcaption
{
	margin-top: var(--hf-space-xs);
	color: var(--hf-color-text);
	font-size: var(--hf-text-s);
	line-height: 1.5;
	text-align: left;
}

/* Quote: the display face, a line on the left. */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-quote
{
	margin: var(--hf-space-l) 0;
	padding: 0 0 0 var(--hf-space-m);
	border-left: 2px solid var(--hf-color-primary);
	color: var(--hf-color-heading);
	font-family: var(--hf-font-display);
	font-size: var(--hf-text-xl);
	line-height: 1.4;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-quote p
{
	margin-bottom: 0.5em;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-quote p:last-of-type
{
	margin-bottom: 0;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-quote cite
{
	display: block;
	margin-top: var(--hf-space-s);
	color: var(--hf-color-text);
	font-family: var(--hf-font-text);
	font-size: var(--hf-text-s);
	font-style: normal;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-separator
{
	margin-block: var(--hf-space-l);
	border: 0;
	border-top: 1px solid var(--hf-color-card-border);
	opacity: 1;
}

/* „Wyróżnienie” (Group style): „Mały krok na dziś” in the preview. */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-group.is-style-hf-callout
{
	margin-block: var(--hf-space-l);
	padding: clamp(1.25rem, 0.9rem + 1vw, 2rem) clamp(1.25rem, 0.6rem + 1.8vw, 2.5rem);
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-band);
	font-size: 0.875em;
}

:is(.hf-prose, .editor-styles-wrapper) .is-style-hf-callout > :first-child
{
	margin-top: 0;
}

:is(.hf-prose, .editor-styles-wrapper) .is-style-hf-callout > :last-child
{
	margin-bottom: 0;
}

:is(.hf-prose, .editor-styles-wrapper) .is-style-hf-callout h3.wp-block-heading
{
	margin-bottom: var(--hf-space-xs);
	font-size: 1.1em;
}

/* Buttons: the site's primary button. */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-buttons
{
	margin-block: var(--hf-space-l);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-button__link
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hf-button-height);
	padding: var(--hf-button-padding);
	border: var(--hf-button-border) solid var(--hf-color-primary);
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-primary);
	color: var(--hf-color-on-dark);
	font-family: var(--hf-font-text);
	font-size: var(--hf-button-text);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--hf-transition), border-color var(--hf-transition);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-button__link:hover
{
	border-color: var(--hf-color-primary-hover);
	background: var(--hf-color-primary-hover);
	color: var(--hf-color-on-dark);
}

/* Questions (Accordion block) */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion
{
	margin-block: var(--hf-space-m) var(--hf-space-l);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-item
{
	--hf-faq-pad: clamp(1rem, 0.6rem + 1.2vw, 2rem);

	margin: 0;
	border: 1px solid color-mix(in srgb, var(--hf-color-field-border) 30%, var(--hf-color-surface));
	border-radius: var(--hf-radius-s);
	background: var(--hf-color-surface);
	transition: background-color var(--hf-transition);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-item + .wp-block-accordion-item
{
	margin-top: 0.625rem;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-item.is-open
{
	background: var(--hf-color-band);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-heading
{
	margin: 0;
	font-family: var(--hf-font-text);
	font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
	line-height: 1.35;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-heading__toggle
{
	gap: var(--hf-space-m);
	padding: clamp(0.9rem, 0.75rem + 0.45vw, 1.25rem) var(--hf-faq-pad);
	border-radius: calc(var(--hf-radius-s) - 1px);
	color: var(--hf-color-heading);
	transition: background-color var(--hf-transition), color var(--hf-transition);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle
{
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* No underline: the whole row reacts. */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title
{
	text-decoration: none;
}

/* Chevron instead of the „+” of the block: down, up when open. */
:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-heading__toggle-icon
{
	position: relative;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	font-size: 0;
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-heading__toggle-icon::before
{
	position: absolute;
	top: 0.2rem;
	left: 0.3rem;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	content: "";
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon
{
	transform: rotate(180deg);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-panel
{
	padding: 0 var(--hf-faq-pad) var(--hf-space-m);
	font-size: var(--hf-text-m);
	line-height: var(--hf-leading-text);
}

:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-panel > :last-child
{
	margin-bottom: 0;
}

/* Mouse only, as on Kontakt: on touch screens a tapped row would stay inverted. */
@media (hover: hover)
{
	:is(.hf-prose, .editor-styles-wrapper) .wp-block-accordion-heading__toggle:hover
	{
		background: var(--hf-color-primary);
		color: var(--hf-color-on-dark);
	}
}

/* Editor frame: the page background, the title as the page heading, the
   text as wide as the column on the page. */
.editor-styles-wrapper
{
	background: var(--hf-color-bg);
}

.editor-styles-wrapper .editor-post-title
{
	color: var(--hf-color-heading);
	font-family: var(--hf-font-display);
	font-size: var(--hf-text-page-title);
	font-weight: 400;
	line-height: var(--hf-leading-tight);
}

.editor-styles-wrapper .editor-post-title
{
	max-width: 58rem;
}

.editor-styles-wrapper .is-root-container > .wp-block
{
	max-width: var(--hf-text-measure);
}

/*
 * No space before the first block and after the last one: the text starts
 * level with the spis treści and the footer (tags, „Kopiuj link”) keeps
 * its own margin. Last in the file and with two classes, so it wins over
 * the block rules above (quote, image, frame, accordion). Until 2026-10-29
 * it was .hf-prose > :first-child, and those rules won over it.
 */
.hf-post-body__content.hf-prose > :first-child
{
	margin-top: 0;
}

.hf-post-body__content.hf-prose > :last-child
{
	margin-bottom: 0;
}