/**
 * Aoxiang template — shared typography & layout tokens (single load, cacheable).
 * Loaded after theme CSS; uses CSS variables for responsive type without duplicating per-page <style>.
 */

:root {
  --font-family-sans: 'Arimo', Helvetica, Arial, sans-serif;
  --font-size-h1-mobile: 24px;
  --font-size-h2-mobile: 20px;
  --font-size-h3-mobile: 18px;
  --font-size-h4-mobile: 16px;
  --font-size-p-mobile: 14px;
  --font-size-li-mobile: 14px;
  --font-size-button-mobile: 14px;
  --font-size-a-mobile: 14px;
  --font-size-span-mobile: 14px;
  --font-size-label-mobile: 14px;
  --font-size-h1-desktop: 40px;
  --font-size-h2-desktop: 32px;
  --font-size-h3-desktop: 24px;
  --font-size-h4-desktop: 22px;
  --font-size-p-desktop: 16px;
  --font-size-a-desktop: 16px;
  --font-size-li-desktop: 16px;
  --font-size-span-desktop: 16px;
  --font-size-button-desktop: 16px;
  --font-size-label-desktop: 16px;
  /* Legacy typo — keep alias so old inline / copied CSS still resolves */
  --font-size-botton-desktop: var(--font-size-button-desktop);
  --line-height-base: 1.5;
}

/* List/archive pages: slightly larger body text on desktop (matches former lists_article.htm) */
body.page-lists-article {
  --font-size-p-desktop: 20px;
  --font-size-li-desktop: 20px;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-sans);
  line-height: var(--line-height-base);
  font-size: 16px;
  color: #000;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Default typography (loads after theme style.css).
 * Use body :where(...) so specificity stays (0,0,2): beats bare theme tags,
 * loses to any .class or .theme .child rule — no !important, fewer clashes
 * with accordions, hero titles, nav, CMS blocks, etc.
 */
body :where(h1) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h1-mobile);
}
body :where(h2) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h2-mobile);
}
body :where(h3) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h3-mobile);
}
body :where(h4) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h4-mobile);
}
body :where(p) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-p-mobile);
}
body :where(li) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-li-mobile);
}
body :where(button) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-button-mobile);
}
body :where(a) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-a-mobile);
}
body :where(span) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-span-mobile);
}
body :where(label) {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-label-mobile);
}

@media (min-width: 1024px) {
  body :where(h1) {
    font-size: var(--font-size-h1-desktop);
  }
  body :where(h2) {
    font-size: var(--font-size-h2-desktop);
  }
  body :where(h3) {
    font-size: var(--font-size-h3-desktop);
  }
  body :where(h4) {
    font-size: var(--font-size-h4-desktop);
  }
  body :where(p) {
    font-size: var(--font-size-p-desktop);
  }
  body :where(li) {
    font-size: var(--font-size-li-desktop);
  }
  body :where(button) {
    font-size: var(--font-size-button-desktop);
  }
  body :where(a) {
    font-size: var(--font-size-a-desktop);
  }
  body :where(span) {
    font-size: var(--font-size-span-desktop);
  }
  body :where(label) {
    font-size: var(--font-size-label-desktop);
  }
}

/*
 * index.htm hero headline sizes / spacing / animation: see aoxiang-home.css (tail),
 * aligned with production DevTools (4rem desktop, 3.5rem ≤1024px, fadeIn + soft shadow).
 */

/* Article list cards — visual match former h5 card titles */
.lists-article-card-title {
  font-size: 1.25rem !important;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.lists-article-card-title a {
  color: inherit;
  text-decoration: none;
}

/* Sidebar “Popular / Recent” post thumbs — replaces inline max-width on litpics */
.widget.widget-sigma-recent-posts .sigma_recent-post .recent-post-image img {
  max-width: 80px;
  width: auto;
  height: auto;
}

/* Inner-page subheader (replaces inline background-image; path relative to assets/css/) */
.sigma_subheader.style-6.aoxiang-subheader-bg {
  background-image: url('../img/subheader.jpg');
}

/* CMS page_faqs block (PHP echo in view_article / view_images) */
.aoxiang-page-faq-section {
  padding: 60px 0;
  background: #f9f9f9;
}

.aoxiang-page-faq-section.aoxiang-page-faq-section--plain {
  background: transparent;
}

.aoxiang-page-faq-section .aoxiang-page-faq-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.aoxiang-page-faq-section .aoxiang-page-faq-title-wrap {
  text-align: center;
  margin-bottom: 40px;
}

.aoxiang-page-faq-section .aoxiang-page-faq-h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.aoxiang-page-faq-section .aoxiang-page-faq-list {
  margin-left: auto;
  margin-right: auto;
}

/* FAQ accordion colors/layout: aoxiang-faq-unified.css (loaded via foot.htm) */

/* Prev/next article title links */
.aoxiang-post-nav-link {
  color: #666;
}

/* Shared landing utilities — index.htm + lists_single_test.htm (single source) */
.about-feature-emoji {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}

.reveal.reveal-d08 {
  transition-delay: 0.08s;
}

.reveal.reveal-d16 {
  transition-delay: 0.16s;
}

.reveal.reveal-d24 {
  transition-delay: 0.24s;
}

.reveal.reveal-d28 {
  transition-delay: 0.28s;
}

.reveal.reveal-d32 {
  transition-delay: 0.32s;
}

.faq-toggle-plus {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  flex-shrink: 0;
}

.faq-item.active .faq-toggle-plus {
  color: rgba(255, 255, 255, 0.95);
}

.carousel-nav-chevron {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
}

/* Narrow viewports only (does not apply at min-width 1024px desktop) */
@media (max-width: 1023px) {
  /* hidden: wide support; clip: avoids flex/grid min-content blowout in modern browsers */
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }

  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  :root {
    --font-size-p-mobile: 15px;
    --font-size-li-mobile: 15px;
    --font-size-a-mobile: 15px;
    --font-size-span-mobile: 15px;
  }

  /* Omit bare `svg` — header/footer inline icons rely on fixed dimensions */
  embed,
  iframe,
  object,
  video {
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Full-bleed 100vw + negative margin (home) — clip causes horizontal scroll on phones */
  body .testimonials-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  footer.sigma_footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}