/*
 * Native form styling for the Drysdale Leopold Pony Club website.
 * Uses the design tokens extracted from the source site so the forms read as
 * part of the site rather than a third-party embed:
 *   --neutral1 #00543D brand green · --color-brand-700 #008A4A button green
 *   --secondary #F3C651 gold accent · page background #F2F2F2
 */
/* Base block applies only to forms we render ourselves. The in-place enhanced
   footer form must inherit NOTHING structural from us: setting box-sizing and
   max-width on it changed the platform's own layout maths and made it size the
   form's container to 40px, which collapsed the green panel and left white
   inputs on a white page. Only the CSS custom properties are shared. */
.dlpc-form { --dlpc-green: #00543D; --dlpc-button: #008A4A; --dlpc-error: #b3261e; }

.dlpc-form:not(.dlpc-form--inline) {
  --dlpc-green: #00543D;
  --dlpc-button: #008A4A;
  --dlpc-button-hover: #00743e;
  --dlpc-border: #c9d6d1;
  --dlpc-error: #b3261e;
  --dlpc-bg: #ffffff;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--dlpc-green);
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;
}
.dlpc-form:not(.dlpc-form--inline) *, .dlpc-form:not(.dlpc-form--inline) *::before, .dlpc-form:not(.dlpc-form--inline) *::after { box-sizing: inherit; }

.dlpc-form:not(.dlpc-form--inline)__intro { font-size: 16px; line-height: 1.55; margin: 0 0 24px; }

.dlpc-form:not(.dlpc-form--inline) fieldset {
  border: 0; padding: 0; margin: 0 0 28px; min-width: 0;
}
.dlpc-form:not(.dlpc-form--inline) legend {
  font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--dlpc-green);
  padding: 0; margin: 0 0 6px; width: 100%;
  border-bottom: 2px solid var(--dlpc-green); padding-bottom: 8px;
}
.dlpc-form:not(.dlpc-form--inline)__section-intro { font-size: 15px; line-height: 1.5; margin: 10px 0 18px; }

.dlpc-field { margin: 0 0 18px; }
.dlpc-field__label {
  display: block; font-size: 15px; font-weight: 600; margin: 0 0 6px; line-height: 1.35;
}
.dlpc-field__optional { font-weight: 400; opacity: .7; }
.dlpc-field__req { color: var(--dlpc-error); margin-left: 2px; }
.dlpc-field__help { display: block; font-size: 13px; font-weight: 400; opacity: .8; margin: 4px 0 0; line-height: 1.45; }

/* Control styling applies ONLY to forms we render ourselves. The in-place
   enhanced footer form keeps the platform's existing control styling: restyling
   it grew each field and overflowed its fixed-height container, which painted
   white inputs on a white page. */
.dlpc-form:not(.dlpc-form--inline) input[type="text"],
.dlpc-form:not(.dlpc-form--inline) input[type="email"],
.dlpc-form:not(.dlpc-form--inline) input[type="tel"],
.dlpc-form:not(.dlpc-form--inline) input[type="date"],
.dlpc-form:not(.dlpc-form--inline) input[type="month"],
.dlpc-form:not(.dlpc-form--inline) select,
.dlpc-form:not(.dlpc-form--inline) textarea {
  width: 100%; font-family: inherit; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: var(--dlpc-green); background: var(--dlpc-bg);
  border: 1px solid var(--dlpc-border); border-radius: 4px;
  padding: 11px 12px; line-height: 1.4; appearance: none;
}
.dlpc-form:not(.dlpc-form--inline) textarea { min-height: 130px; resize: vertical; }
.dlpc-form:not(.dlpc-form--inline) select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2300543D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.dlpc-form input:focus-visible,
.dlpc-form select:focus-visible,
.dlpc-form textarea:focus-visible,
.dlpc-form button:focus-visible,
.dlpc-form a:focus-visible {
  outline: 3px solid var(--dlpc-button); outline-offset: 2px;
}
.dlpc-form input[aria-invalid="true"],
.dlpc-form select[aria-invalid="true"],
.dlpc-form textarea[aria-invalid="true"] { border-color: var(--dlpc-error); border-width: 2px; }

.dlpc-field__error { display: block; color: var(--dlpc-error); font-size: 13.5px; margin: 6px 0 0; font-weight: 600; }
/* `display:block` above beats the user-agent's [hidden]{display:none}, so hidden
   error slots were still taking up space — six of them silently grew the footer
   form by 40px and broke its container sizing. Restore the intent explicitly. */
.dlpc-field__error[hidden] { display: none !important; }

/* checkbox rows */
.dlpc-field--checkbox { display: flex; align-items: flex-start; gap: 10px; }
/* 24x24 is the WCAG 2.2 AA minimum target size (2.5.8). These are the two
   declaration checkboxes on the grading form — the most consequential controls
   on the site — so they get the real minimum, not 20px. */
.dlpc-field--checkbox input[type="checkbox"] {
  width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--dlpc-button);
}
/* The whole label is a target too, so a mis-tap beside the box still works. */
.dlpc-field--checkbox .dlpc-field__label { min-height: 24px; display: flex; align-items: center; flex-wrap: wrap; }
.dlpc-field--checkbox .dlpc-field__label { margin: 0; font-weight: 500; }
.dlpc-form:not(.dlpc-form--inline) a { color: var(--dlpc-green); text-decoration: underline; }

/* two-column grid for short paired fields, collapsing on small screens */
.dlpc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .dlpc-grid { grid-template-columns: 1fr; } }

/* actions */
.dlpc-form:not(.dlpc-form--inline) .dlpc-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.dlpc-form:not(.dlpc-form--inline) button[type="submit"] {
  font-family: inherit; font-size: 16px; font-weight: 700; color: #fff;
  background: var(--dlpc-button); border: 0; border-radius: 4px;
  padding: 14px 34px; cursor: pointer; min-height: 48px;
  transition: background-color .15s ease;
}
.dlpc-form button[type="submit"]:hover:not(:disabled) { background: var(--dlpc-button-hover); }
.dlpc-form button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* status regions */
.dlpc-form__status { margin: 0 0 20px; }
.dlpc-alert { border-radius: 6px; padding: 16px 18px; font-size: 15px; line-height: 1.5; }
.dlpc-alert--error { background: #fdecea; border: 1px solid #f2b8b5; color: #7a1c16; }
.dlpc-alert--success { background: #e8f5ee; border: 2px solid var(--dlpc-button); color: var(--dlpc-green); }
.dlpc-alert h3 { margin: 0 0 8px; font-size: 17px; }
.dlpc-alert ul { margin: 8px 0 0; padding-left: 20px; }
.dlpc-alert a { color: inherit; }
.dlpc-alert__ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }

/* Honeypot — hidden from people, still reachable by bots.
   Clipped rather than pushed off-screen: a -9999px layout box is an element that
   extends far outside the viewport, which is exactly what responsive audits flag. */
.dlpc-hp {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.dlpc-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* spinner, motion-safe */
.dlpc-spinner {
  display: inline-block; width: 18px; height: 18px; vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: dlpc-spin .7s linear infinite; margin-right: 8px;
}
@keyframes dlpc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dlpc-spinner { animation: none; border-top-color: rgba(255, 255, 255, .45); }
  .dlpc-form * { transition: none !important; }
}

/* in-place enhancement of the existing footer enquiry form: the surrounding
   WebWave markup already provides the layout, so only the added pieces are styled */
/* The acknowledgement is positioned INSIDE the panel's existing bottom padding
   rather than appended to the flow. Appending it grew the form past its
   fixed-height green container, and growing the container collided with the
   partner logos below on tablet and mobile. This way it adds exactly zero
   height, sits on the green panel, and nothing moves. */
.dlpc-form--inline .dlpc-field--ack {
  position: absolute; left: 10px; right: 10px; bottom: 6px;
  margin: 0; color: #fff; font-size: 12px; line-height: 1.3;
  gap: 6px; align-items: center;
}
.dlpc-form--inline .dlpc-field--ack input[type="checkbox"] {
  width: 15px; height: 15px; margin: 0; flex: 0 0 auto;
}
.dlpc-form--inline .dlpc-field--ack .dlpc-field__label { font-weight: 400; }
.dlpc-form--inline .dlpc-field--ack .dlpc-field__error { margin-top: 2px; font-size: 12px; }
.dlpc-form--inline .dlpc-field--ack a { color: #fff; }
.dlpc-form--inline .dlpc-field__error { color: #ffd9d6; }
.dlpc-form--inline .dlpc-form__status:empty { display: none; }
.dlpc-form--inline .dlpc-alert { margin-bottom: 12px; }

/* informational note (no consent captured) */
.dlpc-form__note {
  font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; opacity: .9;
}