/* Shared readable component contracts. Palette lives only in design-tokens.css.
 * This layer owns generic element behavior, states and reflow, not page design.
 */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { background: var(--bg-page); color: var(--text-secondary); }
main { min-inline-size: 0; }
[hidden] { display: none !important; }
img { max-inline-size: 100%; block-size: auto; }
.single-content figure { margin: 0 0 1em; }
/* Native accessibility utility formerly supplied by the exported editor CSS. */
.screen-reader-text:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
button, input, select, textarea { font-family: inherit; }
button, input:is([type="button"], [type="reset"]) { color: var(--text-primary); background: var(--bg-interactive); border: 1px solid var(--border-strong); }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button, select { touch-action: manipulation; }
::selection { background: var(--selection-bg); color: var(--selection-text); }

/* Native flow, resilient translated content and a shared editorial scale. */
body:not(.enterprise-home) { font-size: var(--type-body); line-height: var(--leading-body); }
body:not(.enterprise-home) main :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-primary); line-height: var(--leading-heading); overflow-wrap: anywhere;
}
/* Defaults have low specificity: a semantic H2 used as a card title must retain
 * its component typography role, not become a full section-sized heading. */
:where(body:not(.enterprise-home) main) h1 { font-size: var(--type-h1); }
:where(body:not(.enterprise-home) main) h2 { font-size: var(--type-h2); }
:where(body:not(.enterprise-home) main) h3 { font-size: var(--type-h3); }
body:not(.enterprise-home) .section-lead { font-size: var(--type-body-large); line-height: var(--leading-body); }
body:not(.enterprise-home) :is(.single-content, .entry-content, .cap-prose, .capability-body) { max-inline-size: var(--measure-prose); }
main :is(p, li, h1, h2, h3, h4, label, legend, a, .chip-tag) { overflow-wrap: anywhere; }
html[lang="de"] main :is(h1, h2, h3, p, li) { hyphens: auto; }
html[lang="ar"] body { font-family: var(--font-arabic); }
html[lang="ar"] main :is(h1, h2, h3, .section-eyebrow, .rb-legend) { letter-spacing: 0; }
html[lang="ar"] main :is(p, li, label, input, select, textarea) { line-height: var(--leading-body); }
bdi, [dir="ltr"] { unicode-bidi: isolate; }
:is(.rb-row, .rb-field, .rb-fieldset, .rb-preview-wrap, .rb-preview-card) { min-inline-size: 0; }

/* Inputs always declare both surfaces and text, including platform widgets. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"])),
select,
textarea,
.rb-input,
.rb-select,
.rb-textarea {
  background-color: var(--bg-surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  min-block-size: var(--target-size);
  max-inline-size: 100%;
  font-size: var(--type-body);
  line-height: var(--leading-label);
  opacity: 1;
  -webkit-text-fill-color: var(--text-primary);
}
input::placeholder, textarea::placeholder, .rb-input::placeholder, .rb-textarea::placeholder {
  color: var(--text-muted); opacity: 1; -webkit-text-fill-color: var(--text-muted);
}
select option, select optgroup { color: var(--text-primary); background: var(--bg-surface-elevated); }
input:is([type="checkbox"], [type="radio"]) { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--accent-fill); }
input:is([type="checkbox"], [type="radio"]) + label { min-block-size: var(--target-size); }
label, .rb-label, .cf7-label { color: var(--text-primary); font-size: var(--type-label); line-height: var(--leading-label); }
.rb-validation-hint { color: var(--text-secondary); }
.rb-direct-contact a { display: inline-flex; align-items: center; min-block-size: var(--target-size); }
.ui-form-check { display: grid; justify-items: start; gap: 1rem; }
.rb-form .ui-form-check .ui-notice { margin: 0; }
body:not(.enterprise-home) main .rb-preview-heading { font-size: var(--type-label); }
fieldset { min-inline-size: 0; }
legend { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
input:autofill { background-color: var(--bg-interactive); color: var(--text-primary); }
input:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); box-shadow: 0 0 0 1000px var(--bg-interactive) inset; }

/* Focus is independent of hover and remains visible in every color state. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .rb-input:focus, .rb-select:focus, .rb-textarea:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: none;
}
:is(input, select, textarea):focus { border-color: var(--focus-ring); }
main :is(.btn, .btn--primary, .btn--outline, .btn-outline, .rb-btn, button, input[type="submit"]) {
  min-block-size: var(--target-size); max-inline-size: 100%; white-space: normal;
  text-align: center; line-height: var(--leading-label); overflow-wrap: anywhere;
}
main :is(.btn-primary, .btn--primary, input[type="submit"]) { background: var(--accent-fill); color: var(--text-on-accent); }
main :is(.btn-primary, .btn--primary, input[type="submit"]):not(:disabled):not([aria-disabled="true"]):hover { background: var(--accent-hover); color: var(--text-on-accent); opacity: 1; }
main :is(.btn-primary, .btn--primary, input[type="submit"]):not(:disabled):not([aria-disabled="true"]):active { background: var(--accent-active); color: var(--text-on-accent); }
main :is(.btn-outline, .btn--outline, .btn-secondary) { border-color: var(--border-strong); background: var(--bg-surface); color: var(--text-primary); }
main :is(.btn-outline, .btn--outline, .btn-secondary):not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--focus-ring); background: var(--bg-interactive); color: var(--text-primary); }

/* Disabled is a readable neutral state, never an opacity filter. */
:is(input, select, textarea, button):disabled, main .rb-btn-disabled {
  background: var(--bg-disabled); color: var(--text-disabled); border: 1px solid var(--border-strong);
  opacity: 1; box-shadow: none; cursor: not-allowed; transform: none;
  -webkit-text-fill-color: var(--text-disabled);
}
:is(input, textarea):disabled::placeholder { color: var(--text-disabled); -webkit-text-fill-color: var(--text-disabled); opacity: 1; }
:is(input, select, textarea)[aria-invalid="true"], :is(input, select, textarea):user-invalid { border-color: var(--error-border); }
:is(input, select, textarea)[data-valid="true"] { border-color: var(--success-border); }
.ui-field-error { color: var(--error-text); font-size: var(--type-body-small); line-height: var(--leading-body); margin-block: .25rem 0; }
.ui-notice { border: 1px solid var(--border-strong); padding: .875rem 1rem; border-radius: var(--radius-sm); color: var(--text-primary); background: var(--bg-surface-elevated); }
.ui-notice[data-status="error"] { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }
.ui-notice[data-status="success"] { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.ui-notice[data-status="warning"] { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.ui-required-description { font-size: var(--type-body-small); color: var(--text-secondary); margin-block: 0 1rem; }
.ui-loading, [aria-busy="true"] { cursor: progress; }

/* Data and code remain readable without overflowing the document. */
table { max-inline-size: 100%; border-collapse: collapse; color: var(--text-secondary); background: var(--bg-surface); }
th, td { padding: .75rem 1rem; border: 1px solid var(--border-default); text-align: start; overflow-wrap: anywhere; }
th { color: var(--text-primary); background: var(--bg-surface-elevated); }
caption { color: var(--text-primary); text-align: start; margin-block-end: .75rem; }
main pre { max-inline-size: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
main :is(code, kbd, samp) { color: var(--text-primary); background-color: var(--bg-interactive); }
main pre code { background: transparent; }
main :is(blockquote, .ui-notice) { border-inline-start: 3px solid var(--border-strong); }
.footer-col a, .footer-bottom a, .pagination-wrap .page-numbers, .blog-archive-pagination .page-numbers { min-block-size: var(--target-size); display: inline-flex; align-items: center; }
.footer-col a { line-height: var(--leading-label); }

@media (max-width: 640px) {
  .rb-row > .rb-field, .rb-row > .rb-field-sm { min-inline-size: 0; flex: 1 1 100%; }
  .rb-btn { min-inline-size: 0; }
  .posts-grid, .services-grid, .blog-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-legal-links { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :is(input, select, textarea, button, .btn, .rb-btn) { border-color: ButtonText; }
  :focus-visible { outline-color: Highlight; }
}