/* =================================================================================================
   LFD registration panel — one direction: what it is, what it needs, and the form

   A two-column editorial spread: the brief on the left, the form on the right. It collapses to
   one column at 834, because a form field in half of 778px is a form nobody fills in on a phone.

   THE FORM ITSELF IS CONTACT FORM 7'S MARKUP. What is styled below are CF7's own class names -
   .wpcf7-form-control and friends - deliberately and only inside .lfd-reg-panel, so a CF7 form
   anywhere else on the site is untouched.
   ================================================================================================= */

.lfd-reg-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--lfd-space-gap-lg, 3.5rem);
  align-items: start;
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
  padding-block: var(--lfd-space-section, 4.5rem);
  box-sizing: border-box;
  color: var(--lfd-color-ink, #111);
}

.lfd-section > .lfd-reg-panel {
  padding-block: 0;
}

.lfd-reg-panel * {
  box-sizing: border-box;
}

/* --- the rail --------------------------------------------------------------------------------- */

.lfd-reg-panel__eyebrow {
  margin: 0 0 var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label-lg, 0.18em);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-reg-panel__title {
  margin: 0;
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-md, clamp(2rem, 3.6vw, 3.25rem));
  font-weight: var(--lfd-weight-regular, 400);
  line-height: var(--lfd-leading-display, 0.98);
  letter-spacing: var(--lfd-tracking-display, -0.01em);
  text-transform: uppercase;
}

.lfd-reg-panel__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lfd-space-sm, 0.75rem);
  margin: var(--lfd-space-md, 1.25rem) 0 0;
}

.lfd-reg-panel__state {
  padding: 0.35rem 0.6rem;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-3xs, 0.625rem);
  font-weight: var(--lfd-weight-bold, 700);
  letter-spacing: var(--lfd-tracking-label-lg, 0.18em);
  line-height: var(--lfd-leading-label, 1.2);
  text-transform: uppercase;
  color: var(--lfd-color-paper, #fff);
  background: var(--lfd-color-ink, #111);
}

.lfd-reg-panel__status[data-state="open"] .lfd-reg-panel__state {
  background: var(--lfd-color-accent, #b39258);
  /*
   * --lfd-color-accent-ink, NOT --lfd-color-accent-on-ink. They are near-identical names for
   * opposite jobs: `-ink` is the text colour that belongs ON the accent, `-on-ink` is the accent
   * rendered AS text on an ink ground. Using the second here put gold text on a gold badge, and
   * the measurement was a solid gold rectangle with the word invisible inside it.
   */
  color: var(--lfd-color-accent-ink, #0a0a0a);
}

.lfd-reg-panel__status[data-state="closing_soon"] .lfd-reg-panel__state {
  background: var(--lfd-color-ink, #111);
}

.lfd-reg-panel__status[data-state="closed"] .lfd-reg-panel__state,
.lfd-reg-panel__status[data-state="coming_soon"] .lfd-reg-panel__state {
  background: transparent;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
  box-shadow: inset 0 0 0 1px var(--lfd-color-line, rgba(0, 0, 0, 0.22));
}

.lfd-reg-panel__note {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.6));
}

.lfd-reg-panel__intro {
  margin: var(--lfd-space-md, 1.25rem) 0 0;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-lg, 1.125rem);
  line-height: var(--lfd-leading-body, 1.65);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.68));
}

.lfd-reg-panel__subtitle,
.lfd-reg-panel__form-title {
  margin: var(--lfd-space-lg, 2rem) 0 var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  text-transform: uppercase;
}

.lfd-reg-panel__form-title {
  margin-block-start: 0;
}

.lfd-reg-panel__requirements {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.12));
}

.lfd-reg-panel__requirement {
  padding-block: var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body, 1rem);
  line-height: var(--lfd-leading-body, 1.6);
  border-block-end: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.12));
}

/* --- the form area ---------------------------------------------------------------------------- */

.lfd-reg-panel__body {
  padding: var(--lfd-space-lg, 2rem);
  background: var(--lfd-color-mist, #f4f3f1);
  border: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.1));
}

.lfd-reg-panel__state-box {
  padding: var(--lfd-space-md, 1.25rem);
  background: var(--lfd-color-paper, #fff);
  border: 1px dashed var(--lfd-color-line, rgba(0, 0, 0, 0.25));
}

.lfd-reg-panel__state-box p {
  margin: 0;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body, 1rem);
  line-height: var(--lfd-leading-body, 1.65);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.68));
}

/* Editors only — lfd_component_registration_panel_form() never emits this publicly. */
.lfd-reg-panel__admin-hint {
  margin-block-start: var(--lfd-space-sm, 0.75rem);
  padding: var(--lfd-space-sm, 0.75rem) var(--lfd-space-md, 1.25rem);
  border-inline-start: 3px solid var(--lfd-color-accent, #b39258);
  background: var(--lfd-color-paper-warm, #faf7f2);
}

.lfd-reg-panel__admin-hint p {
  margin: 0;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body, 1.6);
}

/* --- Contact Form 7, scoped to this panel ----------------------------------------------------- */

.lfd-reg-panel__form label {
  display: block;
  margin-block-end: var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.08em);
  text-transform: uppercase;
}

.lfd-reg-panel__form input[type="text"],
.lfd-reg-panel__form input[type="email"],
.lfd-reg-panel__form input[type="url"],
.lfd-reg-panel__form input[type="tel"],
.lfd-reg-panel__form input[type="date"],
.lfd-reg-panel__form input[type="number"],
.lfd-reg-panel__form select,
.lfd-reg-panel__form textarea {
  inline-size: 100%;
  /* 44px, so the control is comfortably above the 24px SC 2.5.8 minimum on a phone. */
  min-block-size: 2.75rem;
  padding: 0.65rem 0.85rem;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body, 1rem);
  color: var(--lfd-color-ink, #111);
  background: var(--lfd-color-paper, #fff);
  border: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.22));
  border-radius: var(--lfd-radius-none, 0);
}

.lfd-reg-panel__form textarea {
  min-block-size: 9rem;
  resize: vertical;
}

.lfd-reg-panel__form input:focus-visible,
.lfd-reg-panel__form select:focus-visible,
.lfd-reg-panel__form textarea:focus-visible {
  outline: 2px solid var(--lfd-color-focus, #0a0a0a);
  outline-offset: 2px;
}

.lfd-reg-panel__form input[type="submit"],
.lfd-reg-panel__form button[type="submit"] {
  inline-size: auto;
  min-block-size: 2.75rem;
  padding: 0.85rem 2rem;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  text-transform: uppercase;
  color: var(--lfd-color-paper, #fff);
  background: var(--lfd-color-ink, #111);
  border: 1px solid var(--lfd-color-ink, #111);
  cursor: pointer;
}

.lfd-reg-panel__form input[type="submit"]:hover,
.lfd-reg-panel__form button[type="submit"]:hover {
  background: var(--lfd-color-ink-deep, #000);
}

/* CF7's own response and validation text. Named rather than left to the browser default, so a
   validation message is not 16px blue Times in the middle of an editorial page. */
.lfd-reg-panel__form .wpcf7-not-valid-tip,
.lfd-reg-panel__form .wpcf7-response-output {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body, 1.6);
}

.lfd-reg-panel__form .wpcf7-not-valid-tip {
  margin-block-start: 0.35rem;
  color: var(--lfd-color-error, #8a2020);
}

.lfd-reg-panel__form .wpcf7-response-output {
  margin: var(--lfd-space-md, 1.25rem) 0 0;
  padding: var(--lfd-space-sm, 0.75rem) var(--lfd-space-md, 1.25rem);
  border: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.22));
}

.lfd-reg-panel__support {
  margin-block-start: var(--lfd-space-lg, 2rem);
  padding-block-start: var(--lfd-space-md, 1.25rem);
  border-block-start: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.12));
}

.lfd-reg-panel__support p {
  margin: 0 0 var(--lfd-space-xs, 0.5rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-sm, 0.875rem);
  line-height: var(--lfd-leading-body, 1.6);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.62));
}

.lfd-reg-panel__support a {
  color: var(--lfd-color-ink, #111);
}

/* --- responsive: 1440 / 1180 / 834 / 390 / 320 ------------------------------------------------- */

@media (max-width: 1180px) {

  .lfd-reg-panel {
    gap: var(--lfd-space-gap, 1.5rem);
  }
}

@media (max-width: 834px) {
  /* One column. A text input in half of 778px is a form nobody completes. */
  .lfd-reg-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lfd-space-lg, 2rem);
  }
}

@media (max-width: 520px) {

  .lfd-reg-panel__body {
    padding: var(--lfd-space-md, 1.25rem);
  }
}