/**
 * service-additions.css — supplemental new-generation rules used ONLY by the
 * rebuilt self-contained service pages (template-service-block.php).
 *
 * These class names (.wc-checklist, .content-white, .accordion-list,
 * .section--muted) do NOT appear in the old-generation markup of the front page
 * or the rest of the legacy site, so this file is purely additive and cannot
 * affect those pages. It exists so the service pages get their checklist +
 * dark-CTA text + FAQ-accordion styling WITHOUT swapping the site's
 * framework.css/custom.css generation.
 *
 * Values use --accent-color / --white-color / --primary-color /
 * --secondary-color / --dark-divider-color, which inc/colors.php injects into
 * :root at runtime (Theme Colors), so no tokens.css dependency is required.
 * Source: anchor-dental-gsaz custom.css (.wc-checklist) + primitives.css
 * (.content-white, .accordion-list, .section--muted).
 */

/* Service prose checklist — check-icon list (fa-circle-check). */
.wc-checklist { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 12px; }
.wc-checklist li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; }
.wc-checklist li i { color: var(--accent-color, #225aa1); font-size: 1.1rem; margin-top: 3px; flex: 0 0 auto; }

/* White text on dark surfaces (service-page CTA section: .cta-text-col.content-white). */
.content-white,
.content-white :is(.eyebrow-text,.content-header,h1,h2,h3,h4,h5,h6,p,li,a:not(.btn-default)) { color: var(--white-color); }
.content-white .eyebrow-text::before { filter: brightness(0) invert(1); }

/* ─────────────────────────────────────────────────────────────────────────
   Service-page FAQ accordion (.accordion-list) + muted section background.
   Ported verbatim from anchor-dental-gsaz primitives.css so the service-page
   Q&A matches the fleet. New-gen only (.accordion-list / .section--muted appear
   nowhere in old-gen markup) → purely additive. All vars below are injected by
   inc/colors.php at runtime.
   ───────────────────────────────────────────────────────────────────────── */
.section--muted { background-color: var(--secondary-color); }

.accordion-list .accordion-item { border-radius: 20px; margin-bottom: 25px; padding: 0; transition: all 0.3s ease-in-out; overflow: hidden; }
.accordion-list .accordion-item:last-child { margin-bottom: 0; }
.accordion-list .accordion-header .accordion-button { font-size: 20px; font-weight: 600; line-height: 1.2em; background-color: var(--accent-color); color: var(--white-color); padding: 20px 50px 20px 20px; transition: all 0.3s ease-in-out; }
.accordion-list .accordion-button:not(.collapsed) { background-color: var(--accent-color); color: var(--white-color); border-bottom: 1px solid var(--dark-divider-color); }
.accordion-list .accordion-header .accordion-button.collapsed { background-color: var(--white-color); color: var(--primary-color); }
.accordion-list .accordion-item .accordion-button::after,
.accordion-list .accordion-item .accordion-button.collapsed::after { content: '\f068'; font-family: "Font Awesome 6 Free"; position: absolute; right: 20px; top: 50%; bottom: auto; transform: translate(0px, -10px); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; width: 20px; height: 20px; padding: 5px; color: var(--white-color); }
.accordion-list .accordion-item .accordion-button.collapsed::after { content: '\f067'; color: var(--primary-color); }
.accordion-list .accordion-item .accordion-body { background-color: var(--accent-color); padding: 20px 50px 20px 20px; }
.accordion-list .accordion-item .accordion-body p { color: var(--white-color); margin: 0; }

/* Inside a service page, the FAQ wrapper drops its .section padding + muted
   background so the accordion sits tight under the heading (matches GSAZ).
   Source: anchor-dental-gsaz custom.css (lines 803-804). */
.service-single-content .our-faqs.page-service-faqs { padding: 0; background-color: transparent; }
.service-single-content .our-faqs.page-service-faqs .accordion-list { margin-top: 0; }

/* Collapsed FAQ items get a faint tinted card (vs pure white) so they read as
   cards against the page — GSAZ parity (framework.css .our-faqs.page-about-faqs
   collapsed rule). */
.our-faqs.page-service-faqs .accordion-list .accordion-header .accordion-button.collapsed { background-color: var(--secondary-color); }

/* ─────────────────────────────────────────────────────────────────────────
   Service-page header banner background (radial primary-tint over the header
   photo). --bg-service-header is NOT defined here: tokens.css holds its default
   and Appearance → Theme Images (ac_theme_images) overrides it at runtime
   (currently surpriseheader-copy.avif). The redundant local :root definition
   that used to sit here was removed 2026-07-17 as part of the framework.css
   asset-tokenization (Phase 2) — single source of truth. The radial overlay
   uses var(--primary-rgb), injected into :root by inc/colors.php from the
   Primary Theme Color, so the tint tracks the palette automatically.
   ───────────────────────────────────────────────────────────────────────── */
body.page-template-template-service .page-header,
body.page-template-template-service-block .page-header {
  background-image:
    radial-gradient(ellipse at center,
      rgba(var(--primary-rgb),0.7) 0%, rgba(var(--primary-rgb),0.9) 100%),
    var(--bg-service-header);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =======================================================================
   SERVICE CARDS (ac-card) — reusable grid; desktop 3-up, mobile single-open
   animated accordion (JS in anchor-nav.js sets max-height to scrollHeight).
   ======================================================================= */
.ac-services-wrap { padding: 80px 0; }
.ac-services-wrap .section-title { margin-bottom: 40px; }
/* Centered flex grid: aims for 3 per row, wraps to fewer below --ac-card-min, and
   centers any short final row. flex-grow:0 means a lone/orphan card keeps the same
   width as the cards above it instead of stretching to fill the row. */
.ac-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.ac-services > .ac-card { flex: 0 1 calc((100% - 2 * 26px) / 3); min-width: var(--ac-card-min, 280px); }
.ac-card { position: relative; background: var(--white-color, #fff); border: 1px solid var(--divider-color, #e3eef7); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px rgba(var(--primary-rgb, 14, 51, 84), .06); }
.ac-card__summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--primary-color, #0e3354); cursor: pointer; }
.ac-card__arrow { flex: 0 0 auto; color: var(--accent-color, #2d95eb); font-size: 16px; line-height: 1; transition: transform .35s ease; }
.ac-card__arrow::before { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: block; } /* fa-chevron-down — a real glyph centers properly (the old rotated-border square sat low) */
.ac-card__panel { padding: 0 24px 24px; }
.ac-card__media { display: block; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.ac-card__media img { display: block; width: 100%; height: 200px; object-fit: cover; }
.ac-card__desc { margin: 0 0 16px; color: var(--text-color, #50607a); line-height: 1.6; }
.ac-card__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-color, #2d95eb); text-decoration: none; }
.ac-card__link:hover { gap: 12px; }

/* Card variant: a list of service links instead of media/desc — e.g. a category
   overview card ("Family Dentistry" + its services listed underneath). */
.ac-card--list .ac-card__media,
.ac-card--list .ac-card__desc { display: none; }
.ac-card--list .ac-card__links { list-style: none; margin: 0; padding: 0; }
.ac-card--list .ac-card__links li { margin: 0 0 10px; }
.ac-card--list .ac-card__links a { color: var(--accent-color); font-weight: 600; text-decoration: none; }
.ac-card--list .ac-card__links a:hover { text-decoration: underline; }

/* Grid view (phones excluded — tablet/iPad and up): full cards shown, no toggle.
   The flex grid above handles 3-up → 2-up → 1-up via --ac-card-min. */
@media (min-width: 576px) {
  .ac-card__summary { cursor: default; }
  .ac-card__arrow { display: none; }
  .ac-card__panel { display: block; max-height: none; }
}

/* Phone only (<=575px, so iPad keeps the grid): single-open animated accordion,
   driven by anchor-nav.js (.is-open + inline max-height). Always a straight column.
   Collapsed cards zero BOTH max-height and padding so no image strip can leak. */
@media (max-width: 575px) {
  .ac-services { flex-direction: column; gap: 14px; }
  .ac-services > .ac-card { flex: 1 1 auto; min-width: 0; }
  .ac-card__panel { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
                    transition: max-height .4s ease, padding .35s ease; }
  .ac-card.is-open .ac-card__panel { padding-top: 16px; padding-bottom: 24px; }
  .ac-card.is-open .ac-card__arrow { transform: rotate(180deg); }
}