/* ========================================================================
   WebPro360 — Vertical page components (dental, legal)
   Loaded per-page alongside /assets/colors_and_type.css on light-surface
   vertical pages. site.css (dark theme) still styles the shared header,
   footer, and booking modal; everything inside #main on these pages is
   token-driven via the --wp-* system.
   ======================================================================== */

/* Base: light-surface pages set their own ink. Dark sections inside #main
   declare explicit light text; everything else inherits dark ink here so
   nothing falls back to the dark theme's light body color. */
#main { color: var(--wp-ink-900); font-family: var(--font-sans); }

/* Nav legibility: the shared fixed nav is transparent with light links,
   designed for the dark homepage. Over these light heroes it gets a solid
   navy surface at rest (scrolled state in site.css already matches). */
.nav { background: rgba(6, 16, 31, 0.92); backdrop-filter: blur(10px); }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.wp-btn { transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.wp-btn-primary { background: var(--wp-navy-900); color: var(--wp-ink-000); }
.wp-btn-primary:hover { background: var(--wp-navy-800); }
.wp-btn-amber { background: var(--wp-amber-500); color: var(--wp-navy-950); box-shadow: var(--sh-inner); }
.wp-btn-amber:hover { background: var(--wp-amber-400); }
.wp-btn-outlineDark { background: transparent; color: var(--wp-ink-000); border-color: rgba(255,255,255,0.25) !important; }
.wp-btn-outlineDark:hover { border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.06); }
.wp-phone-cta:hover { background: var(--wp-ink-050) !important; }
.wp-btn-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-standard); }
.wp-btn:hover .wp-btn-arrow, .wp-pressable:hover .wp-btn-arrow { transform: translateX(2px); }
.wp-pressable:active { transform: translateY(1px); }
.wp-pressable:focus-visible, .wp-faq-card summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(77, 212, 220, 0.7); border-radius: var(--r-md); }

/* ─── Cards ────────────────────────────────────────────────────────────── */
.wp-card { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.wp-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* ─── FAQ accordion ────────────────────────────────────────────────────── */
.wp-faq-card { background: var(--wp-ink-000); border: 1px solid var(--wp-ink-200); border-radius: var(--r-md); box-shadow: var(--sh-xs); }
.wp-faq-card summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--wp-navy-900); font-family: var(--font-sans); }
.wp-faq-card summary::-webkit-details-marker { display: none; }
.wp-faq-card summary::after { content: "+"; font-family: var(--font-mono); font-weight: 500; font-size: 20px; color: var(--wp-teal-600); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-standard); }
.wp-faq-card[open] summary::after { transform: rotate(45deg); }
.wp-faq-body { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--wp-ink-600); max-width: 72ch; }

/* ─── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wp-card, .wp-btn, .wp-btn-arrow, .wp-pressable, .wp-faq-card summary::after { transition: none !important; }
  .wp-card:hover { transform: none; }
}

/* ─── Responsive collapse for data-wp-* grids ──────────────────────────── */
@media (max-width: 980px) {
  [data-wp-hero-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-wp-services-grid] { grid-template-columns: 1fr !important; }
  [data-wp-3col] { grid-template-columns: 1fr 1fr !important; }
  [data-wp-4col] { grid-template-columns: 1fr 1fr !important; }
  [data-wp-4col] > div { border-right: 0 !important; border-bottom: 1px solid var(--wp-ink-200); }
  [data-wp-cta-band] { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  [data-wp-2col] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-wp-3col], [data-wp-4col] { grid-template-columns: 1fr !important; }
  [data-wp-hero-stats] { gap: 20px !important; }
  [data-wp-hero-stats] [data-wp-divider] { display: none; }
}