/* Fonts and brand tokens */
:root {
  --brand-teal: #0C5558;
  --brand-teal-700: #083E41;
  --brand-sage: #9EB2B0;
  --brand-yellow: #D9A92A;
  --surface: #ffffff;
  --surface-2: #f7f9f9;
  --border: #e5e7eb;
  --text: #1f2937;
  --muted: #6b7280;
  --ring: #3b82f6; /* blue focus ring for accessibility */
}

html, body {
  font-family: "Lato", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  background: var(--surface-2);
}

h1, h2, h3, .heading, .title {
  font-family: "Playfair Display", Georgia, Cambria, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
}

/* Contact form redesign (scoped broadly to any form on the page) */
form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(12, 85, 88, 0.06);
}

label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

/* Controls */
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.4;
  color: var(--text);
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

input::placeholder,
textarea::placeholder { color: var(--muted); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 4px rgba(12, 85, 88, 0.12), 0 0 0 1px var(--brand-teal);
}

/* Bigger textarea */
textarea { min-height: 180px; resize: vertical; }

/* Spacing between fields */
label + input,
label + select,
label + textarea { margin-bottom: 18px; }

/* Submit button */
button[type="submit"],
input[type="submit"],
.contact-submit,
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-teal), #14777a);
  box-shadow: 0 10px 24px rgba(12, 85, 88, 0.20);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.contact-submit:hover,
.btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(12, 85, 88, 0.28);
}
button[type="submit"]:active,
input[type="submit"]:active,
.contact-submit:active,
.btn-submit:active {
  transform: translateY(0);
  filter: brightness(.98);
}

/* Select arrow styling */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%230C5558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  padding-right: 40px;
}

/* Section header (Send Us a Message) */
h2, h3 {
  color: var(--brand-teal);
}

/* Temporary UI fixes for dropdown/select on Contact page */

/* Ensure dropdown menus render above sticky navbar and other content */
[role="listbox"],
.dropdown,
.select-menu,
.rc-select-dropdown,
.headlessui-listbox-options {
  position: relative !important;
  z-index: 9999 !important;
}

/* Make sure options are clickable */
[role="option"] {
  pointer-events: auto !important;
}

/* Prevent clipping when listbox overflows its container */
form .relative,
form .overflow-hidden {
  overflow: visible !important;
}

/* Native selects should always be interactive */
select {
  pointer-events: auto !important;
}