/* ==========================================================================
   Form pages: /jobs/ and /bremerton-the-boat-shed-party/
   Shared by both pages (same section, divider, bordered box and form look).
   ========================================================================== */

/* ---------- Page section: photo background with 95% white overlay ---------- */
.form-page {
  padding: 100px 20px;
  background: url("/images/boatshedbremerton-backgrond2.jpg") center center / cover no-repeat;
}
.form-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-white);
  opacity: .95;
  pointer-events: none;
}
.form-page > .inner { position: relative; z-index: 1; }
@media (min-width: 1401px) { .form-page { background-attachment: fixed; } }
@media (max-width: 1024px) { .form-page { padding: 50px 20px; } }
@media (max-width: 767px)  { .form-page { padding: 50px 10px; } }

/* Empty trailing container from the original page (10px padding = 20px tall) */
.spacer { min-height: 20px; }

/* ---------- "Jobs" / "PARTIES" heading with a line on each side ---------- */
.divider { display: flex; align-items: center; width: 100%; }
.divider::before, .divider::after {
  content: "";
  display: block;
  flex-grow: 1;
  border-top: 1px solid var(--c-primary);
}
.divider h1, .divider h2 {
  flex-shrink: 0;
  margin: 0 10px;
  font-size: 3.5em;
  line-height: 1;
  max-width: 95%;
}

/* ---------- Bordered box (sits 48px up so the divider line meets its top) ---------- */
.form-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  margin-top: -48px;
  padding: 75px 40px 50px;
  border: 1px solid var(--c-primary);
  border-top: 0;
}
.form-box-jobs { min-height: 500px; }
@media (max-width: 1024px) { .form-box { padding: 50px 20px; } }
@media (max-width: 767px)  { .form-box { padding: 50px 10px; } }

.form-box .lead {
  width: 80%;
  max-width: 80%;
  align-self: center;
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--f-ui);
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.3em;
  color: var(--c-slate);
}
@media (max-width: 1024px) { .form-box .lead { width: 95%; max-width: 95%; font-size: 1.1em; } }
@media (max-width: 767px)  { .form-box .lead { font-size: 1em; line-height: 1.2em; } }

.parties-title {
  text-align: center;
  font-size: 3em;
  color: var(--c-secondary);
}

/* Jobs: form is 80% wide and centred */
.jobs-form { width: 80%; max-width: 80%; align-self: center; }
@media (max-width: 1024px) { .jobs-form { width: 95%; max-width: 95%; } }
@media (max-width: 767px)  { .jobs-form { width: 99%; max-width: 99%; } }

/* Parties: photos on the left, form on the right */
.parties-row { display: flex; flex-direction: row; gap: 40px; width: 100%; }
.parties-row > * { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 1024px) { .parties-row { flex-direction: column-reverse; } }

.parties-gallery { gap: 10px; }
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background-color .8s;
}
.gallery-item:hover::after, .gallery-item:focus::after { background: rgba(0, 0, 0, .5); }

.parties-form { width: 100%; }

/* ---------- Form fields (Elementor form look-alike) ---------- */
.bs-form .fields {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px -20px;
}
.bs-form .field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  margin: 0 0 20px;
  border: 0;
  min-width: 0;
}
.bs-form .field.half { width: 50%; }
.bs-form .field[hidden] { display: none; }
.bs-form fieldset.field { min-inline-size: 0; }
.bs-form legend { padding: 0; float: left; width: 100%; }

.bs-form .field > label,
.bs-form legend {
  display: block;
  width: 100%;
  padding-bottom: 5px;
  cursor: pointer;
  font-family: var(--f-ui);
  font-weight: 500;
  color: var(--c-slate);
}
.bs-form .field.required > label::after,
.bs-form .field.required > legend::after {
  content: "*";
  color: red;
  padding-inline-start: .2em;
}

.bs-form input[type="text"],
.bs-form input[type="tel"],
.bs-form input[type="email"],
.bs-form input[type="date"],
.bs-form input[type="time"],
.bs-form textarea,
.bs-form select {
  flex-basis: 100%;
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 5px 14px;
  border: 1px solid #2B45609E;
  border-radius: 0;
  background-color: #fff;
  color: #2B4560E3;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
}
.bs-form textarea { resize: vertical; }
.bs-form input:focus, .bs-form textarea:focus, .bs-form select:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.bs-form ::placeholder { color: inherit; opacity: .6; font-family: inherit; }

/* Select with the Elementor caret */
.bs-form .select-wrap { position: relative; display: flex; width: 100%; flex-basis: 100%; }
.bs-form .select-wrap select { padding-inline-end: 20px; }
.bs-form .select-wrap .caret {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  fill: #2B45609E;
  pointer-events: none;
}

/* Radio options in a row */
.bs-form .options { display: flex; flex-wrap: wrap; flex-basis: 100%; max-width: 100%; }
.bs-form .option { padding-inline-end: 10px; }
.bs-form .option input { display: inline; margin: 3px 3px 3px 4px; }
.bs-form .option label {
  display: inline;
  font-family: var(--f-text);
  font-weight: 400;
  color: var(--c-slate);
  cursor: pointer;
}

/* File upload */
.bs-form input[type="file"] {
  width: 100%;
  font-family: var(--f-text);
  font-size: 15px;
  color: #2B4560E3;
}

/* Small helper text (parties "Space Preference" note) */
.bs-form .field.note {
  padding-bottom: 10px;
  color: #2B4560D9;
  font-size: 14px;
  font-family: var(--f-text);
}

/* Honeypot: off-screen for humans, present for bots */
.bs-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit button: full width, 47px tall, Bebas 35px (site default) */
.bs-form .field.submit { align-items: flex-end; }
.bs-form button[type="submit"] {
  flex-basis: 100%;
  width: 100%;
  min-height: 47px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-form button[type="submit"]:disabled { opacity: .7; cursor: default; }

/* AJAX response line */
.form-message { margin-top: 20px; font-family: var(--f-ui); font-weight: 500; text-align: center; }
.form-message:empty { display: none; }
.form-message.success { color: #1a7f37; }
.form-message.error { color: var(--c-primary); }

@media (max-width: 767px) {
  .bs-form .field.half { width: 100%; }
}