/*
 * Presentation for every Well Done Suite mechanism.
 *
 * One stylesheet, driven by the `data-*` attributes `Well_Done_Suite_Elements::wrap()` writes, so a
 * form, a booking widget, a service list or a product grid dropped into *any* editor by shortcode
 * arrives looking like part of the site rather than raw module markup.
 *
 * Everything here is expressed in the site's own design tokens (`--wds-*`, printed by
 * Well_Done_Suite_Design_Tokens on the front end, in wp-admin and into theme.json). A customer who
 * has set their brand gets these mechanisms in it without touching CSS; one who has not gets the
 * defaults. No colour, radius or font is hard-coded here — that is the whole point.
 */

.wds-el {
  --wds-el-gap: 18px;
  --wds-el-pad: 0px;
  --wds-el-radius: var(--wds-radius, 8px);
  --wds-el-surface: transparent;
  --wds-el-ink: inherit;
  --wds-el-border: transparent;
  --wds-el-shadow: none;

  box-sizing: border-box;
  margin-inline: auto;
  padding: var(--wds-el-pad);
  border: 1px solid var(--wds-el-border);
  border-radius: var(--wds-el-radius);
  background: var(--wds-el-surface);
  color: var(--wds-el-ink);
  box-shadow: var(--wds-el-shadow);
  font-family: var(--wds-body-font, inherit);
}

.wds-el * { box-sizing: border-box; }

/* ---------------------------------------------------------------- Background */

.wds-el[data-tone="light"] { --wds-el-surface: var(--wds-surface, #f6f6f7); --wds-el-ink: var(--wds-text, inherit); }
.wds-el[data-tone="dark"] { --wds-el-surface: var(--wds-dark-bg, #0f1117); --wds-el-ink: #fff; }
.wds-el[data-tone="brand"] { --wds-el-surface: var(--wds-brand, #c00000); --wds-el-ink: #fff; }
/* A panel needs its own breathing room; sitting on the page it must not add any, or every element
 * would introduce a gap the page designer did not ask for. */
.wds-el[data-tone="light"], .wds-el[data-tone="dark"], .wds-el[data-tone="brand"] { --wds-el-pad: var(--wds-el-gap); }

.wds-el[data-tone="dark"] a, .wds-el[data-tone="brand"] a { color: inherit; }
.wds-el[data-tone="dark"] input, .wds-el[data-tone="dark"] select, .wds-el[data-tone="dark"] textarea,
.wds-el[data-tone="brand"] input, .wds-el[data-tone="brand"] select, .wds-el[data-tone="brand"] textarea {
  background: #ffffff14;
  border-color: #ffffff3d;
  color: inherit;
}
.wds-el[data-tone="dark"] ::placeholder, .wds-el[data-tone="brand"] ::placeholder { color: #ffffff8a; }

/* ---------------------------------------------------------------- Width */

.wds-el[data-width="narrow"] { max-width: 46rem; }
.wds-el[data-width="wide"] { max-width: 76rem; }
.wds-el[data-width="full"] { max-width: none; }

/* ---------------------------------------------------------------- Spacing */

.wds-el[data-density="compact"] { --wds-el-gap: 11px; font-size: .94em; }
.wds-el[data-density="spacious"] { --wds-el-gap: 30px; }
.wds-el > * + * { margin-top: var(--wds-el-gap); }

/* ---------------------------------------------------------------- Corners */

.wds-el[data-corners="sharp"] { --wds-el-radius: 0; }
.wds-el[data-corners="pill"] { --wds-el-radius: calc(var(--wds-radius-large, 16px) * 1.5); }
/* Controls follow the container, so a "fully rounded" block does not contain square inputs. */
.wds-el[data-corners="sharp"] :is(input, select, textarea, button, .wds-btn) { border-radius: 0; }
.wds-el[data-corners="pill"] :is(input, select, textarea, button, .wds-btn) { border-radius: 999px; }

/* ---------------------------------------------------------------- Alignment */

.wds-el[data-align="center"] { text-align: center; }
.wds-el[data-align="center"] :is(.wds-actions, .wds-form-actions, .wds-booking-actions) { justify-content: center; }

/* ---------------------------------------------------------------- Panel */

.wds-el[data-card="on"] { --wds-el-border: var(--wds-line, #e4e4e8); --wds-el-pad: var(--wds-el-gap); }
.wds-el[data-card="raised"] {
  --wds-el-border: var(--wds-line, #e4e4e8);
  --wds-el-pad: var(--wds-el-gap);
  --wds-el-shadow: 0 1px 2px #0e111614, 0 14px 34px #0e11161f;
  --wds-el-surface: #fff;
}

/* ---------------------------------------------------------------- Controls
 *
 * A mechanism rendered inside somebody else's theme inherits that theme's form styling, which is
 * where "a calendar from 2010" comes from — mismatched inputs and a default grey button. These
 * rules give the controls the site's own tokens without overriding a theme that has already styled
 * them deliberately (hence the modest specificity and no !important anywhere). */

.wds-el :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], select, textarea) {
  width: 100%;
  padding: .62em .8em;
  border: 1px solid var(--wds-line, #e4e4e8);
  border-radius: var(--wds-el-radius);
  background: var(--wds-el-surface, #fff);
  color: inherit;
  font: inherit;
  line-height: 1.4;
}
.wds-el :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--wds-brand, #c00000);
  outline-offset: 1px;
}
.wds-el :is(button, .wds-btn) {
  padding: .68em 1.1em;
  border: 0;
  border-radius: var(--wds-el-radius);
  background: var(--wds-brand, #c00000);
  color: #fff;
  font: inherit;
  font-weight: var(--wds-button-weight, 600);
  line-height: 1.2;
  cursor: pointer;
}
.wds-el :is(button, .wds-btn):hover { filter: brightness(1.08); }
.wds-el :is(button, .wds-btn)[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.wds-el :is(button, .wds-btn).wds-secondary {
  background: transparent;
  border: 1px solid var(--wds-line, #e4e4e8);
  color: inherit;
}

/* Headings inside a mechanism take the site's heading font and scale rather than the theme's
 * article rhythm, which is usually far too large for a widget. */
.wds-el :is(h2, h3, h4) {
  margin: 0;
  font-family: var(--wds-heading-font, inherit);
  font-weight: var(--wds-heading-weight, 700);
  line-height: 1.25;
}
.wds-el h2 { font-size: 1.45em; }
.wds-el h3 { font-size: 1.2em; }
.wds-el h4 { font-size: 1.02em; }

@media (max-width: 640px) {
  .wds-el[data-density="spacious"] { --wds-el-gap: 20px; }
  .wds-el :is(input, select, textarea, button, .wds-btn) { font-size: 16px; } /* no iOS zoom on focus */
}