/*
 * chuao.css — page-scoped styles for the Chuao landing page.
 * Enqueued automatically by PAC on this page only (frontend + block editor).
 * Scoped to className selectors — no outer .page-chuao wrapper needed.
 * References theme custom properties from _var.scss where available.
 */

/* ─── Color inheritance reset ──────────────────────────────────────────────
   Prevents theme cascade from overriding section-scoped text colors.
*/
.chuao-hero :is(p, h1, h2, h3, h4, li, blockquote, figcaption, a),
.chuao-stats :is(p, h1, h2, h3, h4, li, blockquote, figcaption),
.chuao-origin :is(p, h1, h2, h3, h4, li, blockquote, figcaption),
.chuao-product :is(p, h1, h2, h3, h4, li, blockquote, figcaption),
.chuao-brew :is(p, h1, h2, h3, h4, li, blockquote, figcaption),
.chuao-testimonials :is(p, h1, h2, h3, h4, li, blockquote, figcaption),
.chuao-faq :is(p, h1, h2, h3, h4, li, blockquote, figcaption),
.chuao-cta :is(p, h1, h2, h3, h4, li, blockquote, figcaption, a) {
  color: inherit;
}

/* ─── Hero ─────────────────────────────────────────────────────────────────*/
.chuao-hero .kicker {
  text-align: center;
  margin-bottom: 0.5rem;
}

.chuao-hero h1 {
  text-align: center;
  margin-bottom: 0.75rem;
  font-family: var(--wp--preset--font-family--new-spirit, serif);
}

.chuao-hero__subhead {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.chuao-hero .lede {
  text-align: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.chuao-hero .ornament {
  display: block;
  text-align: center;
  color: var(--color-cream-400, #c8a97e);
  font-size: 1.2rem;
  margin: 1rem auto;
  letter-spacing: 0.4em;
}

/* ─── Stats grid ────────────────────────────────────────────────────────────*/
.chuao-stats .stat-number {
  margin-bottom: 0.25rem;
  font-family: var(--wp--preset--font-family--new-spirit, serif);
}

.chuao-stats .stat-label em {
  font-style: normal;
  opacity: 0.55;
  font-size: 0.75em;
}

.chuao-stats .wp-block-columns {
  border-top: 1px solid var(--color-cream-300, #d4b896);
  border-bottom: 1px solid var(--color-cream-300, #d4b896);
}

.chuao-stats .wp-block-column {
  border-right: 1px solid var(--color-cream-300, #d4b896);
}

.chuao-stats .wp-block-column:last-child {
  border-right: none;
}

/* ─── Origin section ────────────────────────────────────────────────────────*/
.chuao-origin .kicker {
  margin-bottom: 0.5rem;
}

.chuao-origin__media-text .lede {
  font-family: var(--wp--preset--font-family--new-spirit, serif);
}

.chuao-origin__media-text .wp-block-media-text__media img {
  border-radius: var(--border-radius, 3px);
}

/* ─── Product details ───────────────────────────────────────────────────────*/
.chuao-product .kicker {
  margin-bottom: 0.5rem;
}

.chuao-product .wp-block-list {
  list-style: none;
  padding-left: 0;
}

.chuao-product .wp-block-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid #3d1a00;
}

.chuao-product .wp-block-list li:last-child {
  border-bottom: none;
}

.chuao-product .wp-block-list em {
  font-style: italic;
  opacity: 0.6;
  font-size: 0.85em;
}

/* ─── Brewing guide ─────────────────────────────────────────────────────────*/
.chuao-brew .kicker {
  margin-bottom: 0.5rem;
}

.chuao-brew .brew-step__num {
  margin-bottom: 0.25rem;
  line-height: 1;
  font-family: var(--wp--preset--font-family--new-spirit, serif);
}

@media (max-width: 599px) {
  .chuao-brew .wp-block-columns {
    flex-direction: column;
  }

  .chuao-brew .brew-step {
    border-right: none !important;
    border-bottom: 1px solid #d4b896;
  }

  .chuao-brew .brew-step:last-child {
    border-bottom: none;
  }
}

/* ─── Testimonials ──────────────────────────────────────────────────────────*/
.chuao-testimonials .kicker {
  margin-bottom: 0.5rem;
}

.chuao-testimonials .testimonial-mark {
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-brown-400, #8b4513);
  margin-bottom: -0.5rem;
  font-family: Georgia, serif;
}

/* ─── FAQ ───────────────────────────────────────────────────────────────────*/
.chuao-faq .kicker {
  margin-bottom: 0.5rem;
}

.chuao-faq .wp-block-details {
  border-top: none;
}

.chuao-faq .wp-block-details summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.chuao-faq .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.chuao-faq .wp-block-details summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  flex-shrink: 0;
  color: var(--color-brown-500, #8b4513);
  transition: transform 0.2s ease;
}

.chuao-faq .wp-block-details[open] summary::after {
  content: "−";
}

/* ─── CTA section ───────────────────────────────────────────────────────────*/
.chuao-cta .kicker {
  margin-bottom: 0.5rem;
}

.chuao-cta .wp-block-cover__inner-container {
  text-align: center;
}

.chuao-cta__seal {
  max-width: 80px;
  margin: 0 auto 1.5rem;
  opacity: 0.7;
}

/* ─── Responsive tweaks ─────────────────────────────────────────────────────*/
@media (max-width: 781px) {
  .chuao-stats .wp-block-column {
    border-right: none;
    border-bottom: 1px solid var(--color-cream-300, #d4b896);
  }

  .chuao-stats .wp-block-column:last-child {
    border-bottom: none;
  }

  .chuao-origin__media-text {
    grid-template-columns: 1fr !important;
  }
}