/* Load the Custom Header Font */
@font-face {
  font-family: 'Mogan';
  src: url('MOGAN-REGULAR.OTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Updated Color Variables */
:root {
  --bg-blue: #cddceb;       /* Lighter, softer pastel blue */
  --gold-bronze: #8c5e2b;   /* Deeper, earthier bronze */
  --input-cream: #f9f6ec;   /* Soft, warm cream */
  --text-dark: #2c3e50;
  --label-grey: #6b7c8d;
}

/* Base Page Styling */
body {
  background-color: var(--bg-blue);
  font-family: 'Helvetica Neue', Arial, sans-serif; 
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  box-sizing: border-box;
}

.contact-wrapper {
  max-width: 600px;
  width: 100%;
}

/* Typography */
.contact-header h1 {
  font-family: 'Mogan', serif;
  font-size: 3.5rem;
  text-align: center;
  margin: 0 0 0.5rem 0;
  color: var(--text-dark);
}

.contact-header p {
  text-align: center;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

/* Honeypot (Hidden) */
.honeypot-wrapper {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  z-index: -1;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Form Groups */
.input-group {
  position: relative;
  margin-bottom: 1.8rem;
}

/* Base Input Styling */
input, select, textarea {
  width: 100%;
  background-color: var(--input-cream); /* Filled with cream */
  border: 2px solid var(--gold-bronze);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 1rem;
  /* Asymmetrical padding: more room at the top for the floating label */
  padding: 1.6rem 1.5rem 0.6rem 1.5rem; 
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Pill Shapes for single-line inputs */
input, select {
  border-radius: 50px;
  height: 3.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}

/* Softened Square for Textarea */
textarea {
  border-radius: 12px;
  min-height: 180px;
  resize: vertical;
  /* Slightly more top padding for the multiline box */
  padding-top: 1.8rem; 
}

/* Floating Label Default State */
.input-group label {
  position: absolute;
  left: 1.5rem;
  top: 1.2rem;
  color: var(--label-grey);
  font-size: 1rem;
  pointer-events: none;
  transition: 0.2s ease all;
  background-color: transparent; /* No background needed */
  padding: 0;
}

/* The Floating Magic (Inner Float) */
input:focus ~ label,
input:not(:placeholder-shown) ~ label,
textarea:focus ~ label,
textarea:not(:placeholder-shown) ~ label,
select:focus ~ label,
select:valid ~ label {
  /* Floats to the top inner edge, staying inside the cream background */
  top: 0.4rem; 
  left: 1.5rem;
  font-size: 0.75rem;
  color: var(--gold-bronze);
  font-weight: 600;
  background: transparent; 
}

/* Input Focus Glow */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 8px rgba(140, 94, 43, 0.4);
}

/* Submit Button */
.submit-btn {
  width: 100%;
  background-color: var(--gold-bronze);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 1.2rem;
  font-size: 1.5rem;
  font-family: 'Mogan', serif;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  margin-top: 1rem;
}

.submit-btn:hover {
  background-color: #6e4820; /* Darker bronze for hover state */
}

.submit-btn:active {
  transform: scale(0.98);
}

/* Form Status Message */
#form-status {
  text-align: center;
  margin-top: 1rem;
  font-weight: bold;
}

.honeypot-wrapper {
  /* Move the field thousands of pixels off the screen */
  position: absolute;
  left: -9999px;
  top: -9999px;
  
  /* Make it completely transparent just in case */
  opacity: 0;
  
  /* Remove it from the stacking context */
  z-index: -1;
  
  /* Prevent it from taking up any physical space in the layout */
  height: 0;
  width: 0;
  overflow: hidden;
}