/* ============================================================
   ASBURY PARK HOUSING AUTHORITY — COMMUNITY ROOM RENTAL REQUEST
   Stylesheet for the Contact Form 7 replica of the printed PDF.
   Units are in inches/points so the desktop rendering matches the
   original 8.5in x 11in letter pages 1:1.
   ============================================================ */

/* ------------------------------------------------------------
   1. DOCUMENT SHELL / PAGES
   ------------------------------------------------------------ */
.apha-doc {
  --apha-ink: #000;
  --apha-rule: #000;
  --apha-highlight: #ffff00;
  --apha-red: #e8241d;
  --apha-paper: #fff;
  --apha-page-w: 100%;
  --apha-margin: 0.5in;

  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  line-height: 1.16;
  color: var(--apha-ink);
  /*background: #9a9a9a;
  padding: 0.35in 0;*/
  -webkit-font-smoothing: antialiased;
}

.apha-doc * { box-sizing: border-box; }

.apha-page {
  position: relative;
  width: var(--apha-page-w);
  min-height: 11in;
  margin: 0 auto 0.35in;
  padding: 0.5in var(--apha-margin) 0.55in;
  background: var(--apha-paper);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.apha-page:last-of-type { margin-bottom: 0; }

/* ------------------------------------------------------------
   2. SHARED TYPOGRAPHY HELPERS
   ------------------------------------------------------------ */
.apha-doc p { margin: 0; }

.apha-doc mark {
  background: var(--apha-highlight);
  color: inherit;
  padding: 0;
}

.apha-doc u { text-decoration: underline; }

.apha-red { color: var(--apha-red); }

.apha-spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------
   3. UNDERLINED FIELD CELLS
   Every writable cell is a `.f` span carrying the printed rule;
   the control inside it is invisible so only the rule shows.
   ------------------------------------------------------------ */
.f {
  display: inline-flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--apha-rule);
  min-width: 0;
  margin: 0 2px;
}

.f .wpcf7-form-control-wrap { display: block; width: 100%; }

.apha-doc input[type="text"],
.apha-doc input[type="email"],
.apha-doc input[type="tel"],
.apha-doc input[type="url"],
.apha-doc input[type="number"],
.apha-doc input[type="date"],
.apha-doc input[type="time"],
.apha-doc select {
  width: 100%;
  height: 0.2in;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  color: inherit;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.apha-doc input:focus,
.apha-doc select:focus {
  background: #eef4ff;
  outline: 1px solid #2b6cb0;
  outline-offset: -1px;
}

/* strip number spinners so the printed rule stays clean */
.apha-doc input[type="number"] { -moz-appearance: textfield; }
.apha-doc input[type="number"]::-webkit-outer-spin-button,
.apha-doc input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.apha-doc input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.35; }

.apha-doc select { cursor: pointer; }

/* CF7 validation output must not disturb the printed layout */
.apha-doc .wpcf7-not-valid-tip {
  position: absolute;
  font-size: 16px;
  color: #c00;
  background: #fff;
  padding: 0 2px;
  white-space: nowrap;
  z-index: 3;
}
.apha-doc .f { position: relative; }
.apha-doc .wpcf7-not-valid { background: #fff2f2; }

/* ------------------------------------------------------------
   4. LABEL + FIELD ROWS
   ------------------------------------------------------------ */
.apha-fields { margin: 0.04in 0 0; }

.apha-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.04in;
  padding-left: 0.68in;          /* matches the indent of the printed form */
}

.apha-row .lbl { white-space: nowrap; }
.apha-row .lbl-tight { margin-left: -2px; }
.apha-row .lbl-dob { margin-left: 0.12in; }
.apha-row .lbl-slash { margin: 0 1px; }

.apha-row-2col > .col,
.apha-row-3col > .col {
  display: flex;
  align-items: flex-end;
  flex: 1 1 50%;
  min-width: 0;
}
.apha-row-2col > .col-right { flex: 1 1 50%; justify-content: flex-start; padding-left: 0.27in; }
.apha-row-3col { justify-content: flex-start; }

/* fixed cell widths taken from the original field geometry */
.f-grow        { flex: 1 1 auto; }
.f-dob         { flex: 0 0 1.10in; }
.f-org         { flex: 0 0 2.87in; }
.f-area        { flex: 0 0 0.44in; }
.f-date        { flex: 0 0 1.83in; }
.f-time        { flex: 0 0 1.53in; }
.f-time-sm     { flex: 0 0 0.58in; }
.f-num         { flex: 0 0 0.85in; }
.f-upload      { flex: 0 0 3in; border-bottom: 0; }

/* ------------------------------------------------------------
   5. PAGE 1 — LETTERHEAD AND RULES
   ------------------------------------------------------------ */
.apha-letterhead { text-align: center; margin-bottom: 0.12in; }
.apha-lh-1 { font-weight: bold; font-size: 16px; }
.apha-lh-2 { font-weight: bold; font-size: 16px; }
.apha-lh-3 { font-weight: bold; font-size: 16px; }

.apha-rules {
  margin: 0 0 0.12in;
  padding-left: 0.26in;
  list-style: decimal;
  font-size: 16px;
  line-height: 1.13;
}
.apha-rules > li {
  margin-bottom: 0.02in;
  padding-left: 0.06in;
}

.apha-doc .apha-compliance {
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  white-space: nowrap;
  margin: 0 0 0.14in;
}

/* ------------------------------------------------------------
   6. PAGE 1 — APPLICANT SIGNATURE BLOCK
   ------------------------------------------------------------ */
.apha-sig-block { margin-left: auto; width: 4.05in; }

.apha-sig-lines { display: flex; align-items: flex-end; }
.f-sigpad  { flex: 1 1 auto; }
.f-sigdate { flex: 0 0 1.15in; }

.apha-sig-captions {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  padding: 0 0.05in;
}
.apha-sig-cap-2 { padding-right: 0.28in; }

/* signature pad (Contact Form 7 Signature Addon) */
.apha-doc .wpcf7-form-control-wrap .apha-sigpad,
.apha-doc .apha-sigpad {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}
.apha-doc .apha-sigpad canvas,
.apha-doc canvas.signature-pad,
.apha-doc .wpcf7-signature canvas {
  display: block;
  width: 100% !important;
  height: 0.42in !important;
  border: 0 !important;
  background: transparent !important;
  cursor: crosshair;
  touch-action: none;
}
.apha-doc .wpcf7-signature .clear-signature,
.apha-doc .signature-clear,
.apha-doc a.clear-signature {
  display: inline-block;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #666;
  text-decoration: underline;
  position: absolute;
  right: 2px;
  bottom: 1px;
  z-index: 2;
}

/* ------------------------------------------------------------
   7. SECTION HEADINGS (I. / II. / III.)
   ------------------------------------------------------------ */
.apha-sec {
  display: inline-block;
  white-space: nowrap;
  margin: 0.05in 0 0.03in;
  padding: 0 3px 1px;
  border: 1px solid var(--apha-rule);
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: 0;
}

.apha-sec-row { display: flex; align-items: flex-end; gap: 0.12in; }
.apha-facility-select { flex: 0 0 2.92in; }
.apha-facility-select .wpcf7-form-control-wrap { display: block; }
.apha-doc .apha-select {
  height: 0.23in;
  border: 0;
  color: #1a4b8c;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
}

/* ------------------------------------------------------------
   8. PAGE 1 — ID NOTE AND 6-HOUR NOTE
   ------------------------------------------------------------ */
.apha-doc .apha-id-note {
  text-align: center;
  margin: 0.05in 0 0.02in;
  padding-right: 1.6in;
}
.apha-id-note em { font-style: italic; }

.apha-doc .apha-note-6hr {
  font-style: italic;
  font-size: 16px;
  line-height: 1.14;
  margin: 0.02in 0 0.03in;
}

/* ------------------------------------------------------------
   9. CHECKBOXES (day of week / community rooms)
   ------------------------------------------------------------ */
.apha-doc input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 8pt;
  height: 8pt;
  margin: 0 0 1px;
  border: 1px solid var(--apha-rule);
  background: #fff;
  vertical-align: middle;
  cursor: pointer;
}
.apha-doc input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 3px;
  height: 6px;
  margin: -1px 0 0 2px;
  border: solid #000;
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg);
}
.apha-doc input[type="checkbox"]:focus-visible { outline: 1px solid #2b6cb0; }

.apha-doc .wpcf7-list-item { margin: 0; display: inline-block; }
.apha-doc .wpcf7-list-item label { display: inline-flex; align-items: center; cursor: pointer; }
.apha-doc .wpcf7-list-item-label { margin-right: 3px; }

.apha-row-day > .col { flex: 0 0 3.2in; }
.apha-row-day > .col-right { flex: 1 1 auto; }
.apha-days { margin-left: 0.06in; font-size: 16px; white-space: nowrap; }
.apha-days .wpcf7-list-item { margin-right: 0.04in; }
.apha-days input[type="checkbox"] { width: 7.5pt; height: 7.5pt; }

.apha-doc .apha-rooms-head { font-weight: bold; margin-bottom: 0.06in; }
.apha-rooms .wpcf7-list-item { display: block; margin-bottom: 0.13in; }
.apha-rooms .wpcf7-list-item-label { margin-right: 0.1in; font-size: 16px; }
.apha-rooms input[type="checkbox"] { width: 10pt; height: 10pt; }

/* ------------------------------------------------------------
   10. PAGE 1 — FACILITY / FEE PANEL
   ------------------------------------------------------------ */
.apha-facility {
  display: flex;
  align-items: flex-start;
  margin-top: 0.08in;
  padding-left: 0.1in;
}
.apha-facility-left { flex: 0 0 2.6in; }
.apha-fee-box {
  flex: 0 0 3in;
  border: 1px solid var(--apha-rule);
  padding: 0.12in 0.14in;
}
.apha-fee-box p { margin-bottom: 0.14in; }
.apha-fee-box p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   11. PER-PAGE INITIALS (Adobe Sign initials fields)
   ------------------------------------------------------------ */
.apha-initials {
  position: absolute;
  right: var(--apha-margin);
  bottom: 0.16in;
  width: 0.66in;
  text-align: center;
}
.f-initials { display: flex; width: 100%; margin: 0; }
.apha-initials-cap {
  display: block;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  color: #777;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   12. PAGE 2 — HOLD HARMLESS AGREEMENT
   ------------------------------------------------------------ */
.apha-hha-head {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.55;
  margin: 0.62in 0 0.45in;
}

.apha-hha-fields .apha-row { padding-left: 0; margin-bottom: 0.24in; }
.f-hha       { flex: 0 0 3.22in; }
.f-hha-date  { flex: 0 0 1.83in; }
.f-hha-date2 { flex: 0 0 1.71in; }

.apha-hha-body {
  width: 5.1in;
  margin: 0.42in 0 0;
  text-align: justify;
  text-indent: 0.5in;
  line-height: 1.32;
}

.apha-hha-sign {
  display: flex;
  align-items: flex-start;
  margin-top: 1.5in;
}
/* the agreement pads are shallower than the one on page 1 */
.apha-hha-sign .apha-sigpad canvas { height: 0.3in !important; }
.apha-hha-staff { flex: 0 0 3.22in; }
.apha-hha-staff .apha-row { padding-left: 0; margin-bottom: 0.2in; }
.f-staff      { flex: 0 0 2.14in; }
.f-staff-sig  { flex: 0 0 2.36in; }
.f-staff-date { flex: 0 0 1.53in; }

.apha-hha-user { flex: 0 0 2.78in; }
.apha-under { margin-bottom: 0.14in; display: flex; flex-wrap: wrap; }
.f-user { flex: 0 0 100%; margin: 0; }
.apha-under .cap {
  flex: 0 0 100%;
  text-align: center;
  padding-top: 1px;
}
.apha-under-tel { display: flex; flex-wrap: wrap; }
.apha-under-tel { font-size: 0; }
.apha-under-tel .cap { font-size: 16px; }
.f-contact-area { flex: 0 0 0.44in; margin: 0; }
.f-contact { flex: 1 1 auto; margin: 0; }

/* ------------------------------------------------------------
   13. PAGES 3–4 — FACILITY USE REGULATIONS
   ------------------------------------------------------------ */
.apha-reg-title {
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 0.22in;
  padding: 0;
}

.apha-regs {
  margin: 0;
  padding-left: 0.3in;
  list-style: decimal;
  font-size: 16px;
}
.apha-regs > li {
  margin-bottom: 0.13in;
  padding-left: 0.08in;
  line-height: 1.22;
}
.apha-regs > li.apha-reg-plain { font-size: 16px; }
.apha-reg-caps { line-height: 1.3; }

.apha-sub {
  margin: 0.01in 0 0;
  padding-left: 0.26in;
  list-style: upper-alpha;
}
.apha-sub > li {
  margin-bottom: 0.005in;
  padding-left: 0.04in;
  line-height: 1.14;
}
.apha-sub > li::marker { font-size: 0.78em; }

.apha-sub-num {
  margin: 0;
  padding-left: 0.24in;
  list-style: decimal;
}
.apha-sub-num > li::marker { font-size: 0.85em; }

.apha-b-italic strong em { font-weight: bold; font-style: italic; }

/* ------------------------------------------------------------
   14. PAGE 4 — PAYPAL PANEL
   ------------------------------------------------------------ */
.apha-paypal {
  display: flex;
  align-items: flex-start;
  gap: 0.3in;
  margin-top: 0.55in;
  padding-left: 2.75in;
  font-family: "Inter Tight", sans-serif;
}

.apha-paypal-card {
  flex: 0 0 2.05in;
  background: #f4f2ef;
  padding: 0.45in 0.13in 0.45in;
  text-align: center;
}
.apha-doc .apha-paypal-title {
  font-size: 16px;
  color: #2b2b2b;
  margin-bottom: 0.16in;
}
.apha-paypal-inner {
  background: #fff;
  border-radius: 6px;
  padding: 0.14in 0.1in 0.1in;
}
.apha-paypal-qr {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1.62in;
  margin: 0 auto;
}
.apha-doc .apha-paypal-handle {
  font-size: 16px;
  color: #2b2b2b;
  margin-top: 0.12in;
}
.apha-doc .apha-paypal-tag {
  font-size: 16px;
  color: #2b2b2b;
  margin-top: 0.38in;
}

.apha-paypal-steps { flex: 1 1 auto; padding-top: 1.45in; font-size: 16px; }
.apha-paypal-steps p { margin-bottom: 0.055in; line-height: 1.3; }
.apha-paypal-steps .apha-red { margin-top: 0.055in; }

/* ------------------------------------------------------------
   15. SUBMIT + CF7 RESPONSE MESSAGES
   ------------------------------------------------------------ */
.apha-submit { width: var(--apha-page-w); margin: 0 auto; padding: 0.3in 0 0; text-align: center; }

.apha-doc .apha-submit input[type="submit"] {
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.02em;
  padding: 0.09in 0.4in;
  color: #fff;
  background: #1a3d6d;
  border: 1px solid #12294a;
  border-radius: 2px;
  cursor: pointer;
}
.apha-doc .apha-submit input[type="submit"]:hover { background: #14314f; }
.apha-doc .apha-submit input[type="submit"]:focus-visible { outline: 2px solid #2b6cb0; outline-offset: 2px; }

.apha-doc .wpcf7-spinner { display: block; margin: 0.1in auto 0; }
.apha-doc .wpcf7-response-output {
  max-width: 7.5in;
  margin: 0.15in auto 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
}

/* ------------------------------------------------------------
   16. RESPONSIVE — the sheet reflows below letter width
   ------------------------------------------------------------ */
@media (max-width: 8.9in) {
  .apha-doc { padding: 0; background: #fff; font-size: 15px; }

  .apha-page {
    width: 100%;
    min-height: 0;
    margin: 0 0 24px;
    padding: 20px 16px 44px;
    box-shadow: none;
  }

  .apha-row,
  .apha-row-2col,
  .apha-row-3col {
    display: block;
    padding-left: 0;
    margin-bottom: 14px;
  }
  .apha-row .lbl { display: block; white-space: normal; }
  .apha-row-2col > .col,
  .apha-row-3col > .col { display: block; padding-left: 0; margin-bottom: 14px; }
  .apha-row-2col > .col:last-child,
  .apha-row-3col > .col:last-child { margin-bottom: 0; }
  .apha-row-2col > .col-right { padding-left: 0; }

  .f,
  .f-grow, .f-dob, .f-org, .f-area, .f-date, .f-time, .f-time-sm, .f-num,
  .f-hha, .f-hha-date, .f-hha-date2, .f-staff, .f-staff-sig, .f-staff-date,
  .f-user, .f-contact, .f-sigpad, .f-sigdate, .f-upload {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }
  .f-area, .f-contact-area { width: 3.5em; flex: 0 0 3.5em; }
  .apha-row .lbl-tight, .apha-row .lbl-slash { display: inline; }

  .apha-doc input, .apha-doc select { height: 26px; font-size: 15px; }

  .apha-sig-block { width: 100%; }
  .apha-sig-lines { display: block; }
  .f-sigdate { margin-top: 14px; }
  .apha-sig-captions { display: block; }
  .apha-sig-cap-2 { display: block; padding: 0; }

  .apha-facility, .apha-hha-sign, .apha-sec-row, .apha-paypal { display: block; }
  .apha-fee-box { margin-top: 16px; }
  .apha-facility-select { margin-top: 10px; }
  .apha-hha-user { margin-top: 24px; }
  .apha-hha-body, .apha-hha-head { width: 100%; margin: 24px 0; }
  .apha-hha-head { font-size: 24px; }
  .apha-id-note { padding-right: 0; }
  .apha-paypal { padding-left: 0; text-align: center; }
  .apha-paypal-card { margin: 0 auto; width: 220px; flex-basis: auto; }
  .apha-paypal-steps { padding-top: 20px; text-align: left; }
  .apha-initials { position: static; width: 100%; text-align: left; margin-top: 20px; }
  .f-initials { width: 4em; }
  .apha-submit { width: 100%; padding: 8px 16px 32px; }
  .apha-sec, .apha-doc .apha-compliance, .apha-days { white-space: normal; }
  .apha-sec { display: block; }
  .apha-days { font-size: inherit; }
  .apha-days .wpcf7-list-item { margin: 0 14px 8px 0; }
  .apha-fee-box, .apha-facility-left, .apha-hha-staff, .apha-hha-user,
  .apha-facility-select { width: 100%; flex-basis: auto; }
}

/* ------------------------------------------------------------
   17. PRINT — restores the exact paper original
   ------------------------------------------------------------ */
@media print {
  .apha-doc { background: none; padding: 0; }
  .apha-page {
    box-shadow: none;
    margin: 0;
    page-break-after: always;
    break-after: page;
  }
  .apha-page:last-of-type { page-break-after: auto; break-after: auto; }
  .apha-submit, .apha-doc .wpcf7-spinner, .apha-doc .wpcf7-response-output { display: none; }
  .apha-doc mark { background: var(--apha-highlight) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------
   18. REDUCED MOTION / ACCESSIBILITY
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .apha-doc * { animation: none !important; transition: none !important; }
}