/*
Theme Name: CV ProWrite Blog
Description: Custom theme built from the real cvprowrite.co.uk HTML/CSS so the blog matches the main site exactly.
Author: CV ProWrite
Version: 1.0
*/

/* Blog-specific additions on top of the real site CSS (site-style.css) */

.blog-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  align-items:start;
  max-width:var(--container); margin:0 auto; padding:60px 32px 100px;
}
@media (max-width:860px){ .blog-grid{ grid-template-columns:1fr; padding:40px 20px 60px; } }

.blog-card{
  background:var(--white); border-radius:var(--radius-md); padding:28px 26px 26px;
  box-shadow:var(--shadow-card); border:1px solid rgba(34,36,61,0.07);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -20px rgba(91,63,224,0.28); }
.blog-card .blog-card-thumb{ border-radius:8px; overflow:hidden; margin-bottom:18px; aspect-ratio:16/9; }
.blog-card .blog-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card .blog-eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--purple); font-weight:600; margin-bottom:10px;
}
.blog-card h2{ font-size:21px; margin-bottom:10px; }
.blog-card h2 a{ color:var(--deep-950); }
.blog-card h2 a:hover{ color:var(--purple); }
.blog-card .blog-excerpt{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px; flex-grow:1; }
.blog-card .blog-meta{ font-size:12.5px; color:var(--ink-soft); font-family:var(--font-mono); }
.blog-card .blog-readmore{ margin-top:16px; font-size:13.5px; font-weight:700; color:var(--purple); }

.blog-empty{ max-width:var(--container); margin:0 auto; padding:80px 32px; text-align:center; color:var(--ink-soft); }

/* Single post */
.single-post-wrap{ max-width:820px; margin:0 auto; padding:60px 32px 100px; }
.single-post-wrap .blog-eyebrow{ margin-bottom:14px; }
.single-post-wrap h1{ font-size:clamp(28px,4vw,42px); margin-bottom:18px; color:var(--deep-950); }
.single-post-wrap .blog-meta{ margin-bottom:32px; }
.single-post-wrap .post-content{ font-size:16px; line-height:1.75; color:var(--ink); }
.single-post-wrap .post-content p{ margin-bottom:20px; }
.single-post-wrap .post-content h2{ font-size:26px; margin:36px 0 16px; color:var(--deep-950); }
.single-post-wrap .post-content h3{ font-size:20px; margin:28px 0 14px; color:var(--deep-950); }
.single-post-wrap .post-content img{ border-radius:var(--radius-md); margin:24px 0; }
.single-post-wrap .post-content a{ color:var(--purple); text-decoration:underline; }
.single-post-wrap .post-content ul, .single-post-wrap .post-content ol{ margin:0 0 20px 22px; list-style:revert; }
.single-post-wrap .back-to-blog{ display:inline-block; margin-bottom:24px; font-size:13.5px; font-weight:600; color:var(--purple); }

.pagination-row{ display:flex; justify-content:center; gap:10px; padding:0 32px 80px; }
.pagination-row a, .pagination-row span{
  padding:9px 16px; border-radius:999px; border:1px solid rgba(34,36,61,0.12);
  font-size:13px; font-weight:600; color:var(--ink);
}
.pagination-row .current{ background:var(--grad-gold); color:var(--deep-950); border-color:transparent; }

/* "Free Expert Review" CTA box — appears on every single post, scrolls normally with the page (not sticky) */
.single-post-wrap:has(.cvpw-post-layout){ max-width:1140px; }

.cvpw-post-layout{
  display:flex;
  align-items:flex-start;
  gap:40px;
}
.cvpw-post-main{
  flex:1 1 0%;
  min-width:0;
}
.cvpw-cta-box{
  flex:0 0 300px;
  width:300px;
  position:sticky;
  top:94px;
  background:var(--white);
  border:1px solid var(--purple-light);
  border-radius:var(--radius-md);
  padding:24px 22px;
  box-shadow:var(--shadow-card);
}
.cvpw-cta-eyebrow{
  display:inline-block;
  background:var(--gold-light);
  color:var(--gold);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:14px;
}
.cvpw-cta-heading{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 10px;
}
.cvpw-cta-desc{
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 16px;
}
.cvpw-cta-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.cvpw-cta-list li{
  font-size:13.5px;
  color:var(--ink);
  padding-left:26px;
  position:relative;
  line-height:1.4;
}
.cvpw-cta-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:18px;
  height:18px;
  border-radius:50%;
  background-color:var(--gold-light);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3FE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 10px;
}
.cvpw-cta-btn{
  display:block;
  text-align:center;
  background:var(--grad-gold);
  color:var(--deep-950);
  font-weight:700;
  font-size:14.5px;
  padding:13px 16px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(91,63,224,0.55);
  margin-bottom:10px;
  transition:transform .15s ease;
}
.cvpw-cta-btn:hover{ transform:translateY(-2px); color:var(--deep-950); }
.cvpw-cta-whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25D366;
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:transform .15s ease;
}
.cvpw-cta-whatsapp:hover{ transform:translateY(-2px); color:#fff; }

@media (max-width:900px){
  .cvpw-post-layout{ flex-direction:column; }
  .cvpw-cta-box{
    position:static;
    width:100%;
    flex-basis:auto;
    margin-top:28px;
  }
  .single-post-wrap:has(.cvpw-post-layout){ max-width:820px; }
}