/* ==========================================================================
   D'AMICO DENTAL CARE — CEREC SAME-DAY CROWNS & VENEERS (page CSS)
   Site Assets Manager -> Edit Page -> "Page Assets (CSS / JS)" -> CSS
   Compiles to /wp-content/uploads/site-assets/css/pages/cerec.css
   Loads ONLY on /cerec/

   Everything reusable lives in Global CSS under [data-ddc-page]. Only the
   page-unique rules are below, all scoped to [data-ddc-page="cerec"].
   ========================================================================== */

/* ── Section rhythm ─────────────────────────────────────────────────────── */
[data-ddc-page="cerec"] .ddc-p-cc-lead   { margin-top: 16px; }
[data-ddc-page="cerec"] .ddc-p-cc-copy   { margin-top: 20px; }
[data-ddc-page="cerec"] .ddc-p-cc-outro  { margin-top: 30px; }

/* Intro: text column and the comparison aside stay top-aligned, and the
   aside gets a little breathing room from the copy on desktop. */
[data-ddc-page="cerec"] .ddc-p-cc-intro { align-items: start; }
[data-ddc-page="cerec"] .ddc-p-cc-figure { margin-top: 28px; }
[data-ddc-page="cerec"] .ddc-p-cc-box-note { margin-top: 8px; font-size: .875rem; color: var(--p-warm-gray); }
[data-ddc-page="cerec"] .ddc-p-cc-intro .ddc-cmp { margin-top: 18px; max-width: 100%; }

/* Anchor links inside body copy on this page */
[data-ddc-page="cerec"] .ddc-p-cc-lead a {
  color: var(--p-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--p-border);
  transition: text-decoration-color var(--p-transition);
}
[data-ddc-page="cerec"] .ddc-p-cc-lead a:hover,
[data-ddc-page="cerec"] .ddc-p-cc-lead a:focus-visible { text-decoration-color: var(--p-gold); }

/* ── Video ──────────────────────────────────────────────────────────────── */
[data-ddc-page="cerec"] .ddc-p-cc-video {
  max-width: 820px;
  margin: 48px auto 0;
}

/* ── Second comparison slider ───────────────────────────────────────────── */
[data-ddc-page="cerec"] .ddc-p-cc-cmp2 { margin-top: 44px; }

/* ── Traditional vs. same-day boxes ─────────────────────────────────────── */
[data-ddc-page="cerec"] .ddc-p-cc-compare { margin-top: 40px; }
[data-ddc-page="cerec"] .ddc-p-cc-box-danger-title { color: var(--p-danger); }

/* ── Confidence numbers ─────────────────────────────────────────────────── */
[data-ddc-page="cerec"] .ddc-p-cc-conf { margin-top: 40px; }

/* ── Candidacy grid ─────────────────────────────────────────────────────── */
[data-ddc-page="cerec"] .ddc-p-cc-cand-grid {
  margin-top: 40px;
  grid-template-columns: 1.1fr 1fr;
}

/* ── Final-CTA NAP line ─────────────────────────────────────────────────── */
/* Specificity note: [data-ddc-page] .ddc-p-cta p is (0,2,1), so a plain
   (0,2,0) selector here would lose and margin-top would silently do nothing. */
[data-ddc-page="cerec"] .ddc-p-cta .ddc-p-cc-cta-note {
  margin-top: 28px;
  font-size: .875rem;
  color: rgba(255,255,255,.6);
}

/* FAQ answers can contain a phone link */
[data-ddc-page="cerec"] .ddc-faq__body-inner a {
  color: var(--p-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  [data-ddc-page="cerec"] .ddc-p-cc-cand-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   RESPONSIVE VIDEO EMBED (this page only)
   Moved out of Global CSS: nothing else on the site uses it, so it should
   not be downloaded on every page (master rule 6.1 / 7).
   ========================================================================== */

/* ── Responsive video embed (fixed aspect ratio: no CLS) ────────────────── */
[data-ddc-page] .ddc-p-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--p-radius-md);
  box-shadow: var(--p-shadow-md);
  background: var(--p-navy-deep);
}
[data-ddc-page] .ddc-p-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ==========================================================================
   ASIDE CTA PANEL (this page only)
   Moved out of Global CSS: nothing else on the site uses it, so it should
   not be downloaded on every page (master rule 6.1 / 7).
   ========================================================================== */

/* ── Aside CTA panel ────────────────────────────────────────────────────── */
[data-ddc-page] .ddc-p-aside-cta {
  padding: 36px 30px;
  border-radius: var(--p-radius-lg);
  background: var(--p-navy);
  color: var(--p-white);
}
[data-ddc-page] .ddc-p-aside-cta .ddc-p-h3 { color: var(--p-gold); font-size: 1.4rem; margin-bottom: 14px; }
[data-ddc-page] .ddc-p-aside-cta p { color: rgba(255,255,255,.85); font-size: .9375rem; }
[data-ddc-page] .ddc-p-aside-cta p + p { margin-top: 10px; }
[data-ddc-page] .ddc-p-aside-cta .ddc-p-dot-item { color: rgba(255,255,255,.85); }
[data-ddc-page] .ddc-p-aside-cta .ddc-p-actions { flex-direction: column; align-items: stretch; gap: 10px; }


/* ==========================================================================
   NUMBERED CONFIDENCE CARDS (this page only)
   Moved out of Global CSS: nothing else on the site uses it, so it should
   not be downloaded on every page (master rule 6.1 / 7).
   ========================================================================== */

/* Numbered confidence card (no icon) */
[data-ddc-page] .ddc-p-numcard {
  padding: 28px 24px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-md);
  background: var(--p-white);
  transition: transform var(--p-transition), box-shadow var(--p-transition);
}
[data-ddc-page] .ddc-p-numcard:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-md); }
[data-ddc-page] .ddc-p-numcard__num {
  font-family: var(--p-font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--p-gold);
  line-height: 1;
  margin-bottom: 10px;
}
[data-ddc-page] .ddc-p-numcard__text { font-size: .975rem; color: var(--p-charcoal); font-weight: 500; }