/*
 * Contact page template - page-templates/contact-page.php
 * Enqueued conditionally from includes/setup.php (handle: component-contact-page).
 *
 * Palette mirrors the theme tokens in toucaninternational.css:
 *   primary-500 #D80F1B | tertiary-500 #F5CF09 | primary-800 #521104 | highlight-500 #523DE8
 */

.tc-contact {
  --tc-red: #d80f1b;
  --tc-yellow: #f5cf09;
  --tc-brown: #521104;
  --tc-purple: #523de8;
  --tc-border: #e3d9d3;
  --tc-muted: #8a7a72;
  --tc-gutter: clamp(20px, 4.5vw, 64px);

  font-family: "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tc-brown);
  background: #fff;
}

/* ---------------------------------------------------------------- hero --- */

.tc-contact__hero {
  position: relative;
  overflow: hidden;
  background: var(--tc-red);
  color: #fff;
  /* top padding clears the fixed overlay header from header.php */
  padding: clamp(110px, 15vw, 172px) var(--tc-gutter) clamp(150px, 14vw, 200px);
}

.tc-contact__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.tc-contact__title {
  margin: 0;
  font-family: "Roc Grotesk Condensed", "Roc Grotesk", "Barlow Semi Condensed", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(68px, 9.5vw, 132px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--tc-yellow);
  text-wrap: balance;
  max-width: 620px;
}

.tc-contact__intro {
  margin: 24px 0 0;
  max-width: 520px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: #fff;
  text-wrap: pretty;
}

.tc-contact__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.tc-contact__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--tc-yellow);
}

.tc-contact__social-icon img {
  width: 22px;
  height: 22px;
}

.tc-contact__social-body {
  /* let the long URL shrink and wrap in place instead of pushing itself onto
     its own flex line under the icon */
  flex: 1 1 0;
  min-width: 0;
}

.tc-contact__social-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-yellow);
}

.tc-contact__social-link {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.tc-contact__social-link:hover,
.tc-contact__social-link:focus-visible {
  color: var(--tc-yellow);
}

.tc-contact__bird {
  position: absolute;
  right: clamp(-60px, -3vw, -40px);
  top: max(130px, 340px - 30vw);
  width: clamp(200px, 38vw, 560px);
  height: auto;
  pointer-events: none;
}

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

.tc-contact__card-wrap {
  position: relative;
  padding: 0 var(--tc-gutter) 72px;
  margin-top: clamp(-100px, -10vw, -150px);
}

.tc-contact__card {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  color: var(--tc-brown);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(82, 17, 4, 0.18);
  padding: clamp(26px, 3.5vw, 48px) clamp(20px, 3.6vw, 52px);
}

.tc-contact__card a {
  color: var(--tc-brown);
}

.tc-contact__card a:hover,
.tc-contact__card a:focus-visible {
  color: var(--tc-red);
}

.tc-contact__notice {
  margin: 0;
  padding: 16px 18px;
  border: 2px dashed var(--tc-border);
  border-radius: 8px;
  color: var(--tc-muted);
  font-size: 15px;
}

/* the_content() wraps a lone shortcode in a <p>; CF7 adds its own wrapper */
.tc-contact__card > p:empty { display: none; }
.tc-contact__card > p { margin: 0; }
.tc-contact__card .wpcf7 { margin: 0; }
.tc-contact__card .wpcf7-form > p { margin: 0; }

/* ------------------------------------------------------- form internals --- */

.tc-contact-form__heading {
  font-family: "Roc Grotesk Condensed", "Roc Grotesk", "Barlow Semi Condensed", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tc-brown);
}

.tc-contact-form__sub {
  margin: 10px 0 30px;
  font-size: 17px;
}

.tc-contact-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
  min-width: 0;
}

.tc-contact-form__fieldset:last-of-type { margin-bottom: 28px; }

.tc-contact-form__legend {
  padding: 0;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 15px;
}

/* --- choice groups: CF7 radio/checkbox restyled as the mockup buttons --- */

.tc-contact-form__toggle .wpcf7-form-control,
.tc-contact-form__pills .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tc-contact-form__toggle .wpcf7-list-item,
.tc-contact-form__pills .wpcf7-list-item {
  margin: 0;
  display: inline-flex;
}

.tc-contact-form__toggle .wpcf7-list-item label,
.tc-contact-form__pills .wpcf7-list-item label {
  display: inline-flex;
  position: relative;
  cursor: pointer;
}

.tc-contact-form__toggle input[type="radio"],
.tc-contact-form__pills input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.tc-contact-form__toggle .wpcf7-list-item-label,
.tc-contact-form__pills .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* start-up / established brand */
.tc-contact-form__toggle .wpcf7-list-item-label {
  padding: 12px 22px;
  border: 2px solid var(--tc-purple);
  border-radius: 6px;
  background: #fff;
  color: var(--tc-purple);
  font-weight: 600;
  font-size: 15px;
}

.tc-contact-form__toggle input[type="radio"]:checked + .wpcf7-list-item-label {
  background: var(--tc-purple);
  color: #fff;
}

/* what do you need help with */
.tc-contact-form__pills .wpcf7-list-item-label {
  padding: 9px 16px;
  border: 2px solid var(--tc-brown);
  border-radius: 999px;
  background: #fff;
  color: var(--tc-brown);
  font-weight: 700;
  font-size: 14px;
}

.tc-contact-form__pills input[type="checkbox"]:checked + .wpcf7-list-item-label {
  background: var(--tc-yellow);
  border-color: var(--tc-yellow);
  color: var(--tc-red);
}

.tc-contact-form__toggle .wpcf7-list-item-label::before,
.tc-contact-form__toggle .wpcf7-list-item-label::after,
.tc-contact-form__pills .wpcf7-list-item-label::before,
.tc-contact-form__pills .wpcf7-list-item-label::after {
  content: none;
}

/* the inputs are visually hidden, so surface focus on the label instead */
.tc-contact-form__toggle input:focus-visible + .wpcf7-list-item-label,
.tc-contact-form__pills input:focus-visible + .wpcf7-list-item-label {
  outline: 3px solid var(--tc-purple);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- fields --- */

.tc-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px 20px;
}

.tc-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tc-contact-form__field--full { grid-column: 1 / -1; }

.tc-contact-form__label {
  font-weight: 700;
  font-size: 14px;
}

.tc-contact__card .wpcf7-form-control-wrap { display: block; }

.tc-contact__card input[type="text"],
.tc-contact__card input[type="email"],
.tc-contact__card input[type="tel"],
.tc-contact__card select,
.tc-contact__card textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--tc-border);
  border-radius: 6px;
  background: #fff;
  color: var(--tc-brown);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.tc-contact__card select { appearance: auto; }
.tc-contact__card textarea { resize: vertical; }

.tc-contact__card input::placeholder,
.tc-contact__card textarea::placeholder { color: #9a8b84; }

.tc-contact__card input:focus,
.tc-contact__card select:focus,
.tc-contact__card textarea:focus {
  outline: none;
  border-color: var(--tc-purple);
  box-shadow: 0 0 0 3px rgba(82, 61, 232, 0.2);
}

/* ------------------------------------------------------------- footer --- */

.tc-contact-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.tc-contact-form__privacy {
  max-width: 380px;
  font-size: 13px;
  color: var(--tc-muted);
}

.tc-contact-form__privacy a { color: var(--tc-muted); text-decoration: underline; }

.tc-contact__card .wpcf7-submit {
  padding: 16px 32px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: var(--tc-red);
  color: var(--tc-yellow);
  font-family: "Roc Grotesk Condensed", "Roc Grotesk", "Barlow Semi Condensed", Impact, "Arial Black", sans-serif;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.tc-contact__card .wpcf7-submit:hover:not(:disabled) { background: #b90d17; }
.tc-contact__card .wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.tc-contact__card .wpcf7-spinner { margin: 0 0 0 12px; }

/* ------------------------------------------------- validation feedback --- */

.tc-contact__card .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--tc-red);
  font-size: 13px;
  font-weight: 600;
}

.tc-contact__card .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--tc-red);
}

.tc-contact__card .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 2px solid var(--tc-border);
  border-radius: 6px;
  color: var(--tc-brown);
  font-size: 15px;
}

.tc-contact__card .wpcf7 form.invalid .wpcf7-response-output,
.tc-contact__card .wpcf7 form.unaccepted .wpcf7-response-output,
.tc-contact__card .wpcf7 form.failed .wpcf7-response-output,
.tc-contact__card .wpcf7 form.aborted .wpcf7-response-output,
.tc-contact__card .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--tc-red);
  color: var(--tc-red);
}

.tc-contact__card .wpcf7 form.sent .wpcf7-response-output { display: none; }

/* --------------------------------------------------------- sent state --- */
/* CF7 6.x stamps data-status="sent" on the form, so the swap needs no JS. */

.tc-contact-form__success { display: none; padding: 24px 0; }

.tc-contact__card form[data-status="sent"] .tc-contact-form__body { display: none; }
.tc-contact__card form[data-status="sent"] .tc-contact-form__success { display: block; }

.tc-contact-form__success-title {
  font-family: "Roc Grotesk Condensed", "Roc Grotesk", "Barlow Semi Condensed", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tc-red);
}

.tc-contact-form__success-text {
  margin: 16px 0 0;
  max-width: 520px;
  font-size: 18px;
}

.tc-contact-form__reset {
  margin-top: 28px;
  padding: 12px 20px;
  background: none;
  border: 2px solid var(--tc-brown);
  border-radius: 6px;
  color: var(--tc-brown);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.tc-contact-form__reset:hover {
  background: var(--tc-brown);
  color: #fff;
}

/* ------------------------------------------------------- awards band --- */

.tc-contact__band-title {
  font-family: "Roc Grotesk Condensed", "Roc Grotesk", "Barlow Semi Condensed", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  text-transform: uppercase;
}

.tc-contact__awards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 32px;
  align-items: center;
  padding: clamp(36px, 5vw, 64px) var(--tc-gutter);
  background: var(--tc-purple);
  color: #fff;
}

.tc-contact__awards-text {
  margin: 10px 0 0;
  max-width: 360px;
  font-size: 17px;
}

.tc-contact__awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  grid-column: span 2;
}

.tc-contact__award {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
}

.tc-contact__award img {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* -------------------------------------------------------- press band --- */

.tc-contact__press {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
  padding: clamp(24px, 3vw, 36px) var(--tc-gutter);
  background: var(--tc-yellow);
}

.tc-contact__press-title {
  font-size: 22px;
  color: var(--tc-red);
  white-space: nowrap;
}

.tc-contact__press-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  min-width: min(100%, 300px);
}

.tc-contact__press-logos img { width: auto; }

@media (max-width: 820px) {
  /* the card pulls up far enough that only feather tips would show, which reads
     as a glitch - drop the bird and let the type carry the band */
  .tc-contact__bird { display: none; }
}

@media (max-width: 640px) {
  .tc-contact__press-logos { justify-content: flex-start; }
  .tc-contact-form__foot { align-items: flex-start; }
  .tc-contact__card .wpcf7-submit { width: 100%; }
}