/* The Coffee Swap, v6 ("color"): the v5 soft look with more color.
   Each category gets a pastel; articles open and close in their color;
   panels, quotes and reviews get their own pastels. Loads after site-v5.css. */

:root {
  --bg: #fffbf5;
  --ink-3: #5a5f5b;
  --btn: #b94c27;
  --btn-hover: #a1401f;
  --apricot: #ffe1c7; --apricot-ink: #96461c;
  --sky: #d3e9fa;     --sky-ink: #22567f;
  --mint: #d5f0df;    --mint-ink: #23613f;
  --lilac: #e6dcf7;   --lilac-ink: #573f83;
  --butter: #fff0b3;  --butter-ink: #6e5306;
  --blush: #fcdada;   --blush-ink: #923636;
  --star: #e0902f;
}

/* Category colors */
.cat-energy   { --hue: var(--apricot); --hue-ink: var(--apricot-ink); }
.cat-focus    { --hue: var(--sky);     --hue-ink: var(--sky-ink); }
.cat-routines { --hue: var(--mint);    --hue-ink: var(--mint-ink); }
.cat-about    { --hue: var(--lilac);   --hue-ink: var(--lilac-ink); }
.kicker { background: var(--hue, var(--sage-50)); color: var(--hue-ink, var(--sage)); }

/* Page color: articles open and close in their category's color */
body { --page: var(--butter); --page-ink: var(--butter-ink); }
body[data-slug="second-coffee"] { --page: var(--apricot); --page-ink: var(--apricot-ink); }
body[data-slug="5-reasons"]     { --page: var(--sky);     --page-ink: var(--sky-ink); }
body[data-slug="2pm-wall"]      { --page: var(--mint);    --page-ink: var(--mint-ink); }
body[data-slug="about"], body[data-slug="privacy"], body[data-slug="404"] { --page: var(--lilac); --page-ink: var(--lilac-ink); }
::selection { background: var(--page); }

.nav a[aria-current="page"] { background: var(--page); color: var(--page-ink); }

.article { padding-top: 0; }
.article-head {
  background: var(--page); margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter) 26px;
  border-radius: 0 0 32px 32px;
}
.article-head:has(+ .hero-fig) { padding-bottom: 86px; }
.article-head + .hero-fig { position: relative; margin-top: -62px; }
.article-head + p, .article-head + h2 { margin-top: 26px; }
.article-head .kicker, .article-head .sponsor { background: rgba(255, 255, 255, 0.75); }
.article-head .kicker { color: var(--page-ink); }
.byline { margin-bottom: 0; }
.byline .author::before { background: rgba(255, 255, 255, 0.8); color: var(--page-ink); }

/* Buttons */
.btn { background: var(--btn); }
.btn:hover { background: var(--btn-hover); }
.btn:focus-visible { outline-color: var(--apricot); }

/* Panels */
.callout { background: var(--butter); }
.callout-title { color: var(--butter-ink); }
.checks li::before {
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23b94c27' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.checks.plain li::before { background: var(--btn); }
.pullquote { background: var(--lilac); }
.pullquote cite { color: var(--lilac-ink); font-weight: 600; }

/* Reviews cycle through the pastels */
.review { border: 0; }
.review:nth-child(4n+1) { background: var(--mint); }
.review:nth-child(4n+2) { background: var(--sky); }
.review:nth-child(4n+3) { background: var(--apricot); }
.review:nth-child(4n+4) { background: var(--blush); }

/* Product card + FAQ accents */
.product-card li::before {
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%2323613f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.faq summary::after { background: var(--page); color: var(--page-ink); }

/* Closing block matches the page color */
.final { background: var(--page); }

/* Home */
.home-intro {
  background: var(--butter); margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter);
  border-radius: 0 0 32px 32px;
}
.feature .readmore { color: var(--btn); }

/* Footer */
.site-footer { background: #fff3e4; border-top: 0; }

@media (min-width: 720px) {
  .article-head { margin: 0 -48px; padding: 44px 48px 30px; border-radius: 0 0 40px 40px; }
  .article-head:has(+ .hero-fig) { padding-bottom: 96px; }
  .article-head + .hero-fig { margin-top: -66px; }
  .home-intro { margin: 0; border-radius: 0 0 40px 40px; }
}