/* Motiva — subtle site-wide body readability lift
   Normal reading copy only. Headings, navigation, buttons, badges,
   compact labels and components with their own typography remain unchanged. */

main p,
main li {
  font-size: 17px;
  line-height: 1.6;
}

/* Preserve deliberately compact supporting text and component typography. */
main .mh-opening-note,
main .mh-trust-item,
main .mh-kicker,
main .mh-link,
main .mh-button,
main .eyebrow,
main .kicker,
main .overline,
main .label,
main .meta,
main .caption,
main .fine-print,
main .form-note,
main .privacy-note,
main small {
  font-size: inherit;
}

@media (max-width: 980px) {
  main p,
  main li {
    font-size: 16.5px;
    line-height: 1.6;
  }

  /* Keep highlighted heading keywords on the same Motiva terracotta used on desktop. */
  main .title-key-accent {
    color: #C97D58 !important;
  }
}

@media (max-width: 680px) {
  main p,
  main li {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Treatments hub: slightly larger phone card copy for easier healthcare reading. */
  main .treatments-hub .card p {
    font-size: 15px !important;
  }
}

/* ================================================================
   Motiva stable-motion layer — October 2026
   Scroll-triggered reveal effects are intentionally disabled site-wide.
   The site should remain visually stable while visitors scroll.
   ================================================================ */

html {
  scroll-behavior: auto !important;
}

/* Keep the desktop announcement static. */
@media (min-width: 981px) {
  .announce .announce-track {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .announce .announce-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 24px !important;
    justify-content: center !important;
    font-size: .98rem !important;
  }

  .announce .announce-item[aria-hidden="true"] {
    display: none !important;
  }

  .announce .announce-opening {
    margin-right: 24px !important;
  }
}

/* Disable every JS-added entrance/reveal state. Content is always visible and
   never translated, scaled, faded or delayed while scrolling. */
html.motiva-motion-ready .motiva-reveal,
html.motiva-motion-ready .motiva-reveal.is-visible,
html.motiva-motion-ready .motiva-reveal.motiva-from-left,
html.motiva-motion-ready .motiva-reveal.motiva-from-left.is-visible,
html.motiva-motion-ready .motiva-reveal.motiva-from-right,
html.motiva-motion-ready .motiva-reveal.motiva-from-right.is-visible,
html.motiva-motion-ready .motiva-reveal.motiva-soft-scale,
html.motiva-motion-ready .motiva-reveal.motiva-soft-scale.is-visible,
html.motiva-motion-ready .motiva-hero-enter,
html.motiva-motion-ready .motiva-hero-enter.is-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  transition-delay: 0ms !important;
  will-change: auto !important;
}

/* Remove decorative pulses and movement. */
.care-hotspot.motion-pulse-once {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Cards and images should not move or zoom on hover. Keep only instant visual
   state changes such as border/shadow/color so the interface still feels live. */
main :where(
  .mh-card,.mh-service-card,.mh-step,.mh-opening,
  .home-path-card,.featured-care-card,.process-step,
  .treatments-hub .card,.condition-card,.condition-symptom-grid li,
  .condition-treatment-card,.condition-faq details,
  .career-card,.role-card,.contact-card,.info-card
),
main :where(
  .mh-hero-media,.mh-founder-photo,.mh-service-media,
  .featured-care-media,.card-media,.condition-hero-media,
  .treatment-hero-media,.founder-photo,.process-image
) img {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

main :where(
  .mh-card,.mh-service-card,
  .home-path-card,.featured-care-card,
  .treatments-hub .card,.condition-card,
  .condition-treatment-card,.career-card,.role-card,.contact-card,.info-card
):hover,
main :where(
  .mh-service-card,.featured-care-card,.treatments-hub .card,
  .condition-card,.founder,.mh-founder
):hover :where(
  .mh-service-media,.featured-care-media,.card-media,
  .condition-hero-media,.founder-photo,.mh-founder-photo
) img {
  transform: none !important;
}

/* Prevent tap-shrink effects on touch devices. */
main a.btn:active,
main button:active,
main .home-path-card:active,
main .featured-care-card:active,
main .treatments-hub .card:active {
  transform: none !important;
}

/* Accessibility guard. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .announce .announce-track,
  .motiva-reveal,
  .motiva-hero-enter,
  .care-hotspot.motion-pulse-once {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Conditions & Concerns: tablet portrait only. Use balanced side columns so
   every short or wrapped condition name is centered consistently. Phones and
   tablet landscape keep their existing behavior. */
@media (min-width: 681px) and (max-width: 980px) and (orientation: portrait) {
  .care-finder-section .care-result-link[data-care-slug] {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .care-finder-section .care-result-link[data-care-slug] .condition-result-thumb {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .care-finder-section .care-result-link[data-care-slug]::after {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 48px !important;
    margin: 0 !important;
    text-align: right !important;
  }
}

/* Conditions & Concerns: desktop only. Keep tablet/mobile behavior from
   care-finder.css unchanged, while centering every desktop condition name.
   Equal side columns keep both short and wrapped names visually centered. */
@media (min-width: 981px) {
  .care-finder-section .care-result-link[data-care-slug] {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .care-finder-section .care-result-link[data-care-slug] .condition-result-thumb {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .care-finder-section .care-result-link[data-care-slug]::after {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 48px !important;
    margin: 0 !important;
    text-align: right !important;
  }
}

/* ================================================================
   Slightly larger social media icons — October 2026
   Improve recognition without changing navigation spacing or visual hierarchy.
   ================================================================ */

/* Desktop header: modest lift, with a tighter size at narrower desktop widths. */
@media (min-width: 1121px) and (max-width: 1240px) {
  header.site .header-social-icon {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }
  header.site .header-social-icon img {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (min-width: 1241px) {
  header.site .header-social-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }
  header.site .header-social-icon img {
    width: 19px !important;
    height: 19px !important;
  }
}

/* Phone/tablet menu icons: slightly larger while preserving comfortable tap targets. */
@media (max-width: 980px) {
  header.site > .mobile-navigation .mobile-nav-social-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }
  header.site > .mobile-navigation .mobile-nav-social-button img {
    width: 21px !important;
    height: 21px !important;
  }
}

/* Touch-tablet expanded menu. */
@media (min-width: 981px) and (max-width: 1120px) and (hover: none) and (pointer: coarse) {
  header.site > .mobile-navigation .mobile-nav-social-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }
  header.site > .mobile-navigation .mobile-nav-social-button img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Keep short landscape menus compact enough to fit vertically. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  header.site > .mobile-navigation .mobile-nav-social-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
  }
  header.site > .mobile-navigation .mobile-nav-social-button img {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Footer icons: a small increase on desktop and compact layouts. */
footer.site.footer-refresh .footer-social-logo {
  width: 32px !important;
  height: 32px !important;
}
footer.site.footer-refresh .footer-social-logo img {
  width: 26px !important;
  height: 26px !important;
}

@media (max-width: 980px) {
  footer.site.footer-refresh .footer-social-mobile .footer-social-logo {
    width: 34px !important;
    height: 34px !important;
  }
  footer.site.footer-refresh .footer-social-mobile .footer-social-logo img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ================================================================
   Mobile/tablet keyword accent consistency — October 2026
   Match desktop Motiva terracotta (#C97D58) in portrait and landscape.
   Higher specificity intentionally wins over homepage compact-mode gold overrides.
   ================================================================ */
@media (max-width: 1120px) {
  body main .title-key-accent,
  body main .hero-title-mission,
  body main .home-title-accent,
  body main .motiva-home-premium .mh-accent,
  body main .motiva-home-premium .mh-mission-accent,
  body main .motiva-home-premium .title-key-accent,
  body main .motiva-home-premium .mh-hero h1 .mh-hero-keyword {
    color: #C97D58 !important;
  }
}