/**
 * Public wxrx pages: restore rem scaling and block Nuxt UI / Tailwind preflight
 * from overriding the legacy template. Original site uses html { font-size: 1px }
 * so body { font-size: 18rem } == 18px. Nuxt entry.css sets html to 16px and
 * inflates every rem-based rule.
 *
 * Load this sheet AFTER _nuxt/entry*.css (see default.vue).
 */
html {
  font-size: 1px !important;
}

body {
  font-size: 18rem !important;
  /*
   * The original's body, measured on products.visuscience.com: line-height 1.5
   * (bootstrap.min.css), colour #656565 (index.css), white background. Both
   * sheets load here too, but two later rules overrode them - this file set
   * line-height: normal, and main.css (Tailwind, shared with the admin) sets a
   * near-black #1e293b and a blue-grey #f8fafc page. That is the "font, colour
   * and size are different" on the product and solution pages: the sizes
   * matched, but paragraphs ran ~1.15 instead of 1.5 and in slate instead of
   * grey, which reads as smaller and darker. This sheet is public-only and
   * loads last, so the admin keeps main.css as it is.
   */
  line-height: 1.5;
  color: #656565;
  background-color: #fff;
}

@media (max-width: 800px) {
  html {
    font-size: 0.8px !important;
  }
}

/*
 * Spec bodies: tuned together with spec.css against the original's spec tables.
 * Features is deliberately NOT listed: the original's features copy inherits
 * the body's 1.5 (iFlo "iFlo delivers a targeted warm compress..." measures
 * 20px / 30px there), and forcing normal here made it ~23px.
 */
.visu-wxrx-root .site-main-content.spec .tincymce-content {
  line-height: normal;
}

.visu-wxrx-root .site-main-content.spec .tincymce-content table p,
.visu-wxrx-root .site-main-content.spec .tincymce-content table td,
.visu-wxrx-root .site-main-content.spec .tincymce-content table th {
  line-height: normal;
}

/*
 * Page titles are <h1> (SEO: one main heading per page); they replaced <p>
 * elements, so keep those looks. bootstrap's `h1` rule would change the weight,
 * line height and margins; this beats it by coming later with the same
 * specificity, while the template's own class rules (.blog-header, …) still
 * win on the properties they set.
 */
h1:where(.blog-header, .site-sub-header-top-title),
h2:where(.video-header-title) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0 0 1rem;
}
h1.site-sub-header-top-title { margin-bottom: 0; }

/* headings for pages whose design shows no title (home, list pages) */
.visu-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* home page: optional heading above the events (管理内容 › 首页 › 活动) */
.home-events-title {
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  color: #333;
  margin: 0 0 24px;
}
@media (max-width: 767px) {
  .home-events-title { font-size: 28px; }
}
/* home banner slides are wrapped in <picture> (optional phone image) */
.product-carousel picture { display: block; width: 100%; }

/*
 * Event action labels (Attend / Pre-order / Share) across languages.
 *
 * index.css sets `word-break: break-word` on everything, which split whole
 * words mid-character in the cramped 3-up action row — Spanish "Asistir"
 * rendered as "Asisti r", "Compartir" as "Compart ir". Keep words intact and
 * only wrap between words (so two-word labels like "Pedido anticipado" still
 * wrap cleanly); a rare over-long word (Compartilhar, Précommande) may break as
 * a last resort rather than overflow. Align items to the top so a two-line
 * middle label lines up with the single-line ones, and tighten the gap a touch
 * so the longer languages fit.
 */
.event-item-footer .flex-row-between-center { align-items: flex-start; gap: 4px; }
.event-action-item { align-items: flex-start; }
.event-action-item-label {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  line-height: 1.2;
}

/*
 * Event date header: keep a long value from spilling out of the 70px blue bar
 * (some events carry a full sentence where a short date is expected).
 */
.event-item-header span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * Blog article detail: title / date / "Recent Blogs" list.
 * - multi-line article title reads better with 1.5 line spacing
 * - the date picked up a base slate-800 colour; match it to the title (#656565)
 * - the Recent Blogs entries also use 1.5 line spacing (font already matches the
 *   original — Arial, same sizes)
 */
.blog-header { line-height: 1.5; }
.blog-date { color: #656565; }
.blog-header-list,
.blog-subheader-list,
.blog-meta-wrap-list { line-height: 1.5; }

/* Blog list page: item intro (title uses .blog-header, already 1.5 above) */
.blog-subheader { line-height: 1.5; }

/*
 * Footer "Follow us on": the block carried `padding: 0 16px`, so the heading and
 * the social icons sat 16px right of the contact details above them. The
 * original lines them all up on the column's left edge. Desktop footer only —
 * the mobile footer keeps its own spacing.
 */
.site-footer-content .follow-us-wrap {
  padding-left: 0;
}