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

:root {
  /* spacing / shape */
  --jomi-form-gap: 1rem;
  --jomi-form-gap-lg: 1.25rem;
  --jomi-form-radius: 10px;

  /* tokens driven by schemes */
  --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); /* check/radio accent & focus color */

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

  /* buttons (submit + file-button) */
  --jomi-form-button-bg: #fff;
  --jomi-form-button-fg: var(--jomi-form-accent);
  --jomi-form-button-border-color: var(--jomi-form-accent);

  /* feedback */
  --jomi-form-error-color: var(--jomi-color-accent); /* tips/errors */
}

/* ==========================================================================
   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 (compact)
   ========================================================================== */

input:is([type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],input[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 */
::placeholder {
  color: var(--jomi-form-placeholder);
  opacity: 1;
}

/* Hover / Focus */
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);
}

/* Disabled / read-only */
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;
}

/* Checkboxes & radios */
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"],input[type="email"],input[type="url"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],input[type="file"]),
		select,
		textarea
	)  
) {
	width: 100%;
}


/* checkbox / radio / acceptance list items */
.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);
}

/* checkbox group grid */
.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; }
}



/* ==========================================================================
   CF7 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;
}



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


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

/* others: alert */