/* CONTACT SECTION AND CONTACT FOOTER  */

.intro.section-contact { margin-top:var(--space-header-offset, 5rem); }
/* Extra breathing room at the very bottom on phones */

.section-contact{
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  /* keep .intro's margin-top/bottom so the section has breathing room */
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
.section-contact h1 { font-family:var(--ff-heading); font-size:var(--fs-h2); line-height:1.2; color:var(--color-vividblue); 
  text-align:center; margin-bottom:var(--space-xs); }
.contact-form { display:flex; flex-direction:column; gap:var(--space-xs); max-width:32rem; margin:0 auto; text-align:left; }
.contact-form label { font-family:var(--ff-heading); font-size:0.9rem; font-weight:700; color:var(--color-vividblue); }
.contact-form input,
.contact-form textarea { font-family:var(--ff-base); font-size:1rem; padding:0.6rem 0.75rem; border:1px solid var(--color-accent); border-radius:8px; width:100%; box-sizing:border-box; background:rgba(255,255,255,0.85); }
.contact-form textarea { resize:vertical; min-height:140px; }
.contact-form input:focus,
.contact-form textarea:focus { outline:none; border-color:var(--color-yellow-hover); box-shadow:0 0 0 2px rgba(255,184,0,0.25); }
.section-contact .cta-button { margin-top:var(--space-s); white-space:nowrap; box-sizing:border-box; border:none; outline:none; }

.text-contact {
  font-family: var(--ff-base)!important;
  font-size: var(--fs-body);
  color: var(--color-text);
  margin: 0 0 var(--space-p) 0;
  margin-inline: var(--space-m);
}


/* Success + error share the same layout */
.form-success,
.form-error {
  display: none;
  margin: 0 0 1rem 0;
  text-align: center;
  color: var(--color-vividblue);
  font-family: var(--ff-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.form-success.is-visible,
.form-error.is-visible {
  display: block;
}

/* Make sure the form really disappears when JS sets hidden */
#contactForm[hidden] {
  display: none !important;
}

/* Optional: only keep these if you actually use them */
.fallback-email-link { text-decoration: underline; }
.fallback-email-wrap { margin-top: 0.25rem; }

.hp-field { position: absolute; left: -9999px; }
.footer-fixed-contact { margin-top:var(--space-l); padding-top:var(--space-xs); font-family:var(--ff-base); font-size:0.85rem; line-height:1.4; text-align:center; 
  color:var(--color-vividblue); background:transparent; }
.footer-fixed-contact .footer-link { color:var(--color-vividblue); text-decoration:underline;}

@media (max-width:600px) {
  .intro.section-contact {margin-bottom: 5rem;}
  .section-contact { padding-top:1.5rem; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom)); }
  .section-contact h1 { font-size:1.3rem; }
  .section-contact .cta-button { width:100%; }
}


/* Make the HTML hidden attribute win over any display rules */
#contactForm[hidden] { display: none !important; }