/* ===========================================================================
   Contact page.

   Two jobs on one page: DonkeyByte's legal identification (which lives here
   rather than in the footer, per the 2026-08-15 decision) and an ordinary
   contact form. Mobile-first: one column by default, two from 860px.

   Selectors are prefixed `.v2 ` like every other stylesheet here — the design
   tokens are declared on `body.v2`, so an unprefixed rule would sit outside
   the scoping the rest of the site relies on.
   =========================================================================== */

.v2 .contact { padding-top: var(--s-6); }

.v2 .contact-head {
  max-width: 720px;
  margin-bottom: var(--s-5);
}
.v2 .contact-title {
  text-align: left;
  margin: var(--s-1) 0 var(--s-2);
}
.v2 .contact-sub {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
}

/* ===== Layout =====
   One column by default, form first. Two columns from 860px, with explicit
   placement so the rail appears on the LEFT while the form stays first in
   the DOM — reading order for phones and screen readers without CSS order
   tricks. */
.v2 .contact-grid {
  display: grid;
  gap: var(--s-4);
  align-items: start;
  padding-bottom: var(--s-6);
}
@media (min-width: 860px) {
  .v2 .contact-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-6);
  }
  .v2 .contact-rail { grid-column: 1; grid-row: 1; }
  .v2 .contact-card { grid-column: 2; grid-row: 1; }
}

/* ===== Info rail ===== */
.v2 .contact-rail-logo {
  display: block;
  width: 64px;
  height: auto;
  margin-bottom: var(--s-3);
}
.v2 .contact-rail-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
/* Coral because emailing is an action. It is text, not a filled button, so it
   does not count against the one-filled-coral-button-per-viewport rule. */
.v2 .contact-email {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--accent);
  text-decoration: none;
  /* Padding gets this to a 44px tap target without inflating the type. */
  padding: 10px 0;
}
.v2 .contact-email:hover { text-decoration: underline; }

/* The identification block sits in its own inset panel rather than as loose
   text under a rule. It is reference material, not prose, and giving it a
   quiet container makes it read as a deliberate record — which is exactly the
   impression a payment processor's reviewer should get. Width is capped so it
   does not stretch across a wide column and leave its rule hanging in space. */
.v2 .contact-id {
  margin: var(--s-4) 0 0;
  padding: var(--s-3);
  max-width: 340px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-btn);
  background: var(--bg-surface);
}
.v2 .contact-id-row + .contact-id-row {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}
.v2 .contact-id dt {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.v2 .contact-id dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
}

/* ===== Form card ===== */
.v2 .contact-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--s-4);
}

/* Cursor light, layer 1: interior wash. Mirrors cards.css so the page inherits
   the site's existing treatment rather than inventing a second one. --mx/--my
   are written by card-spotlight.js via the grid's data-spotlight attribute. */
.v2 .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(221, 120, 103, 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 0;
}

/* Cursor light, layer 2: border glow, via the padding + mask-composite ring. */
.v2 .contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(221, 120, 103, 0.65),
    rgba(108, 192, 255, 0.28) 40%,
    transparent 68%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 2;
}
/* Both conditions required: :hover picks the card, .is-lit confirms the JS
   actually engaged — it deliberately does not on touch or under reduced
   motion, and CSS :hover has no idea the effect was opted out of. */
.v2 .contact-grid.is-lit .contact-card:hover::before { opacity: 1; }
.v2 .contact-grid.is-lit .contact-card:hover::after  { opacity: 1; }

/* Form content sits above the interior wash. */
.v2 .contact-form { position: relative; z-index: 1; }

/* ===== Fields ===== */
/* Name and Email share a row on anything wider than a small phone; the two are
   short and pairing them stops the form reading as a long stack of boxes. */
.v2 .contact-row { display: grid; gap: var(--s-2); }
@media (min-width: 520px) {
  .v2 .contact-row { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}

.v2 .contact-field { display: block; margin-bottom: var(--s-3); }
.v2 .contact-row .contact-field { margin-bottom: 0; }
.v2 .contact-row + .contact-field { margin-top: var(--s-3); }

.v2 .contact-field > span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.v2 .contact-field input,
.v2 .contact-field select,
.v2 .contact-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.v2 .contact-field textarea {
  min-height: 148px;
  resize: vertical;
  line-height: 1.6;
}

/* ===== Dropdown =====
   A custom control replacing the native <select>, matching the component
   DonkeyCMS's own admin uses (its `.cz-dd` field variant): rounded menu panel,
   coral-tinted current row, a chevron that flips, and a menu that opens upward
   when there is no room below. Rebuilt on this site's tokens rather than
   copied with the admin's palette. Class names deliberately match the admin's
   so the two codebases describe the same component the same way; nothing on
   this site previously used `.dd`, so there is no collision. */
.v2 .dd { position: relative; display: block; width: 100%; }

.v2 .dd-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.v2 .dd-trigger:hover { border-color: var(--border-strong); }
.v2 .dd-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-voice);
  box-shadow: 0 0 0 3px rgba(108, 192, 255, 0.18);
}
.v2 .dd.open .dd-trigger { border-color: var(--accent); }

.v2 .dd-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.v2 .dd.open .dd-chevron { transform: rotate(180deg); }

.v2 .dd-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  padding: 6px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-btn);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.v2 .dd.open .dd-menu { display: block; }
/* Set by dropdown.js when the menu would not fit below the trigger — it opens
   upward instead of pushing the page taller and forcing a scroll to see it. */
.v2 .dd.dd-menu-up .dd-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

.v2 .dd-item {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.v2 .dd-item:hover,
.v2 .dd-item:focus-visible {
  outline: none;
  background: var(--bg-surface);
  color: var(--text-primary);
}
/* Coral marks the current choice, exactly as the admin's dropdown does. It
   sits on a <button>, so it stays within "coral on interactive elements only",
   and it is a tint rather than a filled .btn-primary, so it never competes
   with the Send button for the one-filled-coral-per-viewport rule. */
.v2 .dd-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.v2 .contact-field ::placeholder { color: var(--text-muted); opacity: 0.55; }
.v2 .contact-field input:hover,
.v2 .contact-field select:hover,
.v2 .contact-field textarea:hover { border-color: var(--border-strong); }
.v2 .contact-field input:focus,
.v2 .contact-field select:focus,
.v2 .contact-field textarea:focus {
  outline: none;
  border-color: var(--accent-voice);
  box-shadow: 0 0 0 3px rgba(108, 192, 255, 0.18);
}

/* ===== Not-wired-yet notice =====
   Amber, matching the legal pages' draft banner: it is neither a brand
   statement (blue) nor something to click (coral), so its own hue keeps it out
   of the page's colour grammar. */
.v2 .contact-notice {
  margin-bottom: var(--s-3);
  padding: var(--s-2);
  border: 1px solid rgba(228, 168, 84, 0.32);
  border-left-width: 3px;
  border-radius: var(--radius-btn);
  background: rgba(228, 168, 84, 0.09);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}
.v2 .contact-notice:focus { outline: none; }
.v2 .contact-notice a { color: var(--accent); }

.v2 .contact-send {
  min-height: 44px;
  width: 100%;
}
@media (min-width: 520px) {
  .v2 .contact-send { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 .contact-card::before,
  .v2 .contact-card::after,
  .v2 .contact-field input,
  .v2 .contact-field textarea,
  .v2 .dd-trigger,
  .v2 .dd-chevron { transition: none; }
}