/* =========================================================
   CloudSpark — Contact page CSS (only for /contact/)
   ========================================================= */

/* Hero (reuses global glow tokens) */
.contact-hero {
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* =============== Quick cards =============== */
.contact-cards .cc-card {
  background: var(--bs-surface-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  padding: 1.25rem;
}
.contact-cards .cc-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), 0.1);
  position: relative;
}
.contact-cards .cc-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--bs-primary);
  transform: rotate(45deg);
}
.contact-cards .cc-icon--support::before {
  border-color: var(--bs-secondary);
}
.contact-cards .cc-icon--press::before {
  width: 0;
  height: 0;
  border: none;
  content: "";
  border-left: 9px solid var(--bs-primary);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* =============== Form & Aside =============== */
.contact-form .cf-card,
.contact-form .cf-aside,
.cf-card {
  background: var(--bs-surface-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  padding: 1.25rem;
}
.contact-form .cf-aside {
  padding: 1rem;
}

.contact-form .form-control,
.contact-form .form-select {
  background: var(--bs-surface-bg);
  border-color: var(--bs-border-color);
  border-radius: 12px;
}
.contact-form .form-control::placeholder {
  color: var(--bs-gray-600);
}

.contact-form .btn {
  border-radius: 999px;
}

/* Map frame */
.cf-map {
  padding: 0.5rem;
}
.cf-map .ratio,
.cf-map img {
  border-radius: 12px;
  overflow: hidden;
}

/* Improve validation visuals without extra JS (uses browser UI) */
.needs-validation .form-control:invalid,
.needs-validation .form-select:invalid {
  border-color: color-mix(
    in srgb,
    var(--bs-border-color),
    var(--bs-danger) 45%
  );
}

/* Small tweaks */
.contact-form {
  padding-top: clamp(1rem, 3vw, 1.5rem);
}

/* Sticky header safety if you link to #contact sections later */
.contact-form,
.contact-cards {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}