/* ==========================================================================
   Forms and the stand price list
   --------------------------------------------------------------------------
   The enquiry form reproduces the design's field styling; the design's own
   markup was replaced because it posted to `mailto:`, which loses enquiries.

   Focus states are real here. The design set `outline: none` on every field
   with nothing in its place, which leaves a keyboard user with no idea where
   they are — a straightforward WCAG 2.4.7 failure.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Enquiry form
   -------------------------------------------------------------------------- */

.cme-enquiry {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cme-enquiry__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cme-enquiry__field label {
  font-family: var(--cme-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--cme-track-label);
  text-transform: uppercase;
  color: var(--cme-gold-dark);
}

.cme-enquiry input[type="text"],
.cme-enquiry input[type="email"],
.cme-enquiry input[type="tel"],
.cme-enquiry textarea {
  width: 100%;
  background: var(--cme-white);
  border: 1px solid var(--cme-border-field);
  padding: 14px 16px;
  font-family: var(--cme-font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--cme-ink-input);
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* Tightened 2026-08-27 at the client's request: the form ran a long way down
   the page. The message box was most of it — 220px is roughly nine lines, and
   nobody was writing nine lines. 132px still shows five, and the box stays
   resizable for anyone who wants more room.

   16px on the font stays: iOS zooms the whole page when a focused field is
   under 16px, which reads as the layout jumping on every tap. */
.cme-enquiry textarea {
  resize: vertical;
  min-height: 132px;
  line-height: 1.6;
}

.cme-enquiry input:focus-visible,
.cme-enquiry textarea:focus-visible {
  outline: none;                       /* replaced, not removed */
  border-color: var(--cme-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .25);
}

/* Only flag a field the browser considers invalid AFTER the user has engaged
   with it — :invalid alone reddens an untouched required field on load. */
.cme-enquiry input:not(:placeholder-shown):invalid,
.cme-enquiry textarea:not(:placeholder-shown):invalid {
  border-color: #b32d2e;
}

/* Honeypot: hidden from sight and from assistive technology, but NOT with
   display:none — some bots skip those, and the point is that they fill it in. */
.cme-enquiry__trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cme-enquiry__consent {
  display: flex;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cme-body);
}

.cme-enquiry__consent label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.cme-enquiry__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cme-gold-dark);
}

.cme-enquiry__consent a {
  color: var(--cme-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cme-enquiry__submit {
  align-self: flex-start;
  margin-top: 6px;
  background: var(--cme-ink);
  border: 1px solid var(--cme-ink);
  color: var(--cme-white);
  padding: 18px 34px;
  font-family: var(--cme-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--cme-track-cta);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}

.cme-enquiry__submit:hover { background: var(--cme-ink-soft); }

.cme-enquiry__notice {
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  border-left: 3px solid;
}

.cme-enquiry__notice--ok {
  background: rgba(124, 138, 90, .12);
  border-color: var(--cme-status-available);
  color: var(--cme-ink-head);
}

.cme-enquiry__notice--error {
  background: rgba(179, 45, 46, .08);
  border-color: #b32d2e;
  color: var(--cme-ink-head);
}

/* site.js focuses this message after a submission so keyboard users land on
   the outcome. :focus-visible rather than :focus, so a mouse user who has just
   clicked Submit does not get an outline drawn around the thank-you note. */
.cme-enquiry__notice:focus-visible {
  outline: 2px solid var(--cme-gold-dark);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Stand price list
   -------------------------------------------------------------------------- */

.cme-stands__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cme-stands__search input {
  min-width: 260px;
  background: var(--cme-white);
  border: 1px solid var(--cme-border-light);
  padding: 13px 16px;
  font-family: var(--cme-font-body);
  font-size: 16px;
  color: var(--cme-ink-head);
}

.cme-stands__search input:focus-visible {
  outline: none;
  border-color: var(--cme-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .25);
}

.cme-stands__count {
  margin: 0;
  font-family: var(--cme-font-body);
  font-size: 15px;
  color: var(--cme-body);
}

/* The table is wide by nature; let it scroll rather than force the page to. */
.cme-stands__scroll {
  overflow-x: auto;
  border: 1px solid rgba(31, 42, 60, .16);
}

.cme-stands__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.cme-stands__table th {
  padding: 0;
  background: var(--cme-ink-table-head);
  white-space: nowrap;
}

.cme-stands__table th button {
  width: 100%;
  padding: 20px 22px;
  background: none;
  border: 0;
  color: var(--cme-gold);
  font-family: var(--cme-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--cme-track-th);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

/* Sort direction shown as a glyph, and announced via aria-sort on the th. */
.cme-stands__table th[aria-sort="ascending"] button::after  { content: " ↑"; }
.cme-stands__table th[aria-sort="descending"] button::after { content: " ↓"; }

.cme-stands__table td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--cme-border-light);
  font-family: var(--cme-font-body);
  font-size: 16px;
  color: #191917;
  white-space: nowrap;
}

.cme-stands__table tbody tr:hover { background: rgba(201, 169, 110, .1); }

.cme-stands__pill {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--cme-track-caps);
  text-transform: uppercase;
}

.cme-stands__pill--available {
  background: rgba(124, 138, 90, .16);
  color: #4f5c33;
}

.cme-stands__pill--pending {
  background: rgba(206, 164, 74, .18);
  color: #7a5a12;
}

.cme-stands__pill--sold {
  background: rgba(31, 42, 60, .1);
  color: #5c544a;
}

.cme-stands__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 26px;
}

.cme-stands__pager button {
  min-width: 40px;
  padding: 10px 14px;
  background: var(--cme-white);
  border: 1px solid var(--cme-border-light);
  font-family: var(--cme-font-body);
  font-size: 14px;
  color: var(--cme-ink-head);
  cursor: pointer;
}

.cme-stands__pager button[aria-current="true"] {
  background: var(--cme-ink);
  border-color: var(--cme-ink);
  color: var(--cme-off-white);
  font-weight: 600;
}

.cme-stands__pager button:disabled { opacity: .4; cursor: default; }

.cme-stands__pager button:focus-visible {
  outline: 2px solid var(--cme-gold-dark);
  outline-offset: 2px;
}

/* Ellipsis between windowed page numbers. Decorative, and aria-hidden. */
.cme-stands__gap {
  padding: 0 4px;
  color: var(--cme-body);
  font-family: var(--cme-font-body);
  font-size: 14px;
}

/* Sort buttons need a visible focus ring too — they sit on the dark header
   bar, where the browser default is close to invisible. */
.cme-stands__table th button:focus-visible {
  outline: 2px solid var(--cme-gold);
  outline-offset: -4px;
}

/* Enquiry type ------------------------------------------------------------
   Added 2026-08-27. Routes the enquiry to property@ or info@.

   Styled with the text inputs rather than separately so the four fields read
   as one set. `appearance: none` is what lets that happen — a native select
   ignores padding and border on Windows — and it removes the drop arrow with
   it, so the arrow is redrawn as an inline SVG background.

   The arrow is a data: URI, not a file: it never 404s, costs no request, and
   cannot be missed by a partial upload the way a separate asset can.
   -------------------------------------------------------------------------- */

.cme-enquiry select {
  width: 100%;
  background: var(--cme-white);
  border: 1px solid var(--cme-border-field);
  padding: 14px 44px 14px 16px;
  font-family: var(--cme-font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--cme-ink-input);
  transition: border-color .3s ease, box-shadow .3s ease;

  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239A7638' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  border-radius: 0;                    /* iOS rounds selects by default */
}

.cme-enquiry select:focus-visible {
  outline: none;                       /* replaced, not removed */
  border-color: var(--cme-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .25);
}

/* The placeholder option reads as placeholder text, not as a chosen value. */
.cme-enquiry select:has(option[value=""]:checked) {
  color: var(--cme-body);
}