/* ==========================================================================
   Charles and Lois Home — Contact / Booking Request Page
   Loaded only on contact.html. Reuses .btn, .section-heading__label and
   design tokens from components.css / variables.css.
   ========================================================================== */

/* ---- Invalid / missing booking context ---- */
.contact-invalid {
  padding-block: var(--space-3xl);
}

.contact-invalid__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.contact-invalid__body {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
}

.contact-invalid .btn {
  margin-top: var(--space-lg);
}

.contact-invalid__direct,
.contact-intro__direct {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-invalid__direct a,
.contact-intro__direct a {
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Intro ---- */
.contact-intro {
  padding-bottom: var(--space-lg);
}

.contact-intro__heading {
  margin-top: var(--space-2xs);
  max-width: 20ch;
}

.contact-intro__body {
  margin-top: var(--space-sm);
  max-width: 60ch;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ---- Layout ---- */
.contact-layout {
  padding-top: 0;
}

.contact-layout__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  min-width: 0;
}

.contact-layout__grid > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .contact-layout__grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

/* ---- Stay summary ---- */
.stay-summary {
  padding: var(--space-lg);
  background-color: var(--color-sage);
  border: var(--border-width) solid var(--color-border);
}

.stay-summary__heading {
  font-size: var(--text-xl);
}

.stay-summary__property-name {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-forest);
}

.stay-summary__property-type {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stay-summary__min-stay {
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-gold-text);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.stay-summary__min-stay:empty {
  display: none;
}

.stay-summary__fields {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border);
}

/* ---- Shared form field styling (summary date/guest fields + guest form) ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.form-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field__optional {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.75em 0.9em;
  background-color: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.form-field textarea {
  resize: vertical;
  min-height: 6em;
}

.form-field input[aria-invalid='true'],
.form-field select[aria-invalid='true'],
.form-field textarea[aria-invalid='true'] {
  border-color: #a8432f;
}

.form-field__error {
  display: block;
  min-height: 1.2em;
  font-size: var(--text-xs);
  color: #a8432f;
}

/* ---- Guest details form ---- */
.guest-form {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.guest-form[hidden] {
  display: none;
}

/* Honeypot: off-screen (not display:none, so simple bots that skip CSS
   still "see" and fill it), unreachable by keyboard (tabindex="-1") and
   hidden from assistive tech (aria-hidden), so real visitors never know
   it's there. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.guest-form__submit-error {
  padding: 0.75em 1em;
  background-color: #fbe9e5;
  border: var(--border-width) solid #a8432f;
  border-radius: var(--radius-sm);
  color: #7a2f1f;
  font-size: var(--text-sm);
}

.guest-form__status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.guest-form__submit[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.guest-form__heading {
  font-size: var(--text-xl);
}

.guest-form__submit {
  margin-top: var(--space-2xs);
  width: 100%;
}

@media (min-width: 480px) {
  .guest-form__submit {
    width: auto;
    align-self: flex-start;
  }
}

.guest-form__reassurance {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- Success state (replaces the form after passing validation) ---- */
.guest-form__success {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-gold);
  text-align: center;
}

.guest-form__success-heading {
  font-size: var(--text-xl);
}

.guest-form__success-body {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
}

.guest-form__recap {
  margin-top: var(--space-md);
  padding-block: var(--space-2xs);
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
}

.guest-form__recap-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-3xs);
  font-size: var(--text-sm);
}

.guest-form__recap-row dt {
  color: var(--color-text-muted);
}

.guest-form__recap-row dd {
  font-weight: var(--weight-medium);
  color: var(--color-forest);
  text-align: right;
}

.guest-form__success-note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.guest-form__success-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.guest-form__success-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- FAQ (native <details>, no JavaScript needed) ---- */
.faq {
  border-top: var(--border-width) solid var(--color-border);
}

.faq__list {
  max-width: 720px;
}

.faq__heading {
  margin-top: var(--space-2xs);
}

.faq__item {
  border-top: var(--border-width) solid var(--color-border);
}

.faq__item:last-child {
  border-bottom: var(--border-width) solid var(--color-border);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  font-weight: var(--weight-medium);
  color: var(--color-forest);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-gold-text);
}

.faq__item[open] > .faq__question::after {
  content: '\2212';
}

.faq__question:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.faq__answer {
  padding-bottom: var(--space-md);
  padding-right: var(--space-lg);
  color: var(--color-text);
}

/* After a request is sent, the "Your stay" fields are locked: show that. */
.stay-summary input:disabled,
.stay-summary select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}