/* =========================================================
   WP SailingFlow — Contact & Support page
   Builds on styles.css (shared header, footer, buttons, vars)
   ========================================================= */

.contact-shell {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:54px;
  max-width:1100px;
  margin:0 auto;
  padding:64px 24px 96px;
  align-items:start;
}

/* ---------- Form card ---------- */
.contact-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; box-shadow:var(--shadow-sm);
}
.contact-card h2 { font-size:26px; margin:0 0 8px; }
.contact-card .card-lead { color:var(--ink-soft); margin:0 0 26px; font-size:15.5px; overflow-wrap:anywhere; }

.field { margin-bottom:20px; }
.field label { display:block; font-weight:600; font-size:14.5px; color:var(--ink); margin-bottom:7px; }
.field .req { color:var(--accent); }
.field input,
.field select,
.field textarea {
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:9px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;
}
.field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6e8e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:40px;
}
.field textarea { resize:vertical; min-height:140px; line-height:1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline:none; border-color:var(--sea); box-shadow:0 0 0 3px rgba(14,110,142,.15);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color:#c0392b; }

.field-error { display:none; color:#c0392b; font-size:13px; margin-top:6px; }
.field.has-error .field-error { display:block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color:#c0392b; }

.field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-row > .field { min-width:0; }   /* allow inputs to shrink below intrinsic width */

/* visually-hidden honeypot */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-foot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.form-note { font-size:13px; color:var(--ink-soft); margin:0; }

.form-status { margin-top:18px; padding:14px 16px; border-radius:9px; font-size:14.5px; display:none; }
.form-status.show { display:block; }
.form-status.ok { background:var(--foam); border:1px solid var(--sea); color:var(--sea-dark); }
.form-status.err { background:#fdecea; border:1px solid #e6a59c; color:#933025; }

/* ---------- Sidebar / direct contact ---------- */
.contact-aside { display:flex; flex-direction:column; gap:22px; }
.aside-block {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 24px;
}
.aside-block h3 { font-size:18px; margin:0 0 14px; }

.contact-method { display:flex; align-items:flex-start; gap:13px; padding:10px 0; }
.contact-method + .contact-method { border-top:1px solid var(--line); }
.contact-method .ic {
  flex:none; width:40px; height:40px; border-radius:10px; background:var(--foam); color:var(--sea);
  display:flex; align-items:center; justify-content:center;
}
.contact-method .ic svg { width:20px; height:20px; }
.contact-method > div { min-width:0; }   /* let long emails wrap inside the flex row */
.contact-method .label { font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin:0 0 2px; }
.contact-method a, .contact-method .val { font-size:16px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.contact-method a:hover { color:var(--sea); }

.resource-links { list-style:none; margin:0; padding:0; }
.resource-links li { border-top:1px solid var(--line); }
.resource-links li:first-child { border-top:none; }
.resource-links a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; color:var(--ink); font-weight:500; font-size:15.5px; }
.resource-links a:hover { color:var(--sea); }
.resource-links a::after { content:"→"; color:var(--sea); }

.aside-block.about { background:var(--foam); }
.aside-block.about p { margin:0 0 10px; font-size:14.5px; color:var(--ink-soft); }
.aside-block.about p:last-child { margin-bottom:0; }
.aside-block.about strong { color:var(--ink); }

@media (max-width:860px) {
  .contact-shell { grid-template-columns:1fr; gap:32px; padding-top:48px; }
}
@media (max-width:480px) {
  .field-row { grid-template-columns:1fr; gap:0; }
  .contact-card { padding:26px 20px; }
}