/* ============================================================
   SWARNOLATA FOUNDATION
   CONTACT PAGE
   ============================================================ */


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.contact-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3.5rem;
  background:
    radial-gradient(
      circle at 50% 0%,
      var(--s-base-80),
      var(--s-base-60) 45%,
      var(--s-base-50) 100%
    );
  color: var(--s-alt-100);
}


.contact-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -70% -10%;
  height: 100%;
  border-radius: 50%;
  background: var(--s-acc-50);
  opacity: 0.08;
  pointer-events: none;
}


.contact-hero-content {
  position: relative;
  z-index: 1;
}


.contact-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--s-acc-50);
}


/* ------------------------------------------------------------
   MAIN CONTACT SECTION
   ------------------------------------------------------------ */

.contact-section {
  padding: 3rem 0 4rem;
}


/* ------------------------------------------------------------
   INTRODUCTION
   ------------------------------------------------------------ */

.contact-intro {
  max-width: 40rem;
}


.contact-intro h2 {
  color: var(--s-base-40);
}


.contact-note {
  display: flex;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid color-mix(
    in oklch,
    var(--s-base-60) 25%,
    transparent
  );
  border-radius: 0.75rem;
  background: color-mix(
    in oklch,
    var(--s-base-100) 55%,
    transparent
  );
}


.contact-note-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--s-acc-50);
  color: var(--s-base-30);
}


/* ------------------------------------------------------------
   FORM CARD
   ------------------------------------------------------------ */

.contact-card {
  padding: 1.25rem;
  border: 1px solid color-mix(
    in oklch,
    var(--s-base-60) 25%,
    transparent
  );
  border-radius: 1rem;
  background: color-mix(
    in oklch,
    var(--s-base-100) 72%,
    transparent
  );
  box-shadow:
    0 0.5rem 2rem
    color-mix(
      in oklch,
      var(--s-base-0) 12%,
      transparent
    );
}


/* ------------------------------------------------------------
   FORM CONTROLS
   ------------------------------------------------------------ */

.contact-card .form-control,
.contact-card .form-select,
.contact-card .input-group-text {
  border-color: color-mix(
    in oklch,
    var(--s-base-60) 35%,
    transparent
  );
}


.contact-card .form-control:focus {
  border-color: var(--s-base-60);
  box-shadow:
    0 0 0 0.2rem
    color-mix(
      in oklch,
      var(--s-base-60) 20%,
      transparent
    );
}


.contact-card textarea {
  resize: vertical;
  min-height: 10rem;
}


/* ------------------------------------------------------------
   HUMAN VERIFICATION
   ------------------------------------------------------------ */

.contact-verification {
  padding: 1rem;
  border: 1px solid color-mix(
    in oklch,
    var(--s-base-60) 25%,
    transparent
  );
  border-radius: 0.75rem;
}


.contact-verification legend {
  float: none;
  width: auto;
  margin-bottom: 0.25rem;
  font-weight: 600;
}


.verification-group {
  max-width: 16rem;
}


.verification-group .input-group-text {
  font-weight: 600;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   HONEYPOT
   ------------------------------------------------------------ */

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ------------------------------------------------------------
   STATUS
   ------------------------------------------------------------ */

#contact-status {
  min-height: 0;
}


#contact-status:empty {
  display: none;
}


/* ------------------------------------------------------------
   FILE FEEDBACK
   ------------------------------------------------------------ */

#file-feedback {
  color: var(--bs-secondary-color);
}


/* ------------------------------------------------------------
   DARK MODE
   ------------------------------------------------------------ */

[data-bs-theme="dark"] .contact-intro h2 {
  color: var(--s-base-90);
}


[data-bs-theme="dark"] .contact-note,
[data-bs-theme="dark"] .contact-card,
[data-bs-theme="dark"] .contact-verification {
  background: color-mix(
    in oklch,
    var(--s-base-10) 75%,
    transparent
  );

  border-color: color-mix(
    in oklch,
    var(--s-base-70) 30%,
    transparent
  );
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width: 768px) {

  .contact-hero {
    padding: 5rem 0 4.5rem;
  }

  .contact-section {
    padding: 4rem 0 5rem;
  }

  .contact-card {
    padding: 2rem;
  }

}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 992px) {

  .contact-hero {
    padding: 6rem 0 5rem;
  }

  .contact-section {
    padding: 5rem 0 6rem;
  }

  .contact-card {
    padding: 2.25rem;
  }

}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .contact-card,
  .contact-hero {
    transition: none;
  }

}