/*
  Shared styling for the department's standalone static pages (/rsvp,
  /townofboontonidrequest, /carnival-placemat, /404). Covers three things:

  1. Form styling, mirroring the styles used inline by the Ladies Auxiliary
     application form so every form on the site looks the same.
  2. The inline PDF viewer used by the Carnival placemat page.
  3. A handful of Tailwind utilities these pages need that are absent from the
     app's pruned CSS build (assets/index-*.css). Those are defined here with the
     same custom properties the build uses, so they match the design system.
*/

:root {
  --form-red: #b91c1c;
  --form-red-dark: #991b1b;
  --form-red-soft: #fef2f2;
  --form-border: #e5e7eb;
  --form-text: #111827;
  --form-muted: #4b5563;
}

.join-form-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid #fecaca;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 60px -36px rgba(127, 29, 29, 0.55);
}

.join-form-shell::before {
  position: absolute;
  inset: 0 0 auto;
  height: 0.35rem;
  background: linear-gradient(90deg, #7f1d1d, #dc2626 55%, #fca5a5);
  content: "";
}

.join-form-header {
  padding: 1.35rem 1.5rem 1.1rem;
  border-bottom: 1px solid #fee2e2;
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.16), transparent 38%),
    var(--form-red-soft);
}

.join-form {
  padding: 1.5rem;
}

.join-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.join-form-field {
  display: grid;
  gap: 0.3rem;
}

.join-form-field--wide {
  grid-column: 1 / -1;
}

.join-form label {
  color: var(--form-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.join-form input,
.join-form select,
.join-form textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.65rem;
  background: #fff;
  color: var(--form-text);
  font: inherit;
  padding: 0.6rem 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.join-form textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.join-form input:focus,
.join-form select:focus,
.join-form textarea:focus {
  border-color: var(--form-red);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.13);
  outline: none;
}

.join-form input::placeholder,
.join-form textarea::placeholder {
  color: #9ca3af;
}

.required-mark {
  color: var(--form-red);
}

.field-help {
  color: var(--form-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.join-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--form-border);
}

.join-form-submit {
  border: 0;
  border-radius: 0.65rem;
  background: var(--form-red);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.25rem;
  transition: background-color 160ms ease, transform 160ms ease;
}

.join-form-submit:hover {
  background: var(--form-red-dark);
  transform: translateY(-1px);
}

.join-form-submit:focus-visible {
  outline: 3px solid rgba(185, 28, 28, 0.25);
  outline-offset: 3px;
}

.bot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline PDF viewer used by the Carnival placemat page */
.pdf-frame {
  width: 100%;
  height: 80vh;
  min-height: 600px;
  border: 0;
  display: block;
}

/*
  Tailwind utilities used by these pages that the app's pruned CSS build does not
  emit. Defined with the build's own custom properties so the values stay in sync.
*/
.py-5 {
  padding-block: calc(var(--spacing) * 5);
}

.py-20 {
  padding-block: calc(var(--spacing) * 20);
}

.text-red-900 {
  color: var(--color-red-900);
}

.hover\:bg-gray-50:hover {
  background-color: var(--color-gray-50);
}

@media (max-width: 640px) {
  .join-form-header,
  .join-form {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .join-form-grid {
    grid-template-columns: 1fr;
  }

  .join-form-field--wide {
    grid-column: auto;
  }

  .join-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .join-form-submit {
    width: 100%;
  }
}