/* ════════════ BLOG ARTICLE ════════════
   Shared styles for Helpline blog articles.
   Colours come from the brand styles.css :root vars,
   so this same file works for both /roof/ and /renew/. */

body{ background:var(--paper); }

/* Article hero */
.art-hero{ padding:48px 24px 0; background:var(--paper); }
.art-hero-inner{ max-width:780px; margin:0 auto; text-align:center; }
.art-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--green);
  text-decoration:none; margin-bottom:24px;
}
.art-back:hover{ text-decoration:underline; }
.art-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#F5C842; color:var(--green-dark);
  font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; margin-bottom:20px;
}
.art-hero h1{
  font-size:clamp(32px,4.5vw,48px); font-weight:800;
  letter-spacing:-1.2px; line-height:1.1; margin:0 0 22px;
  color:var(--ink);
}
.art-meta{
  font-size:13.5px; color:var(--ink-soft);
  display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center;
  padding-bottom:36px;
}
.art-meta span{ display:inline-flex; align-items:center; gap:6px; }
.art-meta .dot{ width:3px; height:3px; background:var(--ink-soft); border-radius:50%; opacity:0.5; }

/* Lead image */
.art-lead-img{ max-width:880px; margin:0 auto 40px; padding:0 24px; }
.art-lead-img img{
  width:100%; height:auto; display:block; border-radius:18px;
  box-shadow:0 20px 60px rgba(20,42,32,0.15);
}

/* Article body */
.art-body{
  max-width:720px; margin:0 auto; padding:0 24px 60px;
  font-size:17px; line-height:1.75; color:var(--ink-soft);
}
.art-body p{ margin:0 0 22px; }
.art-body p:first-of-type{ font-size:19px; line-height:1.65; color:var(--ink); font-weight:500; }
.art-body h2{
  font-size:clamp(24px,2.6vw,30px); font-weight:800;
  letter-spacing:-0.6px; line-height:1.2; color:var(--ink); margin:48px 0 18px;
}
.art-body h3{ font-size:19px; font-weight:700; color:var(--ink); margin:32px 0 12px; }
.art-body strong{ color:var(--ink); }
.art-body em{ font-style:italic; }
.art-body a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.art-body ul{ padding:0; margin:0 0 28px; list-style:none; }
.art-body ul li{ position:relative; padding-left:32px; margin-bottom:10px; }
.art-body ul li::before{
  content:""; position:absolute; left:0; top:7px;
  width:18px; height:18px; border-radius:50%; background:var(--green-soft);
}
.art-body ul li::after{
  content:""; position:absolute; left:6px; top:12px;
  width:7px; height:3px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

/* Callout */
.art-callout{
  background:var(--green-soft); border-left:4px solid var(--green);
  padding:24px 28px; border-radius:0 14px 14px 0;
  margin:32px 0; font-size:17px; line-height:1.65; color:var(--ink);
}
.art-callout strong{ color:var(--green-dark); }

/* FAQ block */
.art-faq{ margin-top:12px; }
.art-faq h3{
  font-size:17px; font-weight:700; color:var(--ink);
  margin:26px 0 8px; padding-top:20px; border-top:1px solid var(--line);
}
.art-faq h3:first-of-type{ border-top:none; padding-top:0; margin-top:8px; }
.art-faq p{ margin:0 0 4px; font-size:16px; }

/* CTA block */
.art-cta{ background:var(--cream); border-radius:18px; padding:36px 32px; margin:48px 0 20px; text-align:center; }
.art-cta h3{ font-size:22px; font-weight:800; color:var(--ink); margin:0 0 10px; }
.art-cta p{ font-size:15px; color:var(--ink-soft); margin:0 0 22px; }
.art-cta-btn,
.art-body a.art-cta-btn{
  background:var(--green); color:#fff !important;
  padding:14px 28px; border-radius:100px;
  font-weight:700; font-size:15px; text-decoration:none; display:inline-block;
}
.art-cta-btn:hover,
.art-body a.art-cta-btn:hover{ background:var(--green-dark); color:#fff !important; }

/* Article footer */
.art-footer{
  max-width:720px; margin:0 auto; padding:30px 24px 60px;
  border-top:1px solid var(--line); display:flex;
  justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; font-size:13px; color:var(--ink-soft);
}
.art-footer a{ color:var(--green); font-weight:600; text-decoration:none; }
.art-footer a:hover{ text-decoration:underline; }

/* One-pager download (blog posts) */
.art-dl{
  display:flex; align-items:center; gap:20px;
  border:1px solid var(--line, #E2DDD2); border-radius:18px;
  padding:22px 26px; margin:44px 0 0;
  background:#fff;
}
.art-dl-icon{
  flex:none; width:46px; height:46px; border-radius:12px;
  background:var(--green-soft, #E8F0EA);
  display:flex; align-items:center; justify-content:center;
}
.art-dl-main{ flex:1; min-width:0; }
.art-dl-main h4{ font-size:16px; font-weight:800; color:var(--ink); margin:0 0 3px; }
.art-dl-main p{ font-size:14px; color:var(--ink-soft); margin:0; }
.art-dl-btn,
.art-body a.art-dl-btn{
  flex:none;
  border:1.5px solid var(--green); color:var(--green) !important;
  padding:11px 20px; border-radius:100px;
  font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap;
  transition:background .15s, color .15s;
}
.art-dl-btn:hover,
.art-body a.art-dl-btn:hover{ background:var(--green); color:#fff !important; }
@media (max-width:560px){
  .art-dl{ flex-direction:column; align-items:flex-start; gap:14px; text-align:left; }
  .art-dl-btn{ width:100%; text-align:center; }
}

/* ── DESKTOP (>= 1024px) ──────────────────────────────────────────────
   These live here rather than in styles.css because article.css is loaded
   AFTER it. Media queries add no specificity, so a .art-eyebrow rule in
   styles.css — inside a media query or not — loses to the plain declaration
   above. Same class, later sheet, later wins. */
@media (min-width: 1024px) {
  .art-eyebrow { font-size: 15px; letter-spacing: 1.8px; }
  .art-hero h1 { font-size: clamp(38px, 4.6vw, 54px); }
  .art-meta    { font-size: 15.5px; }
  .art-body    { font-size: 19px; }
  .art-body p:first-of-type { font-size: 21px; }
  .art-body h2 { font-size: clamp(26px, 2.8vw, 33px); }
  .art-body h3 { font-size: 21px; }
  .art-body ul li { font-size: 19px; }
  .art-callout { font-size: 19px; }
  .art-faq h3  { font-size: 19px; }
  .art-faq p   { font-size: 18px; }
  .art-cta h3  { font-size: 24px; }
  .art-cta p   { font-size: 17px; }
  .art-footer  { font-size: 15px; }
  .art-back    { font-size: 15px; }
}