/* ==========================================================
   TMJ Components — shared page components (tmjcentrent.com)
   Ported 2026-09-24 from the Wisconsin build
   (tmjsleepwisconsin.com, themes/tmj-site/components.css, sections 5, 6, 8)
   so the landing-page layout used on /tmj-sleep-evaluation/ renders here.
   Section numbers are kept to stay diffable with Wisconsin.
   Base components (conditions-grid, featured-list, info-features,
   hero-title, section-dark) live in the Customizer CSS; these are
   modifiers and additions on top of them.
   JS for the accordion: components.js.
   ========================================================== */

/* ----------------------------------------------------------
   5. FAQ ACCORDION (.ac-accordion)
   Ported verbatim from the sibling Cleveland build
   (anchor-tmj/assets/css/tmj-components.css, section 3) on 2026-08-31
   so the two sites stay diffable. Site-wide FAQ pattern.

   Token aliases: the ported CSS reads --color-* tokens that Cleveland
   defines globally (tmj-tokens.css) but Wisconsin never has. Left
   unresolved, the accordion falls back to Cleveland's stock teal
   (#3a8780) instead of the brand peach.

   These are deliberately scoped to .ac-accordion rather than :root.
   This site's Customizer CSS also feeds --color-accent into
   --search-ring and --btn-bg for the anchor-simple-search widget;
   those have been unresolved (and therefore inert) site-wide since
   the build, so defining them on :root would silently restyle the
   search field and button. That is a separate fix, not this one.
   ---------------------------------------------------------- */
.ac-accordion {
  --color-accent: var(--accent);
  --color-dark: var(--dark);
  --color-bg: var(--white);
  --color-text: var(--text-muted-dark);
  --color-border: var(--gray-light);
}

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

/* ----------------------------------------------------------
   6. PULL-QUOTE (.ac-pullquote)
   Editorial callout inside .info-content blocks. Added 2026-08-31
   to replace hardcoded inline styles that were living in the
   AirwayZ page's post_content (styling belongs here, not the DB).
   ---------------------------------------------------------- */
.ac-pullquote {
  margin: 30px 0 0;
  padding: 20px 28px;
  border-left: 4px solid var(--accent);
  background: var(--off-white);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--dark);
}

/* On dark sections the block sits on var(--dark) — lift it, don't invert it. */
.info-content.white .ac-pullquote {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-light);
}

@media (max-width: 600px) {
  .ac-pullquote { padding: 16px 20px; margin-top: 24px; }
}

/* ----------------------------------------------------------
   8. LAYOUT MODIFIERS + LEAD FORM CARD
   Added 2026-09-23 for the TMJ ads landing page. These are
   modifiers on the Customizer CSS components (conditions-grid,
   featured-list, info-features, hero-title) — not new components —
   so any page can use them.
   ---------------------------------------------------------- */

/* Column-count modifiers for .conditions-grid (base is 4 columns). Double-class
   selectors on purpose: the Customizer CSS loads later and re-sets
   .conditions-grid / .info-features columns inside its media queries. */
.conditions-grid.conditions-grid--2 { grid-template-columns: repeat(2, 1fr); }
.conditions-grid.conditions-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Numbered variant: a .service-number sits above the title instead of the diamond icon. */
.condition-card .service-number { font-size: 2.6rem; margin-bottom: 0.75rem; }

/* Two-column .featured-list (diamond bullets). */
.featured-list--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3rem;
}
/* In two columns every row needs its rule, including the last one per column. */
.featured-list--2col li:last-child { border-bottom: 1px solid var(--gray-light); padding-bottom: 0.75rem; }
.section-dark .featured-list--2col li:last-child,
.white .featured-list--2col li:last-child { border-bottom-color: rgba(62, 133, 124, 0.2); }

/* Single-column .info-features (base is 2 columns). */
.info-features.info-features--stack { grid-template-columns: 1fr; margin-top: 0; }

/* Smaller hero title for long, sentence-style headlines. */
.hero-title.hero-title--compact { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }

/* Lead form card — the white box that wraps an Anchor CTM form embed. */
.ac-form-card { position: relative; }

/* In-page anchor target that lands clear of the fixed header. Divi's own
   smooth-scroll hijacks #hash links and ignores scroll-margin-top, but it
   scrolls to the target's offset() — so the target itself is shifted up.
   Usage: <span id="book" class="ac-anchor-offset" aria-hidden="true"></span> */
.ac-anchor-offset {
  position: absolute;
  top: -100px;
  left: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}
.ac-form-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
}
.ac-form-card-sub {
  display: block;
  margin: 0.35rem 0 0.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted-dark);
}

/* Small disclaimer / fine print line. */
.fine-print {
  font-size: 0.78rem;
  line-height: 1.6;
  max-width: 820px;
  margin: 3rem auto 0;
  opacity: 0.75;
}

@media (max-width: 980px) {
  .conditions-grid.conditions-grid--2,
  .conditions-grid.conditions-grid--3,
  .featured-list--2col { grid-template-columns: 1fr; }
  .featured-list--2col li:last-child { border-bottom: none; }
}