/*
 * financing.css — Financing page styles (tall photo hero, numbered sections, at-a-glance strip, apply row, lender contact, sidebar)
 * ═══════════════════════════════════════════════════════════════════════
 * PATH: css/financing.css
 * ROLE: The hero band photo for /financing (scoped by the layout's
 *       data-page="financing") and every page rule: the two-column layout
 *       (sections + static sidebar), numbered section headings, the
 *       at-a-glance strip that opens the HELOC section, check lists,
 *       teal-edged note panels, counter-numbered steps, the apply row
 *       (button + QR), the lender contact card, FAQ items, and the sidebar
 *       boxes (section index painted by js/section-spy.js, at-a-glance list,
 *       amber disclosure box via data-tone="notice", related links).
 *       ≤1000px the sidebar stacks below the sections and the index becomes a
 *       chip row. The closing band is the shared .site-cta
 *       (css/site-shell.css); tokens (--band, --teal,
 *       --display, --serif, --line…) come from css/site-shell.css.
 * USED BY: app/Views/public/financing.php (loaded through the layout's 'head'
 *       section).
 * Last Modified: 2026-10-07 — owner scope change (HELOC-only page): option
 *                cards, fine print and billing-timing rules removed with
 *                their markup; at-a-glance strip added
 *                2026-10-07 — created (structure cloned from css/warranty.css)
 */

/* ── hero band photo ─────────────────────────────────── */
.wrapper2[data-page="financing"] {
  background-image: url(../images/home/hero-financing.jpg);
  background-attachment: scroll;   /* fixed would frame only the top edge in a 430px band */
  background-position: center 50%; /* owner's finished kitchen — white shaker cabinets,
                                      herringbone backsplash (images/20221007_131502.jpg,
                                      4032×3024 phone shot); 16:9 cut 1920×1080 at focal .20,
                                      EXIF stripped, 2026-10-07 */
}

/* ── page frame ──────────────────────────────────────── */
.financing-page { padding: clamp(2.5rem, 5vw, 4rem) 0 0; overflow-x: clip; }
.financing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.financing-main { min-width: 0; }
.financing-intro { margin-bottom: 3rem; }

/* ── sections + shared type ──────────────────────────── */
.financing-section { scroll-margin-top: 90px; }
.financing-section + .financing-section { margin-top: 3rem; }
.financing-section-title {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--teal);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.financing-section-num,
.financing-toc-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--teal-deep);
}
.financing-subhead { margin: 2rem 0 .9rem; font-size: 1.15rem; color: var(--ink); }
.financing-lead,
.financing-panel,
.financing-steps li,
.financing-facts li,
.financing-contact-rows,
.financing-faq-a {
  font-family: var(--serif);
  line-height: 1.6;
  color: var(--ink-soft);
}
.financing-lead { margin: 0 0 1rem; font-size: 1.02rem; }
.financing-apply-note,
.financing-qr figcaption {
  margin: 0;
  font-family: var(--serif);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
}
.financing-faq-q,
.financing-steps strong,
.financing-contact-rows strong {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}
/* main.css paints every <a> white and blue on hover — set both states */
.financing-link,
.financing-link:hover,
.financing-link:focus {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: rgba(42, 139, 130, .35);
  text-underline-offset: 3px;
}
.financing-link:hover,
.financing-link:focus { text-decoration-color: var(--teal-deep); }

/* ── at-a-glance strip (opens the HELOC section) ──────── */
/* The 1px grid gap over a --line background draws the dividers, so they stay
   correct whether the strip runs four across or wraps to two */
.financing-highlights {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 10px;
}
.financing-highlight {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
}
.financing-highlight-value {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--ink);
}
.financing-highlight-note { font-family: var(--serif); font-size: .88rem; line-height: 1.4; color: var(--muted); }

/* ── check lists + note panels ───────────────────────── */
.financing-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.financing-facts li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .97rem;
}
.financing-facts svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  padding: 4px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
}
.financing-panel {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.3rem;
  border-left: 4px solid var(--teal);
  border-radius: 0 8px 8px 0;
  background: var(--ground);
  font-size: .98rem;
}
.financing-panel p { margin: 0; }
.financing-panel p + p { margin-top: .6rem; }
.financing-panel-title { font-family: var(--display); font-weight: 700; color: var(--teal-deep); }

/* ── counter-numbered steps ──────────────────────────── */
.financing-steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  counter-reset: financing-step;
  display: grid;
  gap: 1rem;
}
.financing-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 1rem; align-items: start; }
.financing-steps li::before {
  counter-increment: financing-step;
  content: counter(financing-step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--band);
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
}
.financing-steps strong { display: block; margin-bottom: .15rem; }

/* ── apply row (button + QR) + lender contact card ───── */
.financing-apply-row,
.financing-contact {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.financing-apply-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  background: var(--paper);
}
.financing-apply,
.financing-apply:hover,
.financing-apply:focus {
  display: inline-block;
  padding: .85rem 1.8rem;
  border-radius: 999px;
  background: var(--teal);
  color: var(--band);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease;
}
.financing-apply:hover,
.financing-apply:focus { background: var(--teal-bright); }
.financing-apply-note { margin-top: .6rem; }
.financing-qr { margin: 0; max-width: 203px; text-align: center; }
/* Shown at its native 203px: the code is ~2px per module, so any downscale
   blurs it past what a phone camera reads; pixelated keeps HiDPI upscales crisp */
.financing-qr img { display: block; width: 203px; max-width: 100%; height: auto; image-rendering: pixelated; }
.financing-contact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  background: var(--paper);  /* the lender's logo PNG is opaque white */
}
.financing-contact-photo { width: 120px; height: auto; border-radius: 10px; }
.financing-contact-name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.financing-contact-role { margin: .15rem 0 .8rem; font-family: var(--display); font-size: .88rem; color: var(--muted); }
.financing-contact-rows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; }
.financing-contact-rows strong { margin-right: .3rem; }
.financing-contact-logo { display: block; width: 72px; height: auto; }

/* ── FAQ ─────────────────────────────────────────────── */
.financing-faq-q { margin: 0 0 .2rem; font-size: 1.02rem; }
.financing-faq-item { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.financing-faq-item:first-child { padding-top: 0; }
.financing-faq-a { margin: 0; }

/* ── sidebar ─────────────────────────────────────────── */
/* The disclosure box makes this column taller than most viewports, so the
   column flows with the page: nothing is cut off and nothing is pinned (a
   pinned index slid over the lower boxes at 1366×768). The index still
   highlights the in-view section while it is on screen (js/section-spy.js). */
.financing-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.financing-box { flex: 0 0 auto; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.financing-box-title {
  margin: 0;
  padding: .9rem 1.25rem;
  background: var(--band);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.financing-toc ul,
.financing-related { list-style: none; margin: 0; padding: 0; }
.financing-toc li + li,
.financing-related li + li { border-top: 1px solid var(--line); }
.financing-toc a,
.financing-related a {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .75rem 1.25rem;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.financing-toc a:hover,
.financing-toc a:focus,
.financing-related a:hover,
.financing-related a:focus { background: var(--ground); color: var(--teal-deep); text-decoration: none; }
.financing-toc a[aria-current="true"] { background: var(--teal-tint); color: var(--teal-deep); box-shadow: inset 4px 0 0 var(--teal); }
.financing-toc-num { font-size: .7rem; letter-spacing: .16em; }
.financing-glance { margin: 0; padding: .5rem 1.25rem 1rem; }
.financing-glance dt { margin-top: .65rem; font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--ink); }
.financing-glance dd { margin: .1rem 0 0; font-family: var(--serif); font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.financing-box[data-tone="notice"] {
  padding-bottom: .9rem;
  border-color: #f0d98c;
  border-left: 4px solid #e0a800;
  background: #fff8e1;
}
.financing-box[data-tone="notice"] .financing-box-title { padding-bottom: .2rem; background: none; color: #856404; font-size: .68rem; }
.financing-disclosure { margin: .6rem 1.25rem 0; font-family: var(--serif); font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .financing-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .financing-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;      /* "Related" backfills the cell beside "At a glance" */
    align-items: start;
    gap: 1rem;
  }
  .financing-toc,
  .financing-box[data-tone="notice"] { grid-column: 1 / -1; }
  .financing-toc ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem 1rem; }
  .financing-toc li + li { border-top: 0; }
  .financing-toc a {
    gap: .45rem;
    padding: .4rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .82rem;
  }
  .financing-toc a[aria-current="true"] { border-color: var(--teal); box-shadow: none; }
}
@media (max-width: 640px) {
  .financing-aside,
  .financing-contact { grid-template-columns: 1fr; }
  .financing-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .financing-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: .8rem; }
  .financing-steps li::before { width: 32px; height: 32px; font-size: .85rem; }
}