/* The Kickin' Crab — Contact page (contact.html). Shared chrome lives in site.css. */

/* ---------- "Send us a message" ---------- */
.ct-msg { background: var(--kc-cream); padding: 52px 24px 8px; }
.ct-msg__row { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 44px 56px; align-items: flex-start; }
.ct-msg__main { flex: 2 1 420px; min-width: min(280px, 100%); }

.ct-sent { margin-top: 22px; background: var(--kc-cream-2); border: 3px solid var(--kc-green); border-radius: 22px; padding: 28px 30px; }
.ct-sent__h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--kc-green); }
.ct-sent__p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--kc-ink-2); }
.ct-sent__again {
  margin-top: 20px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 2px solid var(--kc-teal); border-radius: 999px; background: transparent; color: var(--kc-teal);
  font-family: var(--font-body); font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.ct-sent__again:hover { background: var(--kc-sand); }

.ct-form { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.ct-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .ct-form__grid { grid-template-columns: minmax(0, 1fr); } .ct-form__grid > div:empty { display: none; } }
.ct-form__label { display: block; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--kc-rust); }
.ct-form__req { font-weight: 800; color: var(--kc-error); text-transform: uppercase; }
.ct-form__opt { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--kc-ink-3); }
.ct-form__input {
  margin-top: 8px; width: 100%; min-height: 52px; padding: 0 18px;
  border: 2px solid var(--kc-teal); border-radius: 999px; background: #ffffff; color: var(--kc-ink);
  font-family: var(--font-body); font-size: 16px; box-sizing: border-box;
}
.ct-form__select {
  margin-top: 8px; width: 100%; min-height: 52px; padding: 0 18px;
  border: 2px solid var(--kc-teal); border-radius: 999px; background: #ffffff; color: var(--kc-ink);
  font-family: var(--font-body); font-size: 16px; font-weight: 600; box-sizing: border-box;
}
.ct-form__textarea {
  margin-top: 8px; width: 100%; padding: 14px 18px;
  border: 2px solid var(--kc-teal); border-radius: 18px; background: #ffffff; color: var(--kc-ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5; box-sizing: border-box; resize: vertical;
}
.ct-form__err {
  margin: 8px 0 0; padding-left: 11px; border-left: 4px solid var(--kc-error);
  display: flex; align-items: flex-start; gap: 7px; font-size: 15px; font-weight: 700; color: var(--kc-error);
}
.ct-form__err svg { flex: none; margin-top: 2px; }
.ct-form__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.ct-form__note { margin: 0; font-size: 14px; color: var(--kc-ink-3); max-width: 46ch; }
.ct-form__note strong { color: var(--kc-error); }
.ct-form__submit {
  flex: none; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 30px;
  border: 0; border-radius: 999px; background: var(--kc-brick); color: #ffffff;
  font-family: var(--font-body); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.ct-form__submit:hover { background: var(--kc-brick-dark); }

/* Aside */
.ct-aside { flex: 1 1 260px; min-width: min(240px, 100%); display: flex; flex-direction: column; gap: 26px; padding-top: 18px; }
.ct-aside__h3 { margin: 0; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--kc-rust); }
.ct-aside__block p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--kc-ink-2); }
.ct-aside__block a { color: var(--kc-teal); }
.ct-aside__block a:hover { color: var(--kc-brick); }
.ct-social { display: flex; align-items: center; gap: 10px; }
.ct-social a { font-weight: 600; }

/* ---------- "Looking for a restaurant instead?" ---------- */
.ct-visit { background: var(--kc-cream); padding: 24px 24px 8px; }
.ct-visit__p { margin: 0; padding-top: 28px; border-top: 2px solid var(--kc-line); font-size: 17px; color: var(--kc-ink-2); }
.ct-visit__p a { color: var(--kc-brick); }

/* ---------- Shared by the Contact and Crab Club forms ---------- */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot: off-screen, never for people */
.ct-form__err--form { margin-top: 4px; font-size: 15px; }
.ct-form__submit[disabled] { opacity: .6; cursor: progress; }
.ct-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--kc-ink-2); }
.ct-consent input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kc-brick); }
.ct-consent input[aria-invalid="true"] { outline: 2px solid var(--kc-error); outline-offset: 2px; }
.cf-turnstile { min-height: 0; }