/* Shared contact overlay, used by all three public pages so the nav's Contact
   item behaves the same everywhere. Every class is namespaced a4c- to avoid
   colliding with the library's stylesheet or the survey app's Tailwind
   utilities. */

.a4c-overlay {
  position: fixed; inset: 0; z-index: 1000;
  /* Always laid out so the fade below has something to animate. `visibility`,
     not `display`, is what keeps the inputs out of the tab order while closed. */
  display: flex;
  align-items: center; justify-content: center;
  padding: 96px 24px 48px;
  background: #080808;
  overflow-y: auto;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.a4c-overlay.a4c-open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s;
}

.a4c-close {
  position: fixed; top: 28px; right: 32px;
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}
.a4c-close:hover { color: #ffffff; }

.a4c-panel {
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
}
.a4c-tag { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #FFFF00; }
.a4c-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300 !important; line-height: 1.1; letter-spacing: -0.01em;
  color: #ffffff; margin: 0;
}
.a4c-body {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.72); line-height: 1.8; max-width: 420px; margin: 0;
}
.a4c-fields { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.a4c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a4c-input, .a4c-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 15px 16px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 300;
  color: #ffffff;
  transition: border-color 0.2s;
}
.a4c-input::placeholder, .a4c-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.a4c-input:focus, .a4c-textarea:focus { outline: none; border-color: #FFFF00; }
.a4c-textarea { min-height: 132px; resize: vertical; }
.a4c-submit {
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: #FFFF00; border: 1px solid #FFFF00; color: #000000;
  padding: 17px 40px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s, transform 0.25s;
}
.a4c-submit:hover { background: #ffffff; transform: translateY(-2px); }
.a4c-note {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255, 255, 255, 0.5); line-height: 1.7; margin: 4px 0 0;
}
/* Honeypot. Visually hidden rather than display:none or [hidden] — a bot that
   reads the CSSOM skips anything not rendered, and the whole point is that it
   fills this in. Out of the tab order and off the accessibility tree via the
   attributes on the input itself. */
.a4c-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.a4c-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  background: #ffffff; color: #000000;
  padding: 14px 26px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.04em;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.a4c-toast.a4c-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  .a4c-row { grid-template-columns: 1fr; }
  .a4c-close { top: 20px; right: 20px; }
}

/* ─── LIGHT VARIANT ─────────────────────────────────
   The frontpage's dialog is a light panel, matching its light below-hero
   sections; the library and the survey app are dark. Rather than pick a winner,
   the frontpage opts in with data-a4c-theme="light" on <html>. Mirrors the
   #contact-overlay block this replaced in main.css. */
[data-a4c-theme='light'] .a4c-overlay { background: #f8f8f8; }
[data-a4c-theme='light'] .a4c-close { color: rgba(0, 0, 0, 0.58); }
[data-a4c-theme='light'] .a4c-close:hover { color: #0a0a0a; }
[data-a4c-theme='light'] .a4c-tag { color: rgba(0, 0, 0, 0.58); }
[data-a4c-theme='light'] .a4c-headline { color: #0a0a0a; }
[data-a4c-theme='light'] .a4c-body { color: rgba(0, 0, 0, 0.58); }
[data-a4c-theme='light'] .a4c-note { color: rgba(0, 0, 0, 0.58); }
[data-a4c-theme='light'] .a4c-input,
[data-a4c-theme='light'] .a4c-textarea {
  background: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #0a0a0a;
}
[data-a4c-theme='light'] .a4c-input::placeholder,
[data-a4c-theme='light'] .a4c-textarea::placeholder { color: rgba(0, 0, 0, 0.58); }
[data-a4c-theme='light'] .a4c-input:focus,
[data-a4c-theme='light'] .a4c-textarea:focus { border-color: rgba(0, 0, 0, 0.3); }