/* ==========================================================
   TMJ Components — Consolidated from inline Code Modules
   Extracted: 2026-03-03
   Source pages: Home (8547), About (8549)
   ========================================================== */

/* ----------------------------------------------------------
   1. ANIMATE WORDS (Hero rotating text)
   Used on: Home hero, About hero
   Scoped per .hero-text container for multi-instance support
   ---------------------------------------------------------- */
.animate-words {
  display: inline-block;
  color: white;
  transform: skewX(0deg);
  transition: color 0.6s ease, transform 0.6s ease;
}

.animate-words.active {
  color: var(--accent);
  transform: skewX(-8deg);
}

/* ----------------------------------------------------------
   2. TMJ BANNER (Stats bar with logo)
   Used on: Home, About (below hero)
   ---------------------------------------------------------- */
.tmj-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 60px);
  width: 100% !important;
  box-sizing: border-box;
}

.tmj-banner-logo {
  flex-shrink: 0;
}

.tmj-banner-logo img {
  height: clamp(28px, 3.5vw, 65px);
  width: auto;
  display: block;
}

.tmj-banner-stats {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 60px);
  flex-wrap: nowrap;
  flex: 1;
}

.tmj-banner-stat {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.tmj-banner-icon {
  flex-shrink: 0;
  display: flex;
}

.tmj-banner-icon svg {
  width: clamp(18px, 2.2vw, 40px);
  height: clamp(18px, 2.2vw, 40px);
}

.tmj-banner-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: "Cormorant Garamond", sans-serif !important;
}

.tmj-banner-big {
  color: #e8913a;
  font-size: clamp(10px, 1.5vw, 28px);
  font-weight: 700;
  line-height: 1.15;
}

.tmj-banner-small {
  color: #ffffff;
  font-size: clamp(5px, 0.65vw, 12px);
  font-weight: 600;
  letter-spacing: clamp(0.3px, 0.08vw, 1.5px);
  text-transform: uppercase;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .tmj-banner {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 2vw, 16px);
  }
  .tmj-banner-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 3vw, 20px);
  }
}

/* ----------------------------------------------------------
   3. LOGO CAROUSEL (Affiliations scrolling bar)
   Used on: Home
   Multi-instance: scoped via .ac-logo-carousel class
   ---------------------------------------------------------- */
.ac-logo-carousel {
  --ac-carousel-speed: 30s;
  --ac-logo-gap: 3rem;
  --ac-fade-width: 120px;
  --ac-logo-height: auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--ac-fade-width), black calc(100% - var(--ac-fade-width)), black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black var(--ac-fade-width), black calc(100% - var(--ac-fade-width)), black 100%);
}

.ac-logo-carousel::before,
.ac-logo-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ac-fade-width);
  z-index: 2;
  pointer-events: none;
}

.ac-logo-track {
  display: flex;
  align-items: center;
  gap: var(--ac-logo-gap);
  width: max-content;
  animation: ac-scroll var(--ac-carousel-speed) linear infinite;
}

.ac-logo-track:hover {
  animation-play-state: paused;
}

.ac-logo-item {
  flex-shrink: 0;
  height: var(--ac-logo-height);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%);
}

.ac-logo-item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.ac-logo-item img {
  height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

@keyframes ac-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------
   4. SYMPTOM CARDS (Image cards grid)
   Used on: Home, About
   ---------------------------------------------------------- */
.symptom-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.symptom-card {
  position: relative;
  background: var(--off-white);
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  aspect-ratio: 3 / 4;
  display: block;
  transition: all 0.4s ease;
}

.symptom-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(21, 59, 55, 0.15);
}

.symptom-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.symptom-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  transition: transform 0.5s ease;
}

.symptom-card:hover .symptom-card-image img {
  transform: scale(1.05);
}

.symptom-card-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--light);
  line-height: 1.3;
  z-index: 2;
  transition: all 0.4s ease;
}

.symptom-card:hover .symptom-card-title {
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--mid);
}

@media (max-width: 1024px) {
  .symptom-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .symptom-cards-grid {
    grid-template-columns: 1fr;
    max-width: 350px;
    margin: 0 auto;
  }

  .symptom-card-title {
    font-size: 1.35rem;
  }

  .symptom-card:hover .symptom-card-title {
    font-size: 1.5rem;
  }
}

/* ===== Content float image (symptom/service page body images) ===== */
/* Desktop + iPad: float right, half width, capped at 500px */
.tmj-content-img{float:right;width:50%;max-width:500px;height:auto;margin:6px 0 24px 32px;border-radius:8px;}
/* Phone: full width, centered, no float */
@media (max-width:767px){
  .tmj-content-img{float:none;width:100%;max-width:100%;margin:0 auto 20px;display:block;}
}

/* ===== FAQ Accordion (.ac-accordion) — site-wide FAQ pattern =====
   Colors mapped to theme palette (functions.php global_color_pallette). */
.ac-accordion {
  --ac-acc-bg: var(--color-bg, #ffffff);
  --ac-acc-border: var(--color-border, rgba(15, 23, 42, 0.08));
  --ac-acc-border-hover: rgba(21, 59, 55, 0.18);
  --ac-acc-text: var(--color-dark, #0f172a);
  --ac-acc-text-muted: var(--color-text, #475569);
  --ac-acc-accent: var(--color-accent, #3a8780);
  --ac-acc-accent-soft: rgba(58, 135, 128, 0.10);
  --ac-acc-radius: 14px;
  --ac-acc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ac-acc-shadow-open: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --ac-acc-transition: 320ms cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  font-family: inherit;
}

/* Alignment modifiers — add alongside .ac-accordion.
   .left is applied to blog-post & symptom-page content; service pages stay centered. */
.ac-accordion.left   { margin: 0 auto 0 0; }
.ac-accordion.center { margin: 0 auto; }
.ac-accordion.right  { margin: 0 0 0 auto; }

.ac-accordion-item {
  background: var(--ac-acc-bg);
  border: 1px solid var(--ac-acc-border);
  border-radius: var(--ac-acc-radius);
  box-shadow: var(--ac-acc-shadow);
  overflow: hidden;
  transition: border-color var(--ac-acc-transition), box-shadow var(--ac-acc-transition), transform var(--ac-acc-transition);
}

.ac-accordion-item:hover { border-color: var(--ac-acc-border-hover); }

.ac-accordion-item.is-open {
  border-color: var(--ac-acc-accent);
  box-shadow: var(--ac-acc-shadow-open);
}

.ac-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 26px;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ac-acc-text);
  transition: background-color var(--ac-acc-transition), color var(--ac-acc-transition);
}

.ac-accordion-trigger:hover { background-color: var(--ac-acc-accent-soft); }
.ac-accordion-trigger:focus-visible { outline: 2px solid var(--ac-acc-accent); outline-offset: -2px; }

.ac-accordion-title {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  flex: 1;
}

/* Plus / minus icon built in CSS — no font dependency */
.ac-accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ac-acc-accent-soft);
  transition: background-color var(--ac-acc-transition), transform var(--ac-acc-transition);
}

.ac-accordion-icon::before,
.ac-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--ac-acc-accent);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--ac-acc-transition), opacity var(--ac-acc-transition);
}

.ac-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.ac-accordion-item.is-open .ac-accordion-icon {
  background: var(--ac-acc-accent);
  transform: rotate(180deg);
}

.ac-accordion-item.is-open .ac-accordion-icon::before,
.ac-accordion-item.is-open .ac-accordion-icon::after { background: #ffffff; }

.ac-accordion-item.is-open .ac-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Smooth height animation via grid trick — no JS measurement */
.ac-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ac-acc-transition);
}

.ac-accordion-item.is-open .ac-accordion-content { grid-template-rows: 1fr; }

.ac-accordion-content-inner {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 0;
  transition: padding-bottom var(--ac-acc-transition);
}
/* Bottom padding appears only once expanded, and transitions in */
.ac-accordion-item.is-open .ac-accordion-content-inner { padding-bottom: 24px; }

.ac-accordion-content-inner p {
  margin: 0;
  padding: 0 26px;
  color: var(--ac-acc-text-muted);
  font-size: 16px;
  line-height: 1.65;
}
.ac-accordion-content-inner p + p { margin-top: 12px; }

@media (max-width: 600px) {
  .ac-accordion-trigger { padding: 18px 20px; gap: 16px; }
  .ac-accordion-content-inner p { padding: 0 20px; }
  .ac-accordion-item.is-open .ac-accordion-content-inner { padding-bottom: 20px; }
  .ac-accordion-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-accordion-item,
  .ac-accordion-trigger,
  .ac-accordion-icon,
  .ac-accordion-icon::before,
  .ac-accordion-icon::after,
  .ac-accordion-content { transition: none !important; }
}

/* Sub-headings (H3/H5) inside .info-content blocks — serif sub-header,
   so they read as intentional section labels (not tiny sans-serif). */
.info-content .info-subtitle{
  font-family: "Cormorant Garamond", serif;
  margin: 28px 0 12px;
  font-size: 1.45rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .005em;
}
.info-content .info-subtitle:first-child{ margin-top: 0; }
/* Slightly smaller inside the narrower comparison columns */
.ac-compare-col .info-subtitle{ font-size: 1.2rem; margin-top: 24px; }

/* ===== Service cards (.ac-cards) — replaces keyword-stuffed service lists ===== */
.ac-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin:1.25rem 0 1.75rem;
}
.ac-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px;
  background:var(--color-gray-light,#f8f9fa);
  border:1px solid var(--color-border,#e0e6eb);
  border-radius:12px;
}
.ac-card-icon{ width:16px; height:16px; flex:0 0 auto; margin-top:5px; position:relative; }
.ac-card-icon::before{ content:""; position:absolute; inset:0; background:var(--accent,#3a8780); transform:rotate(45deg); }
.ac-card h4{ margin:0 0 3px; font-size:1rem; font-weight:600; line-height:1.3; }
.ac-card p{ margin:0; font-size:.82rem; line-height:1.5; color:var(--text-muted-light,#5a6b6a); }

/* ===== Comparison (.ac-compare) — two columns, stacks on mobile ===== */
.ac-compare{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:1.75rem 0; width:100%;
  border:1px solid var(--color-border,#e0e6eb);
  border-radius:16px; overflow:hidden;
  background:var(--color-bg,#fff);
}
.ac-compare-col{ padding:30px 32px; }
.ac-compare-col + .ac-compare-col{ border-left:1px solid var(--color-border,#e0e6eb); }
.ac-compare-col .info-title{ font-size:clamp(1.45rem,2.4vw,1.95rem); margin-bottom:1rem; }
.ac-compare-col .ac-cards{ grid-template-columns:1fr; gap:10px; }
@media (max-width:860px){
  .ac-compare{ grid-template-columns:1fr; }
  .ac-compare-col + .ac-compare-col{ border-left:none; border-top:1px solid var(--color-border,#e0e6eb); }
}

/* Title-only cards: no gap beneath the title */
.ac-card h4:last-child{ margin-bottom:0; }

/* ===== Team / bios (About page) ===== */
.ac-bio{ display:grid; grid-template-columns:300px 1fr; gap:2.5rem; align-items:start; margin:0 0 1.5rem; }
.ac-bio.rev .ac-bio-photo{ order:2; }
.ac-bio-photo img{ width:100%; border-radius:16px; display:block; box-shadow:0 10px 30px -12px rgba(15,23,42,.18); }
.ac-bio-role{ display:inline-block; color:var(--accent,#3a8780); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:600; margin:.25rem 0 1rem; }
@media (max-width:820px){
  .ac-bio,.ac-bio.rev{ grid-template-columns:1fr; gap:1.25rem; }
  .ac-bio.rev .ac-bio-photo{ order:0; }
  .ac-bio-photo img{ max-width:320px; }
}
.ac-team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin:1.25rem 0; }
.ac-team-card{ background:var(--color-bg,#fff); border:1px solid var(--color-border,#e0e6eb); border-radius:16px; overflow:hidden; }
.ac-team-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.ac-team-card-body{ padding:20px 22px; }
.ac-team-card-body h4{ margin:0 0 2px; font-family:"Cormorant Garamond",serif; font-size:1.4rem; font-weight:600; }
.ac-team-role{ display:block; color:var(--accent,#3a8780); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; margin-bottom:.75rem; }
.ac-team-card-body p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--color-text,#475569); }

/* Dark-section text overrides (when section-dark wraps content on a dark Divi section bg) */
.section-dark .section-title{ color: var(--text-light, #ffffff); }
.section-dark{ color: var(--text-light, #ffffff); }

/* Text-color-only modifier: use on inner content when section bg is light.
   Mirrors .section-dark — no background, just sets readable text color. */
.section-white{ color: var(--color-dark, #153b37); }
.section-white .section-title{ color: var(--color-dark, #153b37); }
.section-white .section-subtitle{ color: var(--text-muted-dark, #475569); }

/* ── Tab-component hover fix (ac-ofp Adults/Children + svc-tabs) ──────────────
   Non-active tabs kept a light background on hover but their text could inherit
   a light colour in some section contexts → white-on-light. Force a meshing
   hover: dark text on the subtle light hover background. */
.ac-ofp__tab:not(.ac-ofp__tab--active):hover,
.ac-ofp__tab:not(.ac-ofp__tab--active):hover i { color: var(--theme-main, #153b37) !important; }
.svc-tabs .tab-btn:not(.active):hover { background: #eef4f3 !important; color: var(--color-dark, #153b37) !important; }

/* ==================================================================
   TEAM CARDS — READ MORE  (2026-08-07)
   Bios vary from 3 to 20 lines, which left short cards padded with
   dead space next to very tall ones. The clamp is applied by JS
   (initTeamBios, tmj-components.js) and ONLY to cards whose text
   actually overflows: .has-toggle carries the clamp, .is-expanded
   releases it. With JS off no class is ever added, so the full bio
   renders — the component degrades to exactly its old behaviour.
   ================================================================== */
.ac-team-card{ display:flex; flex-direction:column; }
.ac-team-card-body{ display:flex; flex-direction:column; flex:1 1 auto; }

.ac-team-card.has-toggle .ac-team-bio{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
}
.ac-team-card.has-toggle.is-expanded .ac-team-bio{
  display:block;
  -webkit-line-clamp:none;
  overflow:visible;
}

/* margin-top:auto pins the toggle to the bottom of the card so the
   buttons line up across a row of unequal-height grid items. */
.ac-team-more{
  align-self:flex-start;
  margin-top:auto;
  padding:.9rem 0 0;
  background:none;
  border:0;
  font-family:inherit;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dark,#153b37);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:color .2s ease;
}
.ac-team-more[hidden]{ display:none; }
.ac-team-more:hover,
.ac-team-more:focus-visible{ color:var(--accent,#e8a087); }

.ac-team-more::after{
  content:"";
  width:.4rem;
  height:.4rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-25%) rotate(45deg);
  transition:transform .2s ease;
}
.ac-team-card.is-expanded .ac-team-more::after{
  transform:translateY(15%) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce){
  .ac-team-more,
  .ac-team-more::after{ transition:none; }
}