/* ===========================================================================
   Booked Wild — the page contact block

   One self-contained component, loaded on every page that does not already
   carry the full Bristol/Levi contact section. It is deliberately independent:
   the homepage is a generated bundle with inline styles, /services/ uses
   services.css and the Journal uses journal.css, so a component that inherits
   from any one of them would look different on the other two. Everything here
   is scoped under .pgform and carries its own tokens.

   The visual language is the one the contact pages already use — a cream panel
   on the dark green ground.
   =========================================================================== */

.pgform {
  --pf-ink: #0C2A1C;
  --pf-ink-2: #0A1F14;              /* the darkest ground, as used behind code */
  --pf-cream: #F2F6EE;
  --pf-white: #FFFFFF;
  --pf-body: #22452F;
  --pf-muted: #5A7264;
  --pf-line: #D3E0CE;
  --pf-accent: #3E8E4F;
  --pf-accent-soft: #9FDCA9;
  --pf-accent-mid: #7FC98B;
  --pf-field: #1E6B3C;
  --pf-r-pill: 999px;
  --pf-r-card: 24px;
  --pf-r-lg: 28px;
  --pf-r-md: 18px;
  --pf-r-sm: 12px;

  /* A deeper ground than the footer beneath it, so the band reads as its own
     section rather than running into it, and a hairline on the seam. */
  background: var(--pf-ink-2);
  color: var(--pf-cream);
  padding: 112px 40px;
  border-bottom: 1px solid rgba(242, 246, 238, 0.18);
  box-sizing: border-box;
}
.pgform *, .pgform *::before, .pgform *::after { box-sizing: border-box; }

.pgform__inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* Two columns of very different content lengths left a 537px void under the
   intro. Rather than pad that out, the two halves are now one object: a single
   card split down the middle. Both halves are the same height by construction,
   so the left is a designed surface instead of an empty column, and its copy
   sits centred against the form rather than stranded at the top. */
.pgform__card {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  border-radius: var(--pf-r-lg);
  border-top: 4px solid var(--pf-accent);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.pgform__intro {
  /* a shade lighter than the section ground, so the split reads as one card
     sitting on the band rather than a hole cut into it */
  background: var(--pf-ink);
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pgform__intro > .pgform__lede { margin-bottom: auto; }

.pgform__rule {
  width: 64px; height: 3px; border-radius: 2px;
  background: var(--pf-accent-mid);
  margin: 0 0 26px;
}
.pgform__title {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--pf-white);
  margin: 0 0 22px;
}
.pgform__lede {
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: rgba(242, 246, 238, 0.82);
  margin: 0;
  max-width: 46ch;
}
.pgform__lede a {
  color: var(--pf-white);
  font-weight: 700;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
  padding-bottom: 1px;
  text-decoration: none;
}
.pgform__lede a:hover { color: var(--pf-accent-soft); border-bottom-color: var(--pf-accent-soft); }

/* ---- the form half ------------------------------------------------------ */
.pgform__panel {
  background: var(--pf-cream);
  padding: 40px 44px 36px;
  color: var(--pf-body);
}
.pgform__form { display: flex; flex-direction: column; gap: 16px; }
/* same trap as the confirmation below: the form is hidden on success, and a
   display rule here would outrank the hidden attribute */
.pgform__form[hidden] { display: none; }
/* the message is the ask, so it gets a little air and a hairline above it */
.pgform__form .pgform__field--message {
  margin-top: 2px; padding-top: 20px;
  border-top: 1px solid var(--pf-line);
}
.pgform__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pgform__field { display: flex; flex-direction: column; }

.pgform label {
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--pf-body); margin: 0 0 7px;
}
.pgform__req { color: var(--pf-accent); }
.pgform__opt { color: var(--pf-muted); font-weight: 500; }

.pgform input, .pgform textarea {
  width: 100%;
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 16px;                    /* 16px stops iOS zooming the page on focus */
  line-height: 1.5;
  color: var(--pf-ink);
  background: var(--pf-white);
  border: 1.5px solid var(--pf-line);
  border-radius: var(--pf-r-sm);
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pgform textarea { min-height: 96px; resize: vertical; border-radius: var(--pf-r-md); }
.pgform input:focus, .pgform textarea:focus {
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 3px rgba(62, 142, 79, 0.16);
}
.pgform input[aria-invalid="true"], .pgform textarea[aria-invalid="true"] { border-color: #A32F2F; }

.pgform__send {
  align-self: flex-start;
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 16px; font-weight: 600;
  border: 0; border-radius: var(--pf-r-pill);
  background: var(--pf-accent); color: var(--pf-white);
  padding: 15px 32px; cursor: pointer;
  margin-top: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}
.pgform__send:hover { background: var(--pf-ink); }
.pgform__send[disabled] { opacity: 0.65; cursor: default; }

.pgform__msg { font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 14.5px; line-height: 1.55; margin: 0; }
.pgform__msg--error { color: #A32F2F; }
.pgform__note {
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: rgba(242, 246, 238, 0.62);
  margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(242, 246, 238, 0.16);
}

.pgform__done { display: flex; flex-direction: column; gap: 12px; }
/* The confirmation is shown only once the server has accepted the message.
   `display:flex` above outranks the UA's [hidden]{display:none}, so without
   this the success copy sat under every form permanently. */
.pgform__done[hidden] { display: none; }
.pgform__done h3 {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 23px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800;
  color: var(--pf-ink); margin: 0;
}
.pgform__done p { font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.55; color: var(--pf-body); margin: 0; }
.pgform__done:focus { outline: none; }

/* The enquiry widget's two stages carry an inline display:flex, which likewise
   outranks [hidden] — so opening the widget showed the form and the "Got it"
   confirmation at the same time. Fixed here rather than in the widget markup,
   which is inlined into four different pages. */
[data-help-stage][hidden] { display: none !important; }

/* the honeypot: reachable by bots, never by people */
.pgform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  /* the card stacks: intro on top, form beneath, still one object */
  .pgform { padding: 88px 32px; }
  .pgform__card { grid-template-columns: minmax(0, 1fr); }
  .pgform__intro { padding: 44px 40px; justify-content: flex-start; }
  .pgform__intro > .pgform__lede { margin-bottom: 0; }
  .pgform__lede { max-width: 60ch; }
  .pgform__panel { padding: 40px 40px 36px; }
}
@media (max-width: 768px) {
  .pgform { padding: 72px 24px; }
  .pgform__intro { padding: 36px 28px; }
  .pgform__panel { padding: 32px 28px 28px; }
  .pgform__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pgform__form .pgform__field--message { padding-top: 18px; }
  .pgform__note { margin-top: 22px; padding-top: 18px; }
}
@media (max-width: 560px) {
  .pgform { padding: 60px 18px; }
  .pgform__card { border-radius: var(--pf-r-md); }
  .pgform__intro { padding: 30px 22px; }
  .pgform__panel { padding: 28px 22px 26px; }
  .pgform__send { width: 100%; text-align: center; }
}
@media (max-width: 390px) {
  .pgform { padding: 52px 15px; }
}