/**
 * Shared components used by the theme chrome AND by blocks (the block plugin can be
 * deactivated, these must survive): container, section scheme, flow context, buttons,
 * eyebrows, tags, benefit lists. Block-only shared pieces (quote card, media, reel,
 * carousel, reveal) live in the plugin (custom-blocks-levels/assets/css/shared.css).
 *
 * Oracle sources (universal.css): .ct-section-inner-wrap, .bg-default, .bg-invert,
 * .bg-default-gradient, .mb-100, .btn, .btn--with-icon, .btn--large, .link--witth-icon,
 * .label, .larndmark, .teal, .label--bg + .bg-*, .benefit-list--2026 (+ colours).
 * Markup conventions: docs/FOUNDATION.md.
 */

/* CASCADE NOTE: WordPress 6.9 hoists block stylesheets (style.css of every block and
   lvl-blocks-shared) into <head> BEFORE the theme stylesheets. Overridable defaults below
   (container, section padding) therefore use :where() (specificity 0), so a block's own
   single-class rule always wins regardless of order. Modifiers keep normal specificity. */

/* ---------- Container (= .ct-section-inner-wrap without the vertical padding) ---------- */
/* NOT a size container: tokens with cqw stay viewport based (tokens.css). */
:where(.lvl-container) {
	width: 100%;
	max-width: var(--lvl-container-max);
	margin-inline: auto;
	padding-inline: var(--lvl-container-pad);
}

.lvl-container--full { max-width: 100%; }
.lvl-container--case-grid { max-width: var(--lvl-width-case-grid); }

/* Inner width limits (Oxygen w-1000 / w-700 / max-width-text): put on an element
   inside the container. */
.lvl-narrow { width: 100%; max-width: var(--lvl-width-narrow); }
.lvl-narrow--700 { max-width: var(--lvl-width-700); }
.lvl-narrow--text { max-width: var(--lvl-width-text); }

/* ---------- Section ---------- */
/* <section class="lvl-section lvl-<slug> [lvl-section--bg-*] [lvl-section--flow|none]">
     <div class="lvl-container">…</div></section>
   Vertical rhythm = inner wrap padding (--base-100) on the section itself. */
:where(.lvl-section) {
	padding-block: var(--lvl-section-pad);
}

.lvl-section--bg-default {
	background-color: var(--lvl-color-bg);
}

.lvl-section--bg-invert {
	background-color: var(--lvl-color-text);
	color: var(--lvl-color-bg);
}

.lvl-section--bg-invert :is(h1, h2, h3, h4, h5, h6) {
	color: var(--lvl-color-bg);
}

/* .bg-default-gradient: a 1px fade from the page colour (hides the grid line under
   the header). */
.lvl-section--bg-gradient {
	background-image: linear-gradient(var(--lvl-color-bg), transparent 1px);
}

/* spacing = flow: no padding, the block keeps distance with margin (Oxygen .mb-100). */
.lvl-section--flow {
	margin-bottom: var(--lvl-space-100);
	padding-block: 0;
}

/* spacing = none: no padding, no margin. */
.lvl-section--none {
	padding-block: 0;
}

/* ---------- Flow context (case + blog templates wrap the_content()) ---------- */
/* <div class="lvl-flow lvl-container">the_content()</div>: the template provides the
   container, the blocks inside drop their own container width and section padding. */
.lvl-flow .lvl-container {
	max-width: none;
	padding-inline: 0;
}

.lvl-flow .lvl-section {
	padding-block: 0;
}

.lvl-flow--narrow {
	max-width: calc(var(--lvl-width-narrow) + 2 * var(--lvl-container-pad));
}

/* ---------- Buttons ---------- */
/* .lvl-btn            pill (Oxygen .btn)
   .lvl-btn--icon      pill + trailing arrow (.btn--with-icon)
   .lvl-btn--large     borderless pill with a leading image (footer CTA, .btn--large)
   .lvl-btn--text      text link + arrow (.link--witth-icon)
   .lvl-btn__icon      the arrow svg (16px)
   .lvl-btn__note      small note under a button (.text--xs) */
.lvl-btn {
	display: inline-flex;
	flex-wrap: wrap; /* Oxygen .ct-link: a label wider than the button pushes the arrow to the next line */
	align-items: center;
	justify-content: center;
	padding: 0.62rem 1.25rem;
	border: 1px solid var(--lvl-color-violet);
	border-radius: var(--lvl-radius-btn);
	background-color: var(--lvl-color-text);
	color: var(--lvl-color-bg);
	font-family: var(--lvl-font-light);
	font-size: var(--lvl-fs-body);
	font-weight: var(--lvl-fw-medium);
	letter-spacing: var(--lvl-ls-button);
	line-height: var(--lvl-lh-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.lvl-btn:hover {
	box-shadow: var(--lvl-shadow-glow);
	color: var(--lvl-color-bg);
}

.lvl-btn--icon,
.lvl-btn--large {
	gap: var(--lvl-space-xs);
}

.lvl-btn__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.lvl-btn--large {
	padding-inline: 1rem;
	border: 0;
	border-radius: var(--lvl-radius-pill);
	background-color: var(--lvl-color-bg);
	color: var(--lvl-color-text);
}

.lvl-btn--large:hover {
	color: var(--lvl-color-text);
}

.lvl-btn--text {
	display: inline-flex;
	align-items: center;
	gap: 0.62rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--lvl-color-text);
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

.lvl-btn--text:hover {
	box-shadow: none;
	color: var(--lvl-color-text);
	text-decoration: underline;
}

.lvl-btn__note {
	margin: 0;
	font-size: var(--lvl-fs-xs);
}

/* ---------- Eyebrows (text above a headline) ---------- */
.lvl-eyebrow {
	margin: 0;
	font-family: var(--lvl-font-medium);
	font-weight: var(--lvl-fw-medium);
	text-transform: uppercase;
}

/* .label */
.lvl-eyebrow--label {
	font-size: var(--lvl-fs-xs);
	letter-spacing: var(--lvl-ls-label);
	line-height: normal;
}

/* .larndmark */
.lvl-eyebrow--landmark {
	font-size: var(--lvl-fs-base);
	letter-spacing: var(--lvl-ls-label);
}

@media (max-width: 767px) {
	.lvl-eyebrow--landmark {
		font-size: var(--lvl-fs-sm);
	}
}

/* .teal */
.lvl-eyebrow--teal {
	color: var(--lvl-color-teal);
}

/* The global "label" look for other elements (footer copyright, card labels). */
.lvl-label {
	font-family: var(--lvl-font-medium);
	font-size: var(--lvl-fs-xs);
	font-weight: var(--lvl-fw-medium);
	letter-spacing: var(--lvl-ls-label);
	line-height: normal;
	text-transform: uppercase;
}

/* ---------- Tags (pills: .label.label--bg + .bg-<colour>) ---------- */
.lvl-tag {
	display: inline-block;
	padding: 0.15rem 0.62rem;
	border-radius: var(--lvl-radius-label);
	color: var(--lvl-color-black-brand);
	font-family: var(--lvl-font-medium);
	font-size: var(--lvl-fs-xs);
	font-weight: var(--lvl-fw-medium);
	letter-spacing: var(--lvl-ls-label);
	line-height: normal;
	text-transform: uppercase;
}

.lvl-tag--violet,
.lvl-tag--primary { background-color: var(--lvl-color-violet); }
.lvl-tag--pink { background-color: var(--lvl-color-pink); }
.lvl-tag--yellow { background-color: var(--lvl-color-yellow); }
.lvl-tag--green { background-color: var(--lvl-color-green); }
.lvl-tag--orange { background-color: var(--lvl-color-orange); }
.lvl-tag--teal { background-color: var(--lvl-color-teal); }

/* .label--bg-services: inverted pill */
.lvl-tag--services {
	background-color: var(--lvl-color-text);
	color: var(--lvl-color-bg);
}

/* ---------- Benefit lists (.benefit-list.benefit-list--2026) ---------- */
/* <ul class="lvl-benefits lvl-benefits--violet|pink|yellow [lvl-benefits--negative]"> */
.lvl-benefits {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvl-benefits li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 1.875rem;
	margin-bottom: 1rem;
	padding-left: 3.3125rem; /* 53px */
	font-weight: var(--lvl-fw-light);
	line-height: 1;
}

.lvl-benefits li::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 2.125rem;  /* 34px */
	height: 1.4375rem; /* 23px */
	background-color: currentColor;
	content: "";
	transform: translateY(-50%);
	-webkit-mask: var(--lvl-icon-check) no-repeat center / contain;
	mask: var(--lvl-icon-check) no-repeat center / contain;
}

.lvl-benefits strong {
	font-family: var(--lvl-font-medium);
	font-weight: 600;
	line-height: 1.5;
}

.lvl-benefits--pink li::before { background-color: var(--lvl-color-brand-rose); }
.lvl-benefits--violet li::before { background-color: var(--lvl-color-brand-violet); }
.lvl-benefits--yellow li::before { background-color: var(--lvl-color-brand-yellow); }

.lvl-benefits--negative li::before {
	width: 1.875rem;
	height: 1.875rem;
	background-color: var(--lvl-color-orange);
	-webkit-mask-image: var(--lvl-icon-x);
	mask-image: var(--lvl-icon-x);
}

/* ---------- Core block styles (registered in functions.php, chosen in the editor) ----------
   Table "Eingerückt, große Kopfzeile" (is-style-lvl-inset): oracle post
   /erstellung-von-barrierefreien-pdfs had an <h3> inside each <th> and a figure with the
   browser default margins (20px above and below, 40px at the sides) plus an empty
   paragraph after the table (52px). Valid core/table markup with the same rendering:
   header cells in the H3 look, 40px inset, 72px below. */
.wp-block-table.is-style-lvl-inset {
	margin: 1.25rem 2.5rem 4.5rem;
}

.wp-block-table.is-style-lvl-inset th {
	padding: 0.625rem; /* 0.5em of the 20px cell text, as in the oracle (not of the 32px heading) */
	font-family: var(--lvl-font-medium);
	font-size: var(--lvl-fs-h3);
	font-weight: var(--lvl-fw-light);
	line-height: var(--lvl-lh-h3);
	text-align: left;
}

/* Paragraph "Einleitung" (is-style-lvl-intro): the oracle's intro rich text (.mb-25) keeps
   25px (1.56rem) to the next block instead of the 20px of running text. */
p.is-style-lvl-intro {
	margin-bottom: 1.56rem;
}

/* Separator "Abschnittswechsel" (is-style-lvl-section-break): the core separator look of
   the oracle (2px grey top border over the 1px rule, 3px in all) followed by the space
   of one empty H2 line, which the oracle had as an empty <h2> after the rule. */
hr.wp-block-separator.is-style-lvl-section-break {
	box-sizing: content-box; /* 1px rule + 2px border = 3px, as in the oracle */
	border-top: 2px solid var(--lvl-color-rule);
	margin-bottom: calc(1.0625rem + var(--lvl-fs-h2) * var(--lvl-lh-h2));
}

/* Quote (core/quote, pages and posts) and preformatted text (core/preformatted, posts):
   allowed so a paste from Word or Google Docs that contains a blockquote or pre keeps its
   structure. No oracle counterpart: running text like core/paragraph (same font, size,
   1em rhythm), set off by a 2px violet rule; the source line (cite) in the small size. */
.wp-block-quote {
	margin: 0 0 1em;
	padding-left: var(--lvl-space-20);
	border-left: 2px solid var(--lvl-color-violet);
}

.wp-block-quote > :first-child {
	margin-top: 0;
}

.wp-block-quote > :last-child {
	margin-bottom: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--lvl-space-xs);
	font-size: var(--lvl-fs-xs);
	font-style: normal;
}

.wp-block-preformatted {
	margin: 0 0 1em;
	overflow-x: auto;
	font-family: ui-monospace, monospace;
	font-size: var(--lvl-fs-base);
	white-space: pre-wrap;
}

/* ---------- Password prompt (protected pages, inc/password-form.php) ----------
   Live shows snippet #46's bare form; here it is a section in the site look: H1, hint,
   label, a pill input and the theme button side by side (stacked below 480px). */
.lvl-password__inner {
	max-width: var(--lvl-width-700);
}

.lvl-password__title {
	margin: 0 0 var(--lvl-space-40);
	font-size: var(--lvl-fs-h1);
	line-height: var(--lvl-lh-h2);
}

.lvl-password__hint {
	margin: 0 0 var(--lvl-space-20);
}

.lvl-password__label {
	display: block;
	margin-bottom: var(--lvl-space-xs);
	font-family: var(--lvl-font-medium);
	font-size: var(--lvl-fs-xs);
	letter-spacing: var(--lvl-ls-label);
	text-transform: uppercase;
}

.lvl-password__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lvl-space-xs);
}

.lvl-password__input {
	flex: 1 1 15rem;
	min-width: 0;
	padding: 0.62rem 1.25rem;
	border: 1px solid var(--lvl-color-violet);
	border-radius: var(--lvl-radius-btn);
	background-color: var(--lvl-color-bg);
	color: var(--lvl-color-text);
	font: inherit;
	line-height: var(--lvl-lh-tight);
}

.lvl-password__input::placeholder {
	color: currentColor;
	opacity: 0.7;
}

.lvl-password__input:focus-visible {
	outline: 2px solid var(--lvl-color-violet);
	outline-offset: 2px;
}