/* blog-style.css
   Scoped to the blog page only. Every class is prefixed "pccb-" (Professional
   Carpet Clean Blog) so nothing here collides with the site's existing
   styles.css, even though both files load on the same page. */

:root{
  --pccb-page-bg:#efe3ca;
  --pccb-bar-bg:#e6d8bb;
  --pccb-border:#d8c8a6;
  --pccb-headings:#2b2116;
  --pccb-body-text:#54463a;
  --pccb-nav-text:#3a2f24;
  --pccb-accent:#b1552b;
  --pccb-eyebrow:#8a6a4f;
  --pccb-font-head:'Fraunces', serif;
  --pccb-font-body:'Inter', sans-serif;
}

.pccb-page{font-family:var(--pccb-font-body);color:var(--pccb-body-text);background:var(--pccb-page-bg)}
.pccb-container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* nav */
.pccb-navbar{background:var(--pccb-bar-bg);padding:1.1rem 0;border-bottom:1px solid var(--pccb-border)}
.pccb-nav-container{display:flex;align-items:center;justify-content:space-between}
.pccb-logo img{height:44px;filter:grayscale(1) contrast(1.1)}
.pccb-nav-links{display:flex;gap:1.5rem}
.pccb-nav-links a{color:var(--pccb-nav-text);text-decoration:none;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase}
.pccb-btn{padding:0.6rem 1.2rem;border-radius:2px;text-decoration:none;font-size:0.85rem;font-weight:600;display:inline-block;letter-spacing:0.03em;text-transform:uppercase;border:none;cursor:pointer}
.pccb-btn-primary{background:var(--pccb-accent);color:#fff}

/* hero */
.pccb-hero{padding:3.5rem 0 2.5rem;text-align:center;border-bottom:1px solid var(--pccb-border)}
.pccb-hero .pccb-eyebrow-top{display:block;font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--pccb-eyebrow);margin-bottom:0.75rem}
.pccb-hero h1{font-family:var(--pccb-font-head);font-weight:600;font-size:2.5rem;color:var(--pccb-headings)}
.pccb-hero p{color:var(--pccb-body-text);margin-top:0.75rem;max-width:480px;margin-left:auto;margin-right:auto}

/* controls: category filter + sort */
.pccb-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:2.5rem 0 1.5rem}
.pccb-filter-bar{display:flex;flex-wrap:wrap;gap:0.6rem}
.pccb-pill{border:1px solid var(--pccb-border);background:transparent;color:var(--pccb-nav-text);font-family:var(--pccb-font-body);font-size:0.85rem;padding:0.45rem 1rem;border-radius:100px;cursor:pointer;transition:all 0.15s ease}
.pccb-pill:hover{border-color:var(--pccb-accent)}
.pccb-pill.pccb-active{background:var(--pccb-accent);border-color:var(--pccb-accent);color:#fff}
.pccb-sort{display:flex;align-items:center;gap:0.6rem;font-size:0.85rem;color:var(--pccb-nav-text)}
.pccb-sort select{border:1px solid var(--pccb-border);background:#fff;color:var(--pccb-nav-text);font-family:var(--pccb-font-body);font-size:0.85rem;padding:0.45rem 0.8rem;border-radius:100px;cursor:pointer}

/* category group headers, shown only in the "All Posts" grouped view */
.pccb-group-heading{display:flex;align-items:baseline;justify-content:space-between;padding-top:2rem;margin-bottom:0.5rem;border-top:1px solid var(--pccb-border)}
.pccb-group-heading:first-child{border-top:none;padding-top:0}
.pccb-group-heading h2{font-family:var(--pccb-font-head);font-size:1.3rem;color:var(--pccb-headings)}
.pccb-see-more{font-size:0.85rem;font-weight:600;color:var(--pccb-accent);text-decoration:none;white-space:nowrap}
.pccb-see-more:hover{text-decoration:underline}

/* post rows */
.pccb-post-list{padding:0.5rem 0 4rem;display:flex;flex-direction:column}
.pccb-post-row{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:2rem 0;border-bottom:1px solid var(--pccb-border)}
.pccb-post-row:last-child{border-bottom:none}
.pccb-post-row.pccb-reverse .pccb-post-image{order:2}
.pccb-post-row.pccb-reverse .pccb-post-text{order:1}
.pccb-post-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.pccb-post-eyebrow{font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--pccb-accent);font-weight:600;margin-bottom:0.6rem}
.pccb-post-title{font-family:var(--pccb-font-head);font-size:1.5rem;font-weight:600;color:var(--pccb-headings);line-height:1.3;margin-bottom:0.75rem}
.pccb-post-title a{color:inherit;text-decoration:none}
.pccb-post-title a:hover{color:var(--pccb-accent)}
.pccb-post-excerpt{font-size:0.98rem;line-height:1.6;margin-bottom:1rem}
.pccb-post-meta{font-size:0.85rem;color:var(--pccb-eyebrow);display:flex;gap:0.75rem;align-items:center}
.pccb-post-meta .pccb-dot{opacity:0.5}
.pccb-read-more{font-size:0.9rem;font-weight:600;color:var(--pccb-accent);text-decoration:none;margin-top:0.9rem;display:inline-block}
.pccb-read-more:hover{text-decoration:underline}
.pccb-empty-state{text-align:center;color:var(--pccb-eyebrow);font-size:0.9rem;padding:2rem 0 3rem}

/* footer */
.pccb-footer{background:var(--pccb-bar-bg);color:var(--pccb-nav-text);padding:3rem 0 1.5rem;margin-top:2rem;border-top:1px solid var(--pccb-border)}
.pccb-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.pccb-footer-logo{color:var(--pccb-headings);font-weight:700;font-size:1.1rem;display:block;margin-bottom:0.5rem;font-family:var(--pccb-font-head)}
.pccb-footer-links{display:flex;flex-direction:column;gap:0.5rem}
.pccb-footer-links a{color:var(--pccb-nav-text);text-decoration:none;font-size:0.9rem}
.pccb-footer-bottom{border-top:1px solid var(--pccb-border);padding-top:1.5rem;font-size:0.85rem;text-align:center;color:#8a7a68}

@media(max-width:800px){
  .pccb-post-row, .pccb-post-row.pccb-reverse{grid-template-columns:1fr}
  .pccb-post-row.pccb-reverse .pccb-post-image, .pccb-post-row.pccb-reverse .pccb-post-text{order:initial}
  .pccb-hero h1{font-size:2rem}
  .pccb-controls{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------------------------------------------
   INDIVIDUAL POST PAGE (content/blogs/*.html)
--------------------------------------------------------------------- */
.pccb-back-link{display:inline-block;font-size:0.85rem;color:var(--pccb-eyebrow);text-decoration:none;margin:2rem 0 1rem}
.pccb-back-link:hover{color:var(--pccb-accent)}

.pccb-post-header{max-width:720px;margin:0 auto;text-align:center;padding-bottom:2rem}
.pccb-post-header .pccb-post-eyebrow{display:inline-block}
.pccb-post-header h1{font-family:var(--pccb-font-head);font-size:2.25rem;color:var(--pccb-headings);margin:0.75rem 0 1rem;line-height:1.25}
.pccb-post-header .pccb-post-meta{justify-content:center}

.pccb-post-hero-img{width:100%;max-width:900px;margin:0 auto 3rem;border-radius:8px;overflow:hidden}
.pccb-post-hero-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.pccb-post-body{max-width:720px;margin:0 auto;padding-bottom:2rem;font-size:1.05rem;line-height:1.75}
.pccb-post-body h2{font-family:var(--pccb-font-head);font-size:1.5rem;color:var(--pccb-headings);margin:2.25rem 0 1rem}
.pccb-post-body h3{font-family:var(--pccb-font-head);font-size:1.2rem;color:var(--pccb-headings);margin:1.75rem 0 0.75rem}
.pccb-post-body p{margin-bottom:1.25rem}
.pccb-post-body ul, .pccb-post-body ol{margin:0 0 1.25rem 1.25rem}
.pccb-post-body li{margin-bottom:0.5rem}
.pccb-post-body a{color:var(--pccb-accent);text-decoration:underline}

.pccb-post-cta{max-width:720px;margin:2.5rem auto;padding:2rem;background:var(--pccb-bar-bg);border-radius:8px;text-align:center}
.pccb-post-cta h3{font-family:var(--pccb-font-head);color:var(--pccb-headings);margin-bottom:0.6rem}
.pccb-post-cta p{margin-bottom:1.25rem;color:var(--pccb-body-text)}

.pccb-related{max-width:900px;margin:0 auto;padding:2rem 0 4rem;border-top:1px solid var(--pccb-border)}
.pccb-related h2{font-family:var(--pccb-font-head);font-size:1.3rem;color:var(--pccb-headings);margin:1.5rem 0 1.25rem}
.pccb-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.pccb-related-card{text-decoration:none;display:block}
.pccb-related-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;margin-bottom:0.75rem}
.pccb-related-card .pccb-post-eyebrow{display:block}
.pccb-related-card h4{font-family:var(--pccb-font-head);font-size:1.05rem;color:var(--pccb-headings);line-height:1.3}

@media(max-width:700px){
  .pccb-related-grid{grid-template-columns:1fr}
  .pccb-post-header h1{font-size:1.7rem}
}

/* ---- individual article page ---- */
.pccb-article-hero{padding:2.5rem 0 0}
.pccb-article-hero .pccb-back{display:inline-block;font-size:0.85rem;color:var(--pccb-eyebrow);text-decoration:none;margin-bottom:1.5rem}
.pccb-article-hero .pccb-back:hover{color:var(--pccb-accent)}
.pccb-article-hero .pccb-post-eyebrow{margin-bottom:0.75rem}
.pccb-article-hero h1{font-family:var(--pccb-font-head);font-size:2.2rem;font-weight:600;color:var(--pccb-headings);line-height:1.25;max-width:750px}
.pccb-article-meta{font-size:0.9rem;color:var(--pccb-eyebrow);display:flex;gap:0.75rem;align-items:center;margin:1.25rem 0 2rem}
.pccb-article-meta .pccb-dot{opacity:0.5}
.pccb-article-image{width:100%;max-width:900px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;margin:0 auto}

.pccb-article-body{max-width:720px;margin:2.5rem auto 0;font-size:1.05rem;line-height:1.75}
.pccb-article-body h2{font-family:var(--pccb-font-head);font-size:1.5rem;color:var(--pccb-headings);margin:2.25rem 0 1rem}
.pccb-article-body h3{font-family:var(--pccb-font-head);font-size:1.2rem;color:var(--pccb-headings);margin:1.75rem 0 0.75rem}
.pccb-article-body p{margin-bottom:1.25rem;color:var(--pccb-body-text)}
.pccb-article-body a{color:var(--pccb-accent);text-decoration:underline}
.pccb-article-body ul{margin:0 0 1.25rem 1.25rem}
.pccb-article-body li{margin-bottom:0.5rem;color:var(--pccb-body-text)}

.pccb-cta-block{max-width:720px;margin:3rem auto;padding:2rem;background:var(--pccb-bar-bg);border-radius:8px;text-align:center}
.pccb-cta-block h3{font-family:var(--pccb-font-head);font-size:1.4rem;color:var(--pccb-headings);margin-bottom:0.75rem}
.pccb-cta-block p{color:var(--pccb-body-text);margin-bottom:1.25rem}

.pccb-related{max-width:900px;margin:3rem auto 4rem}
.pccb-related h3{font-family:var(--pccb-font-head);font-size:1.3rem;color:var(--pccb-headings);margin-bottom:1.25rem}
.pccb-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pccb-related-card{text-decoration:none;display:block}
.pccb-related-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-bottom:0.75rem}
.pccb-related-card span{display:block;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--pccb-accent);font-weight:600;margin-bottom:0.4rem}
.pccb-related-card p{font-family:var(--pccb-font-head);font-size:1.05rem;color:var(--pccb-headings);line-height:1.35}

@media(max-width:800px){
  .pccb-related-grid{grid-template-columns:1fr}
  .pccb-article-hero h1{font-size:1.7rem}
}