/* Chemmus & Chuppas — CONTENT PAGES (About / How to use / Ingredients).
 * ============================================================================
 * ISOLATION CONTRACT
 * ----------------------------------------------------------------------------
 * Loaded ONLY on the three page templates (see cc_enqueue_content_page_assets
 * in functions.php), alongside homepage.css. Every selector is scoped beneath
 * .cc-homepage — the same wrapper the pages share with the homepage — so the
 * whole editorial system (sections, .ing, .steps, .benefits, .cod, .trust,
 * .reviews, .story, .faq, .btn) is reused as-is and nothing here can reach the
 * product, cart, checkout or account screens.
 *
 * This file adds ONLY the two pieces the homepage did not already provide:
 * a centred page hero and a closing call-to-action band.
 *
 * CSS NOTE: every clamp()/calc() keeps spaces around + and - — the shared
 * tokens shipped unspaced values that browsers reject, so we never repeat that.
 * ==========================================================================*/

/* ---------- PAGE HERO ---------- */
.cc-homepage .cc-pagehero{position:relative;text-align:center;overflow:hidden;
  padding-block:clamp(3rem, 2.2rem + 3vw, 5.5rem);
  background:radial-gradient(120% 130% at 50% 0, var(--rose-tint), transparent 62%)}
.cc-homepage .cc-pagehero__inner{max-width:760px;margin-inline:auto}
.cc-homepage .cc-pagehero__title{font-family:var(--serif);color:var(--charcoal);
  font-size:clamp(2.3rem, 1.7rem + 3vw, 3.7rem);line-height:1.06;letter-spacing:.2px;
  margin:.5rem 0 .4rem}
.cc-homepage .cc-pagehero__tagline{font-family:var(--serif);font-style:italic;
  color:var(--rose-deep);font-size:clamp(1.1rem, 1rem + .5vw, 1.4rem);margin-bottom:.2rem}
.cc-homepage .cc-pagehero__lede{color:var(--muted);max-width:56ch;margin:1rem auto 0;
  font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem);line-height:1.62}
.cc-homepage .cc-pagehero__cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  margin-top:1.7rem}
.cc-homepage .cc-pagehero__cta .btn{padding:.9rem 1.7rem}

/* ---------- CLOSING CTA BAND ---------- */
.cc-homepage .cc-cta{background:linear-gradient(135deg, var(--charcoal), var(--charcoal-2));
  color:var(--ivory);border-radius:var(--r-lg);text-align:center;
  padding:clamp(2rem, 1.5rem + 2.4vw, 3.4rem);box-shadow:var(--shadow-md)}
.cc-homepage .cc-cta .eyebrow{color:var(--gold-soft)}
.cc-homepage .cc-cta h2{color:#fff;font-size:clamp(1.8rem, 1.35rem + 1.9vw, 2.7rem);
  margin:.4rem 0 .6rem}
.cc-homepage .cc-cta p{color:rgba(246,241,232,.82);max-width:52ch;margin:0 auto 1.5rem;
  font-size:1.04rem;line-height:1.6}
.cc-homepage .cc-cta__buttons{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.cc-homepage .cc-cta .btn--ghost{color:#fff;border-color:var(--gold-line)}
.cc-homepage .cc-cta .btn--ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- SMALL HELPERS ---------- */
/* A note/disclaimer that follows a grid, left un-italic for legal copy. */
.cc-homepage .cc-note{max-width:760px;margin:1.8rem auto 0;text-align:center;
  color:var(--muted-2);font-size:.9rem;line-height:1.6}
/* Ingredients page: "the full ingredient list" note */
.cc-ingfull{max-width:760px}
.cc-ingfull p{color:var(--ink);margin-top:.8rem}
.cc-ingfull a{color:var(--rose-deep);text-decoration:underline;text-underline-offset:3px}
/* How to use: instructions people read while using the product, so larger and darker */
body.page-template-page-how-to-use .step h3{font-size:1.15rem}
body.page-template-page-how-to-use .step p{font-size:1rem;line-height:1.55;color:var(--ink)}
body.page-template-page-how-to-use .disclaim{font-size:.92rem}

/* ---- Contact page (0.15.0) ---- */
.cc-homepage.cc-contact .cc-contact__hero{padding-bottom:1.2rem}
.cc-contact__methods-wrap{padding-top:0!important}
.cc-contact__methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.cc-contact__card{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.35rem}
.cc-contact__label{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep)}
.cc-contact__value{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--charcoal);overflow-wrap:anywhere}
.cc-contact__value--email{font-size:1.08rem}
.cc-contact__note{color:var(--muted);font-size:.9rem;flex:1;margin-bottom:.8rem}
.cc-contact__card .btn{align-self:flex-start}
.cc-contact__help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cc-contact__help .cod__item{background:var(--white)}
.cc-contact__help .cod__item p+p{margin-top:.45rem}
.cc-contact__link{color:var(--rose-deep);font-weight:600;font-size:.9rem;margin-right:1rem;text-decoration:underline;text-underline-offset:3px}
.cc-contact__help a:not(.cc-contact__link){color:var(--rose-deep);text-decoration:underline}
.cc-contact__formwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:2.4rem;align-items:start}
.cc-contact__formintro .lede{margin-top:.7rem}
.cc-contact__panel{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.8rem;box-shadow:var(--shadow-sm)}
.cc-contact__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem}
.cc-field{display:flex;flex-direction:column;gap:.35rem}
.cc-field--full{grid-column:1/-1}
.cc-field label{font-size:.85rem;font-weight:600;color:var(--charcoal)}
.cc-field label span{color:var(--rose-deep)}
.cc-field input,.cc-field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem .85rem;width:100%}
.cc-field input:focus,.cc-field textarea:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose)}
.cc-field textarea{resize:vertical;min-height:140px}
.cc-contact__privacy{font-size:.82rem;color:var(--muted)}
.cc-contact__privacy a{text-decoration:underline}
.cc-contact__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cc-contact__notice{border-radius:var(--r-sm);padding:.85rem 1rem;margin-bottom:1.1rem;font-size:.92rem}
.cc-contact__notice--ok{background:#EAF3EE;color:var(--green);border:1px solid rgba(47,107,79,.25)}
.cc-contact__notice--err{background:var(--rose-tint);color:var(--rose-deep);border:1px solid rgba(156,87,99,.25)}
.cc-contact__biz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.cc-contact__biz>div{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.6rem 1.5rem}
.cc-contact__biz .h2{font-size:1.45rem;margin:.35rem 0 .9rem}
.cc-contact__dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:.93rem}
.cc-contact__dl dt{font-weight:600;color:var(--charcoal)}
.cc-contact__dl dd{color:var(--muted);overflow-wrap:anywhere}
.cc-contact__dl a{text-decoration:underline;text-underline-offset:3px}
.cc-contact__small{font-size:.85rem;color:var(--muted);margin-top:.9rem}
@media (max-width:900px){
  .cc-contact__methods{grid-template-columns:1fr}
  .cc-contact__formwrap,.cc-contact__biz,.cc-contact__help{grid-template-columns:1fr}
  .cc-contact__formwrap{gap:1.2rem}
}
@media (max-width:560px){
  .cc-contact__form{grid-template-columns:1fr}
  .cc-contact__panel{padding:1.2rem}
  .cc-contact__dl{grid-template-columns:1fr;gap:.1rem}
  .cc-contact__dl dd{margin-bottom:.5rem}
  .cc-contact__card .btn{align-self:stretch;text-align:center}
}