/**
 * Component CSS — generated from component records.
 * Do not edit. Write CSS on the component via upsert-component / patch-component.
 */

/* delta-component:button */
/* One definition, three parts.
   1. The values live in --btn-* below. Change them here and every button on
      the site follows -- add to cart, checkout, block buttons, comment submit.
   2. The selector list reaches every surface that renders a button, whoever
      wrote the markup. Each entry carries its own specificity, so a single
      declaration block can outrank core (:where(), 0,0,0), WooCommerce
      (.woocommerce a.button, 0,2,1) and Woo's ID-based submit
      (#respond input#submit, 2,0,1) at the same time. .delta-main is the
      theme's main landmark and is what buys the extra class over Woo.
   3. Anything that is a <button> but must not look like one -- gallery icon
      controls, select2 internals -- opts out via the :not() list or .btn--bare.
      The :not() arguments are wrapped in :where() so they add no specificity.
      Role vars that read colour tokens belong on *, not :root — a surface row
      (.surface-contrast) rebinds --color-action and children must recook, not
      inherit the outer value.
   This recipe stays flat on purpose. Its selector list mixes specificities
   (0,1,0 to 2,0,1) so that each entry beats exactly the stylesheet it
   overrides. Nesting the list would wrap it in :is(), which takes the highest
   specificity for every entry and breaks that balance. Single-root recipes
   (a card, a list) use one nested block instead. */
* {
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-on-action);
  --btn-bg-hover: var(--color-action-hover);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-radius: var(--radius-sm);
  --btn-height: var(--control-height);
  --btn-padding: 0 var(--space-lg);
  --btn-font: var(--font-text);
  --btn-size: var(--text-sm-size);
  --btn-weight: var(--weight-semibold);
}

.btn,
a.wp-block-button__link,
.wp-block-button__link.wp-element-button,
.delta-site .delta-main a.button,
.delta-site .delta-main button.button,
.delta-site .delta-main input.button,
.delta-main #respond input#submit,
.delta-main button:not(:where([class*="pswp"], [class*="select2"], .btn--bare)),
.delta-main input[type="submit"]:not(:where(.btn--bare)),
.delta-main input[type="button"]:not(:where(.btn--bare)),
.delta-main input[type="reset"]:not(:where(.btn--bare)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: fit-content;
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duration-base, 250ms) var(--curve-standard, ease),
    background-color var(--duration-fast, 150ms) var(--curve-standard, ease),
    color var(--duration-fast, 150ms) var(--curve-standard, ease),
    border-color var(--duration-fast, 150ms) var(--curve-standard, ease);
}

.btn:hover,
a.wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover,
.delta-site .delta-main a.button:hover,
.delta-site .delta-main button.button:hover,
.delta-site .delta-main input.button:hover,
.delta-main #respond input#submit:hover,
.delta-main button:not(:where([class*="pswp"], [class*="select2"], .btn--bare)):hover,
.delta-main input[type="submit"]:not(:where(.btn--bare)):hover {
  /* Own the label. a:hover is 0,1,1 and would otherwise repaint it. */
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  border-color: var(--btn-border-hover);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  a.wp-block-button__link,
  .delta-site .delta-main a.button,
  .delta-main button:not(:where([class*="pswp"], [class*="select2"], .btn--bare)) {
    transition:
      background-color var(--duration-fast, 150ms) var(--curve-standard, ease),
      color var(--duration-fast, 150ms) var(--curve-standard, ease),
      border-color var(--duration-fast, 150ms) var(--curve-standard, ease);
  }

  .btn:hover,
  a.wp-block-button__link:hover,
  .delta-site .delta-main a.button:hover,
  .delta-main button:not(:where([class*="pswp"], [class*="select2"], .btn--bare)):hover {
    transform: none;
  }
}

/* Variants rewrite the values; the block above renders them. */
.btn--subtle {
  --btn-bg: var(--color-action-subtle);
  --btn-fg: var(--color-ink);
  --btn-bg-hover: var(--color-action-subtle);
  --btn-border: transparent;
  --btn-border-hover: var(--color-border);
}

.btn--primary {
  --btn-bg: var(--color-action);
  --btn-fg: var(--color-on-action);
  --btn-bg-hover: var(--color-action-hover);
}

/* Ghost: text only, no fill and no border; a quiet fill appears on hover. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-bg-hover: var(--color-action-subtle);
  --btn-border: transparent;
  --btn-border-hover: transparent;
}

/* Outline: the border is the text colour, so it reads as well as the label. */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-bg-hover: transparent;
  --btn-border: var(--color-ink);
  --btn-border-hover: var(--color-ink-muted);
}

.btn--small {
  --btn-height: var(--control-height-sm);
  --btn-padding: 0 var(--space-sm);
}

/* Escape hatch: a <button> that is not a themed button. */
.btn--bare {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* delta-component:input */
/* Role variables first: a designer changes "the field radius", not
   --radius-sm, which would move every rounded thing on the site. The scale
   tokens are raw material; these are the knobs. --field-height is shared with
   the button so a control row lines up.
   Role vars that read colour tokens belong on *, not :root — a surface row
   (.surface-contrast) rebinds --color-ink / --color-border and fields must recook.
   Flat on purpose, like the button: the selector lists pair the component class
   with bare elements (0,0,1 for select and textarea, 0,1,1 for an attribute
   selector) so template rules override freely. Nesting would wrap each list in
   :is() and lift every entry to the highest specificity in it. */
* {
  --field-bg: var(--color-surface-body);
  --field-fg: var(--color-ink);
  /* A field's border identifies a control, so it needs 3:1 against the page:
     the quieter text colour at rest, the text colour under the pointer.
     --color-border is for decorative hairlines only. */
  --field-border: var(--color-ink-muted);
  --field-border-hover: var(--color-ink);
  --field-radius: var(--radius-sm);
  --field-height: var(--control-height);
  --field-padding-inline: var(--space-sm);
  --field-font: var(--font-text);
  --field-size: var(--text-sm-size);
}

/* Every selector list pairs the component class with the bare elements, so a
   field styled by this component and a field rendered by WooCommerce, the
   comment form or search share one definition. Third-party markup carries its
   own classes and cannot be given ours; the element half is how it inherits.
   The bare element half sits at 0,0,1 (select, textarea) or 0,1,1 (an
   attribute selector counts like a class), so template rules override freely. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.label,
label {
  font-family: var(--font-text);
  font-size: var(--text-sm-size);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.label .required,
label .required {
  color: var(--color-danger);
}

.input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--field-height);
  padding: 0 var(--field-padding-inline);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--field-fg);
  font-family: var(--field-font);
  font-size: var(--field-size);
  line-height: 1.5;
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-ink-muted);
  opacity: 1;
}

.input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover {
  border-color: var(--field-border-hover);
}

.input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.input:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-surface-subtle);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.input--invalid,
.field--invalid .input,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

textarea {
  min-height: 6rem;
  padding: var(--space-xs) var(--field-padding-inline);
  resize: vertical;
}

select {
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--color-action);
}

.field__hint {
  margin: 0;
  font-size: var(--text-xs-size);
  color: var(--color-ink-muted);
}

.field__error {
  margin: 0;
  font-size: var(--text-xs-size);
  color: var(--color-danger);
}