/**
 * BOTSAUTO Gutenberg Canvas.
 *
 * Loaded only while template-botsauto-page.php or
 * template-botsauto-post.php is the theme template actually included
 * for the request. Block interiors stay in build/shared.css and the
 * block stylesheets. This file owns the canvas: width, alignment,
 * theme neutralization, responsive safety and the skip link.
 *
 * Official brand colors are the four tokens below. Lighter and darker
 * steps use color-mix() or opacity. Oswald is a dependency of this
 * handle when the plugin is allowed to load it. The family is Oswald,
 * "Arial Narrow", Arial, sans-serif.
 */

body.botsauto-template {
	--botsauto-pink: #D14292;
	--botsauto-blue: #008AD6;
	--botsauto-navy: #00306A;
	--botsauto-green: #006633;
	--botsauto-content-width: 1180px;
	--botsauto-wide-width: 1480px;
	--botsauto-text-width: 860px;
	--botsauto-gutter: clamp(18px, 4vw, 64px);

	/*
	 * Sections redefine --botsauto-gutter for their own shell. Copy the
	 * canvas gutter once, on the body, so the width math below keeps the
	 * fluid value even when a child overrides the shared token.
	 */
	--botsauto-canvas-gutter: var(--botsauto-gutter);

	box-sizing: border-box;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background-color: #fff;
	color: var(--botsauto-navy);
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

@supports (min-height: 100dvh) {

	body.botsauto-template {
		min-height: 100dvh;
	}
}

body.botsauto-template .botsauto-canvas,
body.botsauto-template .botsauto-entry,
body.botsauto-template .botsauto-entry__content {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	background-color: transparent;
	border: 0;
}

body.botsauto-template .botsauto-entry__content {
	display: flow-root;
}

/* No canvas offset. The first and last blocks may touch the viewport. */
body.botsauto-template .botsauto-entry__content > :first-child {
	margin-block-start: 0;
}

body.botsauto-template .botsauto-entry__content > :last-child {
	margin-block-end: 0;
}

/*
 * Direct children only. 1180 / 1480 / full. Nested blocks keep the
 * layout of their parent. alignleft and alignright stay free so a
 * floated figure is not forced into the centered column.
 *
 * The fluid gutter is the small-screen inset (about 18px near 390px,
 * about 31px at 768px, about 41px at 1024px, about 58px at 1440px,
 * capped at 64px). min() keeps wide and normal blocks inside the
 * viewport, so alignwide only reaches 1480px once the screen is wider
 * than 1480px plus both gutters.
 */
body.botsauto-template .botsauto-entry__content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	--botsauto-column: var(--botsauto-content-width);
	box-sizing: border-box;
	width: min(100% - (2 * var(--botsauto-canvas-gutter)), var(--botsauto-column));
	max-width: var(--botsauto-column);
	margin-inline: auto;
}

body.botsauto-template .botsauto-entry__content > .alignwide {
	box-sizing: border-box;
	width: min(100% - (2 * var(--botsauto-canvas-gutter)), var(--botsauto-wide-width));
	max-width: var(--botsauto-wide-width);
	margin-inline: auto;
	float: none;
}

body.botsauto-template .botsauto-entry__content > .alignfull {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	float: none;
}

/*
 * Core media inside a top-level block that is not a BOTSAUTO block.
 * height: auto is not applied to SVG, iframes or anything inside a
 * BOTSAUTO section: those visuals set their own box.
 */
body.botsauto-template .botsauto-entry__content > :where(:not([class*="botsauto-"]):not([class*="wp-block-botsauto-"])) :where(img, video) {
	max-width: 100%;
	height: auto;
}

body.botsauto-template .botsauto-entry__content > :where(:not([class*="botsauto-"]):not([class*="wp-block-botsauto-"])) iframe {
	max-width: 100%;
}

body.botsauto-template .botsauto-entry__content > :where(.wp-block-table, .wp-block-code, pre) {
	max-width: 100%;
	overflow-x: auto;
}

/*
 * Explicit text measure. More specific than the default column, and
 * excluded from Wide, so a profile cannot widen it.
 */
body.botsauto-template .botsauto-entry__content > .botsauto-text-measure:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	--botsauto-column: var(--botsauto-text-width);
	width: min(100% - (2 * var(--botsauto-canvas-gutter)), var(--botsauto-text-width));
	max-width: var(--botsauto-text-width);
}

body.botsauto-template :focus-visible {
	outline: 3px solid var(--botsauto-pink);
	outline-offset: 3px;
}

body.botsauto-template .botsauto-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.botsauto-template .botsauto-skip-link:focus {
	z-index: 100000;
	inset-block-start: 0.75rem;
	inset-inline-start: var(--botsauto-canvas-gutter, 18px);
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	padding: 0.65rem 1rem;
	background-color: var(--botsauto-navy);
	color: #fff;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	outline: 3px solid var(--botsauto-pink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	body.botsauto-template {
		scroll-behavior: auto;
	}

	body.botsauto-template .botsauto-skip-link {
		transition: none;
	}
}

/*
 * Block editor preview. Inert until the editor script adds
 * botsauto-template to the canvas body. The public site does not have
 * .editor-styles-wrapper.
 */
body.botsauto-template .editor-styles-wrapper {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.botsauto-template .editor-styles-wrapper > .is-root-container {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.botsauto-template .editor-styles-wrapper .is-root-container > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	--botsauto-column: var(--botsauto-content-width);
	box-sizing: border-box;
	width: min(100% - (2 * var(--botsauto-canvas-gutter, var(--botsauto-gutter))), var(--botsauto-column));
	max-width: var(--botsauto-column);
	margin-inline: auto;
}

body.botsauto-template .editor-styles-wrapper .is-root-container > .alignwide {
	box-sizing: border-box;
	width: min(100% - (2 * var(--botsauto-canvas-gutter, var(--botsauto-gutter))), var(--botsauto-wide-width));
	max-width: var(--botsauto-wide-width);
	margin-inline: auto;
	float: none;
}

body.botsauto-template .editor-styles-wrapper .is-root-container > .alignfull {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	float: none;
}

body.botsauto-template .editor-styles-wrapper .is-root-container > .botsauto-text-measure:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	--botsauto-column: var(--botsauto-text-width);
	width: min(100% - (2 * var(--botsauto-canvas-gutter, var(--botsauto-gutter))), var(--botsauto-text-width));
	max-width: var(--botsauto-text-width);
}

body.botsauto-template .editor-styles-wrapper .is-root-container > :first-child {
	margin-block-start: 0;
}

body.botsauto-template .editor-styles-wrapper .is-root-container > :last-child {
	margin-block-end: 0;
}

/*
 * Profiles only change --botsauto-column. The width formula stays on the
 * base rule. Reading narrows ordinary text. Wide uses the configured wide
 * width and never a larger number. Full Canvas uses that cap for other
 * blocks and keeps ordinary text on the text measure. alignwide and
 * alignfull keep their own rules. One profile class is present at a time.
 */
body.botsauto-template.botsauto-layout--reading .botsauto-entry__content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, hr, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-separator):not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
body.botsauto-template.botsauto-layout--full .botsauto-entry__content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, hr, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-separator):not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
body.botsauto-template.botsauto-layout--reading .editor-styles-wrapper .is-root-container > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, hr, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-separator):not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
body.botsauto-template.botsauto-layout--full .editor-styles-wrapper .is-root-container > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, hr, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-separator):not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	--botsauto-column: var(--botsauto-text-width);
}

body.botsauto-template.botsauto-layout--wide .botsauto-entry__content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.botsauto-text-measure),
body.botsauto-template.botsauto-layout--wide .editor-styles-wrapper .is-root-container > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.botsauto-text-measure) {
	--botsauto-column: var(--botsauto-wide-width);
}

body.botsauto-template.botsauto-layout--full .botsauto-entry__content > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(:is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, hr, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-separator)),
body.botsauto-template.botsauto-layout--full .editor-styles-wrapper .is-root-container > :not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(:is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, hr, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-separator)) {
	--botsauto-column: var(--botsauto-wide-width);
}

/*
 * Density changes the vertical rhythm of generic canvas content only.
 * Standard has no rule, so the current spacing stays. BOTSAUTO blocks
 * and the homepage density are excluded. The first block stays flush.
 */
body.botsauto-template.botsauto-density--compact {
	--botsauto-flow-block: 0.65rem;
	--botsauto-flow-heading: 1rem;
}

body.botsauto-template.botsauto-density--editorial {
	--botsauto-flow-block: 1.05rem;
	--botsauto-flow-heading: 1.75rem;
}

body.botsauto-template.botsauto-density--spacious {
	--botsauto-flow-block: 1.5rem;
	--botsauto-flow-heading: 2.15rem;
}

body.botsauto-template.botsauto-density--compact .botsauto-entry__content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]),
body.botsauto-template.botsauto-density--editorial .botsauto-entry__content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]),
body.botsauto-template.botsauto-density--spacious .botsauto-entry__content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]),
body.botsauto-template.botsauto-density--compact .editor-styles-wrapper .is-root-container > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]),
body.botsauto-template.botsauto-density--editorial .editor-styles-wrapper .is-root-container > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]),
body.botsauto-template.botsauto-density--spacious .editor-styles-wrapper .is-root-container > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]) {
	margin-block: 0;
}

body.botsauto-template.botsauto-density--compact .botsauto-entry__content > :where(p, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--editorial .botsauto-entry__content > :where(p, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--spacious .botsauto-entry__content > :where(p, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--compact .editor-styles-wrapper .is-root-container > :where(p, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--editorial .editor-styles-wrapper .is-root-container > :where(p, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--spacious .editor-styles-wrapper .is-root-container > :where(p, ul, ol, blockquote, pre, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-pullquote, .wp-block-verse, .wp-block-preformatted, .wp-block-code, .wp-block-group):not([class*="botsauto-"]):not(:first-child) {
	margin-block-start: var(--botsauto-flow-block);
}

body.botsauto-template.botsauto-density--compact .botsauto-entry__content > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--editorial .botsauto-entry__content > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--spacious .botsauto-entry__content > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--compact .editor-styles-wrapper .is-root-container > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--editorial .editor-styles-wrapper .is-root-container > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):not([class*="botsauto-"]):not(:first-child),
body.botsauto-template.botsauto-density--spacious .editor-styles-wrapper .is-root-container > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):not([class*="botsauto-"]):not(:first-child) {
	margin-block-start: var(--botsauto-flow-heading);
}

/*
 * Editorial header. One component, three variants. The copy and the
 * image use the T1 widths already set on the body. Standard keeps both
 * on the content width. Reading narrows the title and summary to the
 * text width and lets the image stay on the content width. Wide keeps
 * the text on the content width and lets the image use the wide width.
 * Full Canvas keeps ordinary text on the text width and the image on
 * the wide width, which remains the configured cap.
 *
 * Feature may use the wide width for the image. Minimal keeps the image
 * on the same measure as the text. Green is unused: the header is navy
 * with a blue rule, and Feature adds one pink accent.
 */

body.botsauto-template .botsauto-article-preview,
body.botsauto-template .botsauto-article {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	min-width: 0;
	color: var(--botsauto-navy);
	font-family: Oswald, "Arial Narrow", Arial, sans-serif;
}

body.botsauto-template .botsauto-article {
	--botsauto-article-copy: var(--botsauto-content-width);
	--botsauto-article-media: var(--botsauto-content-width);
	--botsauto-article-title: clamp(2rem, 1.15rem + 2.8vw, 4.35rem);
	--botsauto-article-gap: clamp(0.85rem, 1.6vw, 1.25rem);
	--botsauto-article-media-gap: clamp(1.5rem, 3vw, 2.75rem);
	display: flow-root;
	padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem);
}

body.botsauto-template.botsauto-layout--reading .botsauto-article {
	--botsauto-article-copy: var(--botsauto-text-width);
	--botsauto-article-media: var(--botsauto-content-width);
}

body.botsauto-template.botsauto-layout--wide .botsauto-article {
	--botsauto-article-copy: var(--botsauto-content-width);
	--botsauto-article-media: var(--botsauto-wide-width);
}

body.botsauto-template.botsauto-layout--full .botsauto-article {
	--botsauto-article-copy: var(--botsauto-text-width);
	--botsauto-article-media: var(--botsauto-wide-width);
}

body.botsauto-template .botsauto-article.botsauto-article--editorial {
	--botsauto-article-title: clamp(2rem, 1.15rem + 2.8vw, 4.35rem);
}

body.botsauto-template .botsauto-article.botsauto-article--feature {
	--botsauto-article-media: var(--botsauto-wide-width);
	--botsauto-article-title: clamp(2.35rem, 1.2rem + 3.6vw, 5.15rem);
	--botsauto-article-gap: clamp(1rem, 2vw, 1.5rem);
	--botsauto-article-media-gap: clamp(2rem, 4vw, 3.5rem);
	background-color: color-mix(in srgb, var(--botsauto-navy) 5%, #fff);
	padding-block: clamp(2.75rem, 7vw, 5.75rem) clamp(1.5rem, 4vw, 3.25rem);
}

body.botsauto-template .botsauto-article.botsauto-article--minimal {
	--botsauto-article-media: var(--botsauto-article-copy);
	--botsauto-article-title: clamp(1.75rem, 1rem + 1.6vw, 2.65rem);
	--botsauto-article-gap: clamp(0.55rem, 1.2vw, 0.85rem);
	--botsauto-article-media-gap: clamp(1rem, 2vw, 1.5rem);
	padding-block: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem);
}

body.botsauto-template .botsauto-article__copy {
	box-sizing: border-box;
	width: min(100% - (2 * var(--botsauto-canvas-gutter, var(--botsauto-gutter))), var(--botsauto-article-copy));
	max-width: var(--botsauto-article-copy);
	min-width: 0;
	margin-inline: auto;
}

body.botsauto-template .botsauto-article--feature .botsauto-article__copy {
	border-inline-start: 3px solid var(--botsauto-blue);
	padding-inline-start: clamp(0.9rem, 2vw, 1.4rem);
}

body.botsauto-template .botsauto-article__mark {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	color: var(--botsauto-navy);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.botsauto-template .botsauto-article__rule {
	display: block;
	width: 2.25rem;
	height: 2px;
	background-color: var(--botsauto-blue);
}

body.botsauto-template .botsauto-article--minimal .botsauto-article__rule {
	width: 1rem;
}

body.botsauto-template .botsauto-article--feature .botsauto-article__rule {
	width: 2.75rem;
	background-color: var(--botsauto-pink);
}

body.botsauto-template .botsauto-article__category {
	margin: var(--botsauto-article-gap) 0 0;
	color: var(--botsauto-navy);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

body.botsauto-template .botsauto-article__title {
	margin: clamp(0.75rem, 1.5vw, 1.15rem) 0 0;
	color: var(--botsauto-navy);
	font-size: var(--botsauto-article-title);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 0.98;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

body.botsauto-template .botsauto-article--minimal .botsauto-article__title {
	letter-spacing: 0;
	line-height: 1.08;
}

body.botsauto-template .botsauto-article__summary {
	max-width: 42rem;
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	color: color-mix(in srgb, var(--botsauto-navy) 88%, #fff);
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	overflow-wrap: anywhere;
	text-transform: none;
}

body.botsauto-template .botsauto-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0;
	margin: clamp(1rem, 2vw, 1.35rem) 0 0;
	padding: 0;
	list-style: none;
	color: color-mix(in srgb, var(--botsauto-navy) 84%, #fff);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
}

body.botsauto-template .botsauto-article__meta li {
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
	max-width: 100%;
}

body.botsauto-template .botsauto-article__meta li:not(:last-child)::after {
	content: "·";
	margin-inline: 0.65rem;
	color: color-mix(in srgb, var(--botsauto-blue) 55%, var(--botsauto-navy));
}

body.botsauto-template .botsauto-article a {
	color: var(--botsauto-navy);
	text-decoration: none;
}

body.botsauto-template .botsauto-article a:hover {
	color: var(--botsauto-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

body.botsauto-template .botsauto-article__image {
	display: block;
	box-sizing: border-box;
	width: min(100% - (2 * var(--botsauto-canvas-gutter, var(--botsauto-gutter))), var(--botsauto-article-media));
	max-width: min(100%, var(--botsauto-article-media));
	height: auto;
	min-width: 0;
	margin-block-start: var(--botsauto-article-media-gap);
	margin-inline: auto;
}

body.botsauto-template .botsauto-article__image--16-9 {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

body.botsauto-template .botsauto-article__image--3-2 {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* T4: opt-in native Gutenberg typography. T1 remains responsible for spacing. */
body.botsauto-template.botsauto-native-type {
 --botsauto-type-body-size: 1.0625rem;
 --botsauto-type-line: 1.65;
 --botsauto-type-h1: 2.8rem;
 --botsauto-type-h2: 2.1rem;
 --botsauto-type-h3: 1.65rem;
 --botsauto-type-h4: 1.3rem;
 --botsauto-type-caption: .85rem;
}
body.botsauto-template.botsauto-native-type.botsauto-type--editorial { --botsauto-type-body-size: 1.125rem; --botsauto-type-line: 1.75; --botsauto-type-h1: 3.15rem; --botsauto-type-h2: 2.35rem; --botsauto-type-h3: 1.8rem; }
body.botsauto-template.botsauto-native-type.botsauto-type--compact { --botsauto-type-body-size: 1rem; --botsauto-type-line: 1.5; --botsauto-type-h1: 2.35rem; --botsauto-type-h2: 1.8rem; --botsauto-type-h3: 1.4rem; }
body.botsauto-template.botsauto-native-type.botsauto-type-responsive { --botsauto-type-h1: clamp(2rem, 1.35rem + 2.5vw, 3.15rem); --botsauto-type-h2: clamp(1.55rem, 1.2rem + 1.2vw, 2.35rem); --botsauto-type-h3: clamp(1.25rem, 1.08rem + .75vw, 1.8rem); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-paragraph, .wp-block-heading, .wp-block-list, .wp-block-quote, .wp-block-table, .wp-block-code, .wp-block-preformatted):not([class*="botsauto-"]) { font-family: var(--botsauto-font-body, Oswald, "Arial Narrow", Arial, sans-serif); overflow-wrap: anywhere; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-paragraph, .wp-block-list):not([class*="botsauto-"]) { font-size: var(--botsauto-type-body-size); line-height: var(--botsauto-type-line); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > .wp-block-heading:not([class*="botsauto-"]) { font-family: var(--botsauto-font-display, Oswald, "Arial Narrow", Arial, sans-serif); line-height: 1.16; font-weight: 500; text-wrap: balance; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > h1.wp-block-heading:not([class*="botsauto-"]) { font-size: var(--botsauto-type-h1); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > h2.wp-block-heading:not([class*="botsauto-"]) { font-size: var(--botsauto-type-h2); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > h3.wp-block-heading:not([class*="botsauto-"]) { font-size: var(--botsauto-type-h3); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > h4.wp-block-heading:not([class*="botsauto-"]) { font-size: var(--botsauto-type-h4); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(h5, h6).wp-block-heading:not([class*="botsauto-"]) { font-size: 1rem; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-paragraph, .wp-block-list, .wp-block-quote):not([class*="botsauto-"]) a { color: var(--botsauto-navy, #00306A); text-decoration: underline; text-underline-offset: .17em; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-paragraph, .wp-block-list, .wp-block-quote):not([class*="botsauto-"]) a:hover { color: var(--botsauto-blue, #008AD6); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-paragraph, .wp-block-list, .wp-block-quote):not([class*="botsauto-"]) a:focus-visible { outline: 3px solid var(--botsauto-blue, #008AD6); outline-offset: 3px; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > .wp-block-quote:not([class*="botsauto-"]) { border-inline-start: 3px solid var(--botsauto-blue, #008AD6); padding-inline-start: 1.2rem; font-size: var(--botsauto-type-body-size); line-height: var(--botsauto-type-line); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > .wp-block-table:not([class*="botsauto-"]) { max-width: 100%; overflow-x: auto; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > .wp-block-table:not([class*="botsauto-"]) :is(td, th) { padding: .65em .85em; border-color: color-mix(in srgb, var(--botsauto-navy, #00306A) 20%, transparent); }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-image, .wp-block-table):not([class*="botsauto-"]) figcaption { color: var(--botsauto-navy, #00306A); opacity: .8; font-size: var(--botsauto-type-caption); line-height: 1.5; }
body.botsauto-template.botsauto-native-type :where(.botsauto-entry__content, .editor-styles-wrapper .is-root-container) > :is(.wp-block-code, .wp-block-preformatted):not([class*="botsauto-"]) { overflow-x: auto; font-family: ui-monospace, monospace; font-size: .9rem; line-height: 1.55; }

/* T4.1: one level of native Group / Columns nesting. Direct-child chains
   prevent typography declarations leaking into BOTSAUTO block internals. */
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > .wp-block-group__inner-container > :is(.wp-block-paragraph, .wp-block-list),
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > :is(.wp-block-paragraph, .wp-block-list),
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-columns > .wp-block-column > :is(.wp-block-paragraph, .wp-block-list) {
 font-family: var(--botsauto-font-body, Oswald, "Arial Narrow", Arial, sans-serif);
 font-size: var(--botsauto-type-body-size);
 line-height: var(--botsauto-type-line);
 overflow-wrap: anywhere;
}
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > .wp-block-group__inner-container > .wp-block-heading,
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > .wp-block-heading,
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-columns > .wp-block-column > .wp-block-heading {
 font-family: var(--botsauto-font-display, Oswald, "Arial Narrow", Arial, sans-serif);
 line-height: 1.16;
 text-wrap: balance;
}
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > .wp-block-group__inner-container > h2.wp-block-heading,
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > h2.wp-block-heading,
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-columns > .wp-block-column > h2.wp-block-heading { font-size: var(--botsauto-type-h2); }
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > .wp-block-group__inner-container > h3.wp-block-heading,
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-group > h3.wp-block-heading,
body.botsauto-template.botsauto-native-type .botsauto-entry__content > .wp-block-columns > .wp-block-column > h3.wp-block-heading { font-size: var(--botsauto-type-h3); }

/* T6: document-scoped optional widget layout, no theme sidebar dependency. */
body.botsauto-template .botsauto-document-layout {
 --botsauto-sidebar-width: 30%;
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, var(--botsauto-sidebar-width));
 gap: clamp(1.5rem, 3vw, 3rem);
 align-items: start;
 width: min(100%, var(--botsauto-wide-width, 1400px));
 margin-inline: auto;
}
body.botsauto-template .botsauto-document-layout--compact { --botsauto-sidebar-width: 24%; }
body.botsauto-template .botsauto-document-layout--wide { --botsauto-sidebar-width: 36%; }
body.botsauto-template .botsauto-document-layout--left { grid-template-columns: minmax(0, var(--botsauto-sidebar-width)) minmax(0, 1fr); }
body.botsauto-template .botsauto-document-layout--left .botsauto-document-layout__main { grid-column: 2; }
body.botsauto-template .botsauto-document-layout--left .botsauto-document-layout__sidebar { grid-column: 1; grid-row: 1; }
body.botsauto-template .botsauto-document-layout__main,
body.botsauto-template .botsauto-document-layout__sidebar { min-width: 0; }
body.botsauto-template .botsauto-document-layout__sidebar {
 padding: 1.5rem;
 border-top: 3px solid #008AD6;
 background: color-mix(in srgb, #008AD6 6%, white);
 color: #00306A;
 overflow-wrap: anywhere;
}
body.botsauto-template .botsauto-document-layout__sidebar :where(img,iframe,video,table) { max-width: 100%; }
body.botsauto-template .botsauto-document-layout__sidebar :where(a) { text-decoration: underline; text-underline-offset: .16em; }
body.botsauto-template .botsauto-document-layout__sidebar :where(a:focus-visible) { outline: 3px solid #008AD6; outline-offset: 3px; }
@media (min-width: 981px) {
 body.botsauto-template .botsauto-document-layout--sticky .botsauto-document-layout__sidebar { position: sticky; top: var(--botsauto-sticky-offset, 6rem); }
}
@media (max-width: 980px) {
 body.botsauto-template .botsauto-document-layout { display: flex; flex-direction: column; }
 body.botsauto-template .botsauto-document-layout__main,
 body.botsauto-template .botsauto-document-layout__sidebar { width: 100%; }
 body.botsauto-template .botsauto-document-layout__sidebar { position: static; }
}

/* T6.1: sidebar stays its allotted grid track even with full-width blocks. */
body.botsauto-template .botsauto-document-layout__sidebar {
 container: botsauto-document-sidebar / inline-size;
 min-width: 0;
 max-width: 100%;
 box-sizing: border-box;
}
body.botsauto-template .botsauto-document-layout__sidebar :where(.wp-block-botsauto-founder.botsauto-founder) {
 width: 100%;
 max-width: 100%;
 min-width: 0;
 margin: 0;
 box-sizing: border-box;
 padding-block: clamp(1.1rem, 5cqw, 1.8rem);
}
body.botsauto-template .botsauto-document-layout__sidebar :where(.wp-block-botsauto-founder .botsauto-shell) {
 width: 100%;
 min-width: 0;
 max-width: 100%;
 box-sizing: border-box;
}
body.botsauto-template .botsauto-document-layout__sidebar :where(.wp-block-botsauto-founder .botsauto-founder__layout) {
 min-width: 0;
}

/*
 * T6.2 — Sidebar narrow-block contract.
 *
 * A sidebar is not a full-width canvas. Wide/full block alignment, interior
 * shells and large visual components must fit the allocated grid track.
 * These rules deliberately affect only BOTSAUTO document sidebars.
 */
body.botsauto-template .botsauto-document-layout {
 min-width: 0;
 grid-template-columns: minmax(0, 1fr) minmax(0, var(--botsauto-sidebar-width));
}
body.botsauto-template .botsauto-document-layout__sidebar {
 inline-size: 100%;
 min-inline-size: 0;
 max-inline-size: 100%;
 overflow-x: clip;
 container: botsauto-document-sidebar / inline-size;
}
body.botsauto-template .botsauto-document-layout__sidebar > *,
body.botsauto-template .botsauto-document-layout__sidebar .wp-block-botsauto-sidebar-content,
body.botsauto-template .botsauto-document-layout__sidebar .wp-block-botsauto-sidebar-content > * {
 box-sizing: border-box;
 min-inline-size: 0;
 max-inline-size: 100%;
}
body.botsauto-template .botsauto-document-layout__sidebar :is(.alignfull, .alignwide, .wp-block-botsauto-founder, .wp-block-botsauto-verankeringen) {
 box-sizing: border-box;
 inline-size: 100%;
 max-inline-size: 100%;
 min-inline-size: 0;
 margin-inline: 0;
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-shell {
 box-sizing: border-box;
 inline-size: 100%;
 max-inline-size: 100%;
 min-inline-size: 0;
 margin-inline: 0;
}
/* Founder: the visual and copy share the same narrow column, even if old
 * media-query CSS or a theme's alignfull rules are still in the cascade. */
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-founder__layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: clamp(.8rem, 4cqw, 1.3rem);
}
body.botsauto-template .botsauto-document-layout__sidebar .wp-block-botsauto-founder.botsauto-founder {
 padding-block: clamp(1rem, 5cqw, 1.6rem);
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-founder :is(.botsauto-founder__visual, .botsauto-founder__copy) {
 min-inline-size: 0;
 max-inline-size: 100%;
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-founder :is(.botsauto-founder__figure, .botsauto-founder__fallback, .botsauto-founder__placeholder) {
 inline-size: 100%;
 max-inline-size: min(100%, 20rem);
 aspect-ratio: 1;
 margin-inline: auto;
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-founder h2.botsauto-founder__title {
 font-size: clamp(1.3rem, 6cqw, 1.8rem);
 overflow-wrap: anywhere;
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-founder p.botsauto-founder__body {
 font-size: .95rem;
 overflow-wrap: anywhere;
}
/* Verankeringen: this block has a container-aware track already, but its
 * page-sized title, panel padding and track details need a sidebar preset. */
body.botsauto-template .botsauto-document-layout__sidebar .wp-block-botsauto-verankeringen.botsauto-verankeringen {
 padding-block: clamp(.9rem, 4cqw, 1.6rem);
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-verankeringen h2.botsauto-verankeringen__title {
 font-size: clamp(1.3rem, 6cqw, 1.85rem);
 overflow-wrap: anywhere;
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-verankeringen ol.botsauto-verankeringen__track {
 grid-template-columns: minmax(0, 1fr);
}
body.botsauto-template .botsauto-document-layout__sidebar .botsauto-verankeringen :is(.botsauto-verankeringen__slot, .botsauto-verankeringen__panel, .botsauto-verankeringen__architecture) {
 min-inline-size: 0;
 max-inline-size: 100%;
 overflow-wrap: anywhere;
}

/* T7.5: Regiemodel (including individual sub-blocks) must never enlarge
 * a T6 sidebar. Do not affect full-width instances outside the sidebar. */
body.botsauto-template .botsauto-document-layout__sidebar :is(
 .wp-block-botsauto-regiemodel,
 .botsauto-regie-part,
 .wp-block-botsauto-regiemodel-samenhang,
 .wp-block-botsauto-speed-paradox
) {
 box-sizing: border-box;
 inline-size: 100%;
 min-inline-size: 0;
 max-inline-size: 100%;
 margin-inline: 0;
}
body.botsauto-template .botsauto-document-layout__sidebar :is(
 .botsauto-regiemodel__document,
 .botsauto-regiemodel__samenhang,
 .botsauto-shell
) {
 box-sizing: border-box;
 min-inline-size: 0;
 max-inline-size: 100%;
}