/* ANOPY CONTACT PAGE STYLES */
/* Contact form, contact info, booking, FAQ */

/* ============================================
   PAGE INTRO
   ============================================ */

.contact__intro {
  padding: var(--space-lg) var(--container-pad) var(--space-md);
  max-width: 1080px;
  margin: 0 auto;
}

/* Same photo-banner treatment as the homepage's mid-page photo CTA:
   full-bleed image, dark scrim, centered copy on top. */
.contact__intro-frame {
  position: relative;
  width: 100%;
  min-height: clamp(260px, 32vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--navy);
}

.contact__intro-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact__intro-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
}

.contact__intro-overlay {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: var(--space-md);
  text-align: center;
}

.contact__intro-overlay h1 {
  font-size: 30px;
  color: var(--text-on-dark);
  margin-bottom: var(--space-sm);
  font-family: var(--font-serif);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4);
}

.contact__intro-overlay p {
  font-size: var(--size-read-lg);
  color: var(--text-on-dark);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.45);
}

/* ============================================
   CONTACT CONTENT (INFO + FORM)
   ============================================ */

.contact__content {
  padding: var(--space-lg) var(--container-pad);
  background: var(--cream-bg);
  max-width: 1080px;
  margin: 0 auto;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* ============================================
   CONTACT INFORMATION
   ============================================ */

.contact__info h2,
.contact__form-wrapper h2 {
  font-size: var(--size-body-sm);
  color: var(--navy);
  margin-bottom: var(--space-lg);
  font-family: var(--font-serif);
}

.contact__item {
  margin-bottom: var(--space-lg);
}

.contact__item h3 {
  font-size: var(--size-body-sm);
  color: var(--forest-green-ink);
  margin-bottom: var(--space-sm);
  font-family: var(--font-serif);
}

.contact__item p {
  font-size: var(--size-read);
  color: var(--text-dark);
  line-height: 1.6;
}

.contact__item a {
  color: #000;
  text-decoration: none;
  font-weight: 600;
}

.contact__item a:hover {
  color: var(--navy);
}

.contact__booking {
  padding: var(--space-sm) var(--space-md);
  background: var(--warm-beige);
  border-radius: 8px;
}

.contact__booking p {
  font-size: var(--size-body-xs);
  white-space: nowrap;
}

/* ============================================
   CONTACT FORM
   ============================================ */

.contact__form {
  background: var(--navy);
  padding: var(--space-md);
  border-radius: 8px;
}

.contact__form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.contact__form legend {
  display: none;
}

.form__group {
  margin-bottom: var(--space-sm);
}

.contact__form label {
  display: block;
  font-size: var(--size-read);
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: var(--space-sm);
}

.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--size-read);
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-sans);
  transition: border-color var(--dur-hover), box-shadow var(--dur-hover);
}

.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--forest-green-ink);
  box-shadow: 0 0 0 3px rgba(35, 116, 75, 0.1);
}

.contact__form textarea {
  resize: vertical;
  min-height: 90px;
}

.form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.form__checkbox input {
  width: auto;
  margin: 0;
}

.form__checkbox label {
  margin: 0;
  font-weight: 400;
}

.cf-turnstile {
  width: 100%;
  margin-bottom: var(--space-sm);
}

/* Site's terracotta accent for this one CTA, rather than the default
   green .btn--primary fill. Navy text, not white — white-on-terracotta
   measures under 3:1, navy-on-terracotta clears it. */
.contact__form .btn--primary {
  background: var(--terracotta);
  color: var(--navy);
}

.contact__form .btn--primary:hover {
  background: var(--forest-green-btn);
  color: var(--text-on-dark);
}

/* ============================================
   PERSONAL / LEARN MORE
   ============================================ */

.contact__personal {
  padding: var(--space-lg) var(--container-pad);
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* contact-hero.png already has its circular crop baked into the
   image's own alpha channel (not a CSS mask), so no border-radius/
   overflow needed here — just size the box and let it show through. */
.contact__personal-photo {
  width: 300px;
  height: 300px;
  margin: 0 auto var(--space-md);
}

.contact__personal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact__personal-text {
  font-size: var(--size-read-lg);
  color: var(--text-dark);
  line-height: 1.6;
}

.contact__personal-text a {
  color: var(--forest-green-ink);
  font-weight: 600;
  text-decoration: none;
}

.contact__personal-text a:hover {
  color: var(--navy);
}

/* ============================================
   FAQ SECTION
   ============================================ */

/* Two columns on desktop — keeps each answer at a readable line
   length instead of stretching full-width, and uses the section's
   horizontal space so the list doesn't read as mostly empty air.
   The <h2> spans both columns via the grid-column rule below. */
.contact__faq {
  padding: var(--space-lg) var(--container-pad);
  background: var(--warm-beige);
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
}

.contact__faq h2 {
  grid-column: 1 / -1;
  font-size: var(--size-body-sm);
  color: var(--navy);
  text-align: center;
  margin-bottom: var(--space-sm);
  font-family: var(--font-serif);
}

.faq__item h3 {
  font-size: var(--size-body-sm);
  color: var(--navy);
  margin-bottom: var(--space-xs);
  font-family: var(--font-serif);
}

.faq__item p {
  font-size: var(--size-read);
  color: var(--text-dark);
  line-height: 1.5;
}

/* ============================================
   BUTTON STYLES
   Base styles live in reset.css (shared across every page); this
   page just makes buttons full-width to match the stacked form/
   sidebar layout.
   ============================================ */

.btn {
  width: 100%;
  text-align: center;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .contact__intro {
    padding: var(--space-md) var(--container-pad) var(--space-sm);
  }

  .contact__content,
  .contact__personal,
  .contact__faq {
    padding: var(--space-md) var(--container-pad);
  }

  .contact__personal-photo {
    width: 225px;
    height: 225px;
  }

  /* min-width:0 overrides the grid-item default of min-width:auto —
     without it, a non-wrapping child (the "For faster booking..."
     line below) forces this track wider than the viewport, which
     pushed everything in the column (including the CTA buttons,
     which were centered within that too-wide, overflowing box) off
     to the right instead of centered on the actual screen. */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .contact__grid > * {
    min-width: 0;
  }

  .contact__booking p {
    white-space: normal;
  }

  /* Turnstile's "flexible" size still has a hard 300px floor, which
     is wider than this form's padded content area (263px) on most
     phones. Bleed it past the form's own left/right padding, out to
     the dark card's edges (327px here), which clears that floor —
     same negative-margin bleed .why__portraits uses on the homepage. */
  .cf-turnstile {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    width: auto;
  }

  .contact__faq {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .contact__form {
    padding: var(--space-md);
  }

  .contact__intro-overlay h1 {
    font-size: 22px;
  }

  .contact__info h2,
  .contact__form-wrapper h2,
  .contact__faq h2 {
    font-size: var(--size-body-sm);
  }

  /* On mobile the info column stacks alone above the form instead of
     sitting beside it, so the same gaps that read fine in a 2-column
     layout show up as big empty stretches here — tighten them. */
  .contact__info h2 {
    margin-bottom: var(--space-md);
  }

  .contact__item {
    margin-bottom: var(--space-md);
  }

  .contact__intro-overlay p {
    font-size: var(--size-read);
  }

  .btn {
    padding: 12px 24px;
  }
}