/* ============================================
   CONTACT.CSS — DSC° Umbrella Site
   Default: DSC° dark system
   .za-mode: ZA light purple system
   ============================================ */

/* DSC° color tokens come from style.css — contact.html must load style.css
   before this file. --radius/--transition aren't defined in style.css,
   so they stay here. Only the ZA color override lives below. */
:root {
  --radius: 2px;
  --transition: 0.4s ease;
}

/* --- ZA TOKEN OVERRIDES --- */
body.za-mode {
  --bg:    #1A0533;
  --bg2:   #2D0A5E;
  --bg3:   #3D1470;
  --bg4:   #4A1A7A;
  --sky:   #9B6FC6;
  --sky2:  #C49FE0;
  --sky3:  #7B4FA6;
  --sky4:  #2D0A5E;
  --text:  #F5F0FF;
  --text2: #C49FE0;
  --text3: #7B6090;
  --sky-text: #C49FE0;
}

/* --- BASE ---
   The reset, body rule and nav block that used to sit here duplicated
   style.css and rebuilt the header at different sizes, so the contact header
   never matched the rest of the site. style.css owns the header now. */

nav{ transform: translateY(0); }
body{ transition: background var(--transition), color var(--transition); }

/* --- CONTACT HERO --- */
.contact-hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) max(48px, 5vw) 80px;
  max-width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.contact-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 40px,
    rgba(8,64,63,0.06) 40px,
    rgba(8,64,63,0.06) 41px
  );
  pointer-events: none;
  z-index: 0;
}

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

.contact-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-text);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-heading {
  font-family: 'Zodiak-Variable', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  margin-bottom: 1.25rem;
  transition: color var(--transition);
}

.contact-sub {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  transition: color var(--transition);
}

/* --- PATH TOGGLE --- */
.path-toggle {
  display: inline-flex;
  border: 1px solid var(--text3);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}

.path-btn {
  background: transparent;
  border: none;
  padding: 0.6rem 1.5rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.path-btn.active {
  background: var(--sky);
  color: var(--text);
}

body.za-mode .path-btn.active {
  color: var(--bg);
}

.path-btn:not(.active):hover {
  color: var(--text);
}

.path-btn:focus-visible,
.contact-submit:focus-visible {
  outline: 2px solid var(--sky-text);
  outline-offset: 2px;
}

/* --- FORM SECTION --- */
.contact-form-section {
  padding: 0 max(48px, 5vw) 120px;
  max-width: 800px;
  margin: 0 auto;
}

.bot-field {
  display: none;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
  transition: color var(--transition);
}

.form-group input,
.form-group textarea {
  background: var(--bg2);
  border: 1px solid var(--text3);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text);
  outline: none;
  resize: none;
  transition: border-color 0.3s ease, background var(--transition), color var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text3);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--sky-text);
  box-shadow: 0 0 0 1px var(--sky-text);
}

body.za-mode .form-group input,
body.za-mode .form-group textarea {
  background: var(--bg3);
  border: 1px solid var(--bg4);
}
body.za-mode .form-group input::placeholder,
body.za-mode .form-group textarea::placeholder {
  color: var(--sky2);
}

/* --- SUBMIT BUTTON --- */
.contact-submit {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--sky);
  border-radius: var(--radius);
  padding: 0.875rem 2.5rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.3s ease, color 0.3s ease, border-color var(--transition);
}

.contact-submit:hover {
  background: var(--sky);
  color: var(--text);
}

body.za-mode .contact-submit:hover {
  color: #FAF7FF;
}

.submit-arrow {
  transition: transform 0.3s ease;
}

.contact-submit:hover .submit-arrow {
  transform: translateX(4px);
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-hero {
    padding: calc(var(--nav-h) + 40px) 24px 60px;
  }

  .contact-form-section {
    padding: 0 24px 80px;
  }

  .nav-links {
    gap: 1.25rem;
  }
}