/* Base design tokens + typography, extracted from the current site's
   reference snapshot (see /reference-snapshot/). Values are real, not
   approximated: colors pulled from the inline `.style-color-*-bg` /
   `.text-accent-color` rules, font family from the Glober @font-face. */

:root {
	--kb-color-dark: #1e2225;
	--kb-color-darker: #141618;
	--kb-color-gray-mid: #303133;
	--kb-color-gray-light: #f7f7f7;
	--kb-color-gray-lighter: #eaeaea;
	--kb-color-gray: #dddddd;
	--kb-color-gray-text: #777777;
	--kb-color-white: #ffffff;
	--kb-color-accent: #ffce1f;
	--kb-color-teal: #0cb4ce;

	--kb-font-family: 'Glober', -apple-system, BlinkMacSystemFont, sans-serif;
	--kb-container-width: 1400px;
	--kb-container-width-narrow: 1200px;
	--kb-container-width-medium: 1000px;
	--kb-container-width-narrower: 900px;
	--kb-container-width-narrowest: 800px;

	/* Standard top spacing for the start of a major section, site-wide.
	   Bottom/horizontal padding still varies per section by design — this
	   is specifically about the gap a section opens with. */
	--kb-space-section-top: 120px;

	/* Standard corner rounding for card-style tiles (not buttons — those
	   keep their own 4px). Explicitly no box-shadow on cards site-wide. */
	--kb-radius-card: 5px;
}

* {
	box-sizing: border-box;
}

/* WP core's block-library CSS (which normally provides this) isn't enqueued
   under the modern per-block asset loading, so the constrained-layout rule
   is replicated here to make theme.json's contentSize/wideSize effective. */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size, var(--kb-container-width-narrow));
	margin-left: auto;
	margin-right: auto;
}

.is-layout-constrained > .alignwide {
	max-width: var(--wp--style--global--wide-size, var(--kb-container-width));
}

.is-layout-constrained > .alignfull {
	max-width: none;
}

/* Same reasoning as the constrained-layout rule above: core block-library
   CSS normally keeps images from overflowing their column, replicated here
   as a safety default for any wp:image block without its own sizing rule. */
img {
	max-width: 100%;
	height: auto;
}

/* Smooth in-page jumps for the anchor CTAs on the landing pages. This
   previously lived in a per-post WPBakery "custom CSS" meta field; it
   belongs to the theme, not to a page builder's post meta. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--kb-font-family);
	font-weight: 500;
	color: var(--kb-color-dark);
	background: var(--kb-color-white);
	margin: 0;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kb-font-family);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.5rem; }
h5 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

a {
	color: inherit;
}

/* First blockquote use in the theme (/gender-struggle-dieser-kundin/'s
   genderleicht.de citation) — production runs it plain (not italic),
   with a left accent-yellow rule and no quotation marks/background of
   its own (the containing section supplies the gray background). */
blockquote,
.wp-block-quote {
	border-left: 2px solid var(--kb-color-accent);
	padding: 0 0 0 36px;
	margin: 0;
	font-size: 18px;
	font-style: normal;
	color: var(--kb-color-dark);
}

/* First code-block use in the theme (/wie-aendert-man-die-url-von-
   localhost-.../'s hosts-file/vhosts-conf snippets) — production runs
   it as a plain dark message box in the site's own font, not a
   monospace code style (measured via getComputedStyle: Glober/15px,
   --kb-color-dark background, white text, 4px radius, 18px padding).
   pre-wrap + break-word since the snippets aren't pre-formatted for a
   fixed line width. */
.wp-block-code {
	background: var(--kb-color-dark);
	color: var(--kb-color-white);
	font-family: var(--kb-font-family);
	font-size: 15px;
	padding: 18px;
	border-radius: 4px;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.kb-container {
	max-width: var(--kb-container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.kb-container--narrow {
	max-width: var(--kb-container-width-narrow);
}

.kb-container--medium {
	max-width: var(--kb-container-width-medium);
}

.kb-container--narrower {
	max-width: var(--kb-container-width-narrower);
}

/* Section background/text color utilities — matches the site's actual
   palette (see comment above), usable as block/group className additions. */
.has-kb-dark-bg { background-color: var(--kb-color-dark); color: var(--kb-color-white); }
.has-kb-gray-light-bg { background-color: var(--kb-color-gray-light); }
.has-kb-white-bg { background-color: var(--kb-color-white); }
.has-kb-accent-color { color: var(--kb-color-accent); }
.has-kb-accent-border { border-color: var(--kb-color-accent) !important; }

.wp-block-separator.is-style-kb-accent,
.kb-separator-accent {
	border: none;
	border-top: 3px solid var(--kb-color-accent);
	width: 60px;
	margin: 16px auto 24px;
	opacity: 1;
}

/* Left-aligned variant with a wider bottom gap — /wordpress-mit-knorke/'s
   "Services rundum sorglos" heading sits flush left, not centered, and
   production runs 40px down to the icon grid instead of the shared 24px. */
.wp-block-separator.is-style-kb-accent.kb-accent--left-40 {
	margin: 16px 0 40px;
}

/* Centered variant with the same wider 40px bottom gap — the shared
   default's 24px was too tight for /magento-agentur/magento-support/'s
   "Magento Support Bündel" heading. */
.wp-block-separator.is-style-kb-accent.kb-accent--bottom-40 {
	margin-bottom: 40px;
}

.kb-eyebrow {
	color: var(--kb-color-accent);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
	font-size: 0.9rem;
	margin-bottom: 0.5em;
}

/* Gray variant — production sometimes runs the eyebrow in its plain
   text-gray custom color instead of the site's yellow accent (e.g.
   /cases/furore-werbung/, hex #777777, matches --kb-color-gray-text). */
.kb-eyebrow--gray {
	color: var(--kb-color-gray-text);
}

/* Buttons — matches the site's rounded, solid-fill button pattern.
   Three sizes, S is the default (no modifier class needed): S on the
   homepage, M for landing-page hero CTAs, L only for the rare, very large
   special-case button. Opt into M/L with .kb-btn--m / .kb-btn--l. */
.wp-block-button__link,
.kb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 4px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--kb-color-dark);
	color: var(--kb-color-white);
	border: 2px solid var(--kb-color-dark);
	transition: background 0.2s ease, color 0.2s ease;

	/* Size S (default) */
	font-size: 12px;
	padding: 12px 24px;
}

/* Any icon (mail, arrow, etc.) placed directly inside a button link —
   without this, a raw inline <svg> with no width/height renders at its
   intrinsic viewBox size, which can blow the button up to a huge square. */
.wp-block-button__link svg,
.kb-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* .kb-btn--m / .kb-btn--l as the block's "Additional CSS class" land on the
   outer .wp-block-button wrapper, not the <a> itself — style as a
   descendant, matching how every other per-section button override in
   this theme already targets .wp-block-button__link. Also cover .kb-btn
   directly, for non-block button markup. */
.kb-btn--m .wp-block-button__link,
.kb-btn--m.kb-btn {
	font-size: 16px;
	padding: 16px 32px;
}

.kb-btn--l .wp-block-button__link,
.kb-btn--l.kb-btn {
	font-size: 22px;
	padding: 20px 40px;
}

/* Full-width button (Uncode's vc_button wide="yes") — fills its column
   instead of shrink-wrapping to the label, for side-by-side equal-width
   button pairs (e.g. a hero's phone/contact CTA row). */
.kb-btn--block,
.kb-btn--block .wp-block-button__link {
	width: 100%;
}

.kb-btn--block .wp-block-button__link {
	justify-content: center;
}

.wp-block-button__link:hover,
.kb-btn:hover {
	background: transparent;
	color: var(--kb-color-dark);
}

/* Production runs this variant identical to the plain solid button in
   its normal state (dark fill, white text, dark border) — only on
   hover does it drop to transparent/dark-text, which the shared
   .wp-block-button__link:hover rule below already provides. Measured
   on both pages currently using is-style-outline
   (/wordpress-support/, /wordpress-agentur/). */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--kb-color-dark);
	color: var(--kb-color-white);
	border-color: var(--kb-color-dark);
}

/* Inverted button — for a solid-dark section background (e.g.
   /magento-agentur/magento-sprachpaket/'s download buttons on
   .kb-section--dark): white fill/dark text normally, dropping to
   transparent/white text on hover (mirrors is-style-outline above, just
   with the light/dark roles swapped). Own hover rule needed since the
   shared .wp-block-button__link:hover above assumes the default dark-fill
   button and would leave dark-on-transparent text here instead. */
.wp-block-button.kb-btn--light .wp-block-button__link {
	background: var(--kb-color-white);
	color: var(--kb-color-dark);
	border-color: var(--kb-color-white);
}

.wp-block-button.kb-btn--light .wp-block-button__link:hover {
	background: transparent;
	color: var(--kb-color-white);
	border-color: var(--kb-color-white);
}

/* Accent (yellow) fill — /leadinfo/'s affiliate button, measured on
   production: solid --kb-color-accent fill with WHITE text (not the
   usual dark-on-yellow pairing used elsewhere on the site, but that's
   what production actually runs, confirmed via getComputedStyle). */
.wp-block-button.kb-btn--accent .wp-block-button__link {
	background: var(--kb-color-accent);
	color: var(--kb-color-white);
	border-color: var(--kb-color-accent);
}

.wp-block-button.kb-btn--accent .wp-block-button__link:hover {
	background: transparent;
	color: var(--kb-color-accent);
}

/* Stacks a run of individually-wrapped button blocks with a fixed gap,
   for a column of several buttons that aren't siblings inside one shared
   .wp-block-buttons wrapper (each has its own, so a shared gap/margin on
   the wrapper wouldn't reach). !important needed: WP core prints its own
   ".wp-block-buttons > .wp-block-button { margin: 0 }" reset with equal
   specificity (two classes via the child combinator) — confirmed via
   CSS.getMatchedStylesForNode that it wins the tie without this. */
.kb-btn--stack-20 {
	margin-bottom: 20px !important;
}

/* WP core's inlined block-library CSS gives .wp-block-image.aligncenter
   text-align:center (centers inline content) but never centers the
   figure's own block-level box — a resized centered image (display:table,
   shrink-to-fit) was sitting flush left instead. */
.wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}