/* ==========================================================
   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);
}

/* Title sits at the BOTTOM over a green fade (owner 2026-09-11) — white serif type at the
   top of a bright photo was illegible; the fade is on the title's own ::before so it stays
   under the text and scales with the card. */
.symptom-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(21, 59, 55, 0.92) 0%, rgba(21, 59, 55, 0.7) 45%, rgba(21, 59, 55, 0) 100%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  /* White, not --light: that token is the teal #3e857c, and teal serif type over
     these photos disappears (client, 2026-09-02). Same on hover — --mid is a
     darker teal and was worse. */
  color: var(--white);
  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(--white);
}

/* Padding lives on an ID-prefixed rule because tmj-tokens.css / tmj-modules.css reset every
   `#page-container h3` to zero padding, which outranks a plain class. 3.5rem on top is the
   fade's run-in; 1.75rem below keeps the words off the card edge. */
#page-container .symptom-card-title { padding: 3.5rem 1.25rem 1.75rem; }
@media (max-width: 600px) { #page-container .symptom-card-title { padding-bottom: 1.5rem; } }

/* Softened corners — home page only, so any square-cornered instance elsewhere
   is untouched. */
.symptom-cards-grid--soft .symptom-card { border-radius: 14px; }

@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-inline, not the `margin` shorthand: the shorthand also set margin-top:0
     explicitly, which out-specified the zero-specificity flow floors in tmj-spacing.css and
     left the accordion sitting flat against whatever preceded it (measured 0px on
     /for-patients/). Alignment here is purely horizontal — leave block margins to the flow
     system. */
  margin-inline: 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-inline: 0 auto; }
.ac-accordion.center { margin-inline: auto; }
.ac-accordion.right  { margin-inline: auto 0; }

.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: var(--h-sub);
  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:240px 1fr; gap:2.5rem; align-items:start; margin:0 0 2rem; }
.ac-bio.rev .ac-bio-photo{ order:2; }
.ac-bio-photo img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:16px; display:block; box-shadow:0 10px 30px -12px rgba(15,23,42,.18); } /* portrait crop: a 300px-wide column had been rendering each headshot 2000px tall (owner review 2026-09-09) */
.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); }

/* Links inside dark sections were inheriting the global dark link colour (hard to read
   against the dark green bg) — recolor to the accent salmon, excluding the primary/
   secondary buttons which already have their own contrast-safe styling. */
.section-dark a:not(.btn-primary):not(.btn-secondary), .s--dark a:not(.btn-primary):not(.btn-secondary){ color:#e8a087; }

/* 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-readmore-target{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
}
.ac-team-card.has-toggle.is-expanded .ac-readmore-target{
  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,
.ac-bio-long.is-expanded .ac-team-more::after{
  transform:translateY(15%) rotate(-135deg);
}

/* Featured long bio skin (About Us, Dr. Gunnerson). Several <p>s, so
   line-clamp can't be used -- clamp by height and fade the last line.
   Same engine (initReadMore); with JS off the full bio renders. */
.ac-bio-long.has-toggle .ac-bio-long-text{
  max-height:15rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent);
          mask-image:linear-gradient(to bottom,#000 65%,transparent);
}
.ac-bio-long.has-toggle.is-expanded .ac-bio-long-text{
  max-height:none;
  overflow:visible;
  -webkit-mask-image:none;
          mask-image:none;
}
/* Paragraph rhythm for bios whose <p>s carry no class (.ac-bio rows);
   collapses with .info-text's own margin-bottom, so it never doubles. */
.ac-bio-long-text > p + p{ margin-top:1rem; }
.ac-bio-long-text > p:last-child{ margin-bottom:0; }
.ac-bio-long .ac-team-more{ padding-top:.75rem; }

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

/* ============================================================================
   SOCIALS SPLIT  (added 2026-08-21)
   ----------------------------------------------------------------------------
   Socials page: a sticky "Follow Us Online" card rail on the left, the platform
   feeds stacked on the right. Ported from the live tmjsleeputah.com socials
   block — its navy/teal/gold palette is remapped onto the TMJ tokens so the
   card grid belongs to this theme. The per-brand icon colors are kept: they are
   the only color in the block that carries meaning.
   ============================================================================ */
/* minmax(0,…) rather than a bare 40fr/60fr: a grid item defaults to min-width:auto,
   so the feed column would size to its widest content instead of its track. The
   feeds are flex carousels of 320px tiles with overflow-x:auto — with min-width:auto
   the column stretched to ~24 tiles wide and ran off the page instead of scrolling
   inside itself. minmax(0,…) gives the track a definite width so the carousel scrolls. */
.ac-socials-split{
  display:grid;
  grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:48px;
  align-items:stretch;
}

.ac-socials-split > *{ min-width:0; }

/* The rail is NOT the sticky element — it is the full-height track the sticky
   card travels inside. A sticky element gets its travel range from its parent's
   box, so making the grid item itself sticky (with align-items:start, which
   sizes that item to its own content) leaves it nothing to move within and it
   silently behaves as static. Stretching this wrapper to the column height and
   sticking the card inside it is the arrangement that actually moves. */
.ac-socials-rail{
  height:100%;
}

/* Sticks below the fixed header: 52px super-header + 86px nav = 138px. */
.ac-socials-rail__inner{
  position:sticky;
  top:calc(var(--total-header-height, 138px) + 3rem);
  background:var(--white,#ffffff);
  border:1px solid var(--gray-light,#e8eeee);
  border-radius:var(--radius,14px);
  padding:2.5rem 2rem;
  text-align:center;
  box-shadow:0 2px 12px rgba(21,59,55,0.06);
  transition:top .3s ease, max-height .3s ease;
}
/* Past 80px the super-header slides away (tmj-header.js adds .super-hidden to the
   nav), leaving only the 86px nav -- follow it up so no 52px gap opens above the card. */
html:has(.nav-wrapper.super-hidden) .ac-socials-rail__inner{
  top:calc(var(--nav-height, 86px) + 3rem);
}

/* On a short viewport the card is taller than the space under the fixed header,
   so a top-stuck card would hang its last row of icons below the fold with no way
   to reach them. Cap it to the visible strip and let it scroll internally — inert
   whenever the card already fits. overflow here is on the sticky element itself,
   which is safe; only an ANCESTOR's overflow would disable the stickiness. */
@media (min-width:1081px){
  .ac-socials-rail__inner{
    max-height:calc(100vh - var(--total-header-height, 138px) - 3rem);
    overflow-y:auto;
  }
  html:has(.nav-wrapper.super-hidden) .ac-socials-rail__inner{
    max-height:calc(100vh - var(--nav-height, 86px) - 3rem);
  }
}

.ac-socials-rail .section-header{ margin-bottom:2rem; }

.ac-socials-rail__sub{
  margin:1rem 0 0;
  font-size:1rem;
  line-height:1.6;
  color:var(--text-muted-dark,#4a5f5c);
}

.ac-socials-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

.ac-social-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:calc(50% - 8px);
  min-height:118px;
  padding:1rem .5rem;
  overflow:hidden;
  background:var(--off-white,#f8fafa);
  border:1px solid var(--gray-light,#e8eeee);
  border-radius:12px;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}

.ac-social-card::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:3px;
  background:var(--accent,#e8a087);
  transform:scaleX(0);
  transition:transform .3s ease;
}

.ac-social-card:hover,
.ac-social-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 8px 28px rgba(21,59,55,0.12);
}

.ac-social-card:hover::after,
.ac-social-card:focus-visible::after{ transform:scaleX(1); }

.ac-social-card i{
  margin-bottom:.6rem;
  font-size:1.75rem;
  transition:color .3s ease;
}

.ac-social-card span{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--text-muted-dark,#4a5f5c);
}

.ac-social-card:hover span{ color:var(--dark,#153b37); }

/* Brand marks keep their own colors — carried over from the source block. */
.ac-social-card--fb i{ color:#1877f2; }
.ac-social-card--ig i{ color:#e4405f; }
.ac-social-card--tt i{ color:#010101; }
.ac-social-card--az i{ color:#ff9900; }
.ac-social-card--gg i{ color:#4285f4; }
.ac-social-card--yt i{ color:#ff0000; }

/* Feed column — each platform keeps its own heading, left-aligned so the
   headings sit against the rail rather than floating over the feed. */
.ac-socials-feeds > * + *{ margin-top:4rem; }

.ac-socials-feeds .section-header{
  margin-bottom:1.75rem;
  text-align:left;
}

/* Keep the feed widget inside its column no matter how many tiles it renders —
   the carousel already has overflow-x:auto, it just needs a bounded parent. */
.ac-socials-feeds .ssfs-card,
.ac-socials-feeds .ssfs-embed,
.ac-socials-feeds .ssfs-carousel,
.ac-socials-feeds .ssfs-grid{
  max-width:100%;
  min-width:0;
}

@media (max-width:1080px){
  .ac-socials-split{ grid-template-columns:1fr; gap:40px; }
  .ac-socials-rail{ height:auto; }
  .ac-socials-rail__inner{ position:static; }
  .ac-social-card{ width:calc(33.333% - 11px); }
  .ac-socials-feeds .section-header{ text-align:center; }
}

@media (max-width:560px){
  .ac-social-card{ width:calc(50% - 8px); }
}

@media (prefers-reduced-motion: reduce){
  .ac-social-card,
  .ac-social-card::after,
  .ac-social-card i{ transition:none; }
  .ac-social-card:hover,
  .ac-social-card:focus-visible{ transform:none; }
}

/* ---- [call_label] (inc/call-label.php): number on desktop, "Call Now" on phones ---- */
.ac-call-label__mobile { display: none; }
@media (max-width: 767px) {
  .ac-call-label__desk { display: none; }
  .ac-call-label__mobile { display: inline; }
}


/* .info-feature: keep the diamond beside its text on phones (it wrapped above it).
   flex-direction: row is added (not in the brief's original block) because
   tmj-modules.css sets .info-feature { flex-direction: column } at max-width:560px;
   without overriding it here that rule still wins at 375px and the icon stays stacked
   above the text — verified via computed style during Task 2's Step 4 check. */
@media (max-width: 900px) { .info-feature { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; } .info-feature-icon { flex: 0 0 auto; margin-top: 2px; } }

/* Embedded forms (HIPAAtizer iframes on /new-patient-form/) sat flush to the accordion edges —
   text answers pad their own <p>s, an iframe can't. (2026-09-24) */
.ac-accordion-content-inner > .hipaa-form-embed { padding: 1.5rem 2rem 0.5rem; }
@media (max-width: 600px) { .ac-accordion-content-inner > .hipaa-form-embed { padding: 1rem 0.75rem 0.25rem; } }