/* Contact Form — tool-specific additions only.
 * Anything reusable belongs in brand.css so the other tools inherit it too.
 *
 * Two things the kit had never needed: a photographic hero band with the form
 * card sitting over it, and a textarea. Both are here.
 *
 * The hero image comes in as a custom property so the plugin can set it per
 * instance without a second stylesheet:
 *   <div class="sfui" style="--sfcf-hero-image:url('…')">
 * With none set it falls back to the navy skyline below — a data URI, so the
 * standalone file stays a single self-contained page.
 */

.sfui{
  --sfcf-overlay:linear-gradient(100deg,
      rgba(9,16,32,.86) 0%, rgba(9,16,32,.66) 44%, rgba(9,16,32,.38) 100%);
  --sfcf-hero-default:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 620' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231d2f52'/%3E%3Cstop offset='.62' stop-color='%2313203c'/%3E%3Cstop offset='1' stop-color='%230a1226'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='620' fill='url(%23s)'/%3E%3Cg fill='%230d1730' opacity='.85'%3E%3Crect x='0' y='430' width='96' height='190'/%3E%3Crect x='104' y='360' width='78' height='260'/%3E%3Crect x='190' y='452' width='120' height='168'/%3E%3Crect x='318' y='300' width='88' height='320'/%3E%3Crect x='414' y='396' width='104' height='224'/%3E%3Crect x='526' y='250' width='92' height='370'/%3E%3Crect x='626' y='372' width='130' height='248'/%3E%3Crect x='764' y='318' width='84' height='302'/%3E%3Crect x='856' y='424' width='112' height='196'/%3E%3Crect x='976' y='286' width='96' height='334'/%3E%3Crect x='1080' y='400' width='120' height='220'/%3E%3C/g%3E%3Cg fill='%23c19a4d' opacity='.30'%3E%3Crect x='120' y='384' width='8' height='11'/%3E%3Crect x='140' y='384' width='8' height='11'/%3E%3Crect x='120' y='412' width='8' height='11'/%3E%3Crect x='160' y='440' width='8' height='11'/%3E%3Crect x='334' y='330' width='9' height='12'/%3E%3Crect x='358' y='330' width='9' height='12'/%3E%3Crect x='334' y='366' width='9' height='12'/%3E%3Crect x='382' y='402' width='9' height='12'/%3E%3Crect x='542' y='282' width='9' height='12'/%3E%3Crect x='568' y='282' width='9' height='12'/%3E%3Crect x='542' y='320' width='9' height='12'/%3E%3Crect x='594' y='358' width='9' height='12'/%3E%3Crect x='780' y='350' width='9' height='12'/%3E%3Crect x='806' y='386' width='9' height='12'/%3E%3Crect x='992' y='318' width='9' height='12'/%3E%3Crect x='1018' y='318' width='9' height='12'/%3E%3Crect x='992' y='356' width='9' height='12'/%3E%3Crect x='1044' y='394' width='9' height='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------- hero band ---------------- */

.sfui .sfcf-hero{
  position:relative;
  background-color:var(--navy-deep);
  background-image:var(--sfcf-overlay), var(--sfcf-hero-image, var(--sfcf-hero-default));
  background-size:cover, cover;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
}

/* Optional full-width hero: [sfts_contact_form bleed="yes"]. Off by default —
   it escapes the theme's content column, which is right on a wide page layout
   and wrong inside a boxed one. */
.sfui.sfcf-bleed .sfcf-hero{margin-left:calc(50% - 50vw);width:100vw;}

.sfui .sfcf-hero-in{
  max-width:1180px;margin:0 auto;padding:52px 30px 0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;
}
@media (min-width:1000px){
  .sfui .sfcf-hero-in{grid-template-columns:minmax(0,1fr) 540px;gap:44px;padding:76px 30px 0;}
}

.sfui .sfcf-hero-copy{color:#fff;padding-bottom:4px;}
.sfui .eyebrow.light{color:var(--brand-gold);}
.sfui .sfcf-h1{
  font-family:var(--serif);font-weight:700;font-size:54px;line-height:1.02;
  letter-spacing:-.015em;color:#fff;margin:0 0 14px;
}
@media (max-width:760px){.sfui .sfcf-h1{font-size:38px;}}
.sfui .sfcf-hero-copy .underline{width:64px;height:3px;background:var(--brand-gold);margin:0 0 16px;}
.sfui .sfcf-hero-lede{font-size:15.5px;color:#d3dbe9;max-width:46ch;margin:0 0 22px;}

.sfui .sfcf-hero-facts{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.sfui .sfcf-hero-facts li{font-size:14.5px;color:#eef2f8;}
.sfui .sfcf-hero-facts .k{
  display:inline-block;width:58px;color:var(--brand-gold);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}

/* ---------------- the card over the image ---------------- */

.sfui .sfcf-card{
  background:var(--card);border-top:3px solid var(--brand-maroon);border-radius:10px;
  padding:24px 26px 22px;box-shadow:0 26px 62px rgba(6,12,26,.42);
  margin-bottom:-72px;container-type:inline-size;
}
@media (max-width:999px){.sfui .sfcf-card{margin-bottom:-56px;}}
.sfui .sfcf-cardtitle{
  font-family:var(--serif);font-weight:700;font-size:27px;line-height:1.1;
  color:var(--brand-navy);margin:0 0 8px;
}
.sfui .sfcf-cardnote{font-size:12.5px;color:var(--muted);margin:0 0 18px;}

.sfui .sfcf-below{padding-top:100px;}
@media (max-width:999px){.sfui .sfcf-below{padding-top:84px;}}

/* ---------------- the strip under the hero ---------------- */

.sfui .sfcf-strip{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin-bottom:6px;}
@media (min-width:900px){
  .sfui .sfcf-strip{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
}
.sfui .sfcf-strip .resultbox,.sfui .sfcf-strip .railcard{margin-bottom:0;}
.sfui .sfcf-flags .flag{margin:0 0 12px;}
.sfui .sfcf-flags .flag:last-child{margin-bottom:0;}

/* ---------------- fields ---------------- */

.sfui .sfcf-form{margin:0;padding:0;border:0;}

/* One column by default; two once the card itself is wide enough. A viewport
   media query is the wrong measure here — the card is 540px on a 1600px screen. */
.sfui .sfcf-grid{display:grid;gap:0 22px;grid-template-columns:minmax(0,1fr);}
@container (min-width:470px){
  .sfui .sfcf-grid.two{grid-template-columns:1fr 1fr;}
}

/* The kit styles text and number inputs; a contact form is the first thing on
   the site to use email and tel, which would otherwise render as raw browser
   defaults next to the styled fields. */
.sfui input[type=email],.sfui input[type=tel]{width:132px;padding:7px 8px;text-align:left;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);border:1px solid var(--input-line);
  border-radius:6px;background:#fffdfa;height:auto;box-shadow:none;margin:0;}
.sfui input[type=email].wide,.sfui input[type=tel].wide{width:100%;}
.sfui input[type=email].invalid,.sfui input[type=tel].invalid{border-color:var(--bad);
  background:#fdf6f5;}

.sfui .leadfield{margin-bottom:14px;}
.sfui .leadfield select{width:100%;}
.sfui .leadfield .req{color:var(--brand-maroon);margin-left:2px;}
.sfui .leadfield .opt{color:var(--muted);font-weight:600;letter-spacing:.04em;
  text-transform:none;font-size:11px;margin-left:4px;}

.sfui textarea{width:100%;padding:9px 10px;font-family:var(--sans);font-size:14px;
  line-height:1.5;color:var(--ink);border:1px solid var(--input-line);border-radius:6px;
  background:#fffdfa;resize:vertical;min-height:130px;display:block;margin:0;
  box-shadow:none;}
.sfui textarea:focus{outline:2px solid var(--brand-gold);outline-offset:1px;
  border-color:var(--brand-gold);}
.sfui textarea::placeholder{color:#a3a7ae;}
.sfui .leadfield textarea.invalid,.sfui .leadfield select.invalid{border-color:var(--bad);
  background:#fdf6f5;}

.sfui .sfcf-count{font-size:11.5px;color:var(--muted);margin:5px 0 0;text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;}
.sfui .sfcf-count.near{color:var(--warn);}

/* The kit centres a one-line checkbox label; consent wording wraps to three
   lines in a card, and a centred box then floats beside the middle line. */
.sfui label.check.leadconsent{display:flex;align-items:flex-start;margin:2px 0 4px;}
.sfui label.check.leadconsent input{margin-top:3px;}

/* Sending state — the button says what it is doing, because a form that looks
   inert after a click gets clicked again, and a second click is a second email. */
.sfui .btn.sending{opacity:.72;cursor:progress;}

.sfui .sfcf-done[hidden]{display:none;}
.sfui .sfcf-done .resultbox{margin-bottom:14px;}
.sfui .sfcf-done .actions{margin-top:14px;}

/* Demo notice — only ever shown by the standalone HTML build, where there is
   no WordPress endpoint to post to. */
.sfui .sfcf-demo{border-left:3px solid var(--brand-maroon);background:#f7e9e7;color:#7a2a22;
  font-size:13px;padding:11px 14px;border-radius:0 6px 6px 0;margin:12px 0 0;}