/* ============================================================
   SUJA — Global Typography Normalization
   ------------------------------------------------------------
   Loads LAST in the enqueue chain so it overrides hardcoded
   font sizes that linger in other CSS files. Uses the global
   typography variables defined in theme.css (--font-h1 etc.).

   All selectors are body-prefixed for specificity so they beat
   single-class declarations elsewhere — but Elementor's own
   per-widget typography (set in the editor or via inline
   styles) still wins on its higher specificity, keeping every
   widget fully editable.

   Reference: CareCloud-style enterprise healthcare SaaS scale.
   ============================================================ */

/* ============ HEADING & TEXT ELEMENT DEFAULTS ============ */
body h1 {
  font-family: var(--font-heading);
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
body h2 {
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
body h3 {
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
body h4 {
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}
body h5 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; line-height: 1.4; }
body h6 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; }

/* ============ GLOBAL PARAGRAPH SIZING ============
   Applies the spec's 18 / 17 / 16 (desktop / tablet / mobile)
   to every <p> on the site. More-specific selectors below
   (.suja-eco-card-desc, .mega-featured-desc, etc.) override
   for compact contexts; Elementor per-widget typography always
   wins on its higher specificity. */
body p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  margin: 0 0 1em;
}
body p:last-child { margin-bottom: 0; }

/* Elementor text-editor widget output — the most common place
   raw paragraphs appear in Elementor pages. */
body .elementor-widget-text-editor,
body .elementor-widget-text-editor .elementor-widget-container,
body .elementor-widget-text-editor p,
body .elementor-text-editor p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}
body .elementor-widget-text-editor p,
body .elementor-text-editor p { margin: 0 0 1em; }
body .elementor-widget-text-editor p:last-child,
body .elementor-text-editor p:last-child { margin-bottom: 0; }

/* ============ NAVIGATION (HEADER) ============ */
body .nav-link,
body .navbar-links a,
body .mega-toggle {
  font-family: var(--font-heading);
  font-size: var(--font-nav);
  font-weight: 500;
  line-height: 1.4;
}
body .nav-phone { font-size: 14px; font-weight: 500; }

/* ============ MEGA MENU ============ */
body .mega-col-eyebrow,
body .mega-col-heading,
body .mega-section-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body .mega-featured-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
body .mega-featured-desc { font-size: 14px; line-height: 1.7; }
body .mega-software-list li a strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
body .mega-software-list li a span { font-size: 14px; line-height: 1.55; }
body .mega-plain-list li a {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}
body .mega-featured-link { font-size: 14px; font-weight: 600; }
body .mega-ai-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
body .mega-ai-name { font-size: 16px; font-weight: 700; }
/* Final font-family unification — these 4 classes pull purely from
   the global tokens. No hardcoded family strings anywhere. */
body .mega-ai-desc {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400; line-height: 1.6;
}
body .mega-sw-item span {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500; line-height: 1.5;
}
body .mega-featured-desc {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400; line-height: 1.6;
}
body .suja-hero-desc {
  font-family: var(--font-body);
  font-weight: 400;
}
body .suja-logos-heading {
  font-family: var(--font-heading);
  letter-spacing: 0.14em;
}

/* ============ MOBILE MENU ============ */
body .mobile-nav-link {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 0.75rem 0;
}
body .mobile-section-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 1.25rem 0 0.5rem;
}
body .mobile-accordion-panel a {
  font-size: 15px;
  font-weight: 500;
  padding: 0.4rem 0 0.4rem 0.75rem;
  line-height: 1.5;
}

/* ============ BUTTONS ============ */
body .btn,
body .suja-cta-btn,
body .suja-hero-btn,
body .suja-hero-btn-outline,
body .mega-cta-button {
  font-family: var(--font-heading);
  font-size: var(--font-btn);
  font-weight: 600;
  line-height: 1.2;
}
body .btn-lg { font-size: calc(var(--font-btn) + 1px); }
body .btn-sm { font-size: 14px; }

/* Elementor buttons keep editor controls, but baseline sizing */
body .elementor-button {
  font-family: var(--font-heading);
  font-size: var(--font-btn);
  font-weight: 600;
  line-height: 1.2;
}

/* ============ HERO ============ */
body .suja-hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4;
}
body .suja-hero-heading,
body .suja-hero-headline {
  font-family: var(--font-heading);
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
body .suja-hero-desc,
body .suja-hero-description {
  font-family: var(--font-body);
  font-size: var(--font-body-lg);
  line-height: var(--lh-body);
}
body .suja-hero-stat-num { font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1.1; }
body .suja-hero-stat-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body .suja-hero-badge { font-size: 13px; font-weight: 600; }
body .suja-hero-card-title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.3; }
body .suja-hero-card-sub { font-size: 13px; line-height: 1.5; }

/* ============ SECTION HEADERS (UTILITY) ============ */
body .section-header h2 {
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
body .section-header p {
  font-size: var(--font-body-lg);
  line-height: var(--lh-body);
}
body .section-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============ ELEMENTOR PRODUCT TAB BAR (OUR PRODUCTS) ============ */
body .suja-product-tabs .elementor-tab-title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
body .suja-product-tab .elementor-icon-box-title,
body .suja-product-tab .elementor-icon-box-title a {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
body .suja-product-tab .elementor-icon-box-description {
  font-size: 14px;
  line-height: 1.55;
}

/* ============ CTA SECTION ============ */
body .suja-cta-card h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
body .suja-cta-card p {
  font-size: 15px;
  line-height: 1.65;
}
body .suja-cta-btn {
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
}

/* ============ FEATURE / PRODUCT / AI / VALUE CARDS ============ */
body .product-card h3,
body .ai-card h3,
body .value-card h3,
body .cta-card h3,
body .feature-card h3 {
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: 600;
  line-height: var(--lh-h4);
}
body .product-card p,
body .ai-card p,
body .value-card p,
body .cta-card p,
body .feature-card p {
  font-size: 15px;
  line-height: 1.65;
}
body .product-card .card-tag,
body .ai-card .card-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============ TESTIMONIALS ============ */
body .testimonial-card,
body .testimonial-text,
body .testimonial-card p { font-size: 16px; line-height: 1.7; }
body .testimonial-author,
body .testimonial-card .author-name { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
body .testimonial-role,
body .testimonial-card .author-role { font-size: 13px; }

/* ============ BLOG ============ */
body .blog-card h3,
body .blog-title,
body .blog-card .entry-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
body .blog-card p,
body .blog-excerpt { font-size: 15px; line-height: 1.6; }
body .blog-meta,
body .blog-card .post-meta { font-size: 13px; }

/* ============ STATS / COUNTERS ============ */
body .stat-card-num,
body .counter-number,
body .stat-num { font-family: var(--font-heading); font-size: 36px; font-weight: 700; line-height: 1.1; }
body .stat-card-label,
body .counter-label,
body .stat-label { font-size: 14px; font-weight: 500; line-height: 1.4; }

/* ============ FORMS ============ */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="password"],
body input[type="search"],
body input[type="number"],
body textarea,
body select {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
body label { font-family: var(--font-heading); font-size: 14px; font-weight: 600; line-height: 1.4; }

/* ============ FOOTER (REINFORCEMENT) ============
   footer-mega.css is already updated; these rules act as a
   safety net for any other footer markup. */
body .footer-widget-title,
body .footer-col-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
body .footer-widget a,
body .footer-col a,
body .footer-menu a { font-size: 15px; font-weight: 500; line-height: 1.5; }
body .footer-copyright,
body .footer-bottom { font-size: 13px; line-height: 1.5; }

/* ============ SLIDER / CAROUSEL DESCRIPTIONS ============
   Every slide-description, swiper caption, testimonial body,
   and hero supporting text inherits the global body scale. */
body .elementor-slide-description,
body .swiper-slide-description,
body .elementor-image-carousel-caption,
body .elementor-testimonial-content,
body .suja-testimonial-text,
body .suja-hero-desc,
body .suja-hero-description,
body .slide-description {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
}
body .elementor-testimonial-name,
body .suja-testimonial-person strong { font-family: var(--font-heading); font-size: 15px; font-weight: 600; }
body .elementor-testimonial-job,
body .suja-testimonial-person span { font-size: 13px; line-height: 1.5; }

/* ============ MENU / DROPDOWN DESCRIPTIONS ============
   Spec: 13-14px for secondary menu / dropdown supporting text. */
body .menu-item-description,
body .sub-menu .menu-item-description,
body .elementor-nav-menu .menu-item-description,
body .nav-menu .menu-item-description,
body .dropdown-description {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-fg, #64748b);
  font-weight: 400;
  margin-top: 2px;
}
body .sub-menu a,
body .elementor-nav-menu .sub-menu a {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

/* ============ TABLET PARAGRAPH SIZING ============ */
@media (max-width: 1024px) {
  body p,
  body .elementor-widget-text-editor p,
  body .elementor-text-editor p,
  body .elementor-widget-text-editor,
  body .elementor-widget-text-editor .elementor-widget-container,
  body .elementor-slide-description,
  body .swiper-slide-description,
  body .suja-testimonial-text,
  body .suja-hero-desc { font-size: 17px; line-height: 1.7; }
}

/* ============================================================
   Phase 5 — Testimonials grid + FAQ accordion
   Scoped to product-page widgets, reusable across CareAxes /
   Gyneye / Suja AI / Suja RCM / Suja Research pages.
   ============================================================ */

/* ---- Testimonials grid ---- */
.suja-pp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.suja-pp-testimonial-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px 26px;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 24px -8px rgba(15,23,42,0.06);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.suja-pp-testimonial-card:hover {
  box-shadow: 0 18px 36px -16px rgba(15,23,42,0.16);
  transform: translateY(-3px);
  border-color: #cbd5e1;
}
.suja-pp-testimonial-quote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #334155;
  margin: 0 0 22px;
  flex: 1;
}
.suja-pp-testimonial-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 0.8;
  color: rgba(8,145,178,0.22);
  margin-bottom: 6px;
}
.suja-pp-testimonial-meta {
  display: flex; align-items: center; gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,0.06);
}
.suja-pp-testimonial-avatar {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0891b2 0%, #1a2e4a 100%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 16px;
}
.suja-pp-testimonial-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.suja-pp-testimonial-person {
  display: flex; flex-direction: column; gap: 2px;
}
.suja-pp-testimonial-name {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 700;
  color: #1a2e4a;
}
.suja-pp-testimonial-role {
  font-size: 13px; color: #64748b;
}
@media (max-width: 991px) {
  .suja-pp-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .suja-pp-testimonials-grid { grid-template-columns: 1fr; }
}

/* ---- FAQ accordion (native <details>) ---- */
.suja-pp-faq-list {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 880px; margin: 0 auto;
}
.suja-pp-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.suja-pp-faq-item[open] {
  border-color: #cbd5e1;
  box-shadow: 0 10px 28px -16px rgba(15,23,42,0.18);
}
.suja-pp-faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.suja-pp-faq-summary::-webkit-details-marker { display: none; }
.suja-pp-faq-summary::marker { display: none; content: ''; }
.suja-pp-faq-q {
  font-family: var(--font-heading);
  font-size: 17px; font-weight: 600; line-height: 1.4;
  color: #1a2e4a;
  flex: 1;
}
.suja-pp-faq-chev {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #f1f5f9;
  color: #0891b2; font-size: 18px; font-weight: 400; line-height: 1;
  transition: transform .25s ease, background .2s ease;
  user-select: none;
}
.suja-pp-faq-item[open] .suja-pp-faq-chev {
  transform: rotate(45deg);
  background: #0891b2; color: #ffffff;
}
.suja-pp-faq-a {
  padding: 0 24px 22px;
}
.suja-pp-faq-a p {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.7; color: #475569;
  margin: 0;
}

/* ============ MOBILE / RESPONSIVE TYPE CAPS ============ */
@media (max-width: 767px) {
  body h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.15; }
  body h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.2; }
  body h3 { font-size: clamp(22px, 6vw, 26px); }
  body h4 { font-size: 18px; }
  body p,
  body .elementor-widget-text-editor p,
  body .elementor-text-editor p,
  body .elementor-widget-text-editor,
  body .elementor-widget-text-editor .elementor-widget-container,
  body .elementor-slide-description,
  body .swiper-slide-description,
  body .elementor-testimonial-content,
  body .suja-testimonial-text,
  body .suja-hero-desc { font-size: 16px; line-height: 1.7; margin: 0 0 0.9em; }
  body .btn, body .elementor-button, body .suja-hero-btn { font-size: 15px; padding: 0.7rem 1.4rem; }
  body .nav-link, body .mobile-nav-link { font-size: 16px; }
  body .mega-featured-name { font-size: 18px; }
  body .suja-product-tab .elementor-icon-box-title { font-size: 16px; }
}