/* ============================================================
   HC Kitchen & Bath — Blog (index + article)
   Body-only styles. Header/footer are inherited (hc-header-new/-footer-new).
   Design tokens extracted from live SPA (Source Serif 4 + system sans).
   ============================================================ */

.hc-blog-page {
  --hc-blue:#1a43bf;
  --hc-orange:#ff7918;
  --hc-gold-deep:#a88452;
  --hc-gold-mid:#c9a66b;
  --hc-ink:#2a2a2a;
  --hc-ink-muted:#4b4b4b;
  --hc-charcoal:#1f2937;
  --hc-cream:#f9f7f2;
  --hc-marble:#f3f0ea;
  --hc-warm-white:#fbfbfb;
  --hc-stone:#e7e5e4;
  --hc-slate:#62748e;
  --hc-navy:#0f172b;
  --hc-serif:"Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --hc-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hc-shell:1440px;
  --hc-content:1120px;
  --hc-prose:672px;
  --hc-radius:12px;
  --hc-radius-lg:16px;
  --hc-radius-xl:24px;
}

/* Let the blog break out of Storefront's boxed .col-full */
.hc-blog-page #content .col-full,
.hc-blog-page #content { max-width:none !important; padding-left:0 !important; padding-right:0 !important; }
.hc-blog-page #primary { width:100% !important; margin:0 !important; float:none !important; }
.hc-blog-page .content-area { margin:0 !important; }

.hc-blog {
  font-family:var(--hc-sans);
  color:var(--hc-ink);
  background:var(--hc-warm-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
.hc-blog *{box-sizing:border-box;}
.hc-blog img{max-width:100%;height:auto;display:block;}
.hc-blog a{color:var(--hc-blue);text-decoration:none;}
.hc-blog a:hover{text-decoration:underline;}
.hc-container{max-width:var(--hc-content);margin:0 auto;padding:0 24px;}
.hc-eyebrow{font-family:var(--hc-sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-gold-deep);}
.hc-cat-eyebrow{font-family:var(--hc-sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hc-blue);}
.hc-serif{font-family:var(--hc-serif);}
.hc-ph{background:repeating-linear-gradient(135deg,#efece5,#efece5 10px,#e6e2d9 10px,#e6e2d9 20px);display:flex;align-items:center;justify-content:center;color:#b3ab9c;font-size:.75rem;font-family:ui-monospace,monospace;}

/* ===================== BLOG INDEX ===================== */
.hc-index-head{text-align:center;max-width:640px;margin:0 auto;padding:56px 24px 8px;}
.hc-index-head h1{font-family:var(--hc-serif);font-weight:700;font-size:3rem;line-height:1.1;color:var(--hc-charcoal);margin:8px 0 14px;}
.hc-index-head .hc-lead{color:var(--hc-ink-muted);font-size:1.05rem;margin:0;}

.hc-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:22px 24px 8px;}
.hc-filters a{font-size:.85rem;font-weight:600;color:var(--hc-ink-muted);background:#fff;border:1px solid var(--hc-stone);padding:8px 16px;border-radius:999px;transition:all .15s;}
.hc-filters a:hover{border-color:var(--hc-blue);color:var(--hc-blue);text-decoration:none;}
.hc-filters a.is-active{background:var(--hc-blue);border-color:var(--hc-blue);color:#fff;}

/* Featured card */
.hc-featured{margin:32px auto 0;}
.hc-featured-card{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:#fff;border:1px solid var(--hc-stone);border-radius:var(--hc-radius-lg);overflow:hidden;box-shadow:0 1px 2px rgba(15,23,43,.04);}
.hc-featured-media{position:relative;min-height:340px;}
.hc-featured-media img,.hc-featured-media .hc-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hc-badge-featured{position:absolute;top:16px;left:16px;z-index:2;background:var(--hc-gold-mid);color:#3a2c14;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;}
.hc-featured-body{padding:40px;display:flex;flex-direction:column;justify-content:center;}
.hc-featured-body h2{font-family:var(--hc-serif);font-weight:700;font-size:1.7rem;line-height:1.2;color:var(--hc-charcoal);margin:12px 0 12px;}
.hc-featured-body h2 a{color:inherit;}
.hc-featured-body .hc-excerpt{color:var(--hc-ink-muted);font-size:.95rem;margin:0 0 20px;}

.hc-meta-row{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--hc-ink-muted);}
.hc-avatar{width:30px;height:30px;border-radius:50%;background:var(--hc-marble);color:var(--hc-gold-deep);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;flex:none;}
.hc-blog a.hc-btn{display:inline-flex;align-items:center;gap:8px;background:var(--hc-blue);color:#fff;font-weight:600;font-size:.9rem;padding:11px 22px;border-radius:8px;margin-top:22px;align-self:flex-start;transition:background .15s;border-bottom:0;}
.hc-blog a.hc-btn:hover{background:#12329a;color:#fff;text-decoration:none;}
.hc-blog a.hc-btn-orange{background:var(--hc-orange);color:#fff;}
.hc-blog a.hc-btn-orange:hover{background:#e8690d;color:#fff;}

/* Main grid + sidebar */
.hc-index-main{display:grid;grid-template-columns:1fr 300px;gap:40px;padding:44px 24px 64px;max-width:var(--hc-content);margin:0 auto;}
.hc-post-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-content:start;}
.hc-card{background:transparent;display:flex;flex-direction:column;}
.hc-card-media{position:relative;aspect-ratio:3/2;border-radius:var(--hc-radius);overflow:hidden;border:1px solid var(--hc-stone);margin-bottom:14px;}
.hc-card-media img,.hc-card-media .hc-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hc-card h3{font-family:var(--hc-serif);font-weight:700;font-size:1.12rem;line-height:1.3;color:var(--hc-charcoal);margin:8px 0 8px;}
.hc-card h3 a{color:inherit;}
.hc-card .hc-excerpt{color:var(--hc-ink-muted);font-size:.88rem;margin:0 0 14px;}
.hc-card-foot{display:flex;justify-content:space-between;font-size:.78rem;color:var(--hc-slate);margin-top:auto;padding-top:6px;border-top:1px solid var(--hc-stone);}

/* Sidebar */
.hc-sidebar{display:flex;flex-direction:column;gap:28px;}
.hc-widget{background:#fff;border:1px solid var(--hc-stone);border-radius:var(--hc-radius-lg);padding:22px 22px;}
.hc-widget h4{font-family:var(--hc-serif);font-weight:700;font-size:1.05rem;color:var(--hc-charcoal);margin:0 0 16px;}
.hc-popular{list-style:none;margin:0;padding:0;}
.hc-popular li{display:flex;gap:12px;padding:10px 0;border-top:1px solid #f0eee9;}
.hc-popular li:first-child{border-top:0;padding-top:0;}
.hc-popular .num{font-family:var(--hc-serif);font-weight:700;color:var(--hc-gold-mid);font-size:1rem;line-height:1.2;flex:none;width:22px;}
.hc-popular a{color:var(--hc-ink);font-size:.86rem;font-weight:500;line-height:1.35;}
.hc-catlist{list-style:none;margin:0;padding:0;}
.hc-catlist li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid #f0eee9;font-size:.88rem;}
.hc-catlist li:first-child{border-top:0;padding-top:0;}
.hc-catlist a{color:var(--hc-ink);font-weight:500;}
.hc-catlist .count{color:var(--hc-slate);font-size:.8rem;}

/* Pagination */
.hc-pagination{display:flex;gap:8px;justify-content:center;padding:8px 24px 72px;}
.hc-pagination a,.hc-pagination span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--hc-stone);background:#fff;color:var(--hc-ink);font-size:.88rem;font-weight:600;padding:0 10px;}
.hc-pagination .current{background:var(--hc-blue);border-color:var(--hc-blue);color:#fff;}
.hc-pagination a:hover{border-color:var(--hc-blue);color:var(--hc-blue);text-decoration:none;}
.hc-pagination .dots{border:0;background:transparent;}

/* ===================== ARTICLE ===================== */
.hc-progress{position:fixed;top:0;left:0;height:3px;background:var(--hc-blue);width:0;z-index:9999;transition:width .1s linear;}
.hc-article-head{max-width:var(--hc-prose);margin:0 auto;text-align:center;padding:36px 24px 8px;}
.hc-breadcrumb{font-size:.78rem;color:var(--hc-slate);margin-bottom:22px;text-align:center;}
.hc-breadcrumb a{color:var(--hc-slate);}
.hc-breadcrumb a:hover{color:var(--hc-blue);}
.hc-article-head .hc-cat-eyebrow{display:block;margin-bottom:12px;}
.hc-article-head h1{font-family:var(--hc-serif);font-weight:700;font-size:2.25rem;line-height:1.18;color:var(--hc-charcoal);margin:0 0 16px;}
.hc-article-head .hc-deck{color:var(--hc-ink-muted);font-size:1.08rem;max-width:600px;margin:0 auto 22px;}
.hc-author-inline{display:inline-flex;align-items:center;gap:10px;text-align:left;}
.hc-author-inline .hc-avatar{width:38px;height:38px;font-size:.8rem;}
.hc-author-inline .n{font-weight:600;color:var(--hc-ink);font-size:.85rem;}
.hc-author-inline .r{color:var(--hc-slate);font-size:.85rem;}
.hc-author-inline .d{color:var(--hc-slate);font-size:.78rem;}

.hc-hero{max-width:var(--hc-content);margin:26px auto 0;padding:0 24px;}
.hc-hero .hc-hero-img{aspect-ratio:16/9;border-radius:var(--hc-radius-lg);overflow:hidden;border:1px solid var(--hc-stone);}
.hc-hero .hc-hero-img img,.hc-hero .hc-hero-img .hc-ph{width:100%;height:100%;object-fit:cover;}

.hc-article-layout{display:grid;grid-template-columns:200px minmax(0,var(--hc-prose)) 56px;gap:48px;justify-content:center;max-width:1160px;margin:0 auto;padding:44px 24px 20px;}
.hc-toc{position:sticky;top:100px;align-self:start;font-size:.85rem;}
.hc-toc .hc-toc-title{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hc-slate);margin-bottom:14px;}
.hc-toc ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--hc-stone);}
.hc-toc li a{display:block;padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;color:var(--hc-ink-muted);line-height:1.3;}
.hc-toc li a:hover{color:var(--hc-blue);text-decoration:none;}
.hc-toc li a.is-active{color:var(--hc-blue);border-left-color:var(--hc-blue);font-weight:600;}

.hc-share{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:10px;align-items:center;}
.hc-share .hc-share-title{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hc-slate);writing-mode:vertical-rl;display:none;}
.hc-share-label{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hc-slate);margin-bottom:4px;text-align:center;}
.hc-share a{width:36px;height:36px;border-radius:50%;border:1px solid var(--hc-stone);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--hc-slate);}
.hc-share a:hover{border-color:var(--hc-blue);color:var(--hc-blue);}
.hc-share svg{width:16px;height:16px;fill:currentColor;}

/* Prose */
.hc-prose{font-size:1rem;line-height:1.75;color:var(--hc-ink);}
.hc-prose > h2{font-family:var(--hc-serif);font-weight:700;font-size:1.5rem;color:var(--hc-charcoal);margin:2em 0 .6em;scroll-margin-top:100px;}
.hc-prose > h3{font-family:var(--hc-serif);font-weight:700;font-size:1.2rem;color:var(--hc-charcoal);margin:1.6em 0 .5em;}
.hc-prose p{margin:0 0 1.15em;}
.hc-prose ul,.hc-prose ol{margin:0 0 1.15em;padding-left:1.3em;}
.hc-prose li{margin:.4em 0;}
.hc-prose img{border-radius:var(--hc-radius);border:1px solid var(--hc-stone);margin:1.6em 0;}
.hc-prose figure{margin:1.8em 0;}
.hc-prose figcaption{font-size:.8rem;color:var(--hc-slate);text-align:center;margin-top:8px;}
.hc-prose blockquote{border-left:3px solid var(--hc-gold-mid);padding:2px 0 2px 22px;margin:1.8em 0;font-family:var(--hc-serif);font-style:italic;font-size:1.18rem;line-height:1.5;color:var(--hc-charcoal);}
.hc-prose blockquote p{margin:0;}
.hc-prose a{border-bottom:1px solid rgba(26,67,191,.3);}

/* FAQ accordion (native details) */
.hc-faq{border:1px solid var(--hc-stone);border-radius:var(--hc-radius);overflow:hidden;margin:1em 0 0;background:#fff;}
.hc-faq details{border-top:1px solid var(--hc-stone);}
.hc-faq details:first-child{border-top:0;}
.hc-faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;font-size:.95rem;color:var(--hc-charcoal);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.hc-faq summary::-webkit-details-marker{display:none;}
.hc-faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--hc-slate);line-height:1;}
.hc-faq details[open] summary::after{content:"–";}
.hc-faq .hc-faq-a{padding:0 20px 18px;font-size:.92rem;color:var(--hc-ink-muted);line-height:1.6;}

/* Author bio */
.hc-authorbox{display:flex;gap:16px;align-items:flex-start;background:var(--hc-cream);border:1px solid var(--hc-stone);border-radius:var(--hc-radius-lg);padding:22px;margin:2.4em 0 0;}
.hc-authorbox .hc-avatar{width:48px;height:48px;font-size:1rem;}
.hc-authorbox .lbl{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hc-gold-deep);margin-bottom:4px;}
.hc-authorbox .an{font-family:var(--hc-serif);font-weight:700;font-size:1.05rem;color:var(--hc-charcoal);margin:0 0 4px;}
.hc-authorbox .ab{font-size:.86rem;color:var(--hc-ink-muted);margin:0;line-height:1.5;}

/* Share (mobile horizontal) */
.hc-share-mobile{display:none;max-width:var(--hc-prose);margin:32px auto 0;padding:0 24px;}
.hc-share-mobile .hc-share-label{text-align:left;margin-bottom:10px;}
.hc-share-mobile .row{display:flex;gap:10px;}

/* CTA banner */
.hc-cta{max-width:var(--hc-content);margin:48px auto 0;padding:0 24px;}
.hc-cta-inner{background:linear-gradient(120deg,var(--hc-navy) 0%,#12245f 55%,var(--hc-blue) 100%);border-radius:var(--hc-radius-xl);padding:48px 32px;text-align:center;color:#fff;}
.hc-cta-inner .hc-eyebrow{color:var(--hc-gold-mid);}
.hc-cta-inner h3{font-family:var(--hc-serif);font-weight:700;font-size:1.7rem;margin:10px 0 10px;color:#fff;}
.hc-cta-inner p{color:rgba(255,255,255,.8);font-size:.98rem;max-width:520px;margin:0 auto 24px;}

/* Related */
.hc-related{max-width:var(--hc-content);margin:56px auto 0;padding:0 24px 80px;}
.hc-related h3{font-family:var(--hc-serif);font-weight:700;font-size:1.4rem;color:var(--hc-charcoal);margin:0 0 22px;}
.hc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .hc-article-layout{grid-template-columns:minmax(0,var(--hc-prose));padding-top:32px;}
  .hc-toc,.hc-share{display:none;}
  .hc-share-mobile{display:block;}
  .hc-index-main{grid-template-columns:1fr;}
  .hc-sidebar{flex-direction:row;flex-wrap:wrap;}
  .hc-widget{flex:1 1 280px;}
}
@media (max-width:760px){
  .hc-index-head{padding-top:36px;}
  .hc-index-head h1{font-size:2rem;}
  .hc-featured-card{grid-template-columns:1fr;}
  .hc-featured-media{min-height:200px;aspect-ratio:16/10;}
  .hc-featured-body{padding:24px;}
  .hc-post-grid{grid-template-columns:1fr;}
  .hc-sidebar{flex-direction:column;}
  .hc-article-head h1{font-size:1.7rem;}
  .hc-related-grid{grid-template-columns:1fr;}
  .hc-cta-inner{padding:34px 22px;}
  .hc-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:14px;}
}