/* ============================================================================
   CONTACT US PAGE
   ----------------------------------------------------------------------------
   Mirrors Figma "contact us" page (file L89Kb9yFgtxnrAS5kntqwp, node 2104:310).
   Two stacked sections:
     1. Top — title + intro paragraph (left) + Google Maps embed (right)
     2. Bottom — photo (full-bleed left) + contact form (right)
   ============================================================================ */

/* WP layout override: same break-out treatment as the other pages so sections
   span the full canvas width despite the 780px contentSize default. */
.kae-contact > *,
.kae-contact > .wp-block-group {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
}

/* --- 1. Top section: title + intro left, map right --------------------------
   Figma: title at x=80 y=366, w=630; map at x=759 y=258, w=1081 h=605.
   Map starts ~108px ABOVE the title — handled with align-self: start on title
   wrapper and a margin-top offset so they read as separate-but-grouped. */
/* Top section padding matches the hero on home + divisions so the map's top
   edge starts at the same Y as those pages' photo grids. */
.kae-contact__top {
  display: grid;
  grid-template-columns: minmax(0, 712fr) minmax(0, 1081fr);
  column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.625rem);                  /* Figma: ~50px */
  padding: clamp(2rem, 1.25rem + 2vw, 4rem) var(--kae-pad-x) clamp(1rem, 0.5rem + 1vw, 2rem);
  align-items: start;
}
.kae-contact__top-text {
  /* Match the title margin-top from the shared hero so contact's title sits
     at the same Y as titles on the other pages. */
  padding-top: clamp(2rem, 1rem + 2vw, 4rem);
}
.kae-contact__title {
  font-family: var(--kae-ff-display);
  font-weight: 200;                                                     /* Figma: ExtraLight */
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 6.5625rem);                  /* Figma: 105px */
  line-height: 1.048;                                                   /* Figma: 110/105 */
  color: var(--kae-muted);                                              /* Figma: #6F6F78 */
  margin: 0 0 clamp(1rem, 0.5rem + 1.5vw, 2.375rem) !important;         /* !important beats WP's is-layout-flow margin reset */
}
.kae-contact__intro {
  font-family: var(--kae-ff-body);                                      /* Figma: Inter Light */
  font-weight: 300;
  font-size: clamp(1.125rem, 0.85rem + 1vw, 2.25rem);                   /* Figma: 36px */
  line-height: 1.389;                                                   /* Figma: 50/36 */
  color: var(--kae-navy);                                               /* Figma: #25408f */
  max-width: min(33vw, 629px);                                          /* Figma: 629px wide */
  margin: 0;
}
/* Figma: bright-blue (#00aeef) Bold accent on the closing call-to-action. */
.kae-contact__intro-accent {
  font-weight: 700;
  color: var(--kae-blue);
}

.kae-contact__map {
  display: block;
  width: 100%;
  aspect-ratio: 1081 / 605;                                             /* Figma: 1081×605 */
  overflow: hidden;
  background: #e8eaed;
  text-decoration: none;
}
.kae-contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- 2. Bottom section: photo left + form right ----------------------------
   Figma: photo at x=0 y=922 (FULL BLEED LEFT), w=712 h=640;
          form at x=759 y=924, w=1081. */
.kae-contact__bottom {
  display: grid;
  grid-template-columns: minmax(0, 712fr) minmax(0, 1081fr);
  column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.625rem);
  padding: clamp(1rem, 0.5rem + 1vw, 2rem) var(--kae-pad-x) clamp(2rem, 1.5rem + 2vw, 4.5rem);
  align-items: start;
}
/* Photo bleeds to the LEFT edge of the canvas — pull negative margin-left
   equal to .kae-contact__bottom's left padding to neutralize it. */
.kae-contact__photo {
  margin: 0 0 0 calc(var(--kae-pad-x) * -1);
  width: calc(100% + var(--kae-pad-x));
  aspect-ratio: 712 / 640;                                              /* Figma: 712×640 */
  overflow: hidden;
}
.kae-contact__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Form — Figma: flat layout (no wrapper bg), labels above gray inputs, navy
   centered submit button. */
.kae-contact__form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);                           /* Figma: ~24px between fields */
  background: transparent;
  padding: 0;
}
.kae-contact__field {
  display: flex;
  flex-direction: column;
  gap: clamp(0.375rem, 0.3rem + 0.2vw, 0.5rem);                         /* Figma: ~8px label→input */
}
.kae-contact__field > span {
  font-family: var(--kae-ff-body);
  font-weight: 400;                                                     /* Figma: Regular */
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);                     /* Figma: 16px */
  color: #1e1e1e;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Live char/word counter sits in the label next to "Message". Goes red as the
   user nears the cap or exceeds the word limit. */
.kae-contact__counter {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #6f6f78;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.kae-contact__counter.is-over { color: #a60000; }
.kae-contact__field input,
.kae-contact__field textarea {
  font-family: var(--kae-ff-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.2vw, 1.125rem);               /* Figma: 18px */
  padding: clamp(0.875rem, 0.75rem + 0.4vw, 1.25rem);
  border: 0;                                                            /* Figma: no border */
  background: #f5f5f5;                                                  /* Figma: light gray fill */
  color: #1e1e1e;
  border-radius: 0;
  width: 100%;
}
.kae-contact__field input::placeholder,
.kae-contact__field textarea::placeholder { color: #9a9a9a; }
.kae-contact__field textarea {
  min-height: clamp(72px, 4vw + 40px, 96px);
  resize: vertical;
}
.kae-contact__field input:focus,
.kae-contact__field textarea:focus {
  outline: 2px solid var(--kae-navy);
  outline-offset: -2px;
}
/* Submit button — navy, fixed reasonable width, centered horizontally. */
.kae-contact__submit {
  align-self: center;
  background: var(--kae-navy);
  color: #fff;
  font-family: var(--kae-ff-body);
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.125rem);              /* Figma: 18px */
  padding: clamp(0.875rem, 0.75rem + 0.4vw, 1.25rem) 0;
  width: clamp(300px, 55%, 480px);
  border: 0;
  cursor: pointer;
  margin-top: clamp(0.5rem, 0.4rem + 0.4vw, 1rem);
  transition: background 160ms ease;
}
.kae-contact__submit:hover { background: var(--kae-blue); }
.kae-contact__submit:focus-visible { outline: 3px solid var(--kae-blue); outline-offset: 2px; }

/* Honeypot — hidden from users, visible to bots that auto-fill all fields. */
.kae-contact__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form status messages (rendered by admin-post handler on POST/redirect). */
.kae-contact__status {
  font-family: var(--kae-ff-body);
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1.125rem);
  padding: clamp(0.625rem, 0.5rem + 0.4vw, 1rem);
  margin-bottom: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
}
.kae-contact__status--sent    { color: #0e6e2b; background: #e6f5ec; }
.kae-contact__status--invalid,
.kae-contact__status--error   { color: #a60000; background: #ffe6e6; }