/*
 * Board application form on /join/apply/. Loaded only on pages that contain the
 * form. It sits inside the page's cream "Your Application" panel, so it adds no
 * card of its own: on a phone that panel leaves under 300px for the fields.
 */

.mcf-board-app {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--wp--preset--color--ink, #17282b);
}

@media (max-width: 700px) {
  .mcf-board-app {
    font-size: 1.125rem;
  }
}

/* The theme enlarges every main-column p and li on phones; inside the form that
   made some labels heading-sized and left others small. */
.wp-site-blocks main :is(form, div).mcf-board-app :is(p, li) {
  font-size: inherit;
}

.mcf-board-app p,
.mcf-board-app fieldset {
  margin: 0;
}

.mcf-board-app__row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  /* Bottom-aligned so an error under one label keeps the two inputs level. */
  .mcf-board-app__row {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

.mcf-board-app__field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 0;
  border: 0;
}

.mcf-board-app label,
.mcf-board-app legend {
  font-weight: 700;
  color: var(--wp--preset--color--deep-teal, #123f46);
}

.mcf-board-app legend {
  padding: 0;
  margin-bottom: 0.4rem;
}

.mcf-board-app__help,
.wp-site-blocks main .mcf-board-app .mcf-board-app__note {
  font-size: 0.95em;
  color: #3c5559;
}

/* #b42318 is 5.9:1 on the cream panel and 6.6:1 on white. */
.mcf-board-app__error {
  font-size: 0.95em;
  font-weight: 700;
  color: #b42318;
}

/* Field borders stay at 3:1 or better against both the white field and the cream panel. */
.mcf-board-app input[type="text"],
.mcf-board-app input[type="email"],
.mcf-board-app input[type="tel"],
.mcf-board-app textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border: 1px solid #708588;
  border-radius: 0.6rem;
  background: var(--wp--preset--color--white, #fff);
  color: inherit;
  font: inherit;
}

.mcf-board-app textarea {
  min-height: 7rem;
  resize: vertical;
}

.mcf-board-app [aria-invalid="true"]:not([type="radio"], [type="checkbox"]) {
  border: 2px solid #b42318;
}

.mcf-board-app input:focus-visible,
.mcf-board-app textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--turquoise, #087b86);
  outline-offset: 2px;
}

.mcf-board-app__choices {
  display: grid;
  gap: 0.35rem 1.25rem;
}

@media (min-width: 640px) {
  .mcf-board-app__choices {
    grid-template-columns: 1fr 1fr;
  }
}

.mcf-board-app .mcf-board-app__choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 32px;
  font-weight: 400;
  color: inherit;
  cursor: pointer;
}

.mcf-board-app__choice input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.25rem 0 0;
  accent-color: var(--wp--preset--color--turquoise, #087b86);
}

/* The box for an Other connection appears once Other is chosen. Browsers without
   :has() always show it, and its answer is dropped for any other choice. */
.mcf-board-app .mcf-board-app__other {
  display: grid;
  gap: 0.4rem;
  margin: 0.25rem 0 0 1.75rem;
}

@supports selector(:has(*)) {
  .mcf-board-app .mcf-board-app__other {
    display: none;
  }

  .mcf-board-app__field:has(#mcf_board_connection_other:checked) .mcf-board-app__other {
    display: grid;
  }
}

.mcf-board-app .mcf-board-app__sublabel {
  font-weight: 400;
  font-size: 0.95em;
}

.mcf-board-app__confirm {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--wp--preset--color--orange, #c95017);
  border-radius: 0.4rem;
  background: var(--wp--preset--color--white, #fff);
}

.mcf-board-app__confirm .mcf-board-app__choice {
  font-weight: 700;
}

.mcf-board-app__errors {
  padding: 1rem 1.25rem;
  border-left: 4px solid #b42318;
  border-radius: 0.4rem;
  background: #fdecea;
}

.mcf-board-app__errors:focus {
  outline: 3px solid #b42318;
  outline-offset: 2px;
}

.mcf-board-app__errors h3,
.mcf-board-app--thanks h3 {
  margin: 0;
  font-size: 1.25em;
}

.mcf-board-app__errors ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

/* Beats the theme's turquoise content-link rule, which is under 4.5:1 on this pink. */
.wp-block-post-content .mcf-board-app .mcf-board-app__errors a,
.mcf-board-app .mcf-board-app__errors a {
  color: #b42318;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mcf-board-app--thanks {
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--wp--preset--color--turquoise, #087b86);
  border-radius: 0.4rem;
  background: var(--wp--preset--color--sky, #e7f6f7);
}

.mcf-board-app--thanks:focus {
  outline: 3px solid var(--wp--preset--color--turquoise, #087b86);
  outline-offset: 2px;
}

.mcf-board-app .mcf-p2p-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The page may not load the core button block's own CSS once its button is gone. */
.mcf-board-app__submit .wp-block-button__link {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font: inherit;
  font-weight: 700;
}