/* =============================================================================
   ENQUIRY FORM — SELF-HOSTED (no Formsite)
   =============================================================================
   The visual twin of /assets/form-css-enquiry.css, which styles the Formsite
   form inside its iframe. Same palette, same measurements, same card. The
   difference is where it runs.

   THE IFRAME WAS A STYLING SANDBOX AND WE HAVE JUST LOST IT. Inside the frame,
   `body`, `.q` and `.form_table` could be styled with no thought for the rest
   of the site, because nothing else was in that document. This form is now IN
   the page, alongside style-cpcards-responsive.css, and that stylesheet has
   opinions about p, a, label, input and everything else. So:

     * EVERY RULE HERE IS SCOPED to .cpc-form. No bare element selectors.
     * Class names are prefixed cpc- so they cannot collide with the site's own
       (.q and .form_table in particular are Formsite's, and are not used here).
     * A handful of properties are re-stated that the iframe version could take
       as browser defaults — line-height on inputs, colour on labels — because
       the site stylesheet sets them and would otherwise win.

   COLOURS, ALL FROM THE SITE PALETTE. Copied from form-css-enquiry.css, where
   each pairing was measured rather than guessed:
       #B45309  CTA amber — submit button, focus ring, the band behind the card
       #FFFFFF  the card
       #FCFAF6  field fill: a shade off the card, so a field reads as somewhere
                to type rather than as an outline
       #B08D63  field border (3.07:1 on white — the 3:1 threshold that applies
                to UI component boundaries)
       #032C2C  question labels (13.3:1 on the card)
       #37474F  typed text (9.65:1)
       #123A52  links (10.6:1)
       #8A2E12  required asterisk and error text (6.85:1 on the error tint)
       #767676  hints (4.6:1 — still AA)

   THE FONT IS UBUNTU, NOT ROBOTO. form-css-enquiry.css asks for Roboto, which
   inside the Formsite iframe resolved to Formsite's own copy. This page has no
   Roboto: the site self-hosts Ubuntu (see header-responsive.php) and nothing
   else. Asking for Roboto here would silently fall back to the generic
   sans-serif and render in Arial, so the stack names Ubuntu first.
   ========================================================================== */


/* -- the band ---------------------------------------------------------------
   .colformfullwidth in the site stylesheet already paints the full-bleed amber
   band and its 5px edges. This only opens the band up, now that its content is
   a div rather than an iframe carrying its own height.
   -------------------------------------------------------------------------- */
.cpc-form-band {
  padding-top: 30px;
}


/* -- the cream panel --------------------------------------------------------
   THIS IS THE IFRAME'S GHOST, AND IT IS NOT DECORATIVE. In the Formsite
   version this cream was the iframe's own `body` background: the frame was
   1200px wide (`.colformfullwidth iframe` in the site stylesheet pins it there)
   and covered the middle of the amber band, so the visible amber was only ever
   a frame around a cream field, with the white card floating in the middle of
   THAT.

   Drop the panel and the layers collapse from three to two — and the submit
   button, which is #B45309, lands directly on the #B45309 band and disappears.
   Reproducing the panel keeps the button on cream where it has 5:1 of contrast,
   and keeps the page looking like the one it replaces rather than merely
   containing the same fields.

   It was 1200px, the old iframe's own width. Since 2026-11-11 (owner) it is
   the full 1400px canvas on desktop, the same as the quote forms' cream card,
   so it lines up with the page edges. The white card inside keeps its 880px.
   -------------------------------------------------------------------------- */
.cpc-form-panel {
  box-sizing: border-box;
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 20px 28px 20px;
  background: #F7F0E8;
}


/* -- the card ---------------------------------------------------------------
   880px is not arbitrary. At full width the single-line inputs render ~1140px,
   and a 1140px input is not a field, it is a horizon — the eye has no idea
   where the answer starts or stops. 880 puts the full-width fields at a
   readable measure and lands the two-up rows at ~409px each.
   -------------------------------------------------------------------------- */
.cpc-form {
  box-sizing: border-box;
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 26px 26px 26px;
  background: #FFFFFF;
  border: 1px solid #E4D8C6;
  border-radius: 16px;
  box-shadow: 0 18px 44px -26px rgba(3, 44, 44, 0.40);
  text-align: left;
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #032C2C;
}

/* The enquiry form's card fills the cream panel (owner, 2026-11-11, after the
   panel went to 1400px: "make the contents wider to better fill the width"),
   so 1360px on desktop and the two-up fields about 640px each. #enquiry-form is
   every form enquiry-embed.php draws (enquiry, /help/, the form editor's
   simple forms); #upload-form is the /upload/ page's (owner, the same day). */
#enquiry-form.cpc-form,
#upload-form.cpc-form {
  max-width: none;
}

.cpc-form *,
.cpc-form *::before,
.cpc-form *::after {
  box-sizing: border-box;
}

/* The heading graphic. width/height are also on the <img> itself so the space
   is reserved before it loads — this is the first thing in the card, and
   without it everything below shifts down when it arrives (CLS). */
.cpc-form__heading {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 4px 0;
}

.cpc-form__intro {
  margin: 0 0 6px 0;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #032C2C;
}

/* The site stylesheet gives every `a` a 28px line-height and bold weight, which
   inside a 14px line reads as a jump. Reset within the card only. */
.cpc-form a {
  color: #123A52;
  font-weight: 700;
  line-height: inherit;
}
.cpc-form a:hover,
.cpc-form a:focus {
  color: #006E00;
}
/* The sales@cpcards.co.uk line is black by request — it was black in the
   Formsite version too, for the same reason: it is the fallback route, and it
   should read as text with a link in it rather than as a link. */
.cpc-form__intro a {
  color: #000000;
}


/* -- the grid ---------------------------------------------------------------
   Two-up on desktop, one-up on a phone. Grid rather than the float-based
   layout Formsite used: floats needed a .clear div between every row, and the
   columns could not equalise their heights, so a two-line label on one side
   pushed its partner's field out of alignment.
   -------------------------------------------------------------------------- */
.cpc-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin-top: 12px;
}

.cpc-field {
  min-width: 0;      /* without this a grid child refuses to shrink below its
                        content's intrinsic width and the row overflows */
}

/* Anything not explicitly half-width spans the row. */
.cpc-field--full {
  grid-column: 1 / -1;
}


/* -- labels ------------------------------------------------------------------ */
.cpc-field__label {
  display: block;
  margin: 0 0 6px 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #032C2C;
}

.cpc-field__hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #767676;
}

/* The asterisk was the same ink as the label in an early version of the
   Formsite CSS, which made "required" invisible at a glance. #8A2E12 is this
   form's one warning colour — no second vocabulary. */
.cpc-field__req {
  color: #8A2E12;
  font-weight: 700;
}


/* -- controls ---------------------------------------------------------------- */
.cpc-field__input,
.cpc-field__select,
.cpc-field__textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: #FCFAF6;
  border: 1px solid #B08D63;
  border-radius: 8px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;   /* 16px exactly: iOS Safari zooms the page on focus for
                        anything smaller, which on a phone throws the layout */
  line-height: 1.4;
  color: #37474F;
  box-shadow: inset 0 1px 2px rgba(3, 44, 44, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.cpc-field__textarea {
  min-height: 90px;
  resize: vertical;   /* vertical only — horizontal resize breaks the grid */
  line-height: 1.5;
}

/* appearance:none above removed the native dropdown arrow along with the
   native chrome, so it is drawn back as a background SVG. Inlined as a data
   URI rather than a file: it is 200 bytes, and a separate request for an arrow
   is a request too many. */
.cpc-field__select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2337474F' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.cpc-field__input:hover,
.cpc-field__select:hover,
.cpc-field__textarea:hover,
.cpc-field__file:hover {
  border-color: #8A6640;
}

/* FOCUS STATES ARE NOT OPTIONAL. The Formsite form had none — tabbing through
   it moved an invisible cursor. 3px of the CTA amber reads against both the
   #FCFAF6 field and the white card. */
.cpc-field__input:focus,
.cpc-field__select:focus,
.cpc-field__textarea:focus,
.cpc-field__file:focus,
.cpc-form__submit:focus-visible {
  outline: 3px solid rgba(180, 83, 9, 0.55);
  outline-offset: 1px;
  border-color: #8A6640;
  background-color: #FFFFFF;
}

.cpc-field__input::placeholder,
.cpc-field__textarea::placeholder {
  color: #767676;
  opacity: 1;
}


/* -- tick boxes and the sample pack line --------------------------------------
   The sample pack form's list of card types, and the one thing it orders. A
   fieldset, so a screen reader hears the question with each box.
   -------------------------------------------------------------------------- */
.cpc-checks {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.cpc-checks legend {
  padding: 0;
}
.cpc-check {
  display: block;
  padding: 6px 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #37474F;
  cursor: pointer;
}
.cpc-check input {
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
  vertical-align: -3px;
  accent-color: #B45309;
}
.cpc-fixed {
  margin: 0;
  padding: 12px 14px;
  background: #F7F0E8;
  border-radius: 8px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #032C2C;
}


/* -- file input --------------------------------------------------------------
   Left as a real <input type="file"> rather than the usual hidden-input-plus-
   styled-label trick. That trick loses the keyboard affordance and the
   drag-and-drop target unless both are rebuilt by hand, and the only thing it
   buys is control over the button's text. Styling the button in place with
   ::file-selector-button keeps everything native and working.
   -------------------------------------------------------------------------- */
.cpc-field__file {
  display: block;
  width: 100%;
  padding: 8px;
  background: #FCFAF6;
  border: 1px solid #B08D63;
  border-radius: 8px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  color: #37474F;
  cursor: pointer;
}

.cpc-field__file::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  background: #123A52;
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cpc-field__file::file-selector-button:hover {
  filter: brightness(1.35);
}

/* Written by the page's JS once files are chosen, so the visitor can see what
   they attached without opening the picker again. */
.cpc-form__filelist {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #37474F;
}
.cpc-form__filelist li {
  padding: 4px 0;
  border-bottom: 1px solid #F0E6D8;
}
.cpc-form__filelist li:last-child {
  border-bottom: 0;
}
.cpc-form__filelist .cpc-size {
  color: #767676;
}


/* -- validation state -------------------------------------------------------- */
.cpc-field--error .cpc-field__input,
.cpc-field--error .cpc-field__select,
.cpc-field--error .cpc-field__textarea,
.cpc-field--error .cpc-field__file {
  border-color: #8A2E12;
  border-width: 2px;
  background: #FDF6F2;
}

.cpc-field__error {
  display: block;
  margin: 6px 0 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #8A2E12;
}

/* The summary at the top of the form after a failed submission. It is what the
   page scrolls and focuses to, so someone using a screen reader is told what
   went wrong rather than being dropped back at an unchanged form. */
.cpc-form__errors {
  margin: 14px 0 0 0;
  padding: 16px 18px;
  background: #F6E4D6;
  border: 2px solid #8A2E12;
  border-radius: 10px;
}
.cpc-form__errors h2 {
  margin: 0 0 8px 0;
  padding: 0;
  text-align: left;
  font-family: 'Ubuntu', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #8A2E12;
}
.cpc-form__errors ul {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc;
}
.cpc-form__errors li {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.45;
  color: #8A2E12;
}
.cpc-form__errors a {
  color: #8A2E12;
}
/* The summary takes focus programmatically; it must not then show a focus ring
   as though it were a control. */
.cpc-form__errors:focus {
  outline: none;
}


/* -- submit ------------------------------------------------------------------
   Sits UNDER the card, on the card's own measure and centred with it — the same
   arrangement the Formsite version ended up with. The hover does not swap
   colour; it lifts and brightens the same object, which is what every other
   button on the site does.
   -------------------------------------------------------------------------- */
.cpc-form__actions {
  max-width: 880px;
  margin: 18px auto 0 auto;
  text-align: center;
}

.cpc-form__submit {
  display: inline-block;
  min-width: 20%;
  padding: 16px 28px;
  background: #B45309;
  color: #FFFFFF;
  border: 0;
  border-radius: 12px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
}
.cpc-form__submit:hover,
.cpc-form__submit:focus {
  filter: brightness(1.15);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 26px rgba(3, 44, 44, 0.18);
}
.cpc-form__submit:active {
  transform: translateY(1px) scale(1);
  filter: brightness(0.95);
}

/* Set by the page's JS on submit. Uploading 40 MB of artwork takes long enough
   that without this the visitor assumes nothing happened and clicks again —
   which, before the button disabled itself, sent the enquiry twice. */
.cpc-form__submit[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  filter: none;
}

/* Sits on the cream panel, not on the white card and not on the amber band —
   so it takes the site's ordinary body ink (#555 is 6.6:1 on this cream) rather
   than the white it would need on amber. */
.cpc-form__privacy {
  max-width: 880px;
  margin: 14px auto 0 auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #555555;
  text-align: center;
}
.cpc-form__privacy a {
  color: #123A52;
  text-decoration: underline;
}


/* -- the honeypot ------------------------------------------------------------
   THE ONE RULE IN THIS FILE THAT MUST NOT BE "TIDIED UP". This hides the trap
   field from people while leaving it in the DOM for bots to fill in.

   `display:none` alone would be the obvious way and it is the wrong way: the
   better bots skip anything with display:none or visibility:hidden precisely
   because it is the well-known tell. Moving it off-screen at a real size, with
   no visible box, is what a form-filling script cannot distinguish from a real
   field.

   The field also carries tabindex="-1" and autocomplete="off" in the markup, so
   a keyboard user never lands in it and no password manager offers to fill it.
   -------------------------------------------------------------------------- */
.cpc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* -- phones ------------------------------------------------------------------ */
@media only screen and (max-width: 700px) {
  .cpc-form {
    padding: 10px 16px 20px 16px;
    /* Formsite's responsive CSS squared the panel below 480px, so the card kept
       its border and shadow on a phone but lost its corners. Keeping the radius
       is deliberate: the card should look like the same object on both. */
    border-radius: 14px;
  }
  .cpc-form__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .cpc-form__submit {
    width: 100%;
  }
}

@media only screen and (max-width: 420px) {
  .cpc-field__file::file-selector-button {
    display: block;
    margin: 0 0 8px 0;
    width: 100%;
  }
}


/* -- people who have asked for less motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cpc-form__submit,
  .cpc-field__input,
  .cpc-field__select,
  .cpc-field__textarea,
  .cpc-field__file::file-selector-button {
    transition: none;
  }
  .cpc-form__submit:hover,
  .cpc-form__submit:focus {
    transform: none;
  }
}