/* ==========================================================================
   Stratboost — Contact Page Styles
   Works alongside /static/css/styles.css (inherits variables & buttons)
   ========================================================================== */

/* Safety fallback if styles.css isn't loaded for any reason */
:root{
  --color-primary:#6F00FF;
  --color-primary-dark:#5A00E0;
  --color-white:#FFFFFF;
  --color-black:#131628;
  --color-gray-100:#FAFAFA;
  --color-gray-200:#E5E7EB;
  --color-gray-300:#E2E8F0;
  --color-gray-400:#94A3B8;
  --radius-pill:999px;
  --gap:1.5rem;
  --max-w:1200px;
}

/* Section containers already styled globally; add spacing tweaks */
.section .offer-heading{margin-bottom:.5rem}
.section .offer-underline{display:block;width:42px;height:4px;margin:.5rem auto 0;background:var(--color-primary);border-radius:2px;opacity:.9}

/* ----------------------------
   Contact Options (cards)
----------------------------- */
.contact-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
  max-width:1000px;
  margin:1rem auto 0;
}
.contact-card{
  background:var(--color-white);
  border:1px solid var(--color-gray-200);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08); }

.contact-card i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--color-gray-100);
  margin-bottom:.6rem;
  font-size:1rem;
  color:var(--color-black);
}
.contact-card h3{
  font-size:1.1rem;
  font-weight:800;
  margin:.25rem 0 .35rem;
}
.contact-card p{
  color:#3b3b3b;
  font-size:.95rem;
  line-height:1.5;
  margin:0 0 .5rem;
}
.contact-card .text-link{
  font-weight:700;
  color:var(--color-primary);
  text-decoration:none;
  border-bottom:2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.contact-card .text-link:hover{ color:var(--color-primary-dark); }

/* Responsive grid */
@media (max-width: 900px){
  .contact-cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 620px){
  .contact-cards{ grid-template-columns:1fr; }
}

/* ----------------------------
   Flash messages
----------------------------- */
.flash-list{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.flash{ padding:.75rem 1rem; border-radius:.65rem; font-weight:600; }
.flash.success{ background:#E8FFF4; color:#0F5132; border:1px solid #B7F3D6; }
.flash.error{ background:#FFE8E8; color:#842029; border:1px solid #FFC2C2; }

/* ----------------------------
   Contact form
----------------------------- */
.contact-form{
  max-width:900px;
  margin:1rem auto 0;
  background:var(--color-white);
  border:1px solid var(--color-gray-200);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1rem;
}
@media (max-width: 720px){
  .form-row{ grid-template-columns:1fr; }
}

.form-group{ display:flex; flex-direction:column; }
.form-group label{
  font-size:.9rem;
  font-weight:800;
  color:#0f1222;
  margin:0 0 .35rem;
}
.form-group input,
.form-group select,
.form-group textarea{
  appearance:none;
  -webkit-appearance:none;
  background:#fff;
  border:1px solid var(--color-gray-300);
  border-radius:.8rem;
  padding:.8rem .95rem;
  font-size:1rem;
  line-height:1.2;
  color:#0f1222;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-group textarea{ resize:vertical; min-height:140px; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"]{
  border-color:#e11d48;
  box-shadow:0 0 0 3px color-mix(in srgb, #e11d48 22%, transparent);
}

/* Consent + actions */
.form-consent{
  margin:.5rem 0 1rem;
}
.checkbox{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.95rem; color:#2b2b2b;
}
.checkbox input{ margin-top:.2rem; }

.form-actions{
  display:flex; flex-wrap:wrap; gap:.75rem;
  align-items:center;
}

.fine-print{ color:#666; font-size:.9rem; margin-top:.75rem; }

/* Honeypot (hidden) */
.hp-field{ position:absolute !important; left:-9999px !important; opacity:0 !important; }

/* Buttons inside forms should not stretch unless on very small screens */
@media (max-width: 420px){
  .form-actions .btn{ width:100%; text-align:center; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}