/*
 * comsolit_infos — the contact form (Partials/Info/Contactform.html and the
 * validation messages it renders).
 *
 * Hand-written plain CSS. No Sass, no Tailwind, no build. Registered by the
 * partial itself, so it arrives wherever the form does.
 *
 * ⚠️ In `Resources/Public/Css/`, NOT `Resources/Public/stylesheets/`. That second
 * directory is the gulp SCSS build's output — `gulp.config.json` sets
 * `scss.build` to it — and the `comsolit-infos.css` sitting there is generated
 * from `Resources/Public/scss/`. Hand-written frontend CSS filed next to a build
 * artifact is indistinguishable from one, and is at the mercy of whatever the
 * shared `typo3-gulp-tasks` sass task does to its destination. This directory is
 * unambiguously authored-by-hand.
 *
 * ℹ️ That SCSS build is the BACKEND module's, not the frontend's: its entry ends
 * in the `.comsolit-infos-module { zoom: 0.8 }` v13 backend font-size fix, pulls
 * in angular-ui-grid and angularjs-toaster, and is registered only from
 * `Layouts/Backend/Default.html`. The frontend registration in `Layouts/Default.html`
 * has been commented out for a long time. It also compiles a large slice of
 * Foundation, so the backend module is its own Foundation consumer — separate
 * from the frontend legacy layer and outside #82, which excludes backend
 * templates.
 *
 * ⚠️ This one goes further than the other ports in this campaign. Elsewhere only
 * Foundation's CLASSES were replaced and the element-level styling of inputs,
 * labels and textareas was left to the legacy layer. A form is the wrong place
 * for that: `input`, `textarea` and `label` here were styled entirely by
 * Foundation's forms module through ELEMENT selectors, with no class to remove,
 * so a template-only port would have looked complete and then collapsed into
 * unstyled browser defaults the moment the layer was deleted. Everything the
 * form needs is therefore restated below and it no longer reads anything from
 * legacy-foundation.css.
 *
 * ⚠️ Extension stylesheets are UNLAYERED, so these rules beat every layer
 * including `legacy` regardless of specificity. That is what lets them override
 * Foundation's element selectors cleanly while the layer still exists.
 *
 * ⚠️ Values are px, and measured off the rendered page rather than read out of
 * the old stylesheet. Two reasons. The legacy layer sets `html{font-size:105%}`,
 * so its rem values are 5% larger than they read — the button's `0.9rem` is
 * 15.12px on screen, and copying `0.9rem` into an unlayered rule would inherit
 * the same distortion for as long as the 105% survives, then silently change
 * when it goes. And Foundation's own output contains unresolved Sass
 * (`color: foreground(#fff, #67b021)`), which is invalid CSS the browser drops,
 * so the file does not say what the page actually shows.
 *
 * Colours come from stgag/theme's published design tokens with fallbacks; the
 * fallbacks are production's measured values.
 */

/* --- Layout ---------------------------------------------------------------
 * Each field was a Foundation `.row` wrapping one full-width `.small-60
 * .columns`, i.e. a grid used purely to apply a 15px gutter. Measured: the row
 * contributes no margin at all, the column 15px either side.
 */
.contact-form__field {
  padding: 0 15px;
}

.contact-form__actions {
  padding: 0 15px;
  text-align: right;
}

/* The honeypot. Kept off-screen rather than hidden: a display:none field is a
   well-known tell, and screen readers skip it via tabindex="-1" on the input. */
.contact-form__field--honeypot {
  position: absolute;
  left: -9999px;
}

/* --- Fields --------------------------------------------------------------- */

.contact-form__label {
  display: block;
  font-size: 14px;
  line-height: 25.2px;
  color: var(--color-text, #5c5c5d);
}

.contact-form__input,
.contact-form__textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px;
  padding: 9px;
  border: 1px solid var(--color-border, #d5d6da);
  border-radius: 0;
  background-color: var(--color-surface, #fff);
  box-shadow: inset 0 1px 2px rgb(10 10 10 / 0.1);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text, #5c5c5d);
}

.contact-form__textarea {
  min-height: 50px;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-action, #67b021);
}

/* --- Submit ---------------------------------------------------------------
 * Foundation's `.button`. The 15.12px / 12.852px are `0.9rem` and `0.765rem`
 * against the inflated root — see the note at the top of this file.
 */
.contact-form__submit {
  display: inline-block;
  padding: 12.852px 15.12px;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: var(--color-action, #67b021);
  color: var(--color-on-action, #fff);
  font-family: inherit;
  font-size: 15.12px;
  line-height: 15.12px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background-color: var(--color-action-hover, #5a9a1d);
}

/* --- Messages -------------------------------------------------------------
 * Foundation's `.callout`, with its `.success` / `.alert` / `.small` variants.
 */
.contact-form__message {
  position: relative;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid rgb(10 10 10 / 0.25);
  border-radius: 0;
  background-color: var(--color-surface, #fff);
  color: var(--color-text, #5c5c5d);
}

.contact-form__message > :first-child {
  margin-top: 0;
}

.contact-form__message > :last-child {
  margin-bottom: 0;
}

.contact-form__message--success {
  background-color: #e1fbea;
}

/*
 * ⚠️ The alert background was an `!important` inline style on the element
 * (`style="background-color: #fcdcde!important;"`) rather than the `.callout
 * .alert` class Foundation provides — the template set the class only on the
 * success case. Same colour, moved into the stylesheet where it belongs.
 */
.contact-form__message--alert {
  background-color: #fcdcde;
}

.contact-form__message--small {
  padding: 0.5rem;
}

/*
 * The dismiss control. Foundation styled `.close-button` and made it work with
 * its Closable plugin via `data-closable` / `data-close`; both are gone, so the
 * behaviour is six lines of vanilla in sidebar-contactform.jquery.js.
 */
.contact-form__message-close {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  z-index: 10;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text, #5c5c5d);
  font-size: 2em;
  line-height: 1;
  cursor: pointer;
}

.contact-form__message-close:hover,
.contact-form__message-close:focus-visible {
  color: #0a0a0a;
}

/* Foundation's `.form-error.is-visible`. Only ever rendered when visible, so
   the `display:none` default and the `.is-visible` toggle are both dropped. */
.contact-form__error {
  display: block;
  margin-top: -9px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: bold;
  color: #ec1826;
}