/* ============================================================
   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 the Fluent Forms
   enquiry 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);
}
/* ---- Fluent Forms markup, restyled to the static form ----
   Scoped through .contact-form-wrap .fluentform rather than .fluent_form_<ID>:
   the form id is assigned at import and can differ between staging and
   production, and the layout cssClassName never reaches the form tag.
   Fluent Forms' own theme stylesheet (fluentform-public-default) is not loaded
   on this page (inc/assets.php); its structural stylesheet still is. */
/* every field group and the submit wrapper are direct children of the
   fieldset, so the fieldset is the two-up grid; .ks-half groups share a row */
.contact-form-wrap .fluentform fieldset{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1.2rem;
}
.contact-form-wrap .fluentform fieldset > *{grid-column:1/-1}
.contact-form-wrap .fluentform fieldset > .ks-half{grid-column:auto}
.contact-form-wrap .fluentform .ff-el-group{margin-bottom:1.2rem}
.contact-form-wrap .fluentform .ff-el-input--label{display:block;margin-bottom:.5rem;line-height:inherit}
.contact-form-wrap .fluentform .ff-el-input--label label{
  display:block;
  margin:0;
  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);
}
/* the asterisk, as the static .req span: a non-breaking space keeps it on
   the line of the word before it */
.contact-form-wrap .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{
  content:"\00a0*";
  margin-left:0;
  color:var(--blue-bright);
  font-weight:700;
}
.contact-form-wrap .fluentform .ff-el-form-control{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  margin:0;
  background:var(--deep-800);
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  color:var(--ice);
  font-family:var(--body);
  font-size:1rem;
  line-height:normal;
  padding:.7em .85em;
  /* dark form controls: keeps the UA's select chrome from rendering
     light-on-light on iOS Safari */
  color-scheme:dark;
}
.contact-form-wrap .fluentform .ff-el-form-control::placeholder{color:var(--dim);opacity:.75}
.contact-form-wrap .fluentform select.ff-el-form-control{
  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;
}
/* The static page used a native date picker here, which Chrome draws 2px taller
   than a text input (48.4px against 46.4px). Preferred date is plain text now
   (people type "second week of September"); keeping the old row height keeps
   everything below it where the approved static layout had it. */
.contact-form-wrap .fluentform input[name="preferred-date"]{min-height:3.025rem}
/* inline-block, as the static textarea was: its baseline gap sets the space
   above the button */
.contact-form-wrap .fluentform textarea.ff-el-form-control{display:inline-block;resize:vertical}
.contact-form-wrap .fluentform .ff-el-form-control:focus{outline:2px solid var(--blue-bright);outline-offset:2px;border-color:var(--line)}
/* error state: the field is outlined and its own message sits under it */
.contact-form-wrap .fluentform .ff-el-is-error .ff-el-form-control{border-color:#c05a5a;box-shadow:0 0 0 1px #c05a5a}
.contact-form-wrap .fluentform .ff-el-is-error .text-danger,
.contact-form-wrap .fluentform .error.text-danger{color:#ffb3b3;font-size:.88rem;margin-top:.4rem;line-height:1.4}
/* Send message: the theme's .btn .btn-action, with Fluent Forms' button
   geometry taken back out */
.contact-form-wrap .fluentform .ff_submit_btn_wrapper{margin-bottom:0}
.contact-form-wrap .fluentform .ff-btn.btn{
  font-size:.8125rem;
  line-height:normal;
  padding:.95em 1.8em;
  border-radius:0;
  box-shadow:none;
  opacity:1;
  cursor:pointer;
}
/* stays at full strength while disabled mid-send.
   -webkit-text-fill-color beats Safari's automatic disabled-button graying */
.contact-form-wrap .fluentform .ff-btn.btn:disabled{
  background:var(--blue-bright);
  border-color:var(--blue-bright);
  color:var(--deep-900);
  -webkit-text-fill-color:var(--deep-900);
  opacity:1;
}
/* success and whole-form errors, as the static result banner */
.contact-form-wrap .ff-message-success,
.contact-form-wrap .ff-errors-in-stack,
.form-result{
  padding:.9rem 1.1rem;
  border-radius:.4rem;
  margin:0 0 1.4rem;
  font-size:.95rem;
  line-height:1.45;
  box-shadow:none;
}
.contact-form-wrap .ff-message-success{margin-top:1.2rem;background:#0f3d2a;color:#d6f5e3;border:1px solid #1c6b48}
.contact-form-wrap .ff-message-success p{margin:0}
.contact-form-wrap .ff-errors-in-stack{margin-top:1.2rem;background:#4a1d1d;color:#ffd9d9;border:1px solid #8a2f2f}
.contact-form-wrap .ff-errors-in-stack .error{font-size:inherit;line-height:inherit}
.form-result.is-error{background:#4a1d1d;color:#ffd9d9;border:1px solid #8a2f2f}
.form-result a{color:inherit}
.form-note{color:var(--dim);font-size:.88rem;margin-top:.9rem}
/* Honeypot, rendered by the kingslayer-form-antispam mu-plugin. Off-screen
   rather than display:none, which some bots skip. */
.form-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.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}
  .contact-form-wrap .fluentform fieldset{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}

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