/* ============================================================
   GREENDOOR · CONTACT US PAGE
   Reuses the partner page shell (nav, form-card, footer) and adds:
   the contact hero, the contact-information panel, the Nurses/Employers
   "door" chooser, the consent checkbox, and the server-side alerts.
   ============================================================ */

@import url('partner.css');

/* ---- Hero ---- */
.contact-hero{
  max-width:var(--maxw);
  margin:0 auto;
  padding:54px var(--gutter) 10px;
  text-align:center;
}
@media (min-width:820px){ .contact-hero{ padding:84px var(--gutter) 18px; } }
.contact-hero .eyebrow{ justify-content:center; }
.contact-hero h1{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 60;
  font-weight:400;
  font-size:2.6rem;line-height:1.04;letter-spacing:-.025em;
  margin:14px 0 0;
}
@media (min-width:560px){ .contact-hero h1{ font-size:3.4rem; } }
@media (min-width:820px){ .contact-hero h1{ font-size:4.4rem; } }
.contact-hero h1 em{ color:var(--moss);font-style:italic; }
.contact-hero p{
  max-width:60ch;
  margin:22px auto 0;
  font-size:1.05rem;line-height:1.65;color:#3a4a40;
}

/* ---- Layout: info + form ---- */
.contact-main{ padding:30px var(--gutter) var(--section-y); }
.contact-grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}
@media (min-width:960px){
  .contact-grid{ grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start; }
}

/* ---- Contact information panel ---- */
.contact-info{ display:flex;flex-direction:column;gap:14px; }
.contact-info h2{
  font-family:var(--serif);font-weight:400;
  font-size:1.5rem;letter-spacing:-.01em;
  margin-bottom:6px;
}
.info-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px;
  border:1.5px solid var(--mist);
  border-radius:16px;
  background:var(--paper);
  transition:border-color .25s var(--easing), transform .25s var(--easing), box-shadow .25s var(--easing);
}
a.info-item:hover{
  border-color:rgba(220,110,74,.5);
  transform:translateY(-2px);
  box-shadow:0 16px 30px -22px rgba(15,27,20,.4);
}
.info-static{ background:transparent; }
.info-ic{
  flex-shrink:0;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--moss);color:var(--cream);
}
.info-ic svg{ width:21px;height:21px; }
.info-body{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.info-label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leaf);
}
.info-value{ font-size:1.02rem;color:var(--ink);font-weight:500;line-height:1.35;overflow-wrap:anywhere; }
.info-sub{ font-size:.85rem;color:#5a6a5f;line-height:1.4; }

.info-note{
  margin-top:6px;
  padding:18px;
  border-radius:16px;
  background:rgba(31,61,46,.06);
  border:1px dashed rgba(31,61,46,.25);
  font-size:.92rem;line-height:1.55;color:#3a4a40;
}
.info-note strong{ display:block;color:var(--moss);margin-bottom:4px; }
.info-note a{ color:var(--ember);font-weight:500;border-bottom:1px solid rgba(220,110,74,.4); }
.info-note a:hover{ border-color:var(--ember); }

/* ---- Door chooser (Nurses / Employers) ---- */
.door-choose{ border:0;padding:0;margin:0 0 6px; }
.door-choose legend{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leaf);
  padding:0;margin-bottom:10px;
}
.door-choose legend .req{ color:var(--coral); }
.doors{ display:grid;grid-template-columns:1fr 1fr;gap:14px; }

.door-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;
  padding:22px 14px 18px;
  border:1.5px solid rgba(15,27,20,.15);
  border-radius:16px;
  background:var(--cream);
  cursor:pointer;
  transition:border-color .25s var(--easing), background .25s var(--easing), box-shadow .25s var(--easing), transform .25s var(--easing);
}
.door-card:hover{ border-color:rgba(220,110,74,.55);transform:translateY(-2px); }
/* visually-hidden radio, still focusable */
.door-card input{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.door-card:focus-within{
  outline:2px solid var(--coral);outline-offset:3px;
}

/* The door visual — moss arch with a coral knob (brand mark) */
.door{
  width:52px;height:72px;
  background:var(--moss);
  border-radius:26px 26px 4px 4px;
  position:relative;
  transform-origin:left center;
  transition:transform .55s var(--easing), background .3s;
}
.door-knob{
  position:absolute;right:7px;top:50%;
  width:7px;height:7px;border-radius:50%;
  background:var(--coral);
  transform:translateY(-50%);
  transition:box-shadow .3s var(--easing);
}
.door-card:hover .door,
.door-card input:checked ~ .door{ transform:perspective(520px) rotateY(-26deg); }

.door-name{
  font-family:var(--serif);font-size:1.15rem;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);margin-top:6px;
}
.door-desc{ font-size:.78rem;line-height:1.4;color:#5a6a5f;max-width:18ch; }

/* Selected state */
.door-card:has(input:checked){
  border-color:var(--coral);
  background:#FFFBF1;
  box-shadow:0 0 0 4px rgba(220,110,74,.12);
}
.door-card input:checked ~ .door .door-knob{
  box-shadow:0 0 0 4px rgba(220,110,74,.25);
}
/* Fallback selected outline for browsers without :has() */
.door-card input:checked{ outline:none; }

.door-choose.invalid .door-card{ border-color:var(--ember); }
.door-choose .err{
  display:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);margin-top:8px;
}
.door-choose.invalid .err{ display:block; }

/* ---- Consent checkbox ---- */
.field.consent{ gap:4px; }
.consent-row{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-family:var(--sans);font-size:.92rem;letter-spacing:0;text-transform:none;
  color:#3a4a40;line-height:1.5;
}
.consent-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;width:20px;height:20px;margin-top:1px;
  border:1.5px solid rgba(15,27,20,.3);border-radius:5px;
  background:var(--cream);cursor:pointer;position:relative;
  transition:all .2s var(--easing);
}
.consent-row input[type="checkbox"]:hover{ border-color:var(--coral); }
.consent-row input[type="checkbox"]:checked{ background:var(--moss);border-color:var(--moss); }
.consent-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border-right:2px solid var(--cream);border-bottom:2px solid var(--cream);
  transform:rotate(45deg);
}
.consent-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--coral);outline-offset:2px; }
.field.consent.invalid .consent-row input[type="checkbox"]{ border-color:var(--ember); }

/* ---- Server-side result alerts ---- */
.form-alert{
  margin-bottom:24px;padding:16px 18px;border-radius:12px;
  font-size:.95rem;line-height:1.55;border:1.5px solid transparent;
}
.form-alert strong{ display:block;margin-bottom:3px;font-weight:600; }
.form-alert a{ color:inherit;border-bottom:1px solid currentColor; }
.form-alert-ok{ background:rgba(31,61,46,.06);border-color:rgba(31,61,46,.2);color:var(--moss); }
.form-alert-err{ background:rgba(185,75,37,.07);border-color:rgba(185,75,37,.25);color:var(--ember); }