/* ==========================================================================
   FORMS — BASE TOKENS (default values; schemes will override)
   ========================================================================== */

:root {
  --jomi-form-gap: 1rem;
  --jomi-form-gap-lg: 1.25rem;
  --jomi-form-radius: 10px;

  --jomi-form-field-bg: #fff;
  --jomi-form-field-text: var(--jomi-color-text);
  --jomi-form-border-color: var(--jomi-color-border);
  --jomi-form-placeholder: color-mix(in srgb, var(--jomi-color-text) 45%, white);
  --jomi-form-accent: var(--jomi-color-primary);

  --jomi-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jomi-form-accent) 25%, transparent);

  --jomi-form-button-bg: #fff;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);

  --jomi-form-error-color: var(--jomi-color-accent);
}

/* ==========================================================================
   TYPOGRAPHY HOOKS
   ========================================================================== */

label {
  display: block;
  font-weight: var(--jomi-font-weight-medium);
  margin-block: 0 0.4rem;
}

label small {
  font-size: var(--jomi-font-size-small);
}

/* ==========================================================================
   CONTROLS — Inputs, selects, textareas
   ========================================================================== */

input:is([type="text"],[type="email"],[type="url"],[type="tel"],[type="number"],[type="search"],[type="password"],[type="file"]),
select,
textarea {
  width: 100%;
  font-family: var(--jomi-font-family);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--jomi-form-field-text);
  background: var(--jomi-form-field-bg);
  border: 1px solid var(--jomi-form-border-color);
  border-radius: var(--jomi-form-radius);
  padding: 0.55rem 0.75rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

textarea {
  height: 10rem;
  resize: vertical;
}

input[type="file"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: 0.75rem;
  appearance: none;
  border: 2px solid var(--jomi-form-button-border-color);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: var(--jomi-font-weight-semibold);
  font-size: 0.95rem;
  color: var(--jomi-form-button-fg);
  background: var(--jomi-form-button-bg);
  cursor: pointer;
  transition: transform 0.05s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--jomi-form-accent);
  color: #fff;
}
input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active {
  transform: translateY(1px);
}

::placeholder {
  color: var(--jomi-form-placeholder);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--jomi-form-accent) 30%, var(--jomi-form-border-color));
}
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none;
  border-color: var(--jomi-form-accent);
  box-shadow: var(--jomi-form-focus-ring);
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background: var(--jomi-color-bg-alt);
  color: var(--jomi-color-text-muted);
  cursor: not-allowed;
}
input[type="file"][disabled]::file-selector-button,
input[type="file"][disabled]::-webkit-file-upload-button {
  opacity: 0.6;
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 1rem;
  block-size: 1rem;
  vertical-align: text-bottom;
  accent-color: var(--jomi-form-accent);
}

/* ==========================================================================
   SUBMIT BUTTON
   ========================================================================== */

button[type="submit"],
input[type="submit"] {
  appearance: none;
  border: 2px solid var(--jomi-form-button-border-color);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-weight: var(--jomi-font-weight-semibold);
  font-size: 0.95rem;
  color: var(--jomi-form-button-fg);
  background: var(--jomi-form-button-bg);
  cursor: pointer;
  transition: transform 0.05s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--jomi-form-accent);
  color: #fff;
}
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(1px);
}
button[type="submit"]:disabled,
input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   CONTACT FORM 7 — LAYOUT
   ========================================================================== */

.wpcf7 form {
  --gapw: calc(var(--jomi-form-gap) * 2);
  --gaph: var(--jomi-form-gap);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gaph) var(--gapw);
}

.wpcf7 form > p { display: contents; }
.wpcf7 form label > br { display: none; }
.wpcf7 form label > .wpcf7-form-control-wrap { display: block; }

.wpcf7 form label > small {
  font-size: var(--jomi-font-size-micro);
  line-height: var(--jomi-line-height-micro);
}

.wpcf7 form label:has(
  .wpcf7-form-control-wrap :is(
    input:is([type="text"],[type="email"],[type="url"],[type="tel"],[type="number"],[type="search"],[type="password"],[type="file"]),
    select,
    textarea
  )
) {
  width: 100%;
}

.wpcf7 form .wpcf7-form-control-wrap :is(.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance) .wpcf7-list-item {
  margin-left: 0;
}

.wpcf7 form label:has(> :is(input[type="checkbox"], input[type="radio"])) {
  display: grid;
  gap: 5px;
  grid-template-columns: auto 1fr;
}

.wpcf7 form label:has(> :is(input[type="checkbox"], input[type="radio"])) span {
  font-weight: var(--jomi-font-weight-regular);
  font-size: var(--jomi-font-size-small);
  line-height: var(--jomi-line-height-small);
}

.wpcf7 label:has(.wpcf7-form-control-wrap .wpcf7-checkbox) > .wpcf7-form-control-wrap {
  padding-top: var(--jomi-form-gap);
}

.wpcf7 form .wpcf7-form-control-wrap .wpcf7-checkbox {
  --n: 1;
  display: grid;
  gap: var(--jomi-form-gap);
  grid-template-columns: repeat(var(--n), 1fr);
}

@media (min-width: 768px) {
  .wpcf7 form .wpcf7-form-control-wrap .wpcf7-checkbox { --n: 2; }
}
@media (min-width: 1024px) {
  .wpcf7 form .wpcf7-form-control-wrap .wpcf7-checkbox { --n: 3; }
}

/* ==========================================================================
   CONTACT FORM 7 — FIELD WIDTHS (site-specific)
   ========================================================================== */

@media (min-width: 768px) {
  .wpcf7 form :is(label, .wrapper):has(.wpcf7-form-control-wrap:is(
    [data-name="nome-completo"],
    [data-name="email"],
    [data-name="telefone"],
    [data-name="classe-profissional"],
    [data-name="especialidade"],
    [data-name="numero-ordem"],
    [data-name="numero-mecanografico"],
    [data-name="nif"],
    [data-name="idade"],
    [data-name="genero"],
    [data-name="instituicao"],
    [data-name="abstract-titulo"],
    [data-name="abstract-resumo"],
    [data-name="abstract-tipo"],
    [data-name="abstract-autores"],
    [data-name="abstract-financiamento"],
    [data-name="abstract-referencias"]
  )) {
    width: calc((100% - var(--gapw)) / 2);
  }

  .wpcf7 form#registration-form {
    padding-top: var(--jomi-form-diff-lft);
  }

  .wpcf7 form#abstract-form {
    padding-top: var(--jomi-form-diff-rgt);
  }
}

/* ==========================================================================
   CONTACT FORM 7 — FEEDBACK
   ========================================================================== */

.wpcf7 form .wpcf7-not-valid-tip {
  font-size: var(--jomi-font-size-micro);
  line-height: var(--jomi-line-height-micro);
  color: var(--jomi-form-error-color);
}

.wpcf7 form.sent .wpcf7-response-output {
  border: 2px solid var(--jomi-form-accent);
  border-radius: var(--jomi-form-radius);
  padding: 0.55rem 0.75rem;
}

.wpcf7 form :is(.jomi-alert, .jomi-wrapper) {
  width: 100%;
}

.wpcf7 form .wrapper {
  font-weight: var(--jomi-font-weight-medium);
}
.wpcf7 form .wrapper > p {
  display: contents;
}