/* ============================================================
   HowToVibeCode Business — v2.0 additions
   Content pages, catalogue, product detail, blog, legal.
   Scoped to the child theme only.
   ============================================================ */

/* ---- Subpages: hide the default WHMCS chrome so only our nav shows ---- */
body.vibe-subpage #header,
body.vibe-subpage .master-breadcrumb,
body.vibe-subpage #footer,
body.vibe-subpage .network-issues-notifications{display:none!important}
body.vibe-subpage #main-body{padding:0!important;margin:0!important;background:#fff!important}
body.vibe-subpage #main-body>.container,
body.vibe-subpage #main-body>.vibe-full-width{max-width:none!important;width:100%!important;padding:0!important}
body.vibe-subpage #main-body>.container>.row,
body.vibe-subpage #main-body>.vibe-full-width>.row{margin:0!important;display:block!important}
body.vibe-subpage #main-body .primary-content{padding:0!important;margin:0!important;float:none!important;max-width:100%!important;width:100%!important;flex:0 0 100%!important}
body.vibe-subpage #main-body .sidebar{display:none!important}
body.vibe-subpage #main-body .primary-content>h1:first-child{display:none}

/* ---- Page shell for non-homepage content pages ---- */
body.vibe-homepage .vibe-page #main-body,
body .vibe-page { background:#fff; }
.vibe-page{font-size:16px;line-height:1.6;color:#162336;background:#fff}
.vibe-page h1,.vibe-page h2,.vibe-page h3{color:#101d32;letter-spacing:-.035em;font-weight:800;margin:0;line-height:1.16}
.vibe-page h1{font-size:clamp(2.2rem,3.4vw,3.5rem)}
.vibe-page h2{font-size:clamp(1.5rem,2.1vw,2.1rem);margin-top:2.2rem}
.vibe-page h3{font-size:1.15rem}
.vibe-page p{margin:1rem 0;color:#526176}
.vibe-page a{color:#007c74;text-decoration:none}
.vibe-page a:hover{text-decoration:underline}
.vibe-page ul{margin:1rem 0;padding-left:1.35rem;color:#526176}
.vibe-page li{margin:.5rem 0}

.vibe-page-hero{background:linear-gradient(115deg,#fff 0%,#fff 60%,#f2faf8 100%);padding:64px 0 48px;border-bottom:1px solid #eef4f3}
.vibe-page-hero h1{margin:14px 0 0;max-width:900px}
.vibe-page-hero .vibe-lead{margin-top:18px;font-size:1.1rem;max-width:720px}
.vibe-narrow{max-width:820px}

/* ---- Notice banner ---- */
.vibe-notice{background:#eefaf6;border:1px solid #bfe8dd;border-left:4px solid #00816e;border-radius:10px;padding:16px 20px;margin:0 0 30px;color:#134e46;font-size:.94rem}
.vibe-notice strong{color:#00614f}

/* ---- Catalogue groups ---- */
.vibe-group{margin-bottom:56px}
.vibe-group-title{font-size:1.35rem;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #eaf3f1;color:#101d32}
.vibe-guide-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- Product detail ---- */
.vibe-product-detail{padding-top:56px}
.vibe-product-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:56px;align-items:start}
.vibe-product-media{background:#f4f8f9;border:1px solid #e7edf0;border-radius:16px;padding:28px;display:flex;align-items:center;justify-content:center;min-height:420px}
.vibe-product-media img{max-width:100%;height:auto;max-height:520px;object-fit:contain;filter:drop-shadow(6px 7px 7px rgba(40,51,65,.1))}
.vibe-product-media .vibe-generic-cover{min-height:380px;width:100%}
.vibe-product-info h1{margin:12px 0 0}
.vibe-product-info .vibe-lead{margin-top:16px}
.vibe-price-block{display:flex;flex-direction:column;gap:4px;margin:26px 0}
.vibe-price{font-size:2.4rem;font-weight:850;color:#0d7d6e;letter-spacing:-.04em;line-height:1}
.vibe-price-note{font-size:.85rem;color:#6d8290}
.vibe-trust{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.vibe-trust li{display:flex;align-items:center;gap:12px;font-size:.93rem;color:#41596b;font-weight:600;margin:0}
.vibe-trust span{display:grid;place-items:center;background:#e0f6f0;color:#057968;width:28px;height:28px;border-radius:50%;font-size:15px;font-weight:800;flex:0 0 28px}
.vibe-product-body{background:#fafcfc}
.vibe-rich{color:#41596b;line-height:1.75}
.vibe-rich h2{font-size:1.4rem;margin:2rem 0 .6rem;color:#101d32}
.vibe-rich h3{font-size:1.12rem;margin:1.6rem 0 .5rem;color:#101d32}
.vibe-rich ul{padding-left:1.35rem}
.vibe-rich blockquote{border-left:4px solid #9fd9cd;background:#f2faf8;margin:1.4rem 0;padding:14px 20px;border-radius:0 8px 8px 0;color:#2f4a55}
.vibe-rich code{background:#eef5f4;padding:2px 6px;border-radius:5px;font-size:.9em;color:#0b5c52}

/* ---- Inline CTA ---- */
.vibe-cta-inline{display:flex;gap:14px;flex-wrap:wrap;margin:38px 0 8px;align-items:center}

/* ---- FAQ accordion ---- */
.vibe-faq{display:grid;gap:12px}
.vibe-faq-item{border:1px solid #e7edf0;border-radius:12px;background:#fff;overflow:hidden}
.vibe-faq-item[open]{border-color:#c9e6df;background:#fbfefd}
.vibe-faq-item summary{cursor:pointer;padding:20px 24px;font-weight:750;color:#101d32;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.vibe-faq-item summary::-webkit-details-marker{display:none}
.vibe-faq-item summary::after{content:"+";font-size:1.5rem;font-weight:400;color:#00816e;line-height:1;flex:0 0 auto}
.vibe-faq-item[open] summary::after{content:"−"}
.vibe-faq-item>div{padding:0 24px 22px}
.vibe-faq-item p{margin:.5rem 0}

/* ---- Legal pages ---- */
.vibe-legal h2{font-size:1.2rem;margin:2.2rem 0 .5rem}
.vibe-updated{color:#7b8f9c;font-size:.88rem;margin-bottom:1.6rem}

/* ---- Blog ---- */
.vibe-article-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vibe-article-date{display:block;font-size:.78rem;color:#8497a4;margin-top:6px}
.vibe-article-page{padding-top:56px}
.vibe-article-page h1{font-size:clamp(2rem,3vw,2.9rem);max-width:820px}
.vibe-article-meta{display:flex;gap:18px;color:#7b8f9c;font-size:.88rem;margin:18px 0 10px;flex-wrap:wrap}
.vibe-pagination{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:44px;color:#6d8290;font-size:.9rem}

/* ---- Footer legal row ---- */
.vibe-footer-legal{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;width:100%;margin-top:6px}
.vibe-footer-legal a{color:#8497a4}
.vibe-footer-legal a:hover{color:#007c74}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .vibe-product-grid{grid-template-columns:1fr;gap:34px}
  .vibe-product-media{min-height:300px}
  .vibe-guide-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vibe-article-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .vibe-page-hero{padding:44px 0 34px}
  .vibe-page h2{margin-top:1.8rem}
  .vibe-guide-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vibe-article-grid-3{grid-template-columns:1fr}
  .vibe-cta-inline .vibe-btn{width:100%}
}
@media(max-width:560px){
  .vibe-page h1{font-size:1.95rem}
  .vibe-page-hero{padding:34px 0 28px}
  .vibe-guide-grid-3{grid-template-columns:1fr}
  .vibe-price{font-size:2rem}
  .vibe-faq-item summary{padding:16px 18px;font-size:.95rem}
  .vibe-faq-item>div{padding:0 18px 18px}
  .vibe-product-media{padding:18px;min-height:240px}
}
