/*
 * Semantic public-control layer. Selectors stay inert until a renderer opts
 * into .dc-brand; application modes and legacy public components retain their
 * existing owners until they migrate deliberately.
 */
.dc-brand {
  color: var(--brand-body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dc-brand .dc-brand-card {
  background: var(--brand-surface);
  border: 1px solid var(--deck-tan);
  border-radius: 0;
  padding: 24px;
}

.dc-brand .dc-brand-label,
.dc-brand .ff-el-input--label label,
.dc-brand .ff-el-form-control-label {
  color: var(--brand-secondary);
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 6px;
  text-transform: none;
}

.dc-brand input:not([type='checkbox']):not([type='radio']),
.dc-brand textarea,
.dc-brand select,
.dc-brand .fluentform .ff-el-form-control {
  background: var(--brand-surface);
  border: 1px solid var(--brand-control-border);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--brand-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 12px;
}

.dc-brand textarea,
.dc-brand .fluentform textarea.ff-el-form-control {
  min-height: 160px;
  resize: vertical;
}

.dc-brand input::placeholder,
.dc-brand textarea::placeholder,
.dc-brand .fluentform .ff-el-form-control::placeholder {
  color: var(--brand-body);
  opacity: 1;
}

.dc-brand .ff-el-group {
  margin-bottom: 20px;
}

.dc-brand .dc-contact-container {
  max-width: 680px;
}

.dc-brand .dc-contact-email {
  color: var(--brand-body);
  font-size: 0.875rem;
  margin: 24px 0 0;
  text-align: center;
}

.dc-brand .dc-contact-email a {
  color: var(--brand-secondary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dc-brand .ff-t-container {
  gap: 12px;
}

.dc-brand .ff-btn-submit,
.dc-brand .ff_submit_btn_wrapper button,
.dc-brand form.fluent_form_1 button.ff-btn-submit,
.dc-brand .dc-brand-button {
  align-items: center;
  background: var(--brand-action-bg);
  border: 1px solid var(--brand-action-bg);
  border-radius: 4px;
  color: var(--brand-action-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}

.dc-brand .ff_submit_btn_wrapper button {
  width: 100%;
}

.dc-brand .ff-btn-submit:hover,
.dc-brand .ff_submit_btn_wrapper button:hover,
.dc-brand form.fluent_form_1 button.ff-btn-submit:hover,
.dc-brand .dc-brand-button:hover {
  background: var(--brand-text);
  border-color: var(--brand-text);
}

.dc-brand .ff-el-is-error input,
.dc-brand .ff-el-is-error textarea,
.dc-brand .ff-el-is-error select,
.dc-brand input[aria-invalid='true']:not([type='checkbox']):not([type='radio']),
.dc-brand textarea[aria-invalid='true'],
.dc-brand select[aria-invalid='true'],
.dc-brand .fluentform .ff-el-group.ff-el-is-error .ff-el-form-control {
  border-color: var(--brand-error);
}

.dc-brand .error.text-danger,
.dc-brand .fluentform .error.text-danger,
.dc-brand .dc-brand-error {
  color: var(--brand-error);
  font-size: 0.875rem;
  margin-top: 6px;
}

.dc-brand :is(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

.dc-brand .fluentform .ff-el-form-control:focus-visible,
.dc-brand form.fluent_form_1 button.ff-btn-submit:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

.dc-brand .dc-brand-button:disabled,
.dc-brand form.fluent_form_1 button.ff-btn-submit:disabled {
  background: var(--brand-surface-inset);
  border-color: var(--brand-control-border);
  color: var(--brand-body);
  cursor: not-allowed;
  opacity: 1;
}

.dc-brand .ff-message-success {
  background: var(--brand-surface-inset);
  border: 1px solid var(--brand-control-border);
  border-radius: 4px;
  color: var(--brand-text);
  padding: 16px;
}

/* A per-app mapping is available without changing existing dark application
   surfaces. Renderers opt in with both classes when they need this contract. */
.dc-brand.dc-brand--dark {
  --brand-page: #101420;
  --brand-surface: #1A2030;
  --brand-surface-inset: #252C3B;
  --brand-text: var(--deck-cream);
  --brand-body: #D6D9E0;
  --brand-secondary: #E7D4AA;
  --brand-control-border: #D6D9E0;
  --brand-action-bg: var(--deck-cream);
  --brand-action-text: var(--deck-ink);
  --brand-focus: var(--deck-cream);
  --brand-error: #FF8A80;
  --brand-error-surface: #3A2023;
}

.dc-brand.dc-brand--dark .dc-brand-card {
  border-color: var(--brand-control-border);
}

/* The parent Blocksy 404 inherits the global dark main-container paint. Keep
   this repair to its public content area so header, footer, and application
   surfaces retain their existing owners. */
body.error404 #main {
  background: var(--brand-page);
  color: var(--brand-body);
}

body.error404 #main .ct-no-results .page-title {
  color: var(--brand-text);
}

body.error404 #main .ct-no-results .page-description {
  color: var(--brand-body);
}

body.error404 #main .ct-search-form input[type='search'] {
  background: var(--brand-surface);
  border: 1px solid var(--brand-control-border);
  border-radius: 4px;
  color: var(--brand-text);
  min-height: 44px;
}

body.error404 #main .ct-search-form input[type='search']::placeholder {
  color: var(--brand-body);
  opacity: 1;
}

body.error404 #main .ct-search-form button[type='submit'] {
  background: var(--brand-action-bg);
  border: 1px solid var(--brand-action-bg);
  border-radius: 4px;
  color: var(--brand-action-text);
  min-height: 44px;
  min-width: 44px;
}

body.error404 #main .ct-search-form button[type='submit']:hover {
  background: var(--brand-text);
  border-color: var(--brand-text);
}

body.error404 #main .ct-search-form :is(input, button):focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .dc-brand .dc-brand-card {
    padding: 20px;
  }
}

main.dc-page .dc-performance-evidence .dc-cta:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}