/**
 * Bottom "Free Consultation" section styling — extracted verbatim from home.css so
 * the flexible-template hub/sub pages render the SAME #free_consultation section
 * (template-parts/home/free-consultation.php) as the homepage. Enqueued by
 * inc/enqueue.php only on pages flagged with post meta `lh_bottom_consult`.
 *
 * All CSS custom properties used here live in tokens.css and the base .lh-wrap in
 * chrome.css — both already enqueued on every non-home route — so this file is a
 * self-contained add-on (no globals.css/home.css dependency). The .lh-reveal
 * scroll-in animation is intentionally omitted so the copy is always visible
 * (these pages don't load the homepage reveal JS).
 *
 * @package londonharker
 */

#free_consultation { scroll-margin-top: 84px; }

.lh-eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gold); }

/* Two-column section: pitch column on the left, navy "Start Your Case Review" card on the right. */
.lh-consult { background: var(--paper-2); padding: 92px 0; }
.lh-consult__inner { display: grid; grid-template-columns: .92fr 1.08fr; gap: 52px; align-items: center; }
.lh-consult__copy { color: var(--ink); }
.lh-consult__copy .lh-eyebrow { color: var(--gold-deep); }
.lh-consult__copy h2 { font-size: clamp(2rem,2.8vw,2.6rem); color: var(--navy); margin: 12px 0 14px; }
.lh-consult__copy h2 em { font-style: normal; color: var(--gold-deep); }
.lh-consult__copy > p { color: #4a4f57; font-size: 1.05rem; font-weight: 400; max-width: 460px; }
.lh-consult__points { list-style: none; margin: 24px 0 0; padding: 0; }
.lh-consult__points li { position: relative; padding-left: 34px; margin: 13px 0; color: var(--navy); font-size: .98rem; font-weight: 500; }
.lh-consult__points li::before { content: "\2713"; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--gold); font-size: .74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.lh-consult__form { background: var(--navy); border-radius: 12px; padding: 32px 30px; box-shadow: var(--shadow); border-top: 4px solid var(--gold); min-height: 510px; }
.lh-consult__form-head h3 { color: var(--white); font-family: var(--display); font-size: 1.5rem; margin: 0 0 4px; }
.lh-consult__form-sub { color: rgba(255,255,255,.6); font-size: .88rem; margin: 0 0 20px; }
.lh-consult__disc { font-size: .72rem; color: rgba(255,255,255,.45); margin: 12px 0 0; text-align: center; line-height: 1.5; }
.lh-consult__fallback { color: var(--white); font-size: 1rem; }
.lh-consult__fallback a { color: var(--gold); font-weight: 600; }

/* Gravity Form #2 styling, scoped to #free_consultation (matches the homepage). */
#free_consultation .gform_wrapper { margin: 0; }
/* The two-column grid template must beat the later-loading TSEG legacy bundle (which otherwise leaves
   .gform_fields content-sized, collapsing the fields). !important + .gform_wrapper scope forces it. */
#free_consultation .gform_wrapper .gform_fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 13px; margin: 0; padding: 0; list-style: none; }
#free_consultation .gfield { margin: 0; padding: 0; grid-column: 1 / -1; }
#free_consultation .gf_left_half { grid-column: 1 / 2 !important; }
#free_consultation .gf_right_half { grid-column: 2 / 3 !important; }
/* The legacy bundle pins the grid item <li> (gf_left_half/gf_right_half) to ~50% width, so it doesn't
   fill its grid column and the container/input (both 100%) only reach ~105px. Force the <li> itself to
   fill its column — this is the level the width:100% on container/input alone could not reach. */
#free_consultation .gform_wrapper .gfield,
#free_consultation .gform_wrapper .gf_left_half,
#free_consultation .gform_wrapper .gf_right_half { width: 100% !important; max-width: 100% !important; }
#free_consultation .gform_hidden,
#free_consultation .gfield--type-hidden,
#free_consultation .gfield_visibility_hidden { display: none; }
#free_consultation .gfield_label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#free_consultation .gfield_required { color: var(--gold); }
#free_consultation .ginput_container { margin-top: 0; }
#free_consultation .ginput_container input[type=text],
#free_consultation .ginput_container input[type=email],
#free_consultation .ginput_container input[type=tel],
#free_consultation .ginput_container textarea,
#free_consultation .ginput_container select {
  width: 100%; font-family: var(--body); font-size: .94rem; padding: 12px 13px;
  border: 1px solid rgba(199,168,122,.3); border-radius: 5px;
  background: rgba(255,255,255,.07); color: var(--white); box-sizing: border-box;
}
#free_consultation .ginput_container input::placeholder,
#free_consultation .ginput_container textarea::placeholder { color: rgba(255,255,255,.4); }
#free_consultation .ginput_container textarea { min-height: 104px; resize: vertical; }
#free_consultation .ginput_container input:focus,
#free_consultation .ginput_container textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.12); box-shadow: none; }
/* Hub/sub pages load the legacy TSEG bundle (bootstrap + the TSEG theme's gravityforms.min.css) AFTER
   this file; the homepage never does. The grid cell is 210px, but the legacy bundle pins the
   .ginput_container at ~105px, so the input (100% of its container) stays narrow. Force the CONTAINER
   AND the input to fill with !important so First/Last/Phone/Email match the homepage. */
#free_consultation .gform_wrapper .gfield .ginput_container { width: 100% !important; max-width: 100% !important; }
#free_consultation .gform_wrapper .gfield .ginput_container input,
#free_consultation .gform_wrapper .gfield input.medium,
#free_consultation .gform_wrapper .gfield .ginput_container select,
#free_consultation .gform_wrapper .gfield .ginput_container textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
#free_consultation .gform_footer { margin: 16px 0 0; padding: 0; }
#free_consultation .gform_footer input[type=submit],
#free_consultation .gform_button {
  width: 100%; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: var(--navy-deep);
  font-family: var(--body); font-weight: 600; font-size: .98rem; padding: 16px 24px; border: none; border-radius: 5px;
  cursor: pointer; box-shadow: 0 10px 30px -10px rgba(199,168,122,.6); transition: transform .18s, filter .2s;
}
#free_consultation .gform_footer input[type=submit]:hover,
#free_consultation .gform_button:hover { transform: translateY(-2px); filter: brightness(1.04); }
#free_consultation .gform_confirmation_message { color: var(--white); font-size: 1.05rem; line-height: 1.6; }
#free_consultation .gfield_description,
#free_consultation .gfield_validation_message,
#free_consultation .validation_message { font-size: .8rem; color: #ffb4ab; margin-top: 4px; }
#free_consultation .gform_validation_errors { color: #ffb4ab; font-size: .85rem; margin-bottom: 14px; }

@media (max-width: 900px) {
  .lh-consult__inner { grid-template-columns: 1fr; gap: 36px; }
  .lh-consult { padding: 64px 0; }
}
@media (max-width: 560px) {
  #free_consultation .gform_wrapper .gform_fields { grid-template-columns: 1fr !important; }
  #free_consultation .gf_left_half, #free_consultation .gf_right_half { grid-column: 1 / -1 !important; }
}