/* Lemon Law Assist — custom homepage.
   Loaded ONLY on template-home.php (see functions.php), so nothing here can
   affect any other page on the site.

   Tokens match what is already live in the Elementor kit so the homepage reads
   as the same brand as the rest of the site: EB Garamond headings, Lato body,
   the existing green CTA, ink settlements band. */

.lla-home {
  --ink: #0F172A;
  --body: #334155;
  --mute: #64748B;
  --line: #E2E8F0;
  --tint: #F8FAFC;
  --cta: #0D823D;
  --cta-dark: #0A6B32;
  --lemon: #FDEB0A;
  --r: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07);
  --shadow-lift: 0 4px 10px rgba(15,23,42,.09), 0 18px 44px rgba(15,23,42,.13);

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--body);
}

.lla-home *, .lla-home *::before, .lla-home *::after { box-sizing: border-box; }
.lla-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.lla-narrow { max-width: 760px; }

.lla-home h1, .lla-home h2, .lla-home h3 {
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: -.008em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.lla-home h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; font-weight: 700; }
.lla-h2      { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; font-weight: 700; text-align: center; }
.lla-home h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3;  font-weight: 600; }
.lla-home p  { margin: 0 0 1em; }

.lla-eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cta);
  margin-bottom: 1em;
}
.lla-lede { font-size: 1.14rem; color: var(--body); max-width: 34em; }
.lla-sub  { text-align: center; max-width: 42em; margin: 0 auto 2.4em; color: var(--mute); }

/* ---------- Buttons: one pair per screen ---------- */
.lla-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 22px; }
.lla-cta-center { justify-content: center; margin-top: 40px; }
.lla-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 32px;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* .lla-home prefix on every rule below that sets `color` on an <a>: Elementor's
   kit CSS ships `.elementor-kit-1722 a { color: ... }` (specificity 0,1,1),
   which beats a bare single class like `.lla-btn-primary` (0,1,0) and silently
   turned every button/link here into the kit's global green link color —
   found live on production, white-on-green CTA text rendering unreadable.
   `.lla-home .lla-btn-primary` (0,2,0) comfortably outranks it. */
.lla-home .lla-btn-primary { background: var(--cta); color: #fff; box-shadow: var(--shadow); }
.lla-home .lla-btn-primary:hover { background: var(--cta-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.lla-home .lla-btn-ghost { background: transparent; color: var(--cta); border-color: var(--line); }
.lla-home .lla-btn-ghost:hover { border-color: var(--cta); background: rgba(13,130,61,.05); color: var(--cta); }
.lla-btn:active { transform: translateY(0); }
.lla-home a:focus-visible {
  outline: 3px solid var(--cta); outline-offset: 3px; border-radius: var(--r);
}

/* ---------- Hero ----------
   TOP PADDING IS NOT DECORATION. The site header is `position: fixed` (82px on
   desktop, ~67px on mobile) and its Elementor wrapper collapses to ZERO height,
   so page content starts at y=0 UNDERNEATH it. With the old 60px the eyebrow
   line rendered completely hidden behind the nav and the h1 cleared it by 11px.
   130px matches the site's own convention — every interior Elementor page sets
   margin-top:130px on its first section for exactly this reason. */
.lla-hero { background: linear-gradient(168deg, var(--tint) 0%, #fff 62%); padding: 130px 0 68px; }
.lla-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }
.lla-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0; }
.lla-trust li { font-size: .93rem; color: var(--body); font-weight: 600; position: relative; padding-left: 22px; }
.lla-trust li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px;
  border-left: 2px solid var(--cta); border-bottom: 2px solid var(--cta); transform: rotate(-45deg);
}
.lla-hero-card {
  background: var(--ink); color: #fff; border-radius: 16px;
  padding: 40px 32px; text-align: center; box-shadow: var(--shadow-lift);
}
.lla-hero-amt {
  display: block; font-family: var(--serif); font-size: clamp(40px, 6vw, 62px);
  font-weight: 700; color: var(--lemon); line-height: 1; font-variant-numeric: tabular-nums;
}
.lla-hero-lbl {
  display: block; margin-top: 12px; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}

/* ---------- Trust bar ----------
   Restores the five authority badges the first rebuild dropped. Fixed logo
   height (not width) keeps wildly different logo aspect ratios optically even,
   and reserving the height in CSS means no layout shift as they load. */
.lla-trustbar { padding: 30px 0; border-bottom: 1px solid var(--line); background: #fff; }
.lla-logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 46px;
}
.lla-logos li { display: flex; align-items: center; }
.lla-logos img {
  height: 46px; width: auto; max-width: 165px; object-fit: contain;
  /* Badges are supporting evidence, not the message. Desaturating them keeps
     the eye on the CTA; full color on hover for anyone inspecting them. */
  filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease;
}
.lla-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Reviews ---------- */
.lla-review {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.lla-stars { color: #E8A81C; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
.lla-review blockquote { margin: 0; font-size: 1rem; color: var(--body); }
.lla-review figcaption {
  display: flex; align-items: center; gap: 12px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.lla-review figcaption img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
}
.lla-review-name { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; }
.lla-review-case { display: block; font-size: .85rem; color: var(--mute); }

/* ---------- Sections ---------- */
.lla-section { padding: 76px 0; }
/* The site header is fixed (82px desktop). Without this, jumping to any
   in-page anchor (#reviews, #areas…) parks that section's heading UNDER the
   nav. Nothing links to these anchors today; this is here so that adding such
   a link later can't quietly reintroduce the overlap bug. */
.lla-home section[id] { scroll-margin-top: 100px; }
.lla-section-tint { background: var(--tint); }
.lla-section-ink { background: var(--ink); }
.lla-section-ink .lla-h2 { color: #F8FAFC; }

.lla-grid { display: grid; gap: 22px; }
.lla-grid-3 { grid-template-columns: repeat(3, 1fr); }

.lla-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px;
}
.lla-card p { color: var(--mute); margin: 0; }
.lla-card-accent { border-left: 3px solid var(--cta); }

/* ---------- Steps ---------- */
.lla-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lla-steps li { padding-top: 6px; }
.lla-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px; border-radius: 50%;
  background: var(--ink); color: var(--lemon);
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
}
.lla-steps p { color: var(--mute); }

/* ---------- Settlements (ink band, lemon figures) ---------- */
.lla-disclaimer {
  text-align: center; font-size: .86rem; color: #CBD5E1;
  max-width: 52em; margin: 0 auto 2.6em; line-height: 1.6;
}
.lla-settlement { text-align: center; padding: 18px 12px; }
.lla-amt {
  display: block; font-family: var(--serif); font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 700; color: var(--lemon); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.lla-amt-lbl { display: block; margin-top: 10px; font-size: .95rem; color: #CBD5E1; }

/* ---------- Areas: text links, not competing buttons ---------- */
.lla-area h3 { margin-bottom: .35em; }
.lla-area p { color: var(--mute); margin-bottom: .7em; }
.lla-home .lla-textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cta); font-weight: 700; text-decoration: underline;
  text-underline-offset: 4px;
}
.lla-home .lla-textlink:hover { color: var(--cta-dark); }
.lla-more-links { text-align: center; margin-top: 34px; font-size: .95rem; color: var(--mute); }
.lla-home .lla-more-links a { color: var(--cta); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Closer ---------- */
.lla-closer { background: var(--ink); color: #fff; padding: 78px 0; text-align: center; }
.lla-closer h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); }
.lla-closer p { color: rgba(255,255,255,.8); font-size: 1.08rem; }
.lla-home .lla-cta-invert .lla-btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.lla-home .lla-cta-invert .lla-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .lla-hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .lla-grid-3, .lla-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  /* Mobile nav measures ~67px; 106px clears it with room to breathe. */
  .lla-hero { padding: 106px 0 48px; }
  .lla-section, .lla-closer { padding: 54px 0; }
  .lla-grid-3, .lla-steps { grid-template-columns: 1fr; }
  .lla-cta { flex-direction: column; }
  .lla-cta .lla-btn { width: 100%; }
  .lla-logos { gap: 20px 30px; }
  .lla-logos img { height: 36px; max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .lla-home *, .lla-home *::before, .lla-home *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .lla-btn:hover { transform: none; }
}