/* Shared by the five redesign concepts (test sites). Brand: blue #008ACD, green #52B74E, teal #008acd, black borders,
   Lobster for script words, Avenir / Nunito Sans for everything else. Each concept adds its own cN.css on top. */
:root { --b-blue: #008ACD; --b-lime: #52B74E; --b-teal: #008acd; --b-ink: #1c2529; --b-muted: #55656c; --b-sky: #e9f6fb;
  --b-purple: #b2258c; --b-yellow: #e0bf22; --b-orange: #eb212e; --b-green: #52b74e;
  --f-script: "Lobster", cursive; --f-head: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", sans-serif;
  --f-body: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; }

/* the ONLY sign that this is a test: a small yellow numbered dot, top left */
.cx-dot { position: fixed; z-index: 2147483000; left: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: #ffd400; color: #000; border: 2px solid #000; font: 800 13px/20px var(--f-head); text-align: center;
  text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* page basics for the concept pages */
.cx { font-family: var(--f-body); color: var(--b-ink); }
.cx * { box-sizing: border-box; }
.cx img { max-width: 100%; }
.cx .in { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.cx .script { font-family: var(--f-script); font-weight: 400; }
.cx h1, .cx h2, .cx h3, .cx h4 { font-family: var(--f-head); font-weight: 800; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
.cx p { line-height: 1.6; }
.cx a { color: inherit; }
.cx .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* buttons (move on hover: buttons are allowed to) */
.cx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 800 16px/1 var(--f-head); padding: 14px 22px;
  border-radius: 999px; border: 3px solid #000; text-decoration: none; color: #000; background: var(--b-lime); box-shadow: 0 4px 0 #000;
  cursor: pointer; transition: translate .2s, box-shadow .2s, background-color .2s; white-space: nowrap; }
.cx .btn:hover { translate: 0 -2px; box-shadow: 0 6px 0 #000; }
.cx .btn:active { translate: 0 3px; box-shadow: 0 1px 0 #000; }
.cx .btn.white { background: #fff; } .cx .btn.blue { background: var(--b-blue); color: #fff; } .cx .btn.black { background: #000; color: var(--b-lime); }
.cx .btn img { width: 22px; height: 22px; }

/* open-now pill (filled in by cx.js from the real office hours) */
.cx-open { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1.2 var(--f-head); }
.cx-open::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #aaa; flex: none; }
.cx-open.is-open::before { background: #52b74e; box-shadow: 0 0 0 3px rgba(82,183,78,.25); }
.cx-open.is-closed::before { background: #e0533d; }

/* scroll-in fade (only things below the first screen; nothing already on screen fades in) */
@media (prefers-reduced-motion: no-preference) {
  .cx-js .cx-reveal:not(.is-in) { opacity: 0; translate: 0 18px; }
  .cx-js .cx-reveal { transition: opacity .6s ease, translate .6s ease; }
}

/* tabs, chips, sliders */
.cx [data-tabs] [role=tablist] { display: flex; gap: 8px; flex-wrap: wrap; }
.cx [data-panel][hidden] { display: none !important; }
.cx .chip { font: 700 14px/1 var(--f-head); border: 2px solid #000; background: #fff; color: #000; border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background-color .2s, translate .2s; }
.cx .chip:hover { translate: 0 -1px; }
.cx .chip[aria-pressed="true"], .cx .chip[aria-selected="true"] { background: #000; color: var(--b-lime); }
.cx [data-carousel] { position: relative; }
.cx [data-track] { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 12px; }
.cx [data-track]::-webkit-scrollbar { display: none; }
.cx [data-track] > * { scroll-snap-align: start; flex: none; }
.cx .arrow { width: 46px; height: 46px; border-radius: 50%; background: var(--b-lime); border: 3px solid #000; box-shadow: 0 3px 0 #000; display: grid; place-items: center;
  cursor: pointer; font: 900 20px/1 var(--f-head); color: #000; transition: translate .2s; }
.cx .arrow:hover { translate: 0 -2px; }
.cx [data-hide-empty][hidden] { display: none; }

/* the site's own team/dentist lists, made neutral so each concept can style them */
.cx ul.h-dlist, .cx ul.d-team-list { list-style: none; padding: 0; margin: 0; }
.cx .h-dlist li a, .cx .d-team-list li a { text-decoration: none; color: inherit; }

/* mobile nav drawer */
.cx-menu-btn { display: none; }
@media (max-width: 900px) {
  .cx-menu-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 3px solid #000; background: var(--b-lime); cursor: pointer; }
  .cx-menu-btn span, .cx-menu-btn span::before, .cx-menu-btn span::after { display: block; width: 20px; height: 3px; background: #000; border-radius: 2px; position: relative; content: ""; }
  .cx-menu-btn span::before { position: absolute; top: -7px; } .cx-menu-btn span::after { position: absolute; top: 7px; }
}

/* the site's reviews box and dentist bios, reset so each concept can style them (the originals use Wix's fixed sizes) */
.cx-page .h-reviews { background: none; padding: 0; }
.cx-page .h-reviews .w { height: auto !important; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.cx-page .h-reviews ul { width: auto !important; min-height: 0 !important; margin: 0 !important; background: none; padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.cx-page .h-reviews li { color: inherit; }
.cx-page .h-reviews .h-who { display: flex; gap: 10px; align-items: center; margin: 0; font-family: var(--f-head); }
.cx-page .h-reviews .h-who b { display: block; font-size: 16px; } .cx-page .h-reviews time { font-size: 13px; opacity: .75; }
.cx-page .h-reviews .h-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 17px/1 var(--f-head); background: var(--b-blue); color: #fff; flex: none; }
.cx-page .h-reviews blockquote { font: 400 16px/1.6 var(--f-body); margin: 12px 0 0; padding: 0; background: none; color: inherit; border-radius: 0; }
.cx-page .h-reviews blockquote::before { display: none; }
.cx-page .d-bio .w { height: auto !important; max-width: 1180px; margin: 0 auto; padding: 0 22px; position: static; }
.cx-page .d-bio .w > * { position: static !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; }
.cx-page .d-bio .d-text p { font: 400 16.5px/1.65 var(--f-body); margin: 0 0 12px; }
/* small inline icons (Tabler line icons) */
.cx-ic { display: inline-grid; place-items: center; flex: none; }
.cx-ic svg { width: 1.3em; height: 1.3em; stroke: currentColor; stroke-width: 2.2; }

/* Never let text run off the page (Oct 25): grid/flex children may shrink, long words wrap */
.cx .in > *, .cx-split > *, .cx-hero-grid > *, .cx-cards > * { min-width: 0; }
.cx p, .cx li, .cx h1, .cx h2, .cx h3, .cx summary, .cx a { overflow-wrap: break-word; }
