/*
 * WSMS — public block and shortcode styling.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS, SEPARATELY FROM index.css
 * ---------------------------------------------------------------------------
 * `assets/css/index.css` is the compiled Tailwind bundle for the React admin
 * dashboard. The public admission form was written against it — `bg-slate-900`,
 * `text-slate-100`, `bg-slate-950`, `text-xs` — which had three consequences on
 * a real site:
 *
 *   1. The form was HARDCODED DARK. The plugin ships five palette presets and
 *      four of them are dark, but the fifth is light, and any third-party theme
 *      may be light. Dropped onto a white page the form rendered as a navy box
 *      with grey inputs. It ignored every branding choice the school had made.
 *   2. It could not follow the brand at all. The whole point of the token
 *      engine is that one colour choice restyles the site; a block painted in
 *      literal slate did not participate.
 *   3. `text-xs` is 12px, on the labels AND the inputs of a form that asks a
 *      parent for a child's date of birth.
 *
 * Everything below resolves to a `--wsms-*` custom property that ThemeManager
 * prints on every page, with a fallback on every one so the block still looks
 * deliberate if the token layer is ever absent.
 *
 * This file is hand-written and must NOT be regenerated by the Tailwind build.
 * It is kept small on purpose: it styles the public surfaces only, and it is
 * enqueued anywhere a block, shortcode or Elementor widget renders.
 */

/* ------------------------------------------------------------------ shell */

.wsms-block {
  max-width: 40rem;
  margin: 1.5rem auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--wsms-card, #ffffff);
  color: var(--wsms-text, #0f172a);
  border: 1px solid var(--wsms-border, rgba(120, 120, 120, 0.18));
  border-radius: var(--wsms-radius, 1rem);
  box-shadow: var(--wsms-shadow, 0 10px 30px -12px rgba(0, 0, 0, 0.18));
}

.wsms-block--wide { max-width: 64rem; }

.wsms-block__title {
  margin: 0 0 0.35rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wsms-text, #0f172a);
}

.wsms-block__intro {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wsms-text-muted, rgba(100, 116, 139, 0.9));
}

/* ------------------------------------------------------------------ form */

.wsms-form { display: grid; gap: 1rem; }

/*
 * Two columns above 34rem, one below.
 *
 * A container query rather than a media query, deliberately: this form is
 * dropped into an Elementor column, a Divi row or a narrow sidebar, and what
 * matters is how much room the FORM has, not how wide the browser window is.
 * A media query gives a two-column form inside a 300px sidebar on a desktop.
 */
.wsms-form__row { display: grid; gap: 1rem; }

@container wsms-block (min-width: 34rem) {
  .wsms-form__row { grid-template-columns: 1fr 1fr; }
}

/* Browsers without container queries get the single-column form, which is
   correct everywhere, just less compact. */
@supports not (container-type: inline-size) {
  @media (min-width: 40rem) {
    .wsms-form__row { grid-template-columns: 1fr 1fr; }
  }
}

.wsms-block { container-type: inline-size; container-name: wsms-block; }

.wsms-field { display: grid; gap: 0.375rem; }

.wsms-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wsms-text-muted, rgba(100, 116, 139, 0.9));
}

.wsms-field__required { color: var(--wsms-primary, #6366f1); }

.wsms-field input,
.wsms-field select,
.wsms-field textarea {
  width: 100%;
  /* 1rem, not 12px. This form asks a parent for a child's date of birth and is
     the plugin's only public write surface. */
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wsms-text, #0f172a);
  background: var(--wsms-bg, #ffffff);
  border: 1px solid var(--wsms-border, rgba(120, 120, 120, 0.3));
  border-radius: var(--wsms-radius-sm, 0.5rem);
  padding: 0.65rem 0.8rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wsms-field textarea { resize: vertical; min-height: 5.5rem; }

.wsms-field input:focus,
.wsms-field select:focus,
.wsms-field textarea:focus {
  outline: none;
  border-color: var(--wsms-primary, #6366f1);
  box-shadow: 0 0 0 3px var(--wsms-primary-soft, rgba(99, 102, 241, 0.18));
}

/* A visible ring for keyboard users on everything else in the block. */
.wsms-block :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--wsms-primary, #6366f1);
  outline-offset: 2px;
}

.wsms-form__submit {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.85rem 1.25rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wsms-on-primary, #ffffff);
  background: var(--wsms-primary, #6366f1);
  border: 1px solid transparent;
  border-radius: var(--wsms-radius-sm, 0.5rem);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.wsms-form__submit:hover { background: var(--wsms-primary-hover, #4f46e5); }
.wsms-form__submit:active { transform: translateY(1px); }
.wsms-form__submit[disabled] { opacity: 0.6; cursor: progress; }

.wsms-form-notice {
  min-height: 1.25rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.wsms-form-notice.is-error { color: #b91c1c; }
.wsms-form-notice.is-success { color: #15803d; }

/* Honeypot. Hidden from people, irresistible to bots. Not display:none, which
   some bots detect and skip. */
.wsms-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------------------------- stats */

.wsms-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

.wsms-stat-card {
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--wsms-card, #ffffff);
  color: var(--wsms-text, #0f172a);
  border: 1px solid var(--wsms-border, rgba(120, 120, 120, 0.18));
  border-radius: var(--wsms-radius, 1rem);
}

.wsms-stat-value {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--wsms-primary, #6366f1);
}

.wsms-stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--wsms-text-muted, rgba(100, 116, 139, 0.9));
}

/* --------------------------------------------------------------- notices */

.wsms-block-notice {
  max-width: 40rem;
  margin: 1.5rem auto;
  padding: 1rem 1.15rem;
  border: 1px solid var(--wsms-border, rgba(120, 120, 120, 0.18));
  border-left: 3px solid var(--wsms-primary, #6366f1);
  border-radius: var(--wsms-radius-sm, 0.5rem);
  background: var(--wsms-card, #ffffff);
  color: var(--wsms-text-muted, rgba(100, 116, 139, 0.9));
  font-size: 0.9375rem;
}

.wsms-block-notice strong { color: var(--wsms-text, #0f172a); }

@media (prefers-reduced-motion: reduce) {
  .wsms-field input,
  .wsms-field select,
  .wsms-field textarea,
  .wsms-form__submit { transition: none; }
}