/**
 * BS360 Single Blog Article – Sidebar Layout & Typography
 * Scope: template single only (classes on .bs360-single-*)
 * @since 1.5.0 Promoted from build/single-test.css after the
 *              single-test template prototype was reviewed and
 *              approved. Classes renamed bs360-single-test-*
 *              → bs360-single-* since this is now the production
 *              blog template, not a test. All layout, typography
 *              and TOC rules below carry over unchanged in behavior
 *              from the last-reviewed single-test.css state
 *              (through 1.4.86); only selectors were renamed.
 */

/* ──────────────────────────────────────────
   Hero: post title (H1) hyphenation
   Since 1.5.11: style.css sets hyphens:none globally on all
   headings (h1–h6), a deliberate design choice for short headlines.
   Long compound German terms in blog article titles (e.g.
   "Gebäudemodernisierungsgesetz") don't wrap gracefully without
   hyphenation and can overflow their container instead, so this
   re-enables it specifically for .wp-block-post-title (the H1
   rendered by wp:post-title) rather than reversing the global rule
   for every heading in the theme.
   Since 1.5.12: minimum word length raised 8 → 18 characters. At 8,
   ordinary words like "Immobilie" (9 chars) or "Nichtwohngebäude"
   were already being hyphenated in headline titles, which looked
   odd for words that aren't actually long enough to need it. 18
   only catches genuinely long German compounds (e.g.
   "Gebäudemodernisierungsgesetz", 29 chars) while leaving normal-
   length title words untouched.
────────────────────────────────────────── */
.wp-block-post-title {
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-chars: 18 4 5;
	hyphenate-limit-chars: 18 4 5;
}

/* ──────────────────────────────────────────
   Hero: category tagline above the H1
   Since 1.5.10: layout type switched constrained → flow to fix a
   mobile centering issue (core's constrained layout centers its
   children via margin-left/right:auto).
   Since 1.5.11: that flow layout change had its own side effect -
   the shortcode's own <p> tag doesn't get WordPress's usual block
   margin reset (blockGap handling differs between flow and
   constrained), so a 1em browser-default top/bottom margin
   appeared on it. Rather than continuing to chase this back and
   forth by switching layout types, this rule sets both properties
   explicitly and directly on the shortcode's own <p>, independent
   of whichever layout type the wrapping group uses.
────────────────────────────────────────── */
.bs360-single-category p {
	margin: 0;
	text-align: left;
}

/* ──────────────────────────────────────────
   Layout: fixed column widths
   Content 684px + sidebar 320px = 1004px, remaining ~96px of the
   1100px wrapper becomes the gap via justify-content:space-between
   (see layout section below).
   Since 1.5.7: theme.json settings.layout.contentSize raised
   640px → 684px globally, so wp:post-content's own constrained
   layout (see the "constrained wrapper" section further below) now
   matches this column's fixed width exactly - no double constraint
   between the column's 684px and post-content's own max-width
   anymore. This was a deliberate global change (affects page.html,
   both landingpage templates, search/404/archive templates too),
   not scoped to just this file - see theme.json's own comment
   near contentSize for the full reasoning.
────────────────────────────────────────── */

/* ──────────────────────────────────────────
   Layout: single constrained wrapper
   Hero + Content + Sidebar all share one 1100px container.
────────────────────────────────────────── */
.bs360-single-columns.wp-block-columns {
	justify-content: space-between;
	align-items: flex-start;
}

.bs360-single-article.wp-block-column {
	flex: 0 0 684px !important;
	width: 684px !important;
	max-width: 684px !important;
}

.bs360-single-sidebar.wp-block-column {
	flex: 0 1 320px !important;
	min-width: 280px !important;
	max-width: 320px !important;
	/* Since 1.5.9: align-self:stretch overrides the flex-start from
	   .bs360-single-columns above for this column specifically. With
	   flex-start, the sidebar column only grows as tall as its own
	   content (the TOC), leaving no room for its sticky child to
	   move within - position:sticky needs a taller ancestor to stick
	   inside, and an ancestor exactly as tall as the sticky element
	   itself gives it nowhere to go. Stretching this column to the
	   row's height (i.e. the taller article column) restores that
	   room. flex-start on the row is still needed so the article
	   column itself isn't stretched or vertically centered oddly;
	   only the sidebar needs the stretch behavior back. */
	align-self: stretch;
}

/* WordPress wraps every template-part block in its own div
   (.wp-block-template-part) with no height rules of its own - a
   plain block-level div does not inherit its parent's stretched
   height automatically the way a flex child does. Without this,
   the column above can be as tall as it wants, but this wrapper
   (and the sticky element inside it) still collapses to its own
   content height, recreating the same "nowhere to stick" problem
   one level down. height:100% here passes the stretched height
   from .bs360-single-sidebar through to .bs360-single-sidebar-inner. */
.bs360-single-sidebar.wp-block-column > .wp-block-template-part {
	height: 100%;
}

/* ──────────────────────────────────────────
   Typography: fluid body text
   Scales from 16px (375px viewport) to 20px (1280px viewport).
   Formula: clamp(1rem, 0.8964rem + 0.442vw, 1.25rem)
   [class*="has-size-"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)
   catches WordPress preset size classes on paragraphs/spans
   WITHOUT touching headings that carry the same class pattern.
   Since 1.5.9: :not() exclusions added for all three author-box
   text classes (name, position, bio). The author box (a separate
   plugin, bs360-author-box) appends its markup to the_content,
   landing inside .wp-block-post-content - its own <p> elements
   were being caught by this rule's generic "p" selector and losing
   to their own, less-specific styling in style.css because of this
   rule's !important. Excluding them here lets the author box's own
   font size/weight/color rules apply undisturbed.
────────────────────────────────────────── */
.bs360-single-article .wp-block-post-content p:not(.bs360-author-box__name):not(.bs360-author-box__position):not(.bs360-author-box__bio),
.bs360-single-article .wp-block-post-content li,
.bs360-single-article .wp-block-post-content td,
.bs360-single-article .wp-block-post-content th,
.bs360-single-article .wp-block-post-content [class*="has-size-"]:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
	font-family: var(--wp--preset--font-family--roboto, 'Roboto', sans-serif) !important;
	font-size: clamp(1rem, 0.8964rem + 0.442vw, 1.25rem) !important;
	line-height: 1.7 !important;
}

/* Headings: own scale, hierarchy preserved, not touched by body rule above */
.bs360-single-article .wp-block-post-content h2,
.bs360-single-article .wp-block-post-content h2[class*="has-size-"] {
	font-size: clamp(1.375rem, 1.2196rem + 0.663vw, 1.75rem) !important; /* 22px → 28px */
	line-height: 1.3 !important;
}

.bs360-single-article .wp-block-post-content h3,
.bs360-single-article .wp-block-post-content h3[class*="has-size-"] {
	font-size: clamp(1.125rem, 1.0214rem + 0.442vw, 1.375rem) !important; /* 18px → 22px */
	line-height: 1.4 !important;
}

.bs360-single-article .wp-block-post-content h4,
.bs360-single-article .wp-block-post-content h4[class*="has-size-"] {
	font-size: clamp(1rem, 0.9482rem + 0.221vw, 1.125rem) !important; /* 16px → 18px */
	line-height: 1.4 !important;
}

/* ──────────────────────────────────────────
   Spacing: hide empty spacer columns inside post content.
   Since 1.5.0: kept as a defensive fallback only. All 18 blog
   patterns that used the 10/80/10 (or 20/60/20) hide-mobile spacer
   trick were rewritten in this release to output full-width content
   directly (see patterns/blog-*.php changelogs), so this selector
   should no longer match anything from those patterns. Left in
   place in case older post revisions, unmigrated content, or a
   pattern outside this rewrite still contains the old structure -
   removing it entirely risked silently breaking content this
   deploy did not touch, since there is no staging to verify against
   before go-live.
────────────────────────────────────────── */
.bs360-single-article .wp-block-post-content .wp-block-column.hide-mobile {
	display: none !important;
	flex-basis: 0 !important;
}

/* Sibling content column next to hidden spacer: take full width */
.bs360-single-article .wp-block-post-content .wp-block-columns:has(.wp-block-column.hide-mobile) .wp-block-column:not(.hide-mobile) {
	flex-basis: 100% !important;
	max-width: 100% !important;
}

/* ──────────────────────────────────────────
   Sidebar: sticky container
────────────────────────────────────────── */
.bs360-single-sidebar-inner {
	position: sticky;
	top: 100px; /* Adjust to match actual header height */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--spacing-20, 1.5rem);
}

/* ──────────────────────────────────────────
   TOC box wrapper
   No background box, no wrapper padding - the TOC uses the
   sidebar's full width instead of an inset box.
────────────────────────────────────────── */
.bs360-single-toc {
	border-radius: 20px;
	padding: 0;
}

/* TOC title – rendered by plugin as <p class="bs360-toc-title"> */
.bs360-single-toc .bs360-toc-title {
	font-family: var(--wp--preset--font-family--maven-pro, inherit);
	font-size: var(--wp--preset--font-size--size-16, 1rem);
	font-weight: 600;
	color: var(--wp--preset--color--anthracite-500);
	margin: 0 0 0.75rem 0;
	padding: 0;
}

/* ──────────────────────────────────────────
   TOC nav + list reset
   position:relative needed for indicator positioning
────────────────────────────────────────── */
.bs360-single-toc .bs360-toc-nav {
	display: block;
	position: relative;
	padding-left: 1rem; /* space for the indicator track */
}

/* Gray track bar – starts at first heading, not at title. */
.bs360-single-toc .bs360-toc-list--depth-1 {
	position: relative;
}

.bs360-single-toc .bs360-toc-list--depth-1::before {
	content: '';
	position: absolute;
	left: -1rem; /* align with left edge of nav padding */
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: var(--wp--preset--color--anthracite-100, #e5e7eb);
	border-radius: 2px;
}

.bs360-single-toc .bs360-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Depth 2+ indented */
.bs360-single-toc .bs360-toc-list--depth-2,
.bs360-single-toc .bs360-toc-list--depth-3 {
	padding-left: 0.875rem;
	margin-top: 2px;
	margin-bottom: 2px;
}

/* ──────────────────────────────────────────
   Sliding green indicator (injected by JS)
   Height is set dynamically by JS to match active link height.
────────────────────────────────────────── */
.bs360-single-toc .bs360-toc-indicator {
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 1rem; /* fallback – overridden by JS */
	background-color: var(--wp--preset--color--green-500);
	border-radius: 2px;
	transform: translateY(0);
	transition: transform 0.25s ease, height 0.25s ease;
	opacity: 0;
	z-index: 1;
}

.bs360-single-toc .bs360-toc-indicator--visible {
	opacity: 1;
}

/* ──────────────────────────────────────────
   TOC items
────────────────────────────────────────── */
.bs360-single-toc .bs360-toc-item {
	margin: 0;
	padding: 0;
}

.bs360-single-toc .bs360-toc-item--h2 + .bs360-toc-item--h2 {
	margin-top: 4px;
}

/* ──────────────────────────────────────────
   TOC links – H2 and H3 same color, weight and size differ
────────────────────────────────────────── */
.bs360-single-toc .bs360-toc-link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--roboto, 'Roboto', sans-serif);
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--anthracite-400, #4b5563);
	text-decoration: none;
	padding: 3px 0;
	transition: color 0.15s ease;
}

.bs360-single-toc .bs360-toc-link:hover {
	color: var(--wp--preset--color--green-500);
}

/* H3: same color, regular weight, 16px indent */
.bs360-single-toc .bs360-toc-item--h3 .bs360-toc-link {
	font-size: var(--wp--preset--font-size--size-13);
	font-weight: 400;
	color: var(--wp--preset--color--anthracite-400, #4b5563);
	padding-left: 1rem; /* 16px */
}

.bs360-single-toc .bs360-toc-item--h3 .bs360-toc-link:hover {
	color: var(--wp--preset--color--green-500);
}

/* ──────────────────────────────────────────
   Scroll highlighting classes (set by JS)
────────────────────────────────────────── */
.bs360-single-toc .bs360-toc-link--active {
	color: var(--wp--preset--color--green-500) !important;
	font-weight: 600;
}

.bs360-single-toc .bs360-toc-item--h3 .bs360-toc-link--active {
	font-weight: 500;
}

.bs360-single-toc .bs360-toc-link--passed {
	color: var(--wp--preset--color--anthracite-300, #6b7280);
}

/* ──────────────────────────────────────────
   Newsletter CTA box
   Since 1.5.5: the CTA box itself was removed from
   parts/sidebar-blog.html (placeholder-only content, not yet
   filled in). This rule is dormant until the box is reinserted with
   real content - left in place deliberately rather than deleted,
   since the class and its styling are still the intended design.
────────────────────────────────────────── */
.bs360-single-cta h4 {
	color: var(--wp--preset--color--anthracite-500);
}

/* ──────────────────────────────────────────
   Article content: layout and element overrides
────────────────────────────────────────── */
.bs360-single-article .is-layout-flex {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.bs360-single-article .wp-block-post-content figure,
.bs360-single-article .wp-block-post-content .wp-block-image,
.bs360-single-article .wp-block-post-content .wp-block-table {
	max-width: 100% !important;
	width: 100% !important;
}

.bs360-single-article .wp-block-post-content figure img {
	width: 100% !important;
	height: auto !important;
}

.bs360-single-article .wp-block-post-content ul,
.bs360-single-article .wp-block-post-content ol {
	padding-inline-start: 1.25rem;
}

/* ──────────────────────────────────────────
   Mobile: stack the hero (category/title/date vs. featured image)
   Since 1.5.3: hero given isStackedOnMobile:false in the template
   (is-not-stacked-on-mobile class) so WordPress core's own
   columns stacking rule (781px, wp-includes/blocks/columns/style.css)
   no longer applies to it. Stacked here instead at the same 964px
   breakpoint as the article/sidebar split below, so the whole
   template switches to its mobile layout at one consistent width
   rather than the hero stacking earlier (at 781px) than the
   article/sidebar columns (at 964px) did before this change.
   Selector includes .is-not-stacked-on-mobile itself (not just
   .bs360-single-hero.wp-block-columns) to out-specify core's own
   .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap
   !important } rule (two classes) regardless of stylesheet load
   order - three classes here beats core's two.
────────────────────────────────────────── */
@media (max-width: 964px) {
	.bs360-single-hero.wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}

	.bs360-single-hero.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ──────────────────────────────────────────
   Mobile: hide sidebar, full-width article
   964px = 684px fixed article + 280px sidebar min-width, the
   narrowest wrapper width both columns fit into together.
   Since 1.5.10: added max-width:100% on wp-block-post-content and
   its constrained children directly. Without this, post-content's
   own constrained layout still tried to hold its inner content at
   684px (theme.json's global contentSize, raised to match the
   article column's width in 1.5.7) even after the column itself
   shrank to fit real mobile viewports well under 684px wide -
   content wider than its column overflows the viewport instead of
   shrinking with it. This showed up most visibly with the FAQ
   accordion (wide, high-contrast borders make overflow obvious),
   but the underlying cause affects any post-content child at the
   full constrained width, not just blog-faq.php.
────────────────────────────────────────── */
@media (max-width: 964px) {
	.bs360-single-sidebar {
		display: none !important;
	}

	.bs360-single-article.wp-block-column {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.bs360-single-article .wp-block-post-content,
	.bs360-single-article .wp-block-post-content.is-layout-constrained > * {
		max-width: 100% !important;
	}
}