/* ============================================================
   BLOG + FORT LAUDERDALE LIFE  — shared styles
   Used by /blog, /blog/{slug}, /fort-lauderdale-life and its posts.
   Matches the site's teal/coral design language. Tokens only.
   Loaded via <link rel="stylesheet" href="/css/blog.css"> AFTER
   the page's own minimal <style>; header/footer come from include.js.
   ============================================================ */
:root {
  --teal:#044439; --teal-mid:#096454; --teal-light:#e7efec;
  --coral:#9a6436; --coral-dark:#7d4f29; --coral-light:#fbf1e6;
  --warm-white:#fbf7f1; --sand:#e4ded4;
  --text-dark:#1f2a26; --text-mid:#1f2a26; --text-light:#4b5853;
}
.blog-wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
.blog-narrow { max-width:760px; margin:0 auto; padding:0 32px; }

/* breadcrumb (mirrors site .bc) */
.bc { background:#fff; border-bottom:1px solid var(--sand); padding:12px 0; font-size:12px; color:var(--text-light); }
.bc-inner { max-width:1200px; margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bc a { color:var(--teal); text-decoration:none; font-weight:600; }
.bc span { margin:0 6px; color:var(--sand); }

/* hero (mirrors site .ph) */
.blog-hero { background:var(--teal); padding:44px 0 40px; position:relative; overflow:hidden; }
.blog-hero::before { content:''; position:absolute; top:-40px; right:-40px; width:220px; height:220px; border-radius:50%; border:50px solid rgba(255,255,255,.03); pointer-events:none; }
.blog-hero .pe { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--coral); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.blog-hero .pe::before { content:''; display:inline-block; width:20px; height:2px; background:var(--coral); border-radius:2px; }
.blog-hero h1 { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:900; color:#fff; line-height:1.15; margin-bottom:14px; }
.blog-hero h1 em { font-style:italic; color:var(--coral); }
.blog-hero p { font-size:15px; color:rgba(255,255,255,.88); line-height:1.65; max-width:640px; }

/* post meta + hero image */
.post-meta { font-size:13px; color:var(--text-light); margin:18px 0 0; }
.post-hero-img { display:block; width:100%; height:auto; border-radius:8px; margin:22px 0 6px; }

/* prose body */
.blog-prose { color:var(--text-mid); font-size:17px; line-height:1.75; padding:28px 0 8px; }
.blog-prose > :first-child { margin-top:0; }
.blog-prose h2 { font-family:'Cormorant Garamond',serif; color:var(--teal); font-size:26px; font-weight:700; margin:30px 0 10px; }
.blog-prose h3 { font-family:'Cormorant Garamond',serif; color:var(--teal); font-size:20px; font-weight:700; margin:24px 0 8px; }
.blog-prose p { margin:0 0 16px; }
.blog-prose ul, .blog-prose ol { margin:0 0 16px; padding-left:1.4em; }
.blog-prose li { margin:0 0 7px; }
.blog-prose a { color:var(--coral-dark); font-weight:600; text-decoration:underline; }
.blog-prose a:hover { color:var(--teal); }
.blog-prose strong { color:var(--text-dark); }
.blog-prose blockquote { margin:0 0 16px; padding:12px 18px; border-left:4px solid var(--coral); background:var(--coral-light); border-radius:0 6px 6px 0; }

/* FAQ */
.blog-faq { padding:10px 0 8px; }
.blog-faq h2 { font-family:'Cormorant Garamond',serif; color:var(--teal); font-size:24px; font-weight:700; margin:18px 0 12px; }
.blog-faq details { background:#fff; border:1px solid var(--sand); border-radius:6px; margin-bottom:10px; overflow:hidden; }
.blog-faq summary { cursor:pointer; padding:14px 18px; font-weight:700; color:var(--teal); list-style:none; }
.blog-faq summary::-webkit-details-marker { display:none; }
.blog-faq summary::after { content:'+'; float:right; color:var(--coral); font-weight:700; }
.blog-faq details[open] summary::after { content:'\2212'; }
.blog-faq .faq-a { padding:0 18px 16px; color:var(--text-mid); }

/* co-branded CTA (Olga + Jim), mirrors the neighborhood-page cards */
.cobrand { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px 0; }
.cobrand-card { border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(4,68,57,.1); }
.cobrand-card .cc-tag { padding:9px 16px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--coral); }
.cobrand-card .cc-body { padding:16px; }
.cobrand-olga { background:#fff; border:1px solid var(--sand); }
.cobrand-jim { background:var(--teal); }
.cc-name { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:700; }
.cobrand-olga .cc-name { color:var(--teal); }
.cobrand-jim .cc-name { color:#fff; }
.cc-sub { font-size:11px; }
.cobrand-olga .cc-sub { color:var(--text-light); }
.cobrand-jim .cc-sub { color:rgba(255,255,255,.55); }
.cc-copy { font-size:13px; line-height:1.6; margin:10px 0 12px; }
.cobrand-olga .cc-copy { color:var(--text-light); }
.cobrand-jim .cc-copy { color:rgba(255,255,255,.8); }
.cc-btn { display:block; background:var(--coral); color:#fff; text-align:center; padding:11px; border-radius:3px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
.cc-btn:hover { background:var(--coral-dark); }

/* estimate / compliance disclaimer */
.blog-disclaimer { font-size:12px; color:var(--text-light); border-top:1px solid var(--sand); margin-top:26px; padding-top:16px; }

/* index grid */
.blog-index { padding:34px 0 50px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; list-style:none; margin:0; padding:0; }
.blog-card { background:#fff; border:1px solid var(--sand); border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(4,68,57,.06); display:flex; flex-direction:column; }
.blog-card img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; background:var(--teal-light); }
.blog-card-body { padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; }
.blog-card .tag { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
.blog-card h2 { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700; line-height:1.25; margin:0; }
.blog-card h2 a { color:var(--teal); text-decoration:none; }
.blog-card h2 a:hover { color:var(--coral-dark); }
.blog-card p { font-size:14px; color:var(--text-light); margin:0; }
.blog-card .date { font-size:12px; color:var(--text-light); margin-top:auto; }
.blog-empty { color:var(--text-light); font-size:16px; padding:10px 0 30px; }

@media (max-width:640px) {
  .cobrand { grid-template-columns:1fr; }
  .blog-hero h1 { font-size:28px; }
  .blog-prose { font-size:16px; }
}