/* Critical Point Vision Site: contact.css
 * The Contact page, mockup U "Book or write" (Eric's pick, 2026-10-02):
 * two columns under the page top. Left, the three routes as a short list,
 * then "Pick a time" with the Calendly inline embed and a plain "Book a call"
 * link beside it. Right, the message form on a tinted panel that stays in
 * view as you scroll (desktop widths only), the email address under it.
 * Loads on contact.html only. Tokens only; the buttons are the shared ghost
 * and primary styles.
 */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* ---------- the three routes ---------- */

.contact-routes {
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
}

.contact-route {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-300);
  align-items: baseline;
  padding-block: var(--space-250);
  border-top: 1px solid var(--border);
}

.contact-route:last-child { border-bottom: 1px solid var(--border); }

.contact-route h2 {
  display: flex;
  align-items: center;
  font-size: var(--text-lead);
  line-height: 1.2;
}

.contact-route p { color: var(--muted-foreground); }

/* the route marker: a filled dot. Investors are ink; universities and
   employers take their side colour (rust, forest), lightened in dark. */
.rt-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--foreground);
}

.contact-route[data-side] .rt-dot { background: var(--side-text); }

/* ---------- Pick a time ---------- */

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200) var(--space-400);
  margin-bottom: var(--space-300);
}

.cal-head h2 { font-size: var(--text-h2); }

/* a fixed box so the page does not jump while the iframe loads. Calendly
   ignores the colour parameters on this account and paints its page white,
   so the frame is white in both themes and reads as one light pane. */
.cal-frame {
  position: relative;
  height: 700px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #fff;
  overflow: hidden;
}

.cal-frame .calendly-inline-widget { width: 100%; }

/* From a 650 px wide iframe up, Calendly draws its own bordered card on a
   transparent page, about 66 px down. There the frame steps back (no border,
   no ground) so the card is not boxed twice, and it is pulled up under the
   heading line, which stays above it so its link stays clickable. The left
   column is the container, so this follows the column, not the viewport. */
.contact-book { container: contact-book / inline-size; }

.cal-head {
  position: relative;
  z-index: 1;
}

@container contact-book (min-width: 652px) {
  .cal-frame {
    margin-top: calc(var(--space-100) - 66px);
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

/* With the parent page dark, Chrome paints a cross-origin frame whose colour
   scheme differs on an opaque canvas; matching it keeps Calendly's page as
   Calendly draws it in both themes. */
.cal-frame iframe {
  display: block;
  color-scheme: light;
}

/* ---------- the message panel ---------- */

.contact-write {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-2xl);
  background: var(--secondary);
}

.contact-write > h2 { font-size: var(--text-h2); }

.contact-write .cf-form { margin-top: var(--space-300); }

.contact-write .cf-field input,
.contact-write .cf-field select,
.contact-write .cf-field textarea { background: var(--background); }

/* it stays in view as the calendar scrolls past, at desktop widths and only
   where the viewport is tall enough to show the whole panel */
@media (min-width: 901px) and (min-height: 760px) {
  .contact-write {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-300));
  }
}

.contact-email-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  margin-top: var(--space-400);
  padding-top: var(--space-300);
  border-top: 1px solid var(--border);
}

.contact-email-block > p:first-child { color: var(--muted-foreground); }

.contact-email {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  font-weight: var(--body-bold-weight);
  overflow-wrap: anywhere;
}

.contact-email:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- the form ---------- */

.cf-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  margin-top: var(--space-200);
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.cf-field label {
  font-size: var(--text-ui);
  font-weight: var(--body-bold-weight);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  min-height: var(--touch-target-min);
  padding: var(--space-150) var(--space-200);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--card-foreground);
  font-family: var(--font-body);
  font-size: var(--text-body);
}

.cf-field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: var(--leading-body);
}

.cf-field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: var(--space-600);
  cursor: pointer;
}

/* the caret: a rotated corner, drawn on the field since a select takes no
   pseudo-elements */
.cf-field:has(> select) {
  position: relative;
}

.cf-field:has(> select)::after {
  content: "";
  position: absolute;
  right: var(--space-250);
  bottom: 1.1875rem;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--foreground);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.cf-field input:focus-visible,
.cf-field select:focus-visible,
.cf-field textarea:focus-visible {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--focus-ring);
}

.cf-botcheck {
  display: none;
}

.cf-submit {
  align-self: flex-start;
}

.cf-status {
  font-size: var(--text-ui);
  line-height: 1.45;
}

.form__status { font-size: var(--text-ui); line-height: 1.45; }

.cf-status:empty,
.form__status:empty {
  display: none;
}

.cf-status[data-state="sent"],
.form__status[data-state="sent"] {
  color: var(--success);
  font-weight: var(--body-bold-weight);
}

.cf-status[data-state="failed"],
.form__status[data-state="failed"] {
  color: var(--destructive);
  font-weight: var(--body-bold-weight);
}

html[data-theme="dark"] .cf-status[data-state="sent"],
html[data-theme="dark"] .form__status[data-state="sent"] {
  color: #6FC48C;
}

html[data-theme="dark"] .cf-status[data-state="failed"],
html[data-theme="dark"] .form__status[data-state="failed"] {
  color: #F08B80;
}

.cf-form[data-busy="true"] .cf-submit {
  opacity: 0.65;
  pointer-events: none;
}

/* ---------- the pitch deck checkbox ---------- */

/* The native checkbox stays in place, transparent, at 44 px square over the
   drawn box, so it keeps its keyboard, label and form behaviour and a full
   touch target; the box beside the label is what shows. */
.cf-check {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--space-200);
  align-items: start;
}

.cf-check input {
  position: absolute;
  top: calc(0.125rem + (1.25rem - var(--touch-target-min)) / 2);
  left: calc((1.25rem - var(--touch-target-min)) / 2);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.cf-check__box {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--background);
  transition: background var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter);
}

.cf-check__box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.3125rem;
  height: 0.625rem;
  border: solid var(--button-primary-text);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
}

.cf-check input:hover + .cf-check__box { border-color: var(--foreground); }

.cf-check input:checked + .cf-check__box {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
}

.cf-check input:checked + .cf-check__box::after { opacity: 1; }

.cf-check input:focus-visible + .cf-check__box { box-shadow: var(--focus-ring); }

.cf-check label {
  font-size: var(--text-ui);
  line-height: 1.45;
  cursor: pointer;
}

/* ---------- one column ---------- */

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .contact-route { grid-template-columns: minmax(0, 1fr); gap: var(--space-100); }
  .cal-frame { border-radius: var(--radius-lg); }
}

/* a field named by a failed check (contact.js sets aria-invalid): the border
   turns danger red, so the state reads in the field as well as the status line */
.cf-field [aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: inset 0 0 0 1px var(--destructive);
}

.cf-field [aria-invalid="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--destructive), var(--focus-ring);
}