/* Contact pages: banner links and the "ways to contact us" tabs.
 * Measurements from the 2026 Contact Figma frame. */

/* ---------- Banner links (main contact page) ---------- */

.contact-headline-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 38px;
}

.contact-headline-links .btn-slide {
  padding-left: 0;
  padding-right: 0;
}

.contact-headline-links .btn-slide i {
  margin-left: 6px;
}

/* ---------- Page-to-page transition ----------
 * Contact, Event Help and Vendors all load this file, so moving between them
 * cross-fades instead of flashing white (CSS View Transitions; browsers
 * without support just navigate normally). The tab row is named so it stays
 * in place while the content around it fades. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

.contact-tabs {
  view-transition-name: contact-tabs;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ---------- Tabs ---------- */

/* Tall enough that a page with little content (e.g. Vendors) can still
 * scroll the tabs up to the same spot as the others when opened at #contact. */
#contact_body {
  min-height: 100vh;
}

.contact-tabs {
  position: relative;
  padding: 32px 16px 0;
  border-bottom: 2px solid #0892a7;
  background-color: #fff;
  scroll-margin-top: 80px;
}

.contact-tabs__list {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.contact-tabs__item {
  flex: 0 1 300px;
  display: flex;
}

.contact-tabs__tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 31px 21px 21px;
  border-radius: 9px 9px 0 0;
  background-color: #f3f3f3;
  text-align: center;
  color: #000;
  transition: background-color 0.2s ease;
}

.contact-tabs__tab:hover,
.contact-tabs__tab:focus {
  background-color: #e8e8e8;
  color: #000;
  text-decoration: none;
}

.contact-tabs__title {
  font-family: "Gotham Medium", "Gotham Medium Regular", Helvetica, Arial, sans-serif;
  font-size: 29px;
  line-height: 31px;
  letter-spacing: -2px;
  text-transform: lowercase;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.contact-tabs__tab:hover .contact-tabs__title,
.contact-tabs__tab:focus .contact-tabs__title {
  opacity: 1;
}

.contact-tabs__text {
  font-family: "Helvetica Neue LT W05_45 Light", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 22px;
}

/* Current page: white, outlined in MTA blue, and sitting over the line
 * underneath so it reads as the open tab. */
.contact-tabs__tab.is-active {
  position: relative;
  margin-bottom: -2px;
  border: 2px solid #0892a7;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  padding-bottom: 23px;
  background-color: #fff;
}

.contact-tabs__tab.is-active .contact-tabs__title {
  opacity: 1;
}

/* Main contact form: room between the tab line and the first fields
 * (overrides the form's Bootstrap pt-3). */
#contact_general.contact-form {
  padding-top: 48px !important;
}

/* Intro sentence above the main form; same type as subpage copy, spanning
 * the same width as the form fields. */
#contact_body .contact-intro {
  max-width: none;
  margin: 0;
  padding-top: 40px;
  font-family: "Helvetica Neue LT W05_45 Light", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 29px;
  text-align: center;
  color: #272731;
}

/* Event Help: the content area already has top padding under the heading. */
#contact_body .contact-subpage__content > .contact-intro {
  padding-top: 0;
  margin-bottom: 32px;
}

/* Bold follow-up line under an intro (e.g. Event Help's "talk to us about
 * planning" line), tucked up close to the sentence above it. */
#contact_body .contact-intro--bold {
  margin-top: -20px;
  font-family: "Helvetica Neue LT W05_65 Medium", Helvetica, Arial, sans-serif;
}

#contact_body .contact-intro + #contact_general.contact-form {
  padding-top: 32px !important;
}

.contact-subpage__content {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Copy and buttons added in the page editor (e.g. Careers): a centred,
 * readable column under the centred heading. Forms (e.g. the WPForms vendor
 * form) aren't direct children, so they keep their own layout. */
.contact-subpage__content > p,
.contact-subpage__content > ul,
.contact-subpage__content > ol {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  font-family: "Helvetica Neue LT W05_45 Light", Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 29px;
  text-align: center;
  color: #272731;
}

.contact-subpage__content > .wp-block-buttons {
  justify-content: center;
  margin-top: 32px;
}

/* Button block: same look as the contact form's SEND button. */
.contact-subpage__content .wp-block-button__link {
  position: relative;
  display: inline-block;
  padding: 10px 56px 10px 32px;
  border-radius: 0.25rem;
  background-color: #0084ca;
  font-family: "Helvetica Neue LT W05_65 Medium", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 27px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

/* Arrow drawn as an SVG mask in the text colour, so it doesn't depend on an
 * icon font (and its weights) having loaded in every browser. */
.contact-subpage__content .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.contact-subpage__content .wp-block-button__link:hover,
.contact-subpage__content .wp-block-button__link:focus {
  background-color: #006ea8;
  color: #fff;
}

/* ---------- Smaller screens: 2 x 2 grid of cards ---------- */

@media (max-width: 991px) {
  .contact-tabs {
    padding-bottom: 24px;
    border-bottom: 0;
  }

  .contact-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contact-tabs__tab,
  .contact-tabs__tab.is-active {
    margin-bottom: 0;
    padding: 18px 14px;
    border-radius: 9px;
  }

  .contact-tabs__tab.is-active {
    border-bottom: 2px solid #0892a7;
  }

  .contact-tabs__title {
    font-size: 22px;
    line-height: 24px;
    letter-spacing: -1px;
  }

  .contact-tabs__text {
    font-size: 15px;
    line-height: 18px;
  }
}

/* ---------- Bootstrap pieces the form markup relies on ----------
 * The contact pages run on the Tailwind stack, which doesn't load Bootstrap,
 * but the form (partials/contact/content-contact_general.php), the phone
 * block and Event Help keep their original Bootstrap markup so the form's
 * scripts and field names are untouched. These rules reproduce just the
 * Bootstrap 4.5 classes that markup uses, scoped to #contact_body (and the
 * "Sending message" modal) so they can't leak into the Tailwind header,
 * footer or FAQ. Values match Bootstrap 4.5. */

#contact_body .container {
  width: 100%;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

#contact_body .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

#contact_body .col-12 {
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

#contact_body .form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

#contact_body .form-row > .col {
  position: relative;
  flex: 1 0 0%;
  max-width: 100%;
  min-width: 0;
  padding-right: 5px;
  padding-left: 5px;
}

/* Spacing/text utilities at Bootstrap's sizes (Tailwind's same-named
 * classes are a different scale). */
#contact_body .pt-3 { padding-top: 1rem; }
#contact_body .pb-2 { padding-bottom: 0.5rem; }
#contact_body .pb-3 { padding-bottom: 1rem; }
#contact_body .pb-4 { padding-bottom: 1.5rem; }
#contact_body .pl-3 { padding-left: 1rem; }
#contact_body .pr-3 { padding-right: 1rem; }
#contact_body .p-4 { padding: 1.5rem; }
#contact_body .mt-2 { margin-top: 0.5rem; }
#contact_body .mt-4 { margin-top: 1.5rem; }
#contact_body .mt-5 { margin-top: 3rem; }
#contact_body .mb-4 { margin-bottom: 1.5rem; }
#contact_body .mb-5 { margin-bottom: 3rem; }
#contact_body .d-inline-block { display: inline-block; }
#contact_body .d-block { display: block; }
#contact_body .text-center { text-align: center; }
#contact_body .text-right { text-align: right; }
#contact_body .text-uppercase { text-transform: uppercase; }
#contact_body .text-lowercase { text-transform: lowercase; }

/* Element defaults and field/button base styles, scoped with
 * "html :where(#contact_body)": one notch above Tailwind's reset (which loads
 * after this file) but below the original app_*.css rules in
 * contact-legacy.css (e.g. ".contact-form .form-control", "#contact_body h2"),
 * which still win as they did on the Bootstrap stack. */
html :where(#contact_body) h2,
html :where(#contact_body) h3,
html :where(#contact_body) h4 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

html :where(#contact_body) h2 { font-size: 2rem; }
html :where(#contact_body) h3 { font-size: 1.75rem; }
html :where(#contact_body) h4 { font-size: 1.5rem; }
html :where(#contact_body) p { margin-bottom: 1rem; }
html :where(#contact_body) a { color: #0084ca; }
html :where(#contact_body) strong { font-weight: bolder; }

/* Fields (app_*.css then sets the grey look, height and borders). */
html :where(#contact_body) .form-control,
html :where(#contact_body) .custom-select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
}

html :where(#contact_body) .custom-select {
  padding-right: 1.75rem;
  -webkit-appearance: none;
  appearance: none;
  background: #f6f6f6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 8px 10px;
}

html :where(#contact_body) .form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

html :where(#contact_body) textarea.form-control {
  resize: vertical;
}

/* Newsletter opt-in: a plain native checkbox instead of Bootstrap's custom one. */
html :where(#contact_body) .custom-control {
  display: block;
  min-height: 1.5rem;
}

html :where(#contact_body) .custom-control-input {
  margin: 0 0.5rem 0 0;
  vertical-align: -1px;
}

html :where(#contact_body) .custom-control-label {
  display: inline;
  margin-bottom: 0;
}

html :where(#contact_body) .btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

html :where(#contact_body) .btn-primary {
  background-color: #0084ca;
  border-color: #0084ca;
  color: #fff;
}

html :where(#contact_body) .btn-primary:hover,
html :where(#contact_body) .btn-primary:focus {
  background-color: #006ea8;
  border-color: #006ea8;
}

/* Tailwind's reset makes svg/img block-level, which stops text-center from
 * centring Event Help's inline icon. */
#contact_body .text-center svg,
#contact_body .text-center img {
  display: inline-block;
}

/* "Sending message..." modal (opened by Bootstrap's JS, which the footer
 * still loads on every page). */
body.modal-open {
  overflow: hidden;
}

#submitting_form.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

#submitting_form.fade {
  transition: opacity 0.15s linear;
}

#submitting_form.fade:not(.show) {
  opacity: 0;
}

#submitting_form .modal-dialog {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 500px;
  min-height: calc(100% - 3.5rem);
  margin: 1.75rem auto;
  pointer-events: none;
}

#submitting_form .modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

#submitting_form .modal-body {
  padding: 1rem;
  text-align: center;
}

#submitting_form img {
  display: inline-block;
}

#submitting_form h3 {
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 0.5;
}

/* Phones: stack the multi-column form rows like the rest of the page. */
@media (max-width: 767px) {
  #contact_body .form-row > .col {
    flex-basis: 100%;
  }

  #contact_body .form-row > .col + .col {
    margin-top: 1rem;
  }

  #contact_body .text-right {
    text-align: left;
  }
}