/* ==========================================================================
 Baker Aluminum. Request an Estimate page
 Reuses the homepage design tokens + fonts. Brand-matched, scoped Formidable
 overrides only (presentation, not form structure). No em/en dashes.
 ========================================================================== */

.ba-estimate { background: var(--ba-white); }

/* ---- header band (matches homepage hero language) ---- */
.ba-est-hero {
 position: relative;
 color: #fff;
 background: var(--ba-black);
 overflow: hidden;
}
.ba-est-hero__bg {
 position: absolute; inset: 0; z-index: 0;
 background-size: cover; background-position: center; opacity:1;
}
.ba-est-hero__scrim {
 position: absolute; inset: 0; z-index: 1;
 background:
 linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.66) 55%, rgba(0,0,0,0.45) 100%),
 linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
}
.ba-est-hero__inner {
 position: relative; z-index: 2;
 padding: clamp(70px, 10vw, 120px) var(--ba-pad) clamp(48px, 6vw, 72px);
 max-width: var(--ba-maxw); margin: 0 auto;
}
.ba-est-hero.ba-eyebrow { color: var(--ba-gold); }
.ba-est-hero.ba-eyebrow::before { background: var(--ba-gold); }
.ba-est-hero h1 {
 color: #fff;
 font-family: var(--ba-font-display);
 font-size: clamp(2.2rem, 5vw, 3.6rem);
 line-height: 1.05;
 margin: 18px 0 0;
 text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.ba-est-lead {
 color: #e9e9e9;
 font-size: clamp(1.02rem, 1.6vw, 1.2rem);
 max-width: 640px;
 margin: 18px 0 26px;
}
.ba-est-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ba-est-info li {
 font-family: var(--ba-font-ui);
 font-weight: 500;
 color: #fff;
 font-size:.98rem;
 display: flex; align-items: flex-start; gap: 10px;
 background: rgba(0,0,0,0.35);
 border: 1px solid rgba(255,255,255,0.14);
 border-left: 3px solid var(--ba-gold);
 border-radius: 8px;
 padding: 12px 16px;
 max-width: 640px;
}
.ba-est-info li.ba-est-ic { font-size: 1.05rem; line-height: 1.4; flex: 0 0 auto; }

/* ---- form area ---- */
.ba-est-form-sec { background: var(--ba-cream); }
.ba-est-form-wrap {
 max-width: 780px;
 background: #fff;
 border: 1px solid var(--ba-line);
 border-radius: 14px;
 box-shadow: var(--ba-shadow-sm);
 padding: clamp(26px, 4vw, 48px);
}

/* ---- scoped Formidable brand overrides (presentation only) ---- */
.ba-estimate.frm_forms,
.ba-estimate.frm_forms * { font-family: var(--ba-font-body); }
.ba-estimate.frm_forms.frm_primary_label,
.ba-estimate.frm_forms label.frm_primary_label {
 font-family: var(--ba-font-ui);
 font-weight: 600;
 color: var(--ba-ink);
 font-size:.95rem;
}
.ba-estimate.frm_forms input[type="text"],
.ba-estimate.frm_forms input[type="email"],
.ba-estimate.frm_forms input[type="tel"],
.ba-estimate.frm_forms input[type="number"],
.ba-estimate.frm_forms input[type="url"],
.ba-estimate.frm_forms select,
.ba-estimate.frm_forms textarea {
 border: 1px solid var(--ba-line);
 border-radius: 6px;
 padding: 12px 14px;
 font-size: 1rem;
 color: var(--ba-ink);
 background: #fff;
 transition: border-color.15s ease, box-shadow.15s ease;
}
.ba-estimate.frm_forms input:focus,
.ba-estimate.frm_forms select:focus,
.ba-estimate.frm_forms textarea:focus {
 outline: none;
 border-color: var(--ba-gold);
 box-shadow: 0 0 0 3px rgba(216,168,39,0.18);
}
.ba-estimate.frm_forms.frm_submit button,
.ba-estimate.frm_forms.frm_submit input[type="submit"],
.ba-estimate.frm_forms button.frm_button_submit {
 font-family: var(--ba-font-ui);
 font-weight: 600;
 font-size: 1rem;
 letter-spacing:.01em;
 background: var(--ba-gold);
 color: #1a1200;
 border: 2px solid var(--ba-gold);
 border-radius: 2px;
 padding: 15px 32px;
 cursor: pointer;
 box-shadow: 0 10px 30px -12px rgba(151,119,2,0.65);
 transition: transform.18s ease, box-shadow.18s ease;
}
.ba-estimate.frm_forms.frm_submit button:hover,
.ba-estimate.frm_forms.frm_submit input[type="submit"]:hover,
.ba-estimate.frm_forms button.frm_button_submit:hover {
 transform: translateY(-2px);
 box-shadow: 0 16px 38px -14px rgba(151,119,2,0.8);
}

@media (max-width: 640px){
.ba-est-form-wrap { padding: 22px 18px; }
}

/* ==========================================================================
 Fluent Forms overrides. Request an Estimate lead form (id 3)
 Scoped to .ba-estimate (on <main>) so nothing leaks off this page.
 Brand-matched to the homepage design tokens (gold #D8A827, Barlow/Inter/Heebo).
 Replaced the legacy Formidable form (id 5); presentation only, not structure.
 No em/en dashes.
 ========================================================================== */

/* Strip Fluent's outer wrappers so the .ba-est-form-wrap frame owns spacing. */
.ba-estimate .fluent_form_ff_1,
.ba-estimate .ff-el-form-top,
.ba-estimate .frm-fluent-form,
.ba-estimate .frm-fluent-form fieldset,
.ba-estimate .ff-el-group,
.ba-estimate .ff-el-input--content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ba-estimate .frm-fluent-form fieldset { min-inline-size: 100% !important; }
.ba-estimate .ff_screen_reader_title,
.ba-estimate .frm-fluent-form legend { display: none !important; }

/* Fieldset is the real flex parent of the field groups. */
.ba-estimate .frm-fluent-form fieldset {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* Labels: brand UI font, matching the site's form language. */
.ba-estimate .frm-fluent-form .ff-el-input--label { margin: 0 0 6px !important; padding: 0 !important; }
.ba-estimate .frm-fluent-form .ff-el-input--label label {
  font-family: var(--ba-font-ui) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  color: var(--ba-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}
.ba-estimate .frm-fluent-form .ff-el-input--label .text-danger { color: var(--ba-gold-dark) !important; }

/* Inputs, selects, textarea: match the page design system. */
.ba-estimate .frm-fluent-form input[type="text"],
.ba-estimate .frm-fluent-form input[type="email"],
.ba-estimate .frm-fluent-form input[type="tel"],
.ba-estimate .frm-fluent-form input[type="number"],
.ba-estimate .frm-fluent-form input[type="url"],
.ba-estimate .frm-fluent-form .ff-el-input--content input,
.ba-estimate .frm-fluent-form select,
.ba-estimate .frm-fluent-form textarea {
  width: 100% !important;
  font-family: var(--ba-font-body) !important;
  font-size: 1rem !important;
  color: var(--ba-ink) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ba-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.ba-estimate .frm-fluent-form textarea { min-height: 120px !important; }
.ba-estimate .frm-fluent-form input::placeholder,
.ba-estimate .frm-fluent-form textarea::placeholder {
  color: #9a9a9a !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.ba-estimate .frm-fluent-form input:focus,
.ba-estimate .frm-fluent-form select:focus,
.ba-estimate .frm-fluent-form textarea:focus {
  border-color: var(--ba-gold) !important;
  box-shadow: 0 0 0 3px rgba(216,168,39,.18) !important;
}

/* Intl phone widget: keep it on-brand and full-width. */
.ba-estimate .frm-fluent-form .ff-el-input--content .iti { width: 100% !important; display: block !important; }

/* File upload dropzone. */
.ba-estimate .frm-fluent-form .ff-el-input--content .ff-upload-zone,
.ba-estimate .frm-fluent-form .ff_upload_btn {
  border: 1px dashed var(--ba-line) !important;
  border-radius: 6px !important;
  background: var(--ba-cream) !important;
  color: var(--ba-text) !important;
  font-family: var(--ba-font-ui) !important;
}
.ba-estimate .frm-fluent-form .ff_upload_btn:hover { border-color: var(--ba-gold) !important; color: var(--ba-ink) !important; }
.ba-estimate .frm-fluent-form .ff-el-help-message,
.ba-estimate .frm-fluent-form .ff-el-input--content .ff-el-help-message {
  font-family: var(--ba-font-body) !important;
  font-size: .85rem !important;
  color: var(--ba-text) !important;
  margin-top: 6px !important;
}

/* Validation error states. */
.ba-estimate .frm-fluent-form .ff-el-is-error input,
.ba-estimate .frm-fluent-form .ff-el-is-error select,
.ba-estimate .frm-fluent-form .ff-el-is-error textarea {
  border-color: #cc2b2b !important;
  box-shadow: 0 0 0 3px rgba(204,43,43,.12) !important;
}
.ba-estimate .frm-fluent-form .error, .ba-estimate .frm-fluent-form .text-danger { color: #cc2b2b !important; font-size: .82rem !important; }

/* Submit button: brand gold pill, matching the site button language. */
.ba-estimate .frm-fluent-form .ff_submit_btn_wrapper { margin-top: 6px !important; }
.ba-estimate .frm-fluent-form button.ff-btn,
.ba-estimate .frm-fluent-form button.ff-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: var(--ba-font-ui) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: .01em !important;
  color: #1a1200 !important;
  background: var(--ba-gold) !important;
  border: 2px solid var(--ba-gold) !important;
  border-radius: 2px !important;
  padding: 15px 32px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px -12px rgba(151,119,2,.65) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.ba-estimate .frm-fluent-form button.ff-btn:hover,
.ba-estimate .frm-fluent-form button.ff-btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 38px -14px rgba(151,119,2,.8) !important;
}
.ba-estimate .frm-fluent-form button.ff-btn:active { transform: translateY(0) !important; }

/* Success message (used only if a same-page confirmation ever shows; default is redirect). */
.ba-estimate .ff-message-success {
  background: rgba(216,168,39,.08) !important;
  border: 1px solid rgba(216,168,39,.35) !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  font-family: var(--ba-font-body) !important;
  color: var(--ba-ink) !important;
}

/* Fix: hero scrim rewritten with VALID rgba (prior values like rgba(0,0,0,0.88) were
   missing the alpha comma, so the browser rendered them as opaque black and hid the
   image). Darker on the left so the white heading stays legible, transparent on the
   right so the project photo shows through. */
.ba-est-hero__scrim {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.12) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 55%);
}