/* ============================================================
   King Slayer Sportfishing: /contact/ page layer
   Requires tokens.css then base.css.
   Spine: compact .page-hero photo band > two-column contact
   grid (NAP/social/directions, then a static placeholder
   form) > cta band.
   Colour and type come from tokens only. No border-radius.
   ============================================================ */


/* ============ 2. Contact grid ============ */
.contact-layout{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(2rem,5vw,4.5rem);
}

/* ---- info column ---- */
.contact-info h2,
.contact-form-wrap h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:750;
  font-size:clamp(1.3rem,2.4vw,1.65rem);
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:1.4rem;
}
.contact-details{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  padding-bottom:1.75rem;
  margin-bottom:1.75rem;
  border-bottom:1px solid var(--line);
}
.contact-details dt{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:.4rem;
}
.contact-details dd address{font-style:normal;color:var(--ice);font-size:1rem}
.contact-details dd a{
  color:var(--ice);
  text-decoration:none;
  border-bottom:1px solid var(--blue);
  padding-bottom:.1em;
}
.contact-details dd a:hover{color:var(--blue-bright);border-color:var(--blue-bright)}
.contact-details .call-link{border-bottom:2px solid var(--blue)}
/* 44px tap target for the phone number. The extra height is padding above
   the digits, cancelled by an equal negative margin, so the number and its
   underline sit exactly where they did and only the hit area grows upward */
.contact-details .call-link{
  display:inline-block;
  padding-top:1.1em;
  margin-top:-1.1em;
}
.social-links{display:flex;gap:1.4rem}

.contact-info h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.02rem;
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.5rem;
}
.map-links{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;margin-top:.9rem}
.map-links a{
  color:var(--ice);
  text-decoration:none;
  border-bottom:1px solid var(--blue);
  padding-bottom:.1em;
  font-size:.96rem;
}
.map-links a:hover{color:var(--blue-bright);border-color:var(--blue-bright)}

/* the one lodging line that has to survive the cut */
/* no rule of its own: the .contact-details bottom rule already separates it */
.contact-lodging{
  color:var(--dim);
  font-size:.95rem;
}

/* ---- form column ---- */
.contact-form-wrap{
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(1.75rem,3.5vw,2.25rem);
}
.form-field{margin-bottom:1.2rem}
.form-field label{
  display:block;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:.5rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:var(--deep-800);
  border:1px solid var(--line);
  color:var(--ice);
  font-family:var(--body);
  font-size:1rem;
  padding:.7em .85em;
  /* dark form controls: keeps the UA's date picker and select chrome
     from rendering light-on-light on iOS Safari */
  color-scheme:dark;
}
.form-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue-bright) 50%),
                   linear-gradient(135deg,var(--blue-bright) 50%,transparent 50%);
  background-position:calc(100% - 1.15em) 50%,calc(100% - .75em) 50%;
  background-size:.4em .4em,.4em .4em;
  background-repeat:no-repeat;
  padding-right:2.4em;
}
.form-field textarea{resize:vertical}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{outline:2px solid var(--blue-bright);outline-offset:2px}
/* two-up rows at desktop, stacked on phones */
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1.2rem;
}
.contact-form .btn[disabled]{
  cursor:not-allowed;
  opacity:.55;
}
.contact-form .btn[disabled]:hover{border-color:var(--blue);color:var(--ice)}
.form-note{color:var(--dim);font-size:.88rem;margin-top:.9rem}
/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.form-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-result{
  padding:.9rem 1.1rem;
  border-radius:.4rem;
  margin-bottom:1.4rem;
  font-size:.95rem;
  line-height:1.45;
}
.form-result.is-ok{background:#0f3d2a;color:#d6f5e3;border:1px solid #1c6b48}
.form-result.is-error{background:#4a1d1d;color:#ffd9d9;border:1px solid #8a2f2f}
.form-field input.has-error,
.form-field select.has-error,
.form-field textarea.has-error{border-color:#c05a5a;box-shadow:0 0 0 1px #c05a5a}
.privacy-promise{
  color:var(--dim);
  font-size:.85rem;
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}

/* ============ Responsive ============ */
@media (max-width:880px){
  .contact-layout{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:640px){
  .social-links{flex-direction:column;gap:.6rem}
  .form-row{grid-template-columns:1fr;gap:0}
}

/* ============ Map beside the form (client call, 2026-07-29) ============ */
/* keyless Google embed, same guard rails as the trip-info map */
.contact-map{margin-top:clamp(1.5rem,3vw,2.25rem)}
.contact-map iframe{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:3/2;
  min-height:300px;
  border:1px solid var(--line);
}

.contact-map .map-note{margin-top:.9rem;font-size:.95rem}

/* Send message is a plain .btn-action (tier 2, non-booking) like every other
   non-booking button. It stays at full strength while disabled mid-send.
   -webkit-text-fill-color beats Safari's automatic disabled-button graying */
.contact-form .btn[type="submit"]:disabled{
  background:var(--blue-bright);
  border-color:var(--blue-bright);
  color:var(--deep-900);
  -webkit-text-fill-color:var(--deep-900);
  opacity:1;
}

/* required markers mirror the old Squarespace form: name + email only */
.req{color:var(--blue-bright);font-weight:700}