/*
Theme Name: Clover Business Lending
Theme URI: https://example.com/
Author: [Your Company]
Author URI: https://example.com/
Description: Multi-page marketing theme for Clover Business Lending, a funding marketplace/broker. Soft-pull-first messaging with Calendly booking CTAs. PLACEHOLDER legal entity, address, Privacy and Terms must be replaced and attorney-reviewed before launch.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clover-business-lending
*/

/* =========================================================
   Clover Business Lending — shared site styles
   Design brief: warm & approachable / human, fintech-clean structure
   Palette: clover green (primary) + sky (accent) on warm off-white
   Type: Fraunces (display) + Public Sans (body)
   ========================================================= */

:root{
  --text:#06170f;
  --muted:#516069;
  --bg:#f4faf6;
  --surface:#ffffff;
  --border:#e3e9e5;
  --border-strong:#cbd5cd;

  --accent:#16a34a;        /* clover green */
  --accent-dark:#15803d;
  --accent-soft:#dcfce7;
  --sky:#0ea5e9;
  --sky-dark:#0369a1;
  --lime:#a3e635;

  --ring:rgba(22,163,74,.32);
  --shadow:0 18px 46px rgba(6,23,15,.10);
  --shadow-soft:0 12px 30px rgba(6,23,15,.07);

  --maxw:1140px;
  --radius:1.1rem;
  --radius-lg:1.5rem;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{ width:min(var(--maxw),92vw); margin-inline:auto; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .6rem; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,4.2vw,3.2rem); }
h2{ font-size:clamp(1.6rem,3vw,2.3rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1rem; color:var(--muted); }
a{ color:var(--accent-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; height:auto; display:block; }

:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--text); color:#fff; padding:.7rem 1rem; border-radius:0 0 .6rem 0;
}
.skip-link:focus{ left:0; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-dark); display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.4rem;
}
.eyebrow .dot{ width:9px; height:9px; border-radius:999px; background:var(--sky); box-shadow:0 0 0 4px rgba(14,165,233,.14); }
.lead{ font-size:1.1rem; color:var(--muted); max-width:64ch; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.3rem; border-radius:999px; font-weight:800; font-family:var(--font-body);
  background:linear-gradient(135deg,var(--accent),#4ade80); color:#04240f;
  border:1px solid rgba(22,163,74,.35); box-shadow:0 12px 30px rgba(22,163,74,.22);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.05); text-decoration:none; box-shadow:0 16px 36px rgba(22,163,74,.26); }
.btn.secondary{ background:linear-gradient(135deg,#06170f,#11281c); color:#fff; border-color:rgba(6,23,15,.2); box-shadow:0 16px 38px rgba(6,23,15,.18); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); box-shadow:none; }
.btn.ghost:hover{ background:#fff; }

/* ===== Header / nav ===== */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(244,250,246,.86); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:#04240f; font-weight:800; font-family:var(--font-body); font-size:.95rem;
  background:radial-gradient(120% 120% at 20% 10%,#bbf7d0,transparent 55%),linear-gradient(135deg,var(--accent),#86efac);
  border:1px solid rgba(22,163,74,.3); box-shadow:0 12px 26px rgba(22,163,74,.22);
}
.nav-links{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a{ color:var(--muted); font-weight:700; font-size:.95rem; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--text); text-decoration:none; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border-strong); border-radius:.7rem; padding:.55rem .7rem; cursor:pointer; font-size:1.1rem; }
@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--surface); border-bottom:1px solid var(--border); padding:.6rem 4vw 1rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.7rem .2rem; border-bottom:1px solid var(--border); }
  .nav-links .btn{ margin-top:.6rem; }
  .nav{ position:relative; }
}

/* ===== Sections ===== */
.section{ padding:3.5rem 0; position:relative; }
.section.tint{
  background:
    radial-gradient(900px 360px at 12% 0%,rgba(22,163,74,.10),transparent 60%),
    radial-gradient(900px 360px at 88% 0%,rgba(14,165,233,.08),transparent 60%),
    #fff;
  border-block:1px solid var(--border);
}
.section-head{ max-width:70ch; margin-bottom:1.6rem; }

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden; padding:3rem 0 3.25rem; border-bottom:1px solid var(--border);
  background:
    radial-gradient(900px 420px at 14% 8%,rgba(22,163,74,.18),transparent 60%),
    radial-gradient(900px 420px at 86% 14%,rgba(14,165,233,.13),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2.25rem; align-items:center; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; gap:1.5rem; } }
.hero h1 span{ color:var(--accent-dark); }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.4rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.9); border:1px solid var(--border); box-shadow:var(--shadow-soft);
  font-weight:700; font-size:.92rem; color:var(--text);
}
.chip .pill{ font-size:.72rem; font-weight:800; padding:.28rem .5rem; border-radius:999px; background:var(--accent-soft); border:1px solid rgba(22,163,74,.25); color:#04240f; }

/* ===== Cards ===== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.cards.two{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .cards,.cards.two{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.35rem; box-shadow:var(--shadow-soft); position:relative; overflow:hidden;
}
.card::before{ content:""; position:absolute; inset:-2px; background:radial-gradient(260px 110px at 12% 0%,rgba(22,163,74,.10),transparent 60%); pointer-events:none; }
.card > *{ position:relative; }
.card h3{ margin-bottom:.4rem; }
.icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:.75rem;
  background:var(--accent-soft); border:1px solid rgba(22,163,74,.22); color:var(--accent-dark);
  font-weight:800; font-size:1.1rem;
}
.icon.sky{ background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.22); color:var(--sky-dark); }
.icon.lime{ background:rgba(163,230,53,.16); border-color:rgba(163,230,53,.3); color:#3f6212; }

/* ===== Stat / requirement grid ===== */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat{
  background:rgba(255,255,255,.92); border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
  padding:1.15rem; text-align:center; box-shadow:var(--shadow-soft);
}
.stat .big{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; }
.stat .small{ color:var(--muted); font-size:.9rem; }

/* ===== Step flow ===== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; counter-reset:step; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; }
.step .num{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:.7rem;
  font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  background:#fff; border:1px solid var(--border); color:var(--accent-dark); box-shadow:var(--shadow-soft);
}

/* ===== Prose (legal / long-form) ===== */
.prose{ max-width:72ch; }
.prose h2{ margin-top:2rem; }
.prose h3{ margin-top:1.4rem; }
.prose ul,.prose ol{ color:var(--muted); padding-left:1.2rem; }
.prose li{ margin:.35rem 0; }

/* ===== Notice / callout ===== */
.notice{
  background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.25);
  border-radius:var(--radius); padding:1rem 1.15rem; color:#0b3a52; font-size:.95rem;
}
.notice strong{ color:#082c3f; }

/* ===== CTA band ===== */
.cta-band{
  padding:2.6rem 0; border-block:1px solid var(--border);
  background:
    radial-gradient(900px 340px at 20% 0%,rgba(22,163,74,.14),transparent 60%),
    radial-gradient(900px 340px at 80% 0%,rgba(14,165,233,.12),transparent 60%),
    linear-gradient(180deg,#fff,rgba(255,255,255,0));
}
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; }

/* ===== Booking panel (Calendly hub) ===== */
.book-panel{
  background:linear-gradient(135deg,rgba(22,163,74,.16),rgba(14,165,233,.12)),var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow);
}
.book-list{ list-style:none; padding:0; margin:0 0 1.2rem; }
.book-list li{ display:flex; gap:.6rem; align-items:flex-start; margin:.55rem 0; color:var(--text); font-weight:600; }
.book-list li::before{ content:"✓"; color:var(--accent-dark); font-weight:800; }

/* ===== FAQ ===== */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } }
details{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow-soft);
}
summary{ font-weight:800; cursor:pointer; list-style:none; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; float:right; color:var(--accent-dark); font-weight:800; }
details[open] summary::after{ content:"–"; }
details p{ margin:.7rem 0 0; }

/* ===== Footer ===== */
.site-footer{ background:#06170f; color:#cdd8d1; padding:2.75rem 0 2rem; }
.site-footer a{ color:#9ae6b4; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:1.5rem; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand{ color:#fff; }
.footer-col h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#82a394; margin-bottom:.7rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin:.35rem 0; }
.disclaimer{
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem; color:#90a399; line-height:1.6;
}
.disclaimer p{ color:#90a399; }

/* ===== Utility ===== */
.center{ text-align:center; }
.mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1.2rem; } .mt-3{ margin-top:2rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }
.fine{ font-size:.85rem; color:var(--muted); }