/* Shared card style for the Supervision & Consultation box, the Coffee Between Sessions box and the Get published card.
   One file, used on californiacounselorceus.com and therapistcehours.com. Look matches coffeebetweensessions.com.
   Values copied from _ccceus/coffee-hub-preview/site/hub.css: cream #fbf7f0 (page background), rule #e2d6c1,
   ink #123333, body text #21403f, green #1b7a4a, button #1f5a5a / hover #174848 with white text,
   serif "Source Serif 4",Georgia,"Times New Roman",serif, sans Inter. Card radius 14px (.side .card), shadow from .card.
   Staged Oct 31 2026 (Oliver 3:49-3:50 PM PT via Brainstorm). */
:root{--cc-cream:#fbf7f0;--cc-rule:#e2d6c1;--cc-ink:#123333;--cc-text:#21403f;--cc-green:#1b7a4a;--cc-btn:#1f5a5a;--cc-btn-h:#174848;
  --cc-serif:"Source Serif 4",Georgia,"Times New Roman",serif;--cc-sans:Inter,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --cc-radius:14px;--cc-shadow:0 8px 30px rgba(18,51,51,.06)}

/* Card surface (Coffee promo everywhere; S&C box and Get published card as cards) */
html body .cbs-promo,html body .gx-zone .cbs-promo,html body .gp-card{background:var(--cc-cream);border:1px solid var(--cc-rule);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);color:var(--cc-ink);font-family:var(--cc-sans)}
html body .gx{--gx-navy:#123333;font-family:var(--cc-sans);color:var(--cc-ink)}

/* Serif headlines */
html body .gx h2,html body .cbs-promo h2,html body .gp-card h2{font-family:var(--cc-serif);font-weight:600;color:var(--cc-ink);letter-spacing:-.005em}
html body .gx p,html body .cbs-promo p,html body .gp-card p{color:var(--cc-text)}

/* Dark green buttons, white text */
html body .gx a.gx-find,html body .cbs-promo .btn,html body .gp-card .gp-cta{background:var(--cc-btn);color:#fff;border:2px solid var(--cc-btn);border-radius:999px;font-family:var(--cc-sans);font-weight:700;text-transform:none;letter-spacing:0;text-decoration:none;box-shadow:none;justify-content:center;text-align:center}
html body .gx a.gx-find:hover,html body .cbs-promo .btn:hover,html body .gp-card .gp-cta:hover{background:var(--cc-btn-h);border-color:var(--cc-btn-h);color:#fff}
html body .gx a.gx-join{background:transparent;color:var(--cc-btn);border:2px solid var(--cc-btn);font-weight:700}
html body .gx a.gx-join:hover{background:var(--cc-btn);color:#fff;border-color:var(--cc-btn)}
html body .gx a:focus-visible,html body .cbs-promo a:focus-visible,html body .gp-card a:focus-visible{outline:2px solid var(--cc-green);outline-offset:2px}

/* Coffee promo: centered button */
html body .cbs-promo .cbs-promo-act{display:flex;justify-content:center}

/* Get published card */
.gp-zone{padding:.7rem 1rem 0}
html body .gp-card{max-width:30rem;margin:0 auto .3rem;padding:.85rem 1.1rem 1rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem}
.gp-card .gp-head{display:flex;align-items:center;justify-content:center;gap:.55rem}
.gp-card .gp-mark{width:34px;height:34px;flex:none;display:block}
html body .gp-card h2{margin:0;font-size:1.3rem;line-height:1.2}
html body .gp-card p{margin:0;font-size:.92rem;line-height:1.45}
html body .gp-card .gp-cta{display:inline-flex;align-items:center;padding:.5rem 1.25rem;font-size:.88rem;line-height:1.2;margin-top:.1rem}

/* Wide screens (1400px+) */
@media (min-width:1400px){
  html body .gx-zone .gx{background:var(--cc-cream);border:1px solid var(--cc-rule);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);padding:.95rem .9rem 1rem;align-items:center;text-align:center}
  html body .gx-zone .gx::before{display:none}
  html body .gx-zone .gx .gx-links{width:100%}
  html body .gx-zone .cbs-promo{border-radius:var(--cc-radius);justify-items:center;text-align:center}
  html body .gx h2,html body .gx-zone .cbs-promo h2,html body .gp-card h2{font-size:1.1rem;line-height:1.25}
  .gp-zone{position:relative;height:0;padding:0;z-index:5}
  html body .gp-card{position:absolute;top:1.25rem;right:max(1rem, calc((100vw - 980px)/2 - 12.5rem));width:11.5rem;max-width:none;margin:0;padding:.95rem .9rem 1rem;gap:.5rem}
  .gp-zone.gp-below-tag .gp-card{top:11rem}
  .gp-card .gp-head{flex-direction:column;gap:.4rem}
  .gp-card .gp-mark{width:40px;height:40px}
  html body .gp-card p{font-size:.85rem;line-height:1.4}
  html body .gp-card .gp-cta{display:flex;width:100%;box-sizing:border-box;padding:.5rem .7rem;font-size:.82rem}
}
/* Under 1400px: S&C stays a slim bar under the header, in the cream color */
@media (max-width:1399px){
  html body .gx-zone{background:var(--cc-cream);border-bottom:1px solid var(--cc-rule)}
  html body .gx-zone .cbs-home{background:#fff}
}
/* Centered side-box buttons (Oliver Nov 1 2026 9:16 AM PT "not centered" + 9:26 AM PT; replaces the Oct 31 phone text links).
   Under 1400px: the S&C bar (Scout, title, buttons) is centered as one group, and the Coffee box button sits centered under its text.
   Phones: S&C is a centered stack with the same filled "Find" and outlined "Create" buttons as desktop. */
@media (max-width:1399px){
  html body .gx{justify-content:center}
  html body .gx .gx-txt{flex:0 1 auto}
  html body .cbs-promo{grid-template-columns:auto 1fr}
  html body .cbs-promo .cbs-promo-act{grid-column:1/-1;display:flex;justify-content:center}
}
@media (max-width:640px){
  html body .gx{flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:.75rem 1rem .85rem}
  html body .gx .gx-body{align-items:center;width:100%}
  html body .gx .gx-links{flex-direction:column;align-items:center;flex-wrap:nowrap;gap:.45rem;width:100%;margin-top:.35rem}
  html body .gx a.gx-find,html body .gx a.gx-join{display:flex;width:100%;max-width:20rem;min-height:40px;padding:.45rem 1rem;font-size:.88rem;line-height:1.2;white-space:normal;text-decoration:none}
}