/*
 * Styling for the embedded HubSpot form, so it reads as part of the page
 * rather than as a widget dropped onto it.
 *
 * Why this is a separate file rather than a block in style.css: HubSpot builds
 * forms made in their current editor inside an <iframe>, and a stylesheet on
 * the page cannot reach into one. That iframe is same-origin and carries no
 * sandbox, so gfp_render_hubspot_form()'s onFormReady callback links this file
 * into the form's own document and tags its <body> with .gfp-hubspot-form.
 *
 * The same file is also enqueued on the page itself, where the same class is
 * on the target div — that covers the older embed, which renders inline
 * instead. One stylesheet, both rendering modes, no duplicated rules.
 *
 * Because the iframe document gets none of the theme's tokens, the values here
 * are literal rather than var() — they mirror :root in style.css, and the
 * comment on each group says which token it is standing in for. Font paths are
 * relative to this file, which is how CSS resolves url() regardless of the
 * <base> HubSpot writes into the iframe.
 *
 * On the !important flags: HubSpot emits the form's own theme (fonts, colours,
 * corner radius) as generated rules keyed to a per-instance class —
 * `.hs-form-<form id>_<render id> .hs-form-field label` and friends. That
 * outranks anything written here, the render id changes on every load so it
 * cannot be matched on, and the client can change those values from HubSpot's
 * editor at any time. Flagging the properties that make up the visual match is
 * what keeps the form looking like the site rather than like whatever was last
 * picked in HubSpot. Layout-only rules below are left unflagged.
 */

@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:300 800;font-style:normal;font-display:swap;
}

.gfp-hubspot-form{
  /* --sans */
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  color:#12211a; /* --ink */
  background:transparent;
}

.gfp-hubspot-form .hs-form-field{margin-bottom:18px}

.gfp-hubspot-form label{
  display:block;
  margin:0 0 7px !important;
  font-family:inherit !important;
  font-weight:600 !important;
  font-size:.88rem !important;
  line-height:1.4 !important;
  color:#12211a !important; /* --ink */
}
.gfp-hubspot-form .hs-form-required{color:#96551f !important;margin-left:2px}
.gfp-hubspot-form .hs-field-desc{
  margin:0 0 7px;padding:0;
  font-family:inherit !important;
  font-size:.85rem !important;
  font-weight:400 !important;
  line-height:1.5;
  color:#6f7b73 !important; /* --muted */
}
.gfp-hubspot-form .input{margin:0 !important}

.gfp-hubspot-form .hs-input{
  width:100% !important;max-width:none !important;
  height:auto !important;
  padding:13px 15px !important;
  border:1px solid #d8d1bf !important; /* --line-strong */
  border-radius:10px !important;
  font-family:inherit !important;
  font-size:1rem !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  color:#12211a !important;            /* --ink */
  background:#faf8f2 !important;       /* --paper */
  transition:border-color .18s cubic-bezier(0.23,1,0.32,1),background .18s cubic-bezier(0.23,1,0.32,1),box-shadow .18s cubic-bezier(0.23,1,0.32,1);
}
.gfp-hubspot-form .hs-input:focus{
  outline:none;
  border-color:#009445 !important;     /* --green */
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(0,148,69,.16);
}
.gfp-hubspot-form select.hs-input{height:auto !important;appearance:auto}
.gfp-hubspot-form textarea.hs-input{display:block;min-height:130px !important;resize:vertical}

/* HubSpot lays multi-field rows out with floats inside a max-width fieldset.
   This is the same 1fr 1fr grid .gfp-form__row uses, so a two-column HubSpot
   form lines up with the theme's own. */
.gfp-hubspot-form fieldset{max-width:none !important;border:0;padding:0;margin:0}
.gfp-hubspot-form fieldset.form-columns-2,
.gfp-hubspot-form fieldset.form-columns-3{display:grid;gap:0 16px}
.gfp-hubspot-form fieldset.form-columns-2{grid-template-columns:1fr 1fr}
.gfp-hubspot-form fieldset.form-columns-3{grid-template-columns:repeat(3,1fr)}
.gfp-hubspot-form fieldset .hs-form-field{width:100% !important;float:none !important;padding:0 !important}

.gfp-hubspot-form .inputs-list{list-style:none;margin:0;padding:0}
.gfp-hubspot-form .inputs-list li{margin:0 0 8px}
.gfp-hubspot-form .hs-form-booleancheckbox-display,
.gfp-hubspot-form .hs-form-checkbox-display,
.gfp-hubspot-form .hs-form-radio-display{
  display:flex;gap:9px;align-items:flex-start;
  margin:0 !important;
  font-weight:400 !important;
  font-size:.95rem !important;
  color:#404b44 !important; /* --ink-2 */
}
.gfp-hubspot-form .inputs-list input[type=checkbox],
.gfp-hubspot-form .inputs-list input[type=radio]{
  width:auto !important;height:auto !important;flex:none;margin:4px 0 0;
  padding:0 !important;accent-color:#009445;
}

.gfp-hubspot-form .hs-richtext,
.gfp-hubspot-form .legal-consent-container{
  font-family:inherit !important;
  font-size:.9rem !important;
  color:#6f7b73 !important; /* --muted */
  line-height:1.55;
}
.gfp-hubspot-form .hs-richtext p:last-child{margin-bottom:0}
.gfp-hubspot-form a{color:#0a6e39 !important;text-decoration:underline} /* --green-700 */

.gfp-hubspot-form .hs-error-msgs{margin-top:6px;list-style:none;padding:0}
.gfp-hubspot-form .hs-error-msgs label{
  margin:0 !important;
  font-size:.85rem !important;
  font-weight:500 !important;
  color:#96551f !important;
}
.gfp-hubspot-form .hs-input.error,
.gfp-hubspot-form .hs-input.invalid{border-color:#e0a06a !important}
.gfp-hubspot-form .hs_error_rollup{margin-top:12px}

/* Matches .gfp-btn--primary in style.css. */
.gfp-hubspot-form .hs-submit .actions{margin:0;padding:0}
.gfp-hubspot-form .hs-button{
  display:block;width:100% !important;
  margin-top:6px;
  padding:17px 26px !important;
  height:auto !important;
  border:1.5px solid #009445 !important;   /* --green */
  border-radius:12px !important;           /* --r-btn */
  background:#009445 !important;
  color:#fff !important;
  font-family:inherit !important;
  font-weight:600 !important;
  font-size:1rem !important;
  line-height:1 !important;
  text-align:center;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(0,148,69,.7);
  transition:transform .16s cubic-bezier(0.23,1,0.32,1),background .2s cubic-bezier(0.23,1,0.32,1),border-color .2s cubic-bezier(0.23,1,0.32,1);
}
.gfp-hubspot-form .hs-button:hover{background:#0a6e39 !important;border-color:#0a6e39 !important;color:#fff !important}
.gfp-hubspot-form .hs-button:active{transform:scale(.975)}
.gfp-hubspot-form .hs-button:focus-visible{outline:3px solid rgba(0,148,69,.45);outline-offset:2px}

/* The thank-you HubSpot swaps in for the form, matched to .gfp-formnote--ok. */
.gfp-hubspot-form .submitted-message{
  padding:13px 16px;
  border:1px solid rgba(0,148,69,.3);border-radius:11px;
  background:#eef6ef;       /* --green-wash */
  color:#0a6e39 !important; /* --green-700 */
  font-size:.95rem;line-height:1.5;
}
.gfp-hubspot-form .submitted-message p:last-child{margin-bottom:0}

@media (max-width:900px){
  .gfp-hubspot-form fieldset.form-columns-2,
  .gfp-hubspot-form fieldset.form-columns-3{grid-template-columns:1fr;gap:0}
}
