/* ============================================================
   AIRIS DESIGN STUDIO — CONTACT PAGE
   Loads AFTER style.css and only styles contact-page classes, so it
   cannot affect the homepage. Header + footer styling comes from
   style.css, unchanged.
   ============================================================ */

/* ------------------------------------------------------------
   >>> REPLACE THE CONTACT BACKGROUND IMAGE HERE <<<
   Option A: save your photo as  images/contact-background.jpg
             (an "images" folder next to contact.html) — nothing else to edit.
   Option B: change the path inside url('...') below to any image.
   A wide landscape photo (about 2400px across) works best. If the image
   is missing, the page falls back to the indigo gradient automatically.
   ------------------------------------------------------------ */
:root{
  --contact-bg-image: url('images/contact-background.jpg');
}

/* On a very tall screen the page can be shorter than the window; this makes any
   leftover space below the footer the same black as the footer instead of cream. */
html{ background: var(--black, #07020D); }

/* ---------- Section: full-bleed background ---------- */
.contact{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  box-sizing: border-box;
  background-color: var(--indigo, #44375E);
  background-image: var(--contact-bg-image), linear-gradient(155deg, #44375E 0%, #362c4c 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* soft darkening so the form card always sits well on any photo */
.contact::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7,2,13,0.3);
  pointer-events: none;
}

/* DESKTOP HEIGHT — calibrated like the homepage: the client measures
   screenshots on a display at 125% scaling, so 800 screenshot px =
   640 CSS px. Below 900px the section is content-driven (auto height). */
@media (min-width: 900px){
  .contact{
    min-height: 640px;      /* 640 CSS px = 800 screenshot px at 125% scaling */
    padding-top: 36px;
    padding-bottom: 36px;
    margin: 0;
  }
  /* min-height (not a fixed height) on purpose: at rest the section is exactly
     640px, but if validation/status messages appear the card needs a little
     more room and the section grows instead of overflowing into the header/footer. */
}

/* ---------- Form card ---------- */
.contact-card{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  background: var(--white, #FBF6EF);
  color: var(--black, #07020D);
  border-radius: 4px;
  padding: 28px 40px 26px;
}
.contact-card h1{
  font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  color: var(--black, #07020D);
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 18px;
}

/* ---------- Fields ---------- */
.contact-form{ margin: 0; }
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.field{ display: flex; flex-direction: column; min-width: 0; margin-bottom: 12px; }
.form-row .field{ margin-bottom: 0; }
.field label{
  font-family: var(--sans, 'Montserrat', Arial, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black, #07020D);
  margin-bottom: 6px;
}
.field label .opt{ font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: #5b5266; }
.field input,
.field textarea{
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans, 'Montserrat', Arial, sans-serif);
  font-size: 16px;               /* 16px stops iOS zooming into the field */
  line-height: 1.4;
  color: var(--black, #07020D);
  background: #fff;
  border: 1px solid rgba(7,2,13,0.3);
  border-radius: 4px;
  padding: 11px 13px;
  transition: border-color 300ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.field textarea{ resize: vertical; height: 92px; min-height: 92px; max-height: 240px; }
.field input:focus,
.field textarea:focus{
  outline: 2px solid var(--magenta, #DA47EA);
  outline-offset: 1px;
  border-color: var(--magenta, #DA47EA);
}
.field.invalid input,
.field.invalid textarea{ border-color: var(--magenta, #DA47EA); border-width: 2px; padding: 10px 12px; }
.field-error{
  display: none;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--black, #07020D);
  margin-top: 5px;
}
.field.invalid .field-error{ display: block; }

/* ---------- Consent ---------- */
.consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #2a2432;
}
.consent input{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--magenta, #DA47EA);
}
.consent a{ text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover{ color: var(--magenta, #DA47EA); }
.consent-wrap.invalid .field-error{ display: block; margin: -8px 0 12px 28px; }

/* ---------- Captcha + submit ---------- */
.form-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.captcha-slot{ min-height: 78px; min-width: 0; max-width: 100%; }
.contact-form .btn{ margin-left: auto; }
.contact-form .btn[disabled]{ opacity: 0.6; cursor: wait; }

/* ---------- Status message ---------- */
.form-status{
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black, #07020D);
  border-left: 3px solid var(--indigo, #44375E);
  background: rgba(239,173,246,0.35);
}
.form-status.show{ display: block; }
.form-status.error{ border-left-color: var(--magenta, #DA47EA); }
.form-status a{ text-decoration: underline; text-underline-offset: 2px; }

/* honeypot — never visible, never focusable */
.hp-field{ display: none !important; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 899px){
  .contact{ padding: 40px 16px; }
  .contact-card{ padding: 30px 28px 28px; }
}
@media (max-width: 560px){
  .contact{ padding: 28px 12px; }
  .contact-card{ padding: 26px 18px 24px; }
  .form-row{ grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .form-row .field{ margin-bottom: 14px; }
  .captcha-slot{ width: 100%; }
}
/* the hCaptcha widget is a fixed 303px wide; scale it down on very narrow phones */
@media (max-width: 380px){
  .captcha-slot .h-captcha{ transform: scale(0.9); transform-origin: left top; }
  .captcha-slot{ min-height: 70px; }
}