/* ==========================================================================
   Contact form, v25 only.

   assets/home.css carries no input, textarea or fieldset rules at all, and a raw
   Carbon field dropped into the #kontakt band is invisible in both themes because
   the band background is --cds-layer-01 and the v10 field default is --cds-field-01,
   the same value. Everything the form needs lives here so home.css stays untouched.

   Structure reuses the class contract portal.html already ships:
     .bx--form-item.bx--text-input-wrapper
       > label.bx--label
       > .bx--text-input__field-outer-wrapper
         > .bx--text-input__field-wrapper > input.uru-text-input.bx--text-input
         > .bx--form__helper-text
         > .bx--form-requirement

   Two deliberate departures, both because the bundled v10 rules are broken for
   this band. The textarea does not carry .bx--text-area: that class sets
   background-color: var(--cds-field-01) plus a margin-block-start: 2rem picked up
   from the fluid variant, so it renders invisible and mis-spaced here. It gets
   .uru-textarea instead, mirroring .uru-text-input from site.css. And
   .bx--form-requirement ships display:none in the bundle, shown only by Carbon
   sibling selectors we do not use, so .uru-field-error re-enables it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Band layout
   The left column carries eyebrow, heading, lede, form and the RODO clause;
   the right rail carries the mailto, WhatsApp and LinkedIn routes that stay
   available when JavaScript does not run.
   -------------------------------------------------------------------------- */

/* The stacked-column seam is the #kontakt grid's row-gap now (home.css), not this margin:
   a bare .cds--css-grid resolves row-gap: normal, so the measured seam between the form
   column and this rail was 0.0px with the 32px hidden inside the rail's own box. */
.uru-contact-rail {
  margin-top: 0;
}

@media (min-width: 66rem) {
  .uru-contact-rail {
    padding-top: var(--cds-spacing-02);
  }
}

.uru-contact-rail .uru-home-contact__promise {
  margin-top: 0;
}

.uru-contact-rail .uru-home-cta {
  margin-top: var(--cds-spacing-06);
  gap: var(--cds-spacing-04);
}

/* On the wide grid the rail owns six columns, so a full-bleed button would run to
   about 500px and outweigh the form's own submit. Stack them and cap the width. */
@media (min-width: 66rem) {
  .uru-contact-rail .uru-home-cta {
    flex-direction: column;
    align-items: stretch;
    max-inline-size: 20rem;
  }

  .uru-contact-rail .uru-home-cta .uru-btn {
    width: 100%;
    justify-content: center;
  }

  .uru-contact-rail .uru-home-contact__promise,
  .uru-contact-rail .uru-home-contact__linkedin {
    max-inline-size: 22rem;
  }
}

.uru-contact-rail .uru-home-contact__linkedin {
  margin-top: var(--cds-spacing-06);
}

/* --------------------------------------------------------------------------
   2. The shell
   Hidden in the markup; vendor/uruchom-contact-form.js removes the attribute as
   its first action. With JavaScript off the visitor sees the band exactly as it
   was before this build, mailto and WhatsApp included, and no dead submit button.
   -------------------------------------------------------------------------- */

.uru-contact-form-shell[hidden] {
  display: none;
}

.uru-contact-form-shell {
  margin-top: var(--cds-spacing-07);
}

.uru-contact-form {
  max-inline-size: 34rem;
}

.uru-contact-form[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Fields
   -------------------------------------------------------------------------- */

.uru-contact-form .bx--form-item {
  display: block;
  margin-block-end: var(--cds-spacing-05);
}

.uru-contact-form .bx--label {
  display: block;
  margin-block-end: var(--cds-spacing-02);
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  line-height: 1.33;
  letter-spacing: 0.32px;
}

/* Helper text keeps $text-helper, which is the token Carbon documents for exactly this.
   It used to be overridden to $text-secondary on the grounds that "--cds-text-helper is
   #8d8d8d in g90 and lands at 3.47:1"; that value only exists in the stale v10 sheet,
   which loads at :where() specificity and loses. Measured on the shipped bundle the token
   resolves #c6c6c6 -- 6.76:1 on layer-01, 8.86:1 on the page -- so the override was
   correcting a failure that was not there, at the cost of taking the field off its
   documented token. */
.uru-contact-form .bx--form__helper-text {
  margin: 0 0 var(--cds-spacing-03);
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
  line-height: 1.33;
}

/* Carbon puts the helper text inside the outer wrapper, after the field. The
   required reading order is label, hint, field, so the hint is authored between
   the label and the outer wrapper instead and both wrappers stay plain blocks.
   `display: block` is what achieves that; `position: static` was along for the ride
   and broke the invalid-state icon, which Carbon positions absolutely inside
   .bx--text-input__field-wrapper. With no positioned ancestor it resolved against
   the viewport instead: submitting the empty form put a red 16px error dot at
   [1280, 790] while the email field it belongs to sits at [288, 523] -- roughly
   450px away, in the empty column beside the form, with the field itself unmarked.
   The textarea was unaffected because its wrapper keeps position: relative. */
.uru-contact-form .bx--text-input__field-outer-wrapper,
.uru-contact-form .bx--text-input__field-wrapper {
  display: block;
  inline-size: 100%;
  position: relative;
}

.uru-contact-form .uru-text-input,
.uru-contact-form .uru-textarea {
  inline-size: 100%;
  padding-inline: var(--cds-spacing-05);
  border: none;
  /* border-strong-02 pairs with the field-02 below it -- see site.css. */
  border-block-end: 1px solid var(--cds-border-strong-02, var(--cds-border-strong));
  background: var(--cds-field-02, var(--cds-field));
  color: var(--cds-text-primary);
  font: inherit;
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: 1.43;
  border-radius: 0;
  appearance: none;
}

.uru-contact-form .uru-text-input {
  block-size: 3rem;
}

.uru-contact-form .uru-textarea {
  min-block-size: 8.5rem;
  padding-block: var(--cds-spacing-04);
  resize: vertical;
}

.uru-contact-form .uru-text-input::placeholder,
.uru-contact-form .uru-textarea::placeholder {
  color: var(--cds-text-placeholder, var(--cds-text-helper));
}

.uru-contact-form .uru-text-input:focus,
.uru-contact-form .uru-textarea:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.uru-contact-form .uru-text-input[aria-invalid="true"],
.uru-contact-form .uru-textarea[aria-invalid="true"] {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
}

/* Carbon ships .bx--form-requirement with display:none and max-height:0, revealed
   only by sibling selectors from components we do not use. Re-enable it here and
   keep it out of the flow while empty, so a field with no error costs no space. */
.uru-contact-form .uru-field-error {
  display: block;
  max-height: none;
  overflow: visible;
  margin: var(--cds-spacing-03) 0 0;
  color: var(--cds-text-error);
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
  line-height: 1.33;
}

.uru-contact-form .uru-field-error:empty {
  display: none;
}

/* Honeypot. display:none on the wrapper removes it from the accessibility tree
   and from the tab order, so no aria-hidden and no tabindex are needed, and
   neither is wanted: MDN forbids aria-hidden on a focusable element. */
.uru-contact-pot {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Submit
   Always enabled. A disabled button gives no feedback and is not focusable, so
   the in-flight state changes the label and aria-busy instead.
   -------------------------------------------------------------------------- */

.uru-contact-form__actions {
  margin-block-start: var(--cds-spacing-06);
}

.uru-contact-form .uru-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3rem;
  max-inline-size: none;
  padding: 0 var(--cds-spacing-06);
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  font: inherit;
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  font-weight: 600;
  cursor: pointer;
}

@media (min-width: 42rem) {
  .uru-contact-form .uru-contact-submit {
    inline-size: auto;
    min-inline-size: 14rem;
  }
}

.uru-contact-form .uru-contact-submit:hover {
  background: var(--cds-button-primary-hover, var(--cds-button-primary));
}

/* No outline-offset. It used to be -4px, which draws the ring INSIDE the button -- and the
   ring and the fill are both #0f62fe in g10, so the indicator was invisible: real Tab with
   :focus-visible armed changed 0 of 66,368 pixels. The same capture in g90 changed 6,288,
   which is how it stayed hidden. The site-wide `outline-offset: 1px` puts it outside the
   fill, where the portal's equivalent button already measures 4.55:1. */
.uru-contact-form .uru-contact-submit:focus-visible {
  outline: 2px solid var(--cds-focus);
}

/* --------------------------------------------------------------------------
   5. Error summary and success panel
   Both containers exist in the markup at parse time and both are empty, which
   is what makes the live region announce. Empty means zero height, so neither
   costs layout until it carries text.
   -------------------------------------------------------------------------- */

.uru-contact-summary:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

.uru-contact-summary.is-active {
  margin-block-end: var(--cds-spacing-06);
  padding: var(--cds-spacing-05);
  border-inline-start: 3px solid var(--cds-support-error);
  background: var(--cds-notification-background-error, var(--cds-layer-02));
  color: var(--cds-text-primary);
}

.uru-contact-summary__title {
  margin: 0;
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  font-weight: 600;
  line-height: 1.29;
}

.uru-contact-summary__list {
  margin: var(--cds-spacing-03) 0 0;
  padding-inline-start: var(--cds-spacing-05);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: 1.43;
}

.uru-contact-summary__list li + li {
  margin-block-start: var(--cds-spacing-02);
}

.uru-contact-summary__list a,
.uru-contact-summary__text a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.uru-contact-summary__text {
  margin: var(--cds-spacing-03) 0 0;
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: 1.43;
}

.uru-contact-status.is-active {
  max-inline-size: 34rem;
  margin-block-end: var(--cds-spacing-06);
  padding: var(--cds-spacing-05);
  border-inline-start: 3px solid var(--uru-orange-ui, var(--cds-support-success));
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
}

.uru-contact-status__title {
  margin: 0;
  font-size: var(--cds-heading-compact-02-font-size, 1rem);
  font-weight: 600;
  line-height: 1.375;
}

.uru-contact-status p {
  margin: var(--cds-spacing-03) 0 0;
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: 1.43;
  color: var(--cds-text-secondary);
}

.uru-contact-status a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* --------------------------------------------------------------------------
   6. Control line and the RODO clause
   The clause sits below the submit button, never above or between the fields.
   The objection paragraph gets its own bordered block because art. 21 ust. 4
   requires it to be presented separately from everything else.
   -------------------------------------------------------------------------- */

.uru-contact-control {
  max-inline-size: 34rem;
  margin: var(--cds-spacing-05) 0 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: 1.43;
}

.uru-legal-note {
  max-inline-size: 38rem;
  margin-block-start: var(--cds-spacing-06);
  padding-block-start: var(--cds-spacing-05);
  border-block-start: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle));
  color: var(--cds-text-secondary);
  font-size: var(--cds-legal-01-font-size, 0.75rem);
  line-height: 1.33;
}

.uru-legal-note__title {
  margin: 0 0 var(--cds-spacing-03);
  color: var(--cds-text-secondary);
  font-size: var(--cds-label-01-font-size, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A bare p rule elsewhere in the cascade sets 1rem, which beats inheritance, so
   the legal ramp states its own size. The three clauses had a 0px seam between them and ran
   together as one 12px block; spacing-03 separates them without loosening the ramp. */
.uru-legal-note p {
  margin: 0;
  font-size: var(--cds-legal-01-font-size, 0.75rem);
  line-height: 1.33;
}

.uru-legal-note p + p {
  margin-block-start: var(--cds-spacing-03);
}

.uru-legal-note a {
  color: var(--cds-link-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* Art. 21 ust. 4 asks for the objection right to stand apart from everything else:
   its own block, its own border, one step up in size, and bold. */
.uru-legal-note p.uru-legal-note__objection {
  margin-block-start: var(--cds-spacing-04);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-inline-start: 3px solid var(--cds-border-strong-01, var(--cds-border-strong));
  background: var(--cds-layer-02);
  color: var(--cds-text-primary);
  font-size: var(--cds-body-01-font-size, 0.875rem);
  line-height: 1.43;
}

/* --------------------------------------------------------------------------
   7. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .uru-contact-form-shell * {
    transition: none !important;
  }
}

/* Required marking. Drawn from the control's own `required` attribute via :has(),
   so the asterisk cannot drift out of step with the constraint it describes -- a
   hand-written marker in the label copy can, and this content is re-extracted from
   an upstream capture, so it would. Carbon Svelte 0.110 renders no required marker
   of its own; the native attribute is what conveys it to assistive tech, and this
   supplies the matching visual (3.3.2). */
.uru-contact-form .bx--form-item:has(input[required], textarea[required]) .bx--label::after {
  content: " *";
  color: var(--cds-text-error, var(--cds-support-error));
}

.uru-contact-required-legend {
  margin: 0 0 var(--cds-spacing-05);
  color: var(--cds-text-secondary);
  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
  line-height: 1.33;
}

/* The status region carries the submit outcome. It is empty until then, so it must
   not reserve space or draw a box when it has nothing to say. */
.uru-contact-status {
  margin: 0;
  color: var(--cds-text-secondary);
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
  line-height: var(--cds-body-compact-01-line-height, 1.29);
}

.uru-contact-status:not(:empty) {
  margin-block-end: var(--cds-spacing-05);
}

/* An error summary that renders in $text-secondary at 14px is indistinguishable from the
   neutral "fields marked with an asterisk are required" line directly beneath it -- the
   contrast was fine, the affordance was not. $text-error plus the status rule Carbon uses
   on its inline notification makes it read as the thing that just went wrong. */
.uru-contact-status--error {
  color: var(--cds-text-error);
  font-weight: 600;
  border-inline-start: 3px solid var(--cds-support-error);
  padding-inline-start: var(--cds-spacing-04);
}