/* =====================================================================
   Contact Us form — contactus.html ONLY
   ---------------------------------------------------------------------
   Fully self-contained: every selector is namespaced `cuf` / `.cuf-*` so
   this form is independent from the Youth Meeting Quick Contact form
   (#ymcfForm / .ymrf-* / .ymcf-* / .yms-fa-* in redesign.css). Edit this
   file freely — nothing here is shared with any other page or form.

   The only shared tokens used are the site-global button classes
   (.btn / .btn-gold / .btn-outline-dark), site fonts/colour variables,
   and FontAwesome — all intentional design-system tokens.
   ===================================================================== */

/* ---- Contact card value alignment --------------------------------------- */
/* Nudge the contact-card values (Phone number + Address street line) down by
   the same amount so they sit level with each other. Only the Phone and Address
   cards carry a .ym-fact-value (the Email card has the "Send a Message" button),
   so this targets both. Both views; scoped to contactus only. */
.contact-facts .ym-fact-value {
  margin-top: 0.5em;
}

/* ---- "Send a Message" trigger button on the Email card ------------------ */
.cuf-open-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* The card's `.ym-fact i` rule sizes the big gold header glyph (1.6rem, 42px
   tall block). Reset it for the button's inline icon so the button renders
   normally instead of inheriting that oversized, block-level treatment. */
.cuf-open-btn i {
  font-size: 1em;
  height: auto;
  margin: 0;
  color: inherit;
  display: inline;
}

/* ---- Modal overlay + panel (top-aligned, scrolls when tall) ------------- */
.cuf-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 3vh, 28px);
  background: rgba(31, 42, 51, 0.55);
  animation: cufModalFade 0.18s ease;
}

.cuf-overlay[hidden] {
  display: none;
}

.cuf-panel {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: auto 0; /* vertically center when short enough */
  animation: cufModalPop 0.2s ease;
}

/* Cards sit flush at the top of the panel. */
.cuf-panel #cufForm.cuf-card,
.cuf-panel #cufSuccess {
  margin-top: 0;
}

/* Round close button, pinned to the top-right of the panel. */
.cuf-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cuf-close:hover {
  color: var(--ink);
  border-color: var(--gold);
}

.cuf-close:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(191, 154, 78, 0.16);
}

@keyframes cufModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cufModalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---- Form card ---------------------------------------------------------- */
.cuf-card {
  max-width: 940px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  padding: clamp(22px, 3vw, 36px);
}

/* Title at the top of the card (self-styled — not dependent on .page-prose). */
.cuf-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--ink);
  margin: 0 0 12px;
}

.cuf-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: rgba(191, 154, 78, 0.5);
  margin-top: 10px;
}

/* "* Required fields" note above the first row of fields. */
.cuf-required-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Red required asterisk. */
.cuf-req {
  color: #c0392b;
  margin-left: 2px;
}

/* ---- Field layout ------------------------------------------------------- */
.cuf-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cuf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.cuf-field {
  display: flex;
  flex-direction: column;
}

.cuf-field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.cuf-label-note {
  font-weight: 400;
  color: var(--muted);
}

/* ---- Inputs + textarea -------------------------------------------------- */
.cuf-field input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cuf-field input::placeholder {
  color: #9aa4ac;
}

.cuf-field input:focus,
.cuf-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(191, 154, 78, 0.16);
}

.cuf-field input.invalid,
.cuf-field textarea.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.cuf-field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  resize: vertical;
  min-height: 84px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cuf-field textarea::placeholder {
  color: #9aa4ac;
}

/* Inline validation message. */
.cuf-error {
  color: #c0392b;
  font-size: 0.86rem;
  font-weight: 500;
  margin: 7px 0 0;
  min-height: 0;
}

.cuf-error:empty {
  display: none;
}

.cuf-error:not(:empty) {
  animation: cufErrIn 0.25s ease;
}

.cuf-error-block {
  margin-top: 12px;
}

@keyframes cufErrIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Message helper text + live character counter ----------------------- */
.cuf-field-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}

.cuf-help {
  color: var(--muted);
  font-size: 0.82rem;
}

.cuf-charcount {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Email live validation (green/valid, red/invalid) + status icon ----- */
.cuf-input-wrap {
  position: relative;
}

.cuf-input-wrap input {
  width: 100%;
}

/* Room for the status icon on the right. */
#cufEmail {
  padding-right: 42px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#cufEmail.is-valid {
  border-color: #3a9d5d; /* soft green */
  box-shadow: 0 0 0 3px rgba(58, 157, 93, 0.16);
}

#cufEmail.is-invalid {
  border-color: #d9544d; /* soft red */
  box-shadow: 0 0 0 3px rgba(217, 84, 77, 0.16);
}

.cuf-valid-icon,
.cuf-invalid-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  font-size: 1rem;
  pointer-events: none;
}

.cuf-valid-icon { color: #3a9d5d; }
.cuf-invalid-icon { color: #d9544d; }
#cufEmail.is-valid ~ .cuf-valid-icon { opacity: 1; visibility: visible; }
#cufEmail.is-invalid ~ .cuf-invalid-icon { opacity: 1; visibility: visible; }

/* ---- Topic dropdown (site-styled replacement for <select>) -------------- */
.cuf-dd {
  position: relative;
  width: 100%;
}

.cuf-dd-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 32px 9px 12px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b74' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cuf-dd-trigger:focus,
.cuf-dd.is-open .cuf-dd-trigger {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(191, 154, 78, 0.16);
}

.cuf-dd-trigger.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.cuf-dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cuf-dd-label.is-placeholder {
  color: #9aa4ac;
}

/* The open list. position:fixed (placed via JS) so it is never clipped. */
.cuf-dd-menu {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 130px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(31, 42, 51, 0.12);
  -webkit-overflow-scrolling: touch;
}

.cuf-dd-menu[hidden] {
  display: none;
}

.cuf-dd-option {
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 0.98rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.cuf-dd-option:hover,
.cuf-dd-option:focus {
  outline: none;
  background: rgba(191, 154, 78, 0.1);
}

.cuf-dd-option[aria-selected="true"] {
  background: rgba(191, 154, 78, 0.22);
  color: var(--gold-dark);
  font-weight: 600;
}

.cuf-dd-menu::-webkit-scrollbar {
  width: 8px;
}
.cuf-dd-menu::-webkit-scrollbar-thumb {
  background: rgba(191, 154, 78, 0.4);
  border-radius: 8px;
}

.cuf-dd.is-open .cuf-dd-menu {
  animation: cufDdIn 0.14s ease;
}
@keyframes cufDdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Submission area ---------------------------------------------------- */
.cuf-submit-area {
  margin-top: clamp(16px, 2.4vw, 24px);
  text-align: center;
}

/* Validation summary — lists what still needs completing on a failed submit. */
.cuf-summary {
  text-align: left;
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-left: 4px solid #c0392b;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 24px;
}

.cuf-summary[hidden] {
  display: none;
}

.cuf-summary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.cuf-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-weight: 700;
  color: #a5281c;
}

.cuf-summary ul {
  margin: 0;
  padding-left: 38px;
  color: #7a2018;
}

.cuf-summary li {
  margin: 4px 0;
}

.cuf-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.cuf-submit,
.cuf-cancel {
  font-size: 0.95rem;
  padding: 12px 34px;
}

.cuf-submit i,
.cuf-cancel i {
  margin-right: 9px;
}

.cuf-submit.is-loading {
  opacity: 0.85;
  cursor: progress;
}

/* Keep the secondary "Cancel" action narrower so Send Message stays dominant. */
.cuf-cancel {
  flex: 0 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Disabled submit while the form is incomplete/invalid. */
.cuf-submit:disabled,
.cuf-submit:disabled:hover {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Security/trust line below the buttons. */
.cuf-trust {
  max-width: 460px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
  padding: 10px 16px 2px;
}

.cuf-trust i {
  color: var(--gold-dark);
  margin-right: 7px;
}

/* ---- Success card ------------------------------------------------------- */
.cuf-success {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 52px);
}

.cuf-success-icon {
  font-size: 3.4rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 18px;
}

.cuf-success h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  color: var(--ink);
  margin: 0 0 16px;
}

.cuf-success p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 28px;
  text-align: center;
}

.cuf-success-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.cuf-success .btn-gold i {
  margin-right: 9px;
}

.cuf-success .btn-gold:hover {
  box-shadow: 0 6px 15px rgba(31, 42, 51, 0.18);
}

/* ---- Success transition: fade form out, fade success card in ------------ */
#cufForm.cuf-fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#cufSuccess.cuf-fade-in {
  animation: cufFadeIn 0.32s ease both;
}

@keyframes cufFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  /* The Email .ym-fact card narrows to ~150px (2-up grid) on phones, so the
     trigger button must shrink to fit neatly instead of overflowing: span the
     card width, smaller text, tighter padding, and allow it to wrap if needed. */
  .cuf-open-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 10px;
    gap: 6px;
    font-size: 0.85rem;
    white-space: normal;
    line-height: 1.25;
  }

  /* Contact cards sit 2-up on phones (Phone + Email on the top row), leaving
     the third "Address" card alone on the second row. Stretch it across both
     columns so it spans the full width of the two cards above it. Scoped to
     .contact-facts (contactus.html only) so the shared .ym-facts grid in
     redesign.css is untouched. */
  .contact-facts .ym-fact:last-child {
    grid-column: 1 / -1;
  }

  .cuf-card {
    padding: clamp(24px, 5vw, 32px);
  }

  .cuf-grid-2 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cuf-success {
    width: calc(100% - 32px);
    max-width: 500px;
  }

  .cuf-success h2,
  .cuf-success p {
    -webkit-hyphens: none;
    hyphens: none;
  }

  /* Stack the success buttons full-width on mobile for easier tapping. */
  .cuf-success-actions { flex-direction: column; }
  .cuf-success-actions .btn { width: 100%; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cuf-overlay,
  .cuf-panel,
  .cuf-dd.is-open .cuf-dd-menu,
  .cuf-error:not(:empty),
  #cufSuccess.cuf-fade-in {
    animation: none;
  }
  #cufForm.cuf-fade-out { transition: none; }
  .cuf-valid-icon,
  .cuf-invalid-icon { transition: none; }
}