/* =========================================================================
   Shroomsy brand system — ported from the Shopify storefront
   =========================================================================

   Token values are lifted verbatim from the `--rd-*` custom properties on
   shop.tryshroomsy.com so the two properties read as one brand. Do not
   "tidy" these to rounder hex values; they are matched, not chosen.

   Loaded LAST on every page, so it overrides css/styles.css, product.css,
   quiz.css and blog.css without those files having to be rewritten.

   The legacy variables in styles.css are remapped here rather than edited
   in place, so a diff of this file shows the whole brand change in one
   screen.
   ========================================================================= */

:root {
  /* --- palette, verbatim from the Shopify theme ------------------------ */
  --rd-ink:             #2a1810;   /* headings; warm brown, never grey */
  --rd-ink-soft:        #5c4033;
  --rd-muted:           #8a6f5c;
  --rd-cream:           #fbf6ee;   /* page ground */
  --rd-cream-deep:      #f3e8d4;
  --rd-card:            #fffaf3;
  --rd-white:           #fffdf9;
  --rd-terracotta:      #bc6534;   /* primary action */
  --rd-terracotta-deep: #9a4a22;
  --rd-burgundy:        #6b2e1f;
  --rd-gold:            #d4a574;
  --rd-line:            rgba(42, 24, 16, .12);
  --rd-header:          #fdf8f3;

  --rd-radius:   18px;
  --rd-radius-sm: 14px;
  --rd-shadow:   0 18px 50px rgba(42, 24, 16, .12);
  --rd-shadow-sm: 0 6px 18px rgba(42, 24, 16, .08);
  --rd-max:      1180px;

  --rd-font-body:    "Outfit", system-ui, -apple-system, sans-serif;
  --rd-font-display: "Fraunces", Georgia, serif;

  /* --- legacy names from styles.css, repointed ------------------------- */
  /* #BC6534 already matched the Shopify terracotta exactly, which is why
     the site did not look wrong before — the mismatch was the greys and
     the typefaces, not the accent. */
  --primary-brown:       var(--rd-terracotta);
  --primary-brown-dark:  var(--rd-terracotta-deep);
  --primary-brown-light: var(--rd-gold);
  --secondary-cream:     var(--rd-cream-deep);
  --accent-light-cream:  var(--rd-cream);
  --accent-tan:          var(--rd-gold);
  --text-dark:           var(--rd-ink);
  --header-footer-bg:    var(--rd-header);
  --header-footer-text:  var(--rd-ink);
}

/* =========================================================================
   Typography
   ========================================================================= */

body {
  font-family: var(--rd-font-body);
  color: var(--rd-ink);
  background: var(--rd-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.section-title, .hero h1, .hero-title {
  font-family: var(--rd-font-display);
  color: var(--rd-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* Fraunces is a variable font with an optical-size axis. Left unset it
   renders the display cut at body sizes, which looks blobby in small
   headings — so opsz is pinned per level. */
h1 { font-variation-settings: "opsz" 120; }
h2 { font-variation-settings: "opsz"  80; }
h3, h4, h5, h6 { font-variation-settings: "opsz" 36; }

/* The single biggest reason the two sites did not look related.
 *
 * styles.css paints eleven heading selectors terracotta (.section-title,
 * .hero-headline, .logo-text, every card h3). The Shopify theme paints
 * *no* heading terracotta — headings are ink, and terracotta is reserved
 * for things you can click: buttons, links, the eyebrow pill, the checkmark
 * ticks. Reserving the accent for action is what makes that palette read as
 * considered rather than merely brown.
 *
 * Listed explicitly rather than with a blanket `h1,h2,h3 {}` because these
 * rules are specific enough to win against one. */
/* styles.css */
.logo-text,
.hero-headline,
.section-title,
.ingredients-cta-text h3,
.fit-card h3,
.quiz-discovery-text h2,
.benefit-content h3,
.card-section h3,
.testimonial-title,
.ingredient-card h3,
/* These two are one grouped selector in styles.css. Adding only the results
   half left "Your Café Coffee" terracotta beside an ink "Your Potential
   Savings", which also put the accent on the column you want people to
   leave. Both or neither. */
.calculator-input-section h3,
.calculator-results h3,
/* `.faq-question` is an h3, not a button — the answers are always open and
   the cursor is `auto`, so colouring it like a control promised an accordion
   that isn't there. `.trust-detail h3` was the same miss in burgundy
   (#7e3b1c) rather than terracotta, which is why a search for the accent
   colour alone did not turn it up. */
.faq-question,
.trust-detail h3,
/* quiz.css */
.quiz-header h1,
.recommendations h3,
/* product.css */
.product-benefits h3,
.review-title,
.benefit-title,
/* blog.css */
.blog-hero h1,
.sidebar-widget h3,
.post-content h2,
.post-content h3,
.social-sharing h3,
.related-posts h2,
.no-posts h2 {
  color: var(--rd-ink);
}

/* Deliberately NOT in the list above: .post-title a:hover and
   .related-post-content h3 a:hover. Those are hover states on links, which
   is exactly the case terracotta is reserved for. */

p, li, label, input, textarea, select, button, a, td, th {
  font-family: var(--rd-font-body);
}

p { color: var(--rd-ink-soft); }

a { color: var(--rd-terracotta); }
a:hover { color: var(--rd-terracotta-deep); }

/* =========================================================================
   Surfaces
   ========================================================================= */

header, .header, .site-header { background: var(--rd-header) !important; }

/* Wordmark.
 *
 * The mark is `Shrȯȯmŝy` -- a dot above each o, a circumflex above the s, and
 * a swash under the y. It is not a font, so it cannot be set as text: typing
 * "Shroomsy" in Fraunces spells the brand wrong. Both slots carry the real
 * lockup, terracotta on the cream header and a cream recolour on the ink
 * footer (`scripts/make-footer-logo.py`), because the terracotta original
 * sits at about 2.6:1 on #2a1810.
 *
 * Height, not width, is the constraint worth naming: the dots and the
 * circumflex live in the top ~18% of the artwork and are the first thing to
 * go to mush when it is scaled down. 42px keeps them separable and is close
 * to the 38px the storefront's own wordmark renders at.
 *
 * The images are referenced plainly, with no `onerror` swap to hidden text.
 * That was the old pattern and it failed silently: text hidden by default,
 * revealed only on image error, so the four policy pages -- span present, no
 * image beside it, nothing to fail -- rendered nothing at all. `alt` covers
 * the same case without JavaScript. */
.logo-image {
  height: 42px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.footer-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: none;
  margin-bottom: 15px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo-image { height: 34px; max-width: none; }
  .footer-logo { height: 30px; }
}
footer, .footer, .site-footer {
  background: var(--rd-ink) !important;
  color: var(--rd-cream) !important;
}
/* The footer went from cream to ink, so every link in it flipped from dark
   text on light to dark text on dark. styles.css sets these with a selector
   specific enough to beat `footer a`, hence !important rather than a longer
   selector chain that the next edit to styles.css would silently outrank. */
footer a, .footer a, .site-footer a,
.footer-section a, .footer-section ul li a,
.footer-links a { color: var(--rd-cream) !important; opacity: .82; }
footer a:hover, .footer a:hover, .site-footer a:hover,
.footer-section a:hover, .footer-links a:hover { opacity: 1; color: var(--rd-gold) !important; }
footer h4, footer h3, .footer h4, .footer h3,
.footer-section h4 { color: var(--rd-white) !important; }
footer p, .footer p,
footer li, .footer li, .footer-section li { color: rgba(251, 246, 238, .78) !important; }

section { background-color: transparent; }

/* `section {}` above is an element selector and loses to the class selectors
   in styles.css that paint these `#ffffff`. Pure white is the one value the
   colour remap deliberately left alone — it is correct inside cards and on
   dark backgrounds, so remapping it globally would have been the riskier
   edit — but as a full-bleed section background it reads cold against the
   cream either side of it, which is the same mistake as the greys. */
.product-section, .faq-section { background: var(--rd-white); }
.calculator-section {
  background: linear-gradient(180deg, var(--rd-white) 0%, var(--rd-cream-deep) 100%);
}

.card, .benefit-card, .mushroom-card, .feature-card,
.archetype-card, .comparison-card, .faq-item, .audience-card {
  background: var(--rd-card);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn, .btn-primary, .button, button.btn, a.btn {
  font-family: var(--rd-font-body);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-primary, .btn.btn-primary, a.btn-primary {
  background: var(--rd-terracotta);
  border-color: var(--rd-terracotta);
  color: #fff;
  box-shadow: 0 10px 24px rgba(188, 101, 52, .28);
}
.btn-primary:hover, .btn.btn-primary:hover, a.btn-primary:hover {
  background: var(--rd-terracotta-deep);
  border-color: var(--rd-terracotta-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(188, 101, 52, .34);
}

.btn-secondary, a.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--rd-terracotta);
  color: var(--rd-terracotta);
}
.btn-secondary:hover, a.btn-secondary:hover {
  background: rgba(188, 101, 52, .07);
  color: var(--rd-terracotta-deep);
}

/* =========================================================================
   Shared bits lifted from the Shopify theme
   ========================================================================= */

.rd-eyebrow {
  display: inline-block;
  background: rgba(188, 101, 52, .12);
  color: var(--rd-burgundy);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rd-wrap { max-width: var(--rd-max); margin: 0 auto; padding: 0 20px; }

/* =========================================================================
   Social proof strip
   ========================================================================= */

.sp-strip {
  background: var(--rd-ink);
  color: var(--rd-cream);
  padding: 30px 0;
}
.sp-strip-inner {
  max-width: var(--rd-max);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: center;
}
.sp-stat-num {
  font-family: var(--rd-font-display);
  font-variation-settings: "opsz" 80;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  color: var(--rd-gold);
  line-height: 1.1;
}
.sp-stat-label {
  font-size: .82rem;
  color: rgba(251, 246, 238, .82);
  margin-top: 4px;
  letter-spacing: .02em;
}
@media (max-width: 760px) {
  .sp-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* =========================================================================
   Reviews
   ========================================================================= */

.reviews-section { padding: 72px 0; background: var(--rd-cream); }

.reviews-head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
.reviews-head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  margin: 14px 0 10px;
}
.reviews-head p { color: var(--rd-muted); font-size: 1.02rem; }

.reviews-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.reviews-stars { color: var(--rd-terracotta); font-size: 1.15rem; letter-spacing: 2px; }
.reviews-rating-text { color: var(--rd-ink-soft); font-size: .93rem; }

.reviews-grid {
  max-width: var(--rd-max);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
  background: var(--rd-card);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--rd-shadow); }

.review-stars { color: var(--rd-terracotta); letter-spacing: 2px; font-size: .98rem; }

.review-quote {
  font-family: var(--rd-font-display);
  font-variation-settings: "opsz" 36;
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--rd-ink);
  margin: 0;
  font-weight: 500;
}

.review-body { color: var(--rd-ink-soft); font-size: .94rem; line-height: 1.62; margin: 0; flex: 1; }

.review-person { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--rd-line); }
.review-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 46px;
  border: 2px solid var(--rd-cream-deep);
}
/* Shown instead of a photo. These are real, named Amazon reviewers, so a
   generated face would invent a likeness for an identifiable person — the
   monogram has to look chosen, not like a broken <img>. */
.review-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--rd-gold), var(--rd-terracotta));
  color: #fff;
  font-family: var(--rd-font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 2px solid var(--rd-cream-deep);
}

.review-name { font-weight: 600; font-size: .93rem; color: var(--rd-ink); line-height: 1.25; }
.review-meta { font-size: .79rem; color: var(--rd-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* without the nowrap this breaks after "Verified" on the narrower cards and
   drops the date onto a line of its own, mid-phrase */
.review-verified { color: var(--rd-terracotta); font-weight: 600; white-space: nowrap; }
.review-meta > span:nth-child(2) { display: none; }
@media (min-width: 1100px) { .review-meta > span:nth-child(2) { display: inline; } }

.reviews-note {
  max-width: var(--rd-max);
  margin: 26px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: .82rem;
  color: var(--rd-muted);
}