/* ============================================================
   Guest communications — enquiry dialog, newsletter, WhatsApp.

   Inherits the site's tokens rather than restating colours, so a
   brand change reaches these surfaces too. Falls back to literal
   values where a token may not be defined on every page, because
   an undefined custom property renders as nothing at all — an
   invisible button rather than an unstyled one.
   ============================================================ */

/* ── DIALOG ───────────────────────────────────────────────── */

.mrc {
  --mrc-edge: clamp(1rem, 4vw, 3rem);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--mrc-edge) 1rem;
  overflow-y: auto;
}
.mrc[hidden] { display: none; }

.mrc__scrim {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(2px);
}

.mrc__panel {
  position: relative;
  width: 100%;
  max-width: 46rem;
  max-height: calc(100dvh - (2 * var(--mrc-edge)));
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--ink, #1f2937);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 auto;
}

.mrc__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.mrc__close:hover { background: rgba(0, 0, 0, 0.05); }

.mrc__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  padding-right: 2.5rem;
}
.mrc__intro { margin: 0 0 1rem; color: var(--muted, #6b7280); line-height: 1.6; }

.language-service-note {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  background: rgba(91, 75, 58, 0.045);
  color: var(--ink, #1f2937);
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: left;
}
.language-service-note__icon {
  display: block;
  margin-top: 0.12rem;
  color: var(--accent, #5b4b3a);
}
.language-service-note p { margin: 0; }

.mrc__alt {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(91, 75, 58, 0.06);
  border-radius: 8px;
  font-size: 0.9rem;
}
.mrc__alt a { color: var(--accent, #5b4b3a); font-weight: 600; }
.mrc__alt-addr { color: var(--muted, #6b7280); font-size: 0.85em; }

/* ── FIELDS ───────────────────────────────────────────────── */

.mrc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .mrc__grid { grid-template-columns: 1fr 1fr; }
  /* A full-width field spans both columns; half-width ones sit side by side.
     Declared this way round so a field added without a modifier is full width,
     which is the safe default on a narrow screen. */
  .mrc__field { grid-column: 1 / -1; }
  .mrc__field--half { grid-column: auto; }
}

.mrc__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.mrc__field input,
.mrc__field select,
.mrc__field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  min-height: 2.75rem;      /* comfortable touch target */
}
.mrc__field textarea { resize: vertical; min-height: 7rem; }

.mrc__field input:focus-visible,
.mrc__field select:focus-visible,
.mrc__field textarea:focus-visible,
.mrc__check input:focus-visible,
.mrc__submit:focus-visible,
.mrc__close:focus-visible,
.mrw:focus-visible {
  outline: 3px solid var(--accent, #5b4b3a);
  outline-offset: 2px;
}

/* Invalid state is marked by aria-invalid, not by a class, so the visual
   signal and the accessible signal cannot drift apart. */
.mrc__field [aria-invalid="true"] {
  border-color: #dc2626;
  background: #fef2f2;
}

.mrc__err {
  margin: 0.3rem 0 0;
  min-height: 0;
  color: #b91c1c;
  font-size: 0.8125rem;
}
.mrc__err:empty { display: none; }

.mrc__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
/* 24px is the WCAG 2.2 2.5.8 target minimum (--tap). The for-associated label is
   already a passing equivalent target, but an 18px control is fiddly on a phone
   and the larger box costs nothing on desktop. */
.mrc__check input { margin-top: 0.15rem; inline-size: var(--tap, 24px); block-size: var(--tap, 24px); flex: none; }
.mrc__check .mrc__err { grid-column: 1 / -1; }

/* The honeypot. Hidden from sight and from assistive technology, never
   `display: none` alone — some bots skip fields that are display:none. */
.mrc__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mrc__submit {
  margin-top: 1.25rem;
  width: 100%;
  min-height: 3rem;
  font-size: 1rem;
}
.mrc__submit[disabled] { opacity: 0.6; cursor: progress; }

.mrc__status { margin: 0.75rem 0 0; font-size: 0.9rem; min-height: 1.2em; }
.mrc__status--error { color: #b91c1c; }
.mrc__status--pending { color: var(--muted, #6b7280); }

.mrc__success { text-align: center; padding: 1rem 0; }
.mrc__ref {
  margin: 1rem 0;
  padding: 0.85rem;
  background: rgba(91, 75, 58, 0.08);
  border-radius: 8px;
  font-size: 1.05rem;
}
.mrc__note {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fffbeb;
  border-left: 4px solid #d97706;
  border-radius: 6px;
  text-align: left;
  font-size: 0.9rem;
  color: #78350f;
}

/* ── NEWSLETTER ───────────────────────────────────────────── */

.mrn {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgba(91, 75, 58, 0.05);
  border-radius: 12px;
}
.mrn__title { margin: 0 0 0.4rem; font-size: 1.2rem; }
.mrn__sub { margin: 0 0 1.25rem; color: var(--muted, #6b7280); font-size: 0.9rem; line-height: 1.5; }

.mrn__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 34rem) { .mrn__row { grid-template-columns: 1fr 1fr; } }

.mrn__interests {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}
.mrn__interests legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
/* TICKET 3 — the German compound noun.
 *
 * "Investitionsmöglichkeiten" is 25 characters with no break opportunity. The
 * chip is inline-flex and its label span carried min-width:auto, so the chip
 * demanded 181px inside a 195px viewport and the page scrolled sideways by
 * 48px. English "Investment opportunities" has a space and never showed it.
 *
 * The chip may now shrink and its label may break inside the word when there is
 * no room. The word is still rendered in full — it wraps onto a second line
 * rather than being clipped or shortened. */
.mrn__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 999px;
  font-size: 0.8125rem;
  cursor: pointer;
  background: var(--surface, #fff);
  min-width: 0;
  max-width: 100%;
}
.mrn__chip > * { min-width: 0; overflow-wrap: anywhere; }
.mrn__chip:has(input:checked) {
  border-color: var(--accent, #5b4b3a);
  background: rgba(91, 75, 58, 0.1);
  font-weight: 600;
}
.mrn__chip:focus-within { outline: 2px solid var(--accent, #5b4b3a); outline-offset: 2px; }

.mrn__done { text-align: center; padding: 1rem 0; }

/* ── CONCIERGE FLOAT ──────────────────────────────────────── */

.mrw {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 3.25rem;
  min-height: 3.25rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: var(--accent, #5b4b3a);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mrw:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28); }
.mrw__label { min-width: 0; overflow-wrap: anywhere; }

/* The button's size, published for the footer clearance below. Declared here,
   beside the width it mirrors and ahead of every rule that narrows it: these
   are all :root, so the last matching declaration wins and a base written
   later would beat every media query. */
:root { --mrw-size: 3.25rem; }

/* ── THE FLOATING CONTROL SAFE LANE ──────────────────────────────────────
 *
 * The offsets below used to be typed out twice — once in the base rule and
 * once in the override that adds the notch insets — and the footer clearance
 * restated the same arithmetic a third time. Three copies of one geometry is
 * how they drift apart.
 *
 * --mrw-lane is the full column the control occupies, measured in from the
 * viewport’s right edge: the button, its offset, and room to breathe beside
 * it. --mrw-stack is the same measurement vertically. Anything that needs to
 * stay clear of the control consumes these rather than inventing a number.
 *
 * Note what this does NOT do: it reserves nothing on its own. The control is
 * position:fixed, so the document slides past it and any full-bleed control
 * eventually passes through that corner. Reserving the lane globally is a
 * layout decision with a visible cost, recorded in the audit rather than
 * taken here. scripts/audit-float-collisions.js measures the consequence. */
:root {
  --mrw-offset-right: max(env(safe-area-inset-right, 0px) + 0.75rem, clamp(1rem, 3vw, 1.75rem));
  --mrw-offset-bottom: max(env(safe-area-inset-bottom, 0px) + 0.75rem, clamp(1rem, 3vw, 1.75rem));
  --mrw-breathing: 0.5rem;
  --mrw-lane: calc(var(--mrw-size) + var(--mrw-offset-right) + var(--mrw-breathing));
  --mrw-stack: calc(var(--mrw-size) + var(--mrw-offset-bottom) + var(--mrw-breathing));
}

/* Visible but not obstructive. The 4.5rem offset that kept it clear of the
   mobile booking bar is gone with the bar itself — it now sits at the same
   height on every screen, slightly smaller on a phone. */
@media (max-width: 40rem) {
  /* Superseded by the 2.75rem rule further down, which shares this breakpoint
     and wins on order. --mrw-size follows the same cascade so the footer
     clearance matches whichever value actually applies. */
  .mrw { min-height: 3rem; padding: 0.7rem 0.9rem; }
  :root { --mrw-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mrw { transition: none; }
  .mrw:hover { transform: none; }
}

/* ── DARK MODE ────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .mrc__panel { background: #1f2937; color: #f3f4f6; }
  .mrc__field input,
  .mrc__field select,
  .mrc__field textarea,
  .mrn__chip { background: #111827; border-color: #374151; color: #f3f4f6; }
  .mrc__field [aria-invalid="true"] { background: #3f1d1d; border-color: #f87171; }
  .mrc__alt, .mrn, .mrc__ref, .language-service-note { background: rgba(255, 255, 255, 0.06); }
  .mrc__err { color: #fca5a5; }
  .mrc__status--error { color: #fca5a5; }
}

/* ── the floating WhatsApp control ───────────────────────────────────────
   It was drawn over the trust line on the homepage and sat outside the safe
   area on notched phones. It now respects the inset on every side and shrinks
   on the smallest screens, where the corner it occupies is proportionally the
   most expensive. */
.mrw {
  right: var(--mrw-offset-right);
  bottom: var(--mrw-offset-bottom);
}

@media (max-width: 40rem) {
  .mrw { min-height: 2.75rem; }
  :root { --mrw-size: 2.75rem; }
}

@media (max-width: 24.375rem) {
  .mrw { width: 2.75rem; min-width: 2.75rem; padding-inline: 0; }
  .mrw__label { display: none; }
}

/* Landscape phones have almost no vertical room; a floating circle costs
   proportionally far more there. */
@media (max-height: 480px) and (orientation: landscape) {
  .mrw { min-height: 2.5rem; padding-block: 0.55rem; }
  :root { --mrw-size: 2.5rem; }
}

/* ── THE LAST ROW OF THE PAGE MUST CLEAR THE BUTTON ──────────────────────
 * A floating button covering content mid-scroll is a property of floating
 * buttons: scroll on and the content moves out from under it. The bottom of
 * the page is different, because there is nowhere further to scroll to.
 * Measured at maximum scroll on the homepage, the collection and availability
 * at 320, 390, 430 and 820: the button sat over the footer's last row every
 * time — "Team Sign In" in all twelve combinations, and "Accessibility
 * Statement" as well at 820.
 *
 * The clearance is derived from the button's own size and offset rather than
 * typed as a number, so the two cannot drift apart. --mrw-size is declared
 * above and redeclared beside every rule that changes the button's size. */
.foot {
  padding-bottom: var(--mrw-stack);
}