/* =========================================================
   S&C Dental — Optimized Customizer CSS
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --brand-teal: #8bcbc8;
  --brand-teal-dark: #3a7d78;
  --brand-plum: #3c2e3d;
  --brand-accent: #fdae84;
  --text-body: #595959;
  --link: #fdae84;
  --link-hover: #3c2e3d;
}

/* ---------- Global font size increase (15%) ---------- */
html {
  font-size: 115%;
}

/* ---------- Safe global trims ---------- */
img, .wp-block-image img { box-shadow: none !important; }
footer a { text-decoration: none !important; }
.footer a { color: #fff; font-family: "Open Sans", sans-serif; font-weight: 600; }
.footer a:not(.btn):hover { color: var(--brand-plum) !important; }

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
textarea {
  font-family: "Open Sans", sans-serif;
}

textarea { resize: none !important; }

/* ---------- Header / Nav ---------- */
.mobile__nav--utility { display: none; }
.mobile__nav-header { background-color: #fff; }
#mobile-navigation { background-color: var(--brand-teal) !important; }
.header__stacked-nav { background-color: var(--brand-teal); }

/* MAIN NAV */
.header__nav a,
.mobile__nav .menu a {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: .85em;
}

.mobile__nav .menu a {
  color: #fff;
  text-transform: uppercase;
}

.header__nav li { margin: 0 0 0 5px; }

.header__nav a:hover,
.current-menu-item > a,
.mobile__nav .menu a:hover {
  color: #644e66 !important;
}

/* UTILITY NAV */
.header__utility a {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.2em;
}

.header__utility a .icon {
  transition: all .2s ease-in-out;
}

.header__utility a:hover .icon {
  fill: var(--brand-accent);
}

#menu-item-447 {
  width: 100%;
}

#menu-item-447::before {
  background-image: url(/wp-content/uploads/2020/09/location-icon.png);
  float: left;
  height: 20px;
  width: 20px;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  transition: all .2s ease-in-out;
}

#menu-item-447:hover::before {
  opacity: .5;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: var(--brand-plum);
}

.hamburger:hover .hamburger-inner,
.hamburger:hover .hamburger-inner::before,
.hamburger:hover .hamburger-inner::after {
  background-color: var(--brand-accent);
}

.header__call,
.header__call:hover {
  transition: none;
  background: #aa4604;
}

.sub-menu--toggle:hover {
  background-color: #fff !important;
}

/* ---------- Hero ---------- */

.hero__content h5 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
}

.module--hero h1,
.module--hero .hdg--1,
.page__header .hdg {
  font-weight: 700;
  margin-top: 0;
}

/* ---------- HERO FIX ---------- */

.hero__panel {
  min-height: 620px !important;
  padding-top: 120px !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;

  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.hdg {
  padding-top: 0 !important;
}

.hero__content {
  position: relative;
  z-index: 20;
}

.hero__panel::before,
.hero-panel-0::before {
  opacity: 1 !important;
  visibility: visible !important;
}

img[data-nitro-lazy],
img[data-src],
.hero img,
.module--hero img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------- Buttons & CTAs ---------- */

.btn,
.form__gform--dark input[type="submit"].gform_button {
  background-color: var(--brand-accent) !important;
  border: none;
  font-weight: 700;
  font-size: 1em;
}

.btn:hover,
.form__gform--dark input[type="submit"].gform_button:hover {
  background-color: var(--brand-plum) !important;
}

.special-offer__button .btn,
.footer .btn,
.rl-cta .btn {
  background-color: var(--brand-plum) !important;
}

.special-offer__button .btn:hover,
.footer .btn:hover,
.rl-cta .btn:hover {
  background-color: var(--brand-accent) !important;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5 {
  color: var(--brand-teal);
  font-weight: 700;
}

h6 {
  color: var(--brand-teal);
  font-weight: 600;
}

p, li {
  color: var(--text-body);
}

/* ---------- CLS Fixes ---------- */

.hero-image,
[class*="hero"] img {
  aspect-ratio: 1440 / 500;
  width: 100%;
  height: auto;
  object-fit: cover;
}

iframe[src*="google.com/maps"] {
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 300px;
}

img[data-nitro-lazy],
img[data-src] {
  min-height: 50px;
  background-color: #f5f5f5;
}

/* ---------- Responsive ---------- */

@media (max-width: 992px) {

  .hero__panel {
    min-height: 480px !important;
    padding-top: 100px !important;
  }

  .hdg {
    padding-top: 0 !important;
  }

  .hero__panel.hero__panel--left.hero__panel--parallax.hero-panel-0.text--light {
    background-position: center center !important;
  }
}

@media screen and (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  #chat-widget-container,
  .chat-widget-wrapper,
  [id*="chat"],
  [class*="virtual-assistant"] {
    max-height: 100vh !important;
    overflow: hidden !important;
  }
}

/* Fix: dropdown submenus rendering behind homepage hero text */

#masthead {
    position: relative;
    z-index: 100;
}

/* ---------- Service card body text contrast fix (2026-07-22) ----------
   Homepage service cards are <a class="service__item"> links, so the theme's
   bronze link color #cd7f32 (~2.8:1 on white = WCAG AA fail) bled onto the
   card descriptions. Restore the site body neutral (#595959 = ~7:1, AA+AAA).
   Higher-specificity + !important needed to beat the theme's inline link rule. */
.service__item .service__content,
.service__item .service__content p {
  color: var(--text-body) !important;
}

/* ---------- Service icon size restore (2026-07-22) ----------
   Homepage service-card icons had been shrunk to 50px (regressed from their
   original ~100px, confirmed vs 2021 Wayback capture). The teal double-ring
   circle is baked into each icon SVG (viewBox 0 0 60 60), so restoring the
   img to 100px restores the full ringed look. transparent bg prevents the
   lazy-load gray (#f5f5f5) placeholder showing through the transparent SVG. */
.service__image img {
  width: 100px !important;
  height: 100px !important;
  background: transparent !important;
}

/* ---------- Hero subheadline legibility (2026-07-22) ----------
   The hero H2 ("Over 1,000+ 5-Star Patient Reviews") is wrapped in inline
   <span style="color:#ff6600"> bright orange that fails contrast over the
   bright right side of the hero photo. Match the white H1 and add a soft
   shadow so it reads across the whole image. */
.hero__content h1,
.hero__content h2 {
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.hero__content h2,
.hero__content h2 a,
.hero__content h2 span {
  color: #ffffff !important;
}
/* subheadline is a link to the reviews page — reveal on hover/focus, keep rest-state white for contrast */
.hero__content h2 a { cursor: pointer; }
.hero__content h2:hover a,
.hero__content h2:hover a span,
.hero__content h2 a:focus,
.hero__content h2 a:focus span {
  color: #fdae84 !important;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* ---------- Page/post title header legibility (2026-07-22) ----------
   Every page & post title uses .page__header with an inline photo background
   and white title text but NO overlay, so titles wash out over light photos.
   Add a bottom-weighted dark scrim + text-shadow so the white H1 + meta stay
   readable (WCAG AA) over ANY background image, site-wide. */
.page__header { position: relative; }
.page__header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,40,40,.28) 0%, rgba(28,40,40,.52) 60%, rgba(28,40,40,.66) 100%);
  z-index: 0;
  pointer-events: none;
}
.page__header > .container { position: relative; z-index: 1; }
.page__header .hdg,
.page__header .hdg--1,
.page__header h1,
.page__header .page__header-meta,
.page__header .page__header-meta a {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* svc-centered-2026-07-24: centered prominent service icons all devices (overrides theme--flat inline layout) */ .services .service,.theme--flat .services .service{text-align:center}.services .service__image,.theme--flat .services .service__image{display:block!important;margin:0 auto 16px!important}.services .service__image img,.theme--flat .services .service__image img{display:block!important;margin:0 auto!important;width:110px!important;height:110px!important;max-width:110px!important;max-height:none!important;background:transparent!important}.services .service__title,.theme--flat .services .service__title{display:block!important;text-align:center;margin-top:4px}.services .service__content,.services .service__content p,.service__item .service__content,.service__item .service__content p{text-align:center;color:var(--text-body)!important}.services .service__link{display:inline-block}


/* svc-lists-centered-2026-07-24: center content lists as a clean left-aligned group (fixes orphaned bullets) */ .entry__content ul:has(li[style*=center]),.entry__content ol:has(li[style*=center]){width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;padding-left:24px;text-align:left;list-style-position:outside} .entry__content ul:has(li[style*=center]) li,.entry__content ol:has(li[style*=center]) li{text-align:left!important;list-style-position:outside;margin-bottom:6px}

/* mobile-tap-targets-2026-07-26 : larger footer tap areas + legible small print (mobile/tablet only) */
@media (max-width: 900px){
  .footer .menu-item > a,
  .footer .view-link > a{
    display:inline-block;
    padding-top:11px;
    padding-bottom:11px;
    line-height:1.4;
  }
  .footer .socials__item > a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
  }
  .footer small,
  .footer .copyright,
  .footer__copyright{ font-size:12px; }
}

/* brand-uniform-service-icons-2026-07-27 : one icon size across all four offices (was snc 110 / Ranch 130 / BH 300).
   Source files are 150x150, so 120 desktop / 96 mobile never upscales. */
.services .service__image img,
.services .services__item img,
.services img[src*="icon-0"]{
  width:120px !important;
  height:120px !important;
  max-width:120px !important;
  object-fit:contain;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width: 900px){
  .services .service__image img,
  .services .services__item img,
  .services img[src*="icon-0"]{
    width:96px !important;
    height:96px !important;
    max-width:96px !important;
  }
}

/* sc-button-system 2026-07-31 - one CTA design across the whole site.
   Base is the brand orange #FDAE84 already used by the homepage CTAs, with a near-black
   label (10.11:1). Hover is the brand plum #3C2E3D with white (12.72:1).
   The label flips dark -> white on hover because white on the orange is only 1.82:1 and
   near-black on the plum is unreadable; each state uses the colour that passes.
   No new colours: both are already in the palette.
   This also replaces the header CTA buttons (.menu-item--btn-primary), which were teal
   #81D8D0 with white text at 1.66:1 - effectively illegible.
   Delete this block to revert. */
body .btn.btn,
body .btn--light.btn--light,
body .btn--dark.btn--dark,
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform-footer button[type="submit"],
body .gform_wrapper .gform-footer input[type="submit"],
body .gform_wrapper .gform_page_footer button[type="submit"],
body .gform_wrapper .gform_page_footer input[type="submit"],
body .menu-item--btn-primary.menu-item--btn-primary > a{
  background-color:#FDAE84 !important;
  border:2px solid #FDAE84 !important;
  color:#1A1400 !important;
}
body .btn.btn:hover,
body .btn--light.btn--light:hover,
body .btn--dark.btn--dark:hover,
body .gform_wrapper .gform_footer button[type="submit"]:hover,
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform-footer button[type="submit"]:hover,
body .gform_wrapper .gform-footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer button[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .menu-item--btn-primary.menu-item--btn-primary > a:hover{
  background-color:#3C2E3D !important;
  border-color:#3C2E3D !important;
  color:#FFFFFF !important;
}
body .btn.btn:focus-visible,
body .gform_wrapper .gform_footer button[type="submit"]:focus-visible,
body .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
body .gform_wrapper .gform-footer button[type="submit"]:focus-visible,
body .gform_wrapper .gform-footer input[type="submit"]:focus-visible,
body .menu-item--btn-primary.menu-item--btn-primary > a:focus-visible{
  outline:3px solid #3C2E3D !important;
  outline-offset:3px !important;
}

/* ============================================================
   HOMEPAGE SYSTEM 2026-07-31
   Structure mirrors the Beverly Hills homepage. Colours are S&C Dental
   Scottsdale's own, unchanged. Type is the BH pairing: EB Garamond for
   display, Avenir Next for UI, both self-hosted or system.
   Everything below this marker can be deleted to revert.
   ============================================================ */

@font-face{
  font-family:'EB Garamond';
  src:url('/wp-content/uploads/fonts/eb-garamond-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('/wp-content/uploads/fonts/eb-garamond-latin-italic.woff2') format('woff2');
  font-weight:400 800; font-style:italic; font-display:swap;
}

:root{
  --display:'EB Garamond',Garamond,'Adobe Garamond Pro','Times New Roman',Georgia,serif;
  --ui:'Avenir Next',Avenir,'Helvetica Neue',system-ui,-apple-system,'Segoe UI',sans-serif;
  --paper:#f7f5f3;
  --rule:rgba(60,46,61,.15);
}

/* ---- type: HOMEPAGE ONLY ----
   Applied sitewide in the first pass, which blew up every service page: the theme's
   heading sizes were tuned for the old sans, and swapping the face without retuning
   them made pages like /emergency-services/ read as giant centred serif slabs.
   Scoped to .home until the same system is rolled out template by template. */
body.home,
body.home p, body.home li, body.home td, body.home th,
body.home input, body.home select, body.home textarea, body.home button{ font-family:var(--ui); }

body.home h1, body.home h2, body.home h3, body.home h4,
body.home .hdg, body.home .entry__content h1, body.home .entry__content h2,
body.home .entry__content h3, body.home .service__title{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-.012em;
}
body.home h1{ line-height:1.1; }
body.home h2{ line-height:1.12; }

/* ============================================================
   HERO
   ============================================================ */

/* The theme already paints a flat 50% black over the panel. That alone leaves the
   headline sitting on whatever the video is doing behind it, so add a left-weighted
   gradient: the copy side gets density, the right side keeps the office visible. */
.module--hero .hero__panel::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(18,13,17,.82) 0%,
    rgba(18,13,17,.62) 32%,
    rgba(18,13,17,.30) 58%,
    rgba(18,13,17,.12) 100%);
}
.module--hero .hero__panel > .container,
.module--hero .hero__content{ position:relative; z-index:3; }

.module--hero .hero__panel{ min-height:min(90vh,860px); display:flex; align-items:center; }
.module--hero .hero__content{ padding-block:clamp(48px,7vw,96px); }

.snc-hero__lockup{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.1vw,2.5rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#fff;
  line-height:1;
  margin:0 0 .28em;
}
.snc-hero__place{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.6rem);
  color:#fdae84;
  letter-spacing:.02em;
  line-height:1;
  margin:0 0 clamp(22px,3.4vw,40px);
}

.module--hero .hero__content h1{
  font-family:var(--display);
  font-weight:500;
  color:#fff;
  font-size:clamp(2.1rem,4.3vw,3.9rem);
  line-height:1.1;
  letter-spacing:-.015em;
  max-width:20ch;
  margin:0 0 clamp(26px,3.6vw,40px);
  text-shadow:0 2px 22px rgba(0,0,0,.34);
}

.snc-hero__proof{
  list-style:none;
  margin:0 0 clamp(28px,3.8vw,42px);
  padding:0;
  display:grid;
  gap:.62em;
}
.snc-hero__proof li{
  position:relative;
  padding-left:1.9em;
  color:#fff;
  font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.4;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* drawn check, not a glyph */
.snc-hero__proof li::before{
  content:'';
  position:absolute; left:0; top:.28em;
  width:1.05em; height:1.05em;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdae84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 6.9'/%3E%3C/svg%3E");
}
/* if the Places API is unreachable the rating shortcode returns nothing;
   hide the bullet rather than show an empty line */
.snc-hero__proof li.snc-hero__rating:empty{ display:none; }

.snc-hero__actions{
  display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  flex-wrap:wrap; margin:0;
}
body .module--hero .snc-hero__primary.btn{
  background-color:#fdae84 !important;
  border-color:#fdae84 !important;
  color:#3c2e3d !important;   /* 7.2:1 on peach. White on peach is 1.8:1 and fails. */
  font-family:var(--ui);
  font-weight:600;
  letter-spacing:.03em;
  padding:1.05em 2.1em;
  border-radius:3px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background-color .35s ease;
}
body .module--hero .snc-hero__primary.btn:hover{
  background-color:#ffc7a6 !important;
  border-color:#ffc7a6 !important;
  color:#3c2e3d !important;
  transform:translateY(-2px);
}
.snc-hero__tel{
  font-family:var(--ui);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.03em;
  color:#fff !important;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.42);
  padding-bottom:2px;
  transition:border-color .3s ease,color .3s ease;
}
.snc-hero__tel:hover{ color:#fdae84 !important; border-color:#fdae84; }

@media (max-width:992px){
  .module--hero .hero__panel{ min-height:78vh; }
  .snc-hero__lockup{ letter-spacing:.22em; }
  .module--hero .hero__content h1{ max-width:none; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
.rl-snc-reviews{ background:var(--paper); }
.rl-snc-reviews .entry__content{ text-align:left; }
.rl-snc-reviews h2{ font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:.42em; }
.rl-snc-reviews__lead{ max-width:64ch; color:#595959; }

.snc-rev{
  list-style:none; margin:clamp(30px,4vw,52px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
}
.snc-rev__item{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:3px;
  padding:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column;
  box-shadow:0 2px 10px rgba(60,46,61,.05);
}
.snc-rev__stars{ margin:0 0 .9em; color:#c0562c; letter-spacing:.22em; font-size:1.02rem; line-height:1; }
.snc-rev__text{
  margin:0 0 1.4em; padding:0; border:0;
  font-family:var(--ui); font-size:.97rem; line-height:1.62; color:#4a4a4a;
  flex:1 1 auto;
}
.snc-rev__by{ margin:0; font-size:.8rem; letter-spacing:.09em; color:#6b6b6b; }
.snc-rev__name{ text-transform:uppercase; font-weight:700; color:#3c2e3d; margin-right:.5em; }
.snc-rev__more{ margin:clamp(24px,3vw,36px) 0 0; }
.snc-rev__more a{
  font-family:var(--ui); font-weight:600; font-size:.94rem; letter-spacing:.02em;
  color:#9c5a1c; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
}
.snc-rev__more a:hover{ color:#3c2e3d; }
@media (max-width:900px){ .snc-rev{ grid-template-columns:1fr; } }

/* ============================================================
   TEAM
   ============================================================ */
.snc-team{
  list-style:none; margin:1.4em 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.snc-team li{
  font-family:var(--display);
  font-size:clamp(1.08rem,1.5vw,1.3rem);
  color:#3c2e3d;
  padding:.62em 0;
  border-bottom:1px solid var(--rule);
  margin:0;
}

/* ============================================================
   BOOKING BLOCK
   ============================================================ */
.rl-snc-formblock{ background:var(--paper); }
.rl-snc-formblock h2{ font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:.4em; }
.rl-snc-formblock .gform_wrapper{ max-width:760px; margin-top:clamp(22px,3vw,36px); }
.rl-snc-formblock .gform_wrapper .gform_body input[type="text"],
.rl-snc-formblock .gform_wrapper .gform_body input[type="email"],
.rl-snc-formblock .gform_wrapper .gform_body input[type="tel"],
.rl-snc-formblock .gform_wrapper .gform_body textarea,
.rl-snc-formblock .gform_wrapper .gform_body select{
  border:1px solid var(--rule); border-radius:3px; background:#fff;
}

/* ============================================================
   SERVICES band: typography only, the ringed icons already match
   ============================================================ */
.module--services .service__title{ font-family:var(--display); font-weight:500; }

/* ---- corrections after first inspection ---- */

/* theme paints a disc on every entry-content li; the proof list draws its own check */
.snc-hero__proof li{ list-style:none !important; }
.snc-hero__proof li::marker{ content:none; }

/* the hero sits above the fold on a laptop; keep the CTA in view */
.module--hero .hero__panel{ min-height:min(84vh,820px); }

/* review cards: the theme's blockquote rule is 23px and centred, which broke the
   measure to about ten characters a line. Reset inside the card only. */
.rl-snc-reviews .snc-rev__item{ text-align:left; }
.rl-snc-reviews .snc-rev .snc-rev__text,
.rl-snc-reviews blockquote.snc-rev__text{
  font-family:var(--ui) !important;
  font-size:.97rem !important;
  font-style:normal !important;
  line-height:1.62 !important;
  text-align:left !important;
  color:#4a4a4a !important;
  margin:0 0 1.4em !important;
  padding:0 !important;
  border:0 !important;
  quotes:none;
}
.rl-snc-reviews blockquote.snc-rev__text::before,
.rl-snc-reviews blockquote.snc-rev__text::after{ content:none !important; }
.rl-snc-reviews .snc-rev__stars{ text-align:left; }
.rl-snc-reviews .snc-rev__by{ text-align:left; }

/* section headings: the pale brand teal fails contrast on the light band */
.rl-snc-reviews h2,
.rl-snc-formblock h2{ color:#3c2e3d !important; }
.rl-snc-reviews .snc-reviews__lead,
.rl-snc-reviews .snc-rev__more{ text-align:left; }

/* the team list inherits the disc as well */
.snc-team li{ list-style:none !important; }
.snc-team li::marker{ content:none; }
/* ---- contrast restore (second inspection) ----
   The pale brand teal #8bcbc8 measures 1.83:1 on white, so every section heading and
   service title was failing AA. Brand colours are unchanged; these are the same two
   ink colours already used elsewhere on the site, applied to text that needs them. */
body.home .entry__content h1, body.home .entry__content h2, body.home .entry__content h3,
body.home .entry__content h4, body.home .entry__content h5, body.home .entry__content h6,
body.home .module--content-area h2, body.home .module--content-area h3,
body.home .module--services h2, body.home .module--services h3,
body.home .module--contact-info h3,
body.home .service__title, body.home .service__title a{
  color:#3c2e3d !important;   /* 11.9:1 on white */
}

/* text sitting on the peach fill: #595959 is 3.83:1 there, plum is 7.2:1 */
body.home .btn, body.home .btn:visited,
body.home .module--services .btn,
body.home .module--content-area .btn{ color:#3c2e3d !important; }

/* contact band body copy */
body.home .module--contact-info .entry__content p,
body.home .module--contact-info .entry__content li,
body.home .module--contact-info .entry__content a{ color:#3c2e3d !important; }

/* the virtual-consult widget reserves a tall box before it loads, which left a large
   dead gap under the team band */
.module--content-area:has(#SVC){ padding-top:0 !important; padding-bottom:0 !important; }
#SVC{ margin:0 auto; }
/* the theme's bronze link colour wins inside entry content; this link is mine to own */
body .rl-snc-reviews .snc-rev__more a{ color:#9c5a1c !important; }
body .rl-snc-reviews .snc-rev__more a:hover{ color:#3c2e3d !important; }
/* On a phone the copy spans the full width, so a left-weighted gradient stops doing the
   work: the headline sat over the bright glass in the middle of the loop. Go vertical
   and denser below 992px, where the portrait encode is playing. */
@media (max-width:992px){
  .module--hero .hero__panel::before{
    background:linear-gradient(to bottom,
      rgba(18,13,17,.42) 0%,
      rgba(18,13,17,.58) 38%,
      rgba(18,13,17,.72) 72%,
      rgba(18,13,17,.80) 100%);
  }
  .module--hero .hero__content h1{ text-shadow:0 2px 18px rgba(0,0,0,.55); }
  .snc-hero__proof li{ text-shadow:0 1px 8px rgba(0,0,0,.6); }
}
/* The hero's copy wrapper also carries .entry__content, so the heading-contrast rule
   above was repainting the hero H1 plum on top of a dark video. The hero is white on
   video and is scrimmed for it; put it back and keep it last so it wins. */
body .module--hero .hero__content h1,
body .module--hero .entry__content h1{ color:#fff !important; }
body .module--hero .snc-hero__lockup{ color:#fff !important; }
body .module--hero .snc-hero__place{ color:#fdae84 !important; }
/* ---- kill the parallax judder on the hero ----
   The hero background is now a native <video> printed server-side, so jarallax has
   nothing left to render, but it still initialises on the panel and rewrites an inline
   transform on its container on every scroll frame. That per-frame translate is what
   reads as the picture shaking while you scroll. A stylesheet !important outranks a
   non-important inline style, so this neutralises it without touching the script. */
.module--hero .hero__panel .jarallax-container,
.module--hero .hero__panel div[id^="jarallax-container"],
.module--hero .hero__panel .jarallax-img{
  transform:none !important;
  will-change:auto !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
/* the video is the background now; make sure it sits under the copy and fills the box */
.module--hero .hero__panel > video.hero__desktop-video,
.module--hero .hero__panel > video.hero__mobile-video{ z-index:0; }
/* the theme's flat 50% overlay would double up with the gradient above */
.module--hero .hero__panel.hero-panel-0::after{ opacity:0 !important; }

/* ---- Google attribution on each review card (Trustindex-style) ---- */
.rl-snc-reviews .snc-rev__item{ position:relative; padding-top:clamp(24px,2.6vw,34px); }
.snc-rev__src{
  position:absolute; top:16px; right:16px;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(60,46,61,.18);
}
.snc-rev__src svg{ display:block; width:15px; height:15px; }

/* ---- nav: hand over to the hamburger BEFORE the menu runs out of room ----
   Measured on this build: the bar fits on one row down to ~1220px and is on two rows by
   1180px, but the theme only switched at 992px, so between roughly 1000 and 1250 the
   CALL NOW button dropped to a second line. These are the exact three elements the theme
   itself toggles at its own breakpoint, moved up. */
@media (max-width:1199px){
  .header__menu-toggle{ display:flex !important; }
  .header__stacked-nav{ display:none !important; }
  .header__nav{ display:none !important; }
}
/* ---- one left edge for the whole hero ----
   Scott: "dont put Scottsdale further left than the s&c dental". The lockup had a
   text-indent and the proof list inherited the theme's ul padding, so the lockup, the
   place, the H1 and the list all started at different x. They now share one edge.
   The lockup's trailing letter-space is cancelled with a negative right margin instead,
   which does not move its left edge. */
.module--hero .hero__content > *{ margin-left:0; }
.snc-hero__lockup{ text-indent:0 !important; margin-right:-.3em; }
.snc-hero__proof{ padding-left:0 !important; margin-left:0 !important; list-style:none; }
.module--hero .hero__content .snc-hero__proof li{ margin-left:0; }
.module--hero .hero__content h1,
.module--hero .hero__content .snc-hero__lockup,
.module--hero .hero__content .snc-hero__place,
.module--hero .hero__content .snc-hero__actions{ padding-left:0; }

@media (max-width:992px){
  /* the accessibility button and the chat bubble are fixed to the bottom corners and were
     sitting on top of the primary CTA. Give the hero copy room to clear them. */
  .module--hero .hero__content{ padding-bottom:clamp(96px,22vw,150px); }
  .snc-hero__actions{ gap:14px; }
  .snc-hero__actions .btn{ width:auto; }
}
/* ============================================================
   MOBILE DRAWER - ported from the Beverly Hills build, in S&C North's colours.
   Everything here is scoped to .mobile__nav, so it is inert if the markup changes.
   NOTE: BH's breakpoint block also carries `.mobile__nav{display:block !important}`.
   That line is deliberately NOT copied; it has broken a sibling site before. The
   drawer's own show/hide stays with the theme.
   ============================================================ */

/* real tap targets, uppercase labels, one hairline between rows */
.mobile__nav .menu{ margin:0; padding:0; list-style:none; }
.mobile__nav .menu > li{ position:relative !important; border-bottom:1px solid rgba(60,46,61,.10); margin:0; }
.mobile__nav .menu a{
  display:block; padding:16px 56px 16px 22px !important; min-height:52px;
  color:#3c2e3d !important; font-family:'Avenir Next',Avenir,'Helvetica Neue',system-ui,sans-serif;
  font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; line-height:1.35;
}
.mobile__nav .sub-menu{
  background:#f7f5f3 !important; margin:0; padding:0; list-style:none;
  border-top:1px solid rgba(60,46,61,.08);
}
.mobile__nav .sub-menu a{
  padding:14px 22px 14px 34px !important; min-height:48px; font-size:13px;
  letter-spacing:.08em; text-transform:none; color:#595959 !important;
}
.mobile__nav .sub-menu li{ border-bottom:1px solid rgba(60,46,61,.07); }
.mobile__nav .sub-menu li:last-child{ border-bottom:0; }

/* light surfaces darken on touch rather than washing out */
.mobile__nav .menu a:hover, .mobile__nav .menu a:focus,
.mobile__nav .sub-menu a:hover, .mobile__nav .sub-menu a:focus{
  color:#3c2e3d !important; background-color:rgba(253,174,132,.20) !important; text-decoration:none !important;
}

/* the last two rows are the booking and call actions: give them the solid treatment */
.mobile__nav .menu > li:nth-last-child(-n+2) > a{
  background:#fdae84 !important; color:#3c2e3d !important; font-weight:600;
  text-align:center; padding:16px 22px !important; margin:10px 22px; border-radius:3px;
}
.mobile__nav .menu > li:nth-last-child(-n+2){ border-bottom:0; }
.mobile__nav .menu > li:nth-last-child(-n+2) > a:hover{
  background-color:#3c2e3d !important; color:#fff !important;
}

/* ---- submenu toggle: ONE chevron, drawn as a background image ----
   BH went through three rounds of this: successive fixes each ADDED a chevron
   instead of replacing the last, and the theme's own SVG, a border-drawn ::after and
   a replacement all painted at once. Clear everything first, then draw exactly one. */
.mobile__nav .sub-menu--toggle::before,
.mobile__nav .sub-menu--toggle::after,
.mobile__nav .menu-item-has-children > a::after,
.mobile__nav li.menu-item-has-children::after{
  content:none !important; display:none !important; border:0 !important; background:none !important;
}
body .mobile__nav .sub-menu--toggle{
  position:absolute !important; top:0 !important; right:0 !important; left:auto !important;
  width:64px !important; height:52px !important; min-height:52px !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  border-left:1px solid rgba(60,46,61,.10) !important;
  font-size:0 !important; line-height:0 !important; cursor:pointer; z-index:5 !important;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath fill='none' stroke='%233c2e3d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5.5 5.5L12 1'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center center !important;
  background-size:13px 8px !important;
  -webkit-tap-highlight-color:rgba(60,46,61,.06) !important; touch-action:manipulation !important;
}
/* open state SWAPS THE ART rather than rotating: on BH a transform kept getting
   pinned at identity by another rule, and the arrow silently stopped turning. */
body .mobile__nav .sub-menu--toggle.active{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath fill='none' stroke='%233c2e3d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1 7l5.5-5.5L12 7'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center center !important;
  background-size:13px 8px !important;
}
body .mobile__nav .sub-menu--toggle:active{ background-color:rgba(60,46,61,.05) !important; }
body .mobile__nav .sub-menu--toggle:focus-visible{ outline:2px solid #3c2e3d; outline-offset:-2px; }
/* keep the label clear of the arrow so a thumb never hits the wrong one */
.mobile__nav .menu li.menu-item-has-children > a{ padding-right:72px !important; position:relative; z-index:1; }

/* ---- open state is CSS driven, NOT jQuery ----
   Reported on iPhone for BH: the submenu opens but will not close. The theme animates
   with slideToggle, which writes inline display/height, and iOS can strand that state.
   The .active class on the button is reliable, so the panel is driven from it, and
   !important beats whatever the animation leaves behind. */
.mobile__nav .sub-menu{
  /* v3 2026-08-01: open/closed is set inline by uploads/js/sc-drawer.js. */
  display:none;
  /* transition REMOVED 2026-08-01: it was stuck and pinning max-height and opacity at
     zero, so drawer categories could not be collapsed. A running CSS transition
     outranks even an INLINE !important. Proven on the sibling site by setting
     max-height:2400px !important inline and still computing 0px.
     Do NOT reintroduce a transition here. */
}
.mobile__nav .sub-menu--toggle.active + .sub-menu,
.mobile__nav .sub-menu--toggle.active ~ .sub-menu{
  max-height:2400px !important; opacity:1 !important;
}
/* ============================================================
   SITEWIDE DISPLAY TYPEFACE - GARAMOND
   The homepage rebuild scoped Garamond to body.home after a first attempt applied it
   everywhere and blew up the service pages: this theme sizes headings for a SANS, and
   the same px in a serif read as giant centred slabs.
   Owner wants the group uniform (BH, North, S&L all on Garamond), so the family now
   goes sitewide, and the heading SCALE is capped below to compensate. Sizes on the
   homepage are unaffected; they are set explicitly in the homepage block above.
   ============================================================ */
body h1, body h2, body h3, body h4,
body .hdg,
body .entry__content h1, body .entry__content h2,
body .entry__content h3, body .entry__content h4,
body .service__title,
body .page__header .hdg{
  font-family:var(--display) !important;
  font-weight:500;
  letter-spacing:-.012em;
}
/* ============================================================
   INTERIOR HEADING SCALE (everything except the homepage)
   MEASURED on /emergency-services/ at a 1317px viewport before this block:
   H1 66px, H2 54px, H3 42px, all centred. Those sizes were set for the theme's
   original sans; in Garamond they read as giant slabs, which is what "this page looks
   crazy" was. Brought down to the same register the other S&C sites use.
   The homepage sets its own sizes explicitly, so it is excluded.
   ============================================================ */
body:not(.home) .entry__content h1,
body:not(.home) .page__header .hdg{ font-size:clamp(2rem,3.4vw,3.1rem); line-height:1.12; }
body:not(.home) .entry__content h2{ font-size:clamp(1.55rem,2.5vw,2.25rem); line-height:1.18; }
body:not(.home) .entry__content h3{ font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.25; }
body:not(.home) .entry__content h4{ font-size:clamp(1.1rem,1.4vw,1.3rem); line-height:1.3; }

/* the pale brand teal measures 1.83:1 on white and fails AA. Same plum already in use
   on the homepage headings; no new colour, and one line to revert. */
body:not(.home) .entry__content h1,
body:not(.home) .entry__content h2,
body:not(.home) .entry__content h3,
body:not(.home) .entry__content h4{ color:#3c2e3d !important; }

/* PROTECT the inverted surfaces. On snldental.com a blanket heading colour repainted a
   white-on-photo band into dark-on-dark; do not repeat it. Anything the theme marks as
   light text, and the photo banner at the top of every interior page, stay white. */
body .page__header .hdg,
body .page__header .page__header-meta,
body .text--light .entry__content h1,
body .text--light .entry__content h2,
body .text--light .entry__content h3,
body .text--light .entry__content h4,
body .module--hero .entry__content h1,
body .module--hero .entry__content h2{ color:#fff !important; }
/* ============================================================
   BUTTON STATES - ONE READABLE TREATMENT
   Reported: several CTAs are unreadable on hover. Cause: `.btn:hover` sets
   background-color to plum but never sets a colour, so the label keeps its rest-state
   plum (which is correct on the peach fill) and becomes plum-on-plum. There are 13
   separate :hover rules for buttons across these stylesheets, several with !important,
   fighting over background and colour independently.
   Rather than add a fourteenth, every interactive state is settled here, last, in one
   place. Rest: peach fill, plum label (7.2:1). Hover/focus/active: plum fill, white
   label (11.9:1). Both directions are stated explicitly so neither can be half-applied.
   ============================================================ */
body .btn,
body a.btn,
body .btn:visited,
body .menu-item--btn-primary > a,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform-footer input[type="submit"],
body .gform_wrapper .gform-footer button[type="submit"]{
  background-color:#fdae84 !important;
  border-color:#fdae84 !important;
  color:#3c2e3d !important;
}

/* the label is sometimes a child span, which would keep the old colour */
body .btn:hover *, body .btn:focus *, body a.btn:hover *,
body .menu-item--btn-primary > a:hover *{ color:#ffffff !important; }
/* ---- DROP COLOUR FROM THE BUTTON TRANSITION ----
   Measured while genuinely hovered: colour AND background both computed to
   rgb(60,46,61), i.e. plum on plum, despite the hover rule above declaring
   `color:#ffffff !important`. The theme sets `transition: background .15s, color .15s,
   border-color .15s` on buttons, and on this install a running colour transition
   outranks !important, so the new colour never lands. Same failure already documented
   on the Beverly Hills hero copy.
   The cure is to stop transitioning colour at all. Background and border still animate,
   so the button keeps its motion; only the label switches instantly, which is what a
   readable control needs anyway. */
body .btn,
body a.btn,
body .menu-item--btn-primary > a,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform-footer input[type="submit"],
body .gform_wrapper .gform-footer button[type="submit"]{
  transition-property:background-color,border-color,transform !important;
  transition-duration:.3s !important;
  transition-timing-function:cubic-bezier(.2,.7,.3,1) !important;
}
/* ============================================================
   HOVER WITHOUT CHANGING THE LABEL COLOUR
   Measured on the live page while genuinely hovered: background-color changes, and the
   label colour does NOT, no matter the specificity or !important. Same pinned-colour
   behaviour the Beverly Hills build hit on its hero copy, where an inline !important
   also could not move a colour.
   So the label colour is now CONSTANT in every state, and hover darkens the peach
   instead of swapping to plum. Nothing depends on a colour transition landing.
   Plum on peach  #fdae84 = 7.0:1. Plum on hover peach #e08a5a = 5.2:1. Both pass AA.
   ============================================================ */
body .btn,
body a.btn,
body .btn:visited,
body .btn:hover, body .btn:focus, body .btn:focus-visible, body .btn:active,
body a.btn:hover, body a.btn:focus, body a.btn:active,
body .menu-item--btn-primary > a,
body .menu-item--btn-primary > a:hover,
body .menu-item--btn-primary > a:focus,
body .footer .btn:hover, body .rl-cta .btn:hover,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer button[type="submit"]:hover,
body .gform_wrapper .gform-footer input[type="submit"],
body .gform_wrapper .gform-footer button[type="submit"],
body .gform_wrapper .gform-footer input[type="submit"]:hover,
body .gform_wrapper .gform-footer button[type="submit"]:hover{
  color:#3c2e3d !important;
}
body .btn, body a.btn, body .btn:visited,
body .menu-item--btn-primary > a,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button[type="submit"],
body .gform_wrapper .gform-footer input[type="submit"],
body .gform_wrapper .gform-footer button[type="submit"]{
  background-color:#fdae84 !important; border-color:#fdae84 !important;
}
body .btn:hover, body .btn:focus, body .btn:focus-visible, body .btn:active,
body a.btn:hover, body a.btn:focus, body a.btn:active,
body .menu-item--btn-primary > a:hover,
body .menu-item--btn-primary > a:focus,
body .footer .btn:hover, body .rl-cta .btn:hover,
body .special-offer__button .btn:hover,
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer button[type="submit"]:hover,
body .gform_wrapper .gform-footer input[type="submit"]:hover,
body .gform_wrapper .gform-footer button[type="submit"]:hover{
  background-color:#e08a5a !important; border-color:#e08a5a !important;
}
/* ---- LOCKUP IS DISPLAY TYPE, NOT BODY TYPE ----
   The hero lockup and the place line are <p> elements, so `body.home p{font-family:
   var(--ui)}` was repainting them in the sans while the H1 underneath stayed Garamond.
   That is why only that one line looked wrong. */
body.home .snc-hero__lockup,
body.home .snc-hero__place,
body .module--hero .snc-hero__lockup,
body .module--hero .snc-hero__place{
  font-family:var(--display) !important;
}
/* ---- OUT-SPECIFY THE DOUBLED-CLASS HOVER ----
   The existing stylesheet carries `body .btn.btn:hover{background-color:#3C2E3D
   !important; color:#FFFFFF !important}`. The doubled .btn.btn makes it (0,3,1), which
   beat every rule written at (0,2,1), so the background went plum. Its colour half never
   lands, because on this install a button label keeps whatever colour it was painted
   with, so the result was plum text on a plum fill: an invisible button.
   `html body .btn.btn` is (0,3,2) and wins cleanly. Hover now darkens the peach, and
   because the label colour never has to change, nothing depends on a colour landing.
   Plum on #fdae84 = 7.0:1. Plum on #e08a5a = 5.2:1. Both pass AA. */
html body .btn.btn,
html body a.btn.btn,
html body .btn.btn:visited,
html body .menu-item--btn-primary.menu-item--btn-primary > a{
  background-color:#fdae84 !important;
  border-color:#fdae84 !important;
  color:#3c2e3d !important;
}
html body .btn.btn:hover,
html body .btn.btn:focus,
html body .btn.btn:focus-visible,
html body .btn.btn:active,
html body a.btn.btn:hover,
html body a.btn.btn:focus,
html body .menu-item--btn-primary.menu-item--btn-primary > a:hover,
html body .menu-item--btn-primary.menu-item--btn-primary > a:focus,
html body .footer .btn.btn:hover,
html body .rl-cta .btn.btn:hover,
html body .gform_wrapper .gform_footer input[type="submit"]:hover,
html body .gform_wrapper .gform_footer button[type="submit"]:hover,
html body .gform_wrapper .gform-footer input[type="submit"]:hover,
html body .gform_wrapper .gform-footer button[type="submit"]:hover{
  background-color:#e08a5a !important;
  border-color:#e08a5a !important;
  color:#3c2e3d !important;
}
/* nothing about the label may animate, so it can never be caught mid-state */
html body .btn.btn,
html body .menu-item--btn-primary.menu-item--btn-primary > a{
  transition-property:background-color,border-color,transform !important;
}

/* ============================================================
   VIRTUAL CONSULTATION LANDING PAGE
   Scoped to .rl-snc-vc (the theme prefixes admin css classes with rl-).
   Delete from this marker down to revert.
   ============================================================ */
.rl-snc-vc .entry__content{ max-width:none; }
.rl-snc-vc h2{ color:#3c2e3d !important; margin-top:1.6em; }
.rl-snc-vc h2:first-child{ margin-top:0; }
.rl-snc-vc h3{ color:#3c2e3d !important; }
.rl-snc-vc p{ max-width:68ch; }
.rl-snc-vc .vc-lede{ font-size:1.1rem; line-height:1.65; }

/* numbered steps, drawn with counters rather than an icon set */
.rl-snc-vc ol.vc-steps{
  list-style:none; counter-reset:vc; margin:1.6em 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,30px);
}
.rl-snc-vc ol.vc-steps > li{
  counter-increment:vc; position:relative; margin:0; padding:26px 22px 22px;
  background:#f7f5f3; border:1px solid rgba(60,46,61,.12); border-radius:3px; list-style:none;
}
.rl-snc-vc ol.vc-steps > li::before{
  content:counter(vc); display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:#fdae84; color:#3c2e3d;
  font-family:'Avenir Next',Avenir,'Helvetica Neue',system-ui,sans-serif;
  font-weight:700; font-size:.95rem; margin-bottom:14px;
}
.rl-snc-vc ol.vc-steps h3{ margin:0 0 .4em; font-size:clamp(1.1rem,1.5vw,1.3rem); }
.rl-snc-vc ol.vc-steps p{ margin:0; font-size:.96rem; }

.rl-snc-vc ul.vc-good-for{ margin:1.1em 0 0; padding-left:1.15em; max-width:68ch; }
.rl-snc-vc ul.vc-good-for li{ margin:0 0 .55em; }

/* the safety note has to read as a caution without shouting */
.rl-snc-vc .vc-note{
  margin-top:1.5em; padding:16px 18px; background:#f7f5f3;
  border-left:3px solid #c0562c; border-radius:2px;
  font-size:.95rem; color:#4a4a4a; max-width:70ch;
}

/* the SmileVirtual widget replaces #SVC; give it room and never let it overflow */
.rl-snc-vc #SVC{ margin:1.4em 0 0; }
.rl-snc-vc #SVC iframe,
.rl-snc-vc #SVC img,
.rl-snc-vc #SVC video{ max-width:100%; }
.rl-snc-vc #SVC *{ box-sizing:border-box; }

.rl-snc-vc .vc-fallback{ margin-top:1.4em; font-size:.95rem; }

@media (max-width:860px){
  .rl-snc-vc ol.vc-steps{ grid-template-columns:1fr; }
}

/* ---- VIRTUAL CONSULT PROMO (homepage band) ---- */
.rl-snc-vcpromo-mod{ background:#f7f5f3; }
.snc-vcpromo{ max-width:760px; }
.snc-vcpromo h2{ color:#3c2e3d !important; margin-bottom:.45em; }
.snc-vcpromo p{ max-width:66ch; }
.snc-vcpromo__cta{ margin-top:1.4em; }
/* the consult form on the landing page */
.rl-snc-vc .vc-formlede{ font-size:1.02rem; }
.rl-snc-vc .vc-form{ margin:1.2em 0 0; max-width:720px; }
.rl-snc-vc .vc-form .gform_wrapper input[type=text],
.rl-snc-vc .vc-form .gform_wrapper input[type=email],
.rl-snc-vc .vc-form .gform_wrapper input[type=tel],
.rl-snc-vc .vc-form .gform_wrapper textarea{ border:1px solid rgba(60,46,61,.20); border-radius:3px; background:#fff; }
.rl-snc-vc .vc-form .gform_wrapper .gform_drop_area{ border:1px dashed rgba(60,46,61,.35); border-radius:3px; background:#faf8f7; }

/* ---- VIRTUAL CONSULT FORM ----
   The theme only styles Gravity Forms inside its own form MODULE, so a form dropped
   into a content area via shortcode renders with browser defaults: tiny inputs, labels
   running into fields. This gives the embedded form the same treatment as the booking
   block on the homepage. */
.rl-snc-vc .vc-form .gform_wrapper{ margin:0; }
.rl-snc-vc .vc-form .gform_wrapper form{ margin:0; }
.rl-snc-vc .vc-form .gform_wrapper .gform_fields{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px; margin:0; padding:0; list-style:none;
}
.rl-snc-vc .vc-form .gform_wrapper .gfield{ margin:0; padding:0; list-style:none; }
/* photo, message and the notice run full width */
.rl-snc-vc .vc-form .gform_wrapper .gfield--type-fileupload,
.rl-snc-vc .vc-form .gform_wrapper .gfield--type-textarea,
.rl-snc-vc .vc-form .gform_wrapper .gfield--type-html{ grid-column:1 / -1; }

.rl-snc-vc .vc-form .gform_wrapper .gfield_label{
  display:block; margin:0 0 6px;
  font-family:'Avenir Next',Avenir,'Helvetica Neue',system-ui,sans-serif;
  font-size:.92rem; font-weight:600; color:#3c2e3d; letter-spacing:.01em;
}
.rl-snc-vc .vc-form .gform_wrapper .gfield_required{ color:#c0562c; margin-left:.25em; }

.rl-snc-vc .vc-form .gform_wrapper input[type="text"],
.rl-snc-vc .vc-form .gform_wrapper input[type="email"],
.rl-snc-vc .vc-form .gform_wrapper input[type="tel"],
.rl-snc-vc .vc-form .gform_wrapper textarea{
  width:100% !important; max-width:100% !important; box-sizing:border-box;
  padding:13px 14px; font-size:1rem; line-height:1.4;
  font-family:'Avenir Next',Avenir,'Helvetica Neue',system-ui,sans-serif;
  color:#3c2e3d; background:#fff;
  border:1px solid rgba(60,46,61,.22); border-radius:3px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rl-snc-vc .vc-form .gform_wrapper textarea{ min-height:130px; resize:vertical; }
.rl-snc-vc .vc-form .gform_wrapper input:focus,
.rl-snc-vc .vc-form .gform_wrapper textarea:focus{
  outline:none; border-color:#3c2e3d; box-shadow:0 0 0 3px rgba(253,174,132,.35);
}
.rl-snc-vc .vc-form .gform_wrapper ::placeholder{ color:#8b8b8b; opacity:1; }

.rl-snc-vc .vc-form .gform_wrapper .gfield_description{
  margin:6px 0 0; font-size:.86rem; color:#6a6a6a; padding:0;
}

/* the drop zone should read as a target, not as stray text */
.rl-snc-vc .vc-form .gform_wrapper .gform_drop_area{
  padding:26px 18px; text-align:center; margin:0;
  border:1px dashed rgba(60,46,61,.35); border-radius:3px; background:#faf8f7;
  font-size:.95rem; color:#5b5b5b;
}
.rl-snc-vc .vc-form .gform_wrapper .gform_button_select_files{
  display:inline-block; margin-left:6px; padding:.6em 1.2em;
  background:#fff !important; color:#3c2e3d !important;
  border:1px solid rgba(60,46,61,.3) !important; border-radius:3px;
  font-weight:600; font-size:.9rem; cursor:pointer;
}
.rl-snc-vc .vc-form .gform_wrapper .gform_fileupload_rules{
  display:block; margin-top:8px; font-size:.84rem; color:#6a6a6a;
}

.rl-snc-vc .vc-form .gform_wrapper .gform_footer{ margin:22px 0 0; padding:0; }
.rl-snc-vc .vc-form .gform_wrapper .gform_footer input[type="submit"],
.rl-snc-vc .vc-form .gform_wrapper .gform_footer button{
  width:auto; padding:1.05em 2.2em; font-size:.95rem; font-weight:600;
  letter-spacing:.03em; border-radius:3px; cursor:pointer;
}

/* validation has to be visible, not just red-ish */
.rl-snc-vc .vc-form .gform_wrapper .gfield_error input,
.rl-snc-vc .vc-form .gform_wrapper .gfield_error textarea{ border-color:#a3301f !important; }
.rl-snc-vc .vc-form .gform_wrapper .validation_message{
  margin-top:6px; font-size:.86rem; color:#a3301f;
}
.rl-snc-vc .vc-form .gform_wrapper .gform_validation_errors{
  padding:14px 16px; margin:0 0 18px; border-radius:3px;
  background:#fdf3f1; border:1px solid rgba(163,48,31,.35); color:#7d2418;
}

@media (max-width:700px){
  .rl-snc-vc .vc-form .gform_wrapper .gform_fields{ grid-template-columns:1fr; }
}


/* submenu-transition-guard-2026-08-01 : open state is driven purely by the .active
   class on the toggle, expressed with :has() so it does not depend on sibling order or
   on cascade position. Matches scottsdaledentalranch.com and snldental.com. */
body .mobile__nav ul.sub-menu{ transition:none !important; }
body .mobile__nav li:has(> .sub-menu--toggle.active) > ul.sub-menu{
  max-height:2400px !important; opacity:1 !important; overflow:visible !important;
}


/* nav-breakpoint-aligned-2026-08-01 : all four practice sites now collapse to the
   hamburger at the same width. 1200px is the smallest value that is safe on every site:
   measured row span vs container, snc needs ~1100, Ranch ~1160, Beverly Hills ~1180 and
   S&L ~1200 because its container is the widest. snc was at 1249, which collapsed the
   nav earlier than it needed to. */


/* nav-bar-dark-2026-08-01 : matches the Beverly Hills nav treatment across the group.
   MEASURED BEFORE: the nav links were #ffffff on the brand teal #8bcbc8 = 1.83:1. That is
   below even the 3:1 large-text floor, on the primary navigation, for a patient base the
   owner has said skews over 60. It was the worst contrast defect on any of the four sites.
   The brand teal is NOT discarded: it moves from the bar background to the hover and
   current-page colour, where it reads at 7.68:1 instead of being an unreadable ground.
   AFTER: #ffffff on #3c2e3d = 12.73:1 (AAA). Hover #81d8d0 on #3c2e3d = 7.68:1 (AAA).
   The peach pills are untouched and already measure 7.01:1. */
body .header__stacked-nav{ background-color:#3c2e3d !important; }
body .header__stacked-nav .header__nav a{ color:#ffffff !important; }
body .header__stacked-nav .header__nav a:hover,
body .header__stacked-nav .header__nav a:focus,
body .header__stacked-nav .header__nav .current-menu-item > a,
body .header__stacked-nav .header__nav .current_page_item > a{ color:#81d8d0 !important; }
body .header__stacked-nav .header__nav a svg,
body .header__stacked-nav .header__nav a .icon{ fill:currentColor !important; }
body .header__stacked-nav .header__nav .sub-menu{ background:#ffffff !important; }
body .header__stacked-nav .header__nav .sub-menu a{ color:#3c2e3d !important; }
body .header__stacked-nav .header__nav .sub-menu a:hover,
body .header__stacked-nav .header__nav .sub-menu a:focus{ color:#000000 !important; background:rgba(129,216,208,.28) !important; }


/* utility-case-2026-08-01 : Beverly Hills and Scottsdale Ranch set the utility bar in
   uppercase; snc.dental and S&L rendered it in sentence case. Aligning the case only.
   The phone number is deliberately left alone - digits are unaffected by case and the
   letter-spacing that suits a word would hurt a number a patient is trying to read. */
body .snc-topbar__dir,
body .header__utility a,
body .header__utility .menu-item > a{ text-transform:uppercase !important; letter-spacing:.08em !important; }

/* PSI Best Practices: below 767px the header logo rendered 316x40 (ratio 7.90)
   from a 258x30 source (ratio 8.60), i.e. visibly stretched, because height is
   clamped to 40px while width fills the container. object-fit:contain keeps the
   true ratio without changing the box, so nothing else in the header moves. */
.header__branding .header__branding-logo{object-fit:contain}

/* EB Garamond metric-matched fallback (CLS).
   Measured on this page at 100px: EB Garamond asc 101 desc 30 width 1340.3;
   Times New Roman asc 89 desc 22 width 1396.83. EB Garamond is narrower but much
   taller, so when font-display:swap hands over, every heading's line box grows and
   everything below it moves -- that was the whole of snc.dental's mobile CLS 0.164,
   attributed by PSI to .snc-hero__proof shifting under the h1.

   Rather than touch any selector (one h5 is deliberately Arial and must stay Arial),
   this redefines 'Garamond' -- the slot that already sits second in the heading stack
   "EB Garamond", Garamond, "Adobe Garamond Pro", "Times New Roman", Georgia, serif --
   so the pre-swap render occupies exactly the same box. Only elements already falling
   back through that stack are affected.

   size-adjust  = 1340.3/1396.83 = 95.95%
   ascent  1.01 / 0.9595 = 105.3%   descent 0.30 / 0.9595 = 31.3%
   If no local serif resolves, the face has no source and the stack simply continues. */
@font-face{font-family:'Garamond';src:local('Times New Roman'),local('Liberation Serif'),local('Tinos'),local('Times');size-adjust:95.95%;ascent-override:105.3%;descent-override:31.3%;line-gap-override:0%}

/* ============================================================
   SNC MOBILE HERO PARITY WITH sncdentalbh.com  (2026-08-03)
   Measured at 390x844:

                        BH        snc (before)
     display            flex      block
     space above/below  90/90     100/90     <-- already balanced
     panel height       730       888        <-- 145px past the fold

   snc's problem is not the one snldental and Ranch had. Its copy was already
   optically centred; the panel was simply oversized, because the theme's
   phone padding (100px top / 90px bottom) sits on top of copy that is taller
   here than on the other three. Trimming that padding to 28px brings the panel
   from 888 to about 754, so the hero fits the screen the way BH's does, and
   flex-centring keeps it balanced as the copy changes.

   min-height is a FLOOR, not a cap: if the copy grows the panel still expands
   rather than clipping it.

   Layout only. Colours, logo and type untouched. Delete this block to revert.
   ============================================================ */
@media (max-width:992px){
  /* `body ...` specificity is required to beat the theme's own
     `body .module--hero .hero__panel{min-height:...!important}` */
  body .module--hero .hero__panel{
    min-height:calc(100vh - 97px) !important;
    min-height:calc(100svh - 97px) !important;
    display:flex !important;
    align-items:center !important;
    padding-top:28px !important;
    padding-bottom:28px !important;
  }
  .module--hero .hero__panel > .container{ width:100%; }
  .module--hero .hero__content{
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .hero__panel .hero__mobile-video,
  .hero__panel .hero__desktop-video{ height:100% !important; }

  /* Watch-the-video on its own row above the copy, as on BH, instead of
     absolutely positioned across the eyebrow. */
  .module--hero .sc-peek__btn{
    position:static !important;
    display:inline-flex !important;
    margin:0 0 20px auto !important;
  }
}


/* ============================================================
   BUTTON HOVER CONTRACT  -  2026-08-07
   One hover for every button on all four practices: the fill goes to the brand's
   dark ink, the OUTLINE goes to the brand accent so the edge stays visible on any
   surface, and the label goes light. Beverly Hills has always done this; the
   drawer here already did too. Everything else on this site darkened to the accent
   with a border the SAME colour as the fill, so the button had no edge and the
   label fell from 7.01:1 to 4.82:1.

   Measured, label against fill:
     was    #3C2E3D on #E08A5A =  4.82:1
     now    #FFFFFF on #3C2E3D = 12.72:1   (identical to this site's drawer)
   Outline #E08A5A on the #3C2E3D fill = 3.9:1, so the edge reads on dark and on
   light surfaces alike.
   Delete from this marker down to revert.
   ============================================================ */
body a.btn:hover, body a.btn:focus,
body .btn:hover, body .btn:focus,
body button.btn:hover,
body a.btn--dark:hover, body a.btn--light:hover,
body .text--light .btn:hover,
body .module--hero .btn:hover, body .module--hero .btn:focus,
body .module--hero .hero__content a.btn:hover,
body .module--hero .hero__content a.btn:focus,
body .hero__button .btn:hover, body .hero__button a.btn:hover,
body .footer .btn:hover, body .footer .btn:focus,
body .header__nav li[class*="menu-item--btn"] > a:hover,
body .header__nav li[class*="menu-item--btn"] > a:focus,
body .mobile__nav li[class*="menu-item--btn"] > a:hover,
body .mobile__nav li[class*="menu-item--btn"] > a:focus,
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper input[type="submit"]:focus,
body .gform_wrapper button[type="submit"]:hover,
body .gform_wrapper .gform_button:hover,
body #searchsubmit:hover,
body .module--hero .sc-hero__btn:hover,
body .module--hero .sc-hero__btn:focus{
  background-color:#3c2e3d !important;
  border-color:#e08a5a !important;
  color:#ffffff !important;
}

/* the hero phone CTA paints its label in child spans, so colouring the anchor
   alone leaves the number in its resting colour - the exact fault that produced a
   blank white button on snldental.com. */
body .module--hero .sc-hero__btn:hover .sc-hero__btn-lead,
body .module--hero .sc-hero__btn:hover .sc-hero__btn-num,
body .module--hero .sc-hero__btn:focus .sc-hero__btn-lead,
body .module--hero .sc-hero__btn:focus .sc-hero__btn-num{
  color:#ffffff !important;
}


/* ---- HOVER CONTRACT - SPECIFICITY ESCALATION ----
   An older block on this site uses `html body a.btn.btn:hover` - an html prefix plus
   a doubled class, specificity 1033 with !important - which outranked the contract
   above (1022) for body, form and footer buttons. Nav, drawer and hero were already
   winning; only these were left painting the old 4.82:1 hover.
   Matching the trick with one more class repetition rather than editing the older
   block, which is load-bearing for the resting state. */
html body a.btn.btn.btn:hover, html body a.btn.btn.btn:focus,
html body .btn.btn.btn:hover, html body .btn.btn.btn:focus,
html body a.btn--dark.btn--dark.btn--dark:hover,
html body a.btn--light.btn--light.btn--light:hover,
html body .btn--dark.btn--dark.btn--dark:hover,
html body .btn--light.btn--light.btn--light:hover,
html body .gform_wrapper input[type="submit"][type="submit"]:hover,
html body .gform_wrapper button[type="submit"][type="submit"]:hover,
html body .gform_wrapper .gform_button.gform_button:hover,
html body .footer .btn.btn.btn:hover{
  background-color:#3c2e3d !important;
  border-color:#e08a5a !important;
  color:#ffffff !important;
}


/* ============================================================
   DESKTOP DROPDOWNS - THE DRAWER, LAID SIDEWAYS
   Ported from sncdentalbh.com. The desktop dropdown is now the mobile drawer
   turned on its side: identical surface (#f7f5f3), identical hairline between
   rows, identical 48px row height, identical peach wash across the full row on
   hover, identical 13px sentence-case label. One column, one decision per line,
   instead of the theme's stock 200px dropdown.

   SELECTOR NOTE: this site's top-level list is
     .header__nav .menu-main-menu-container > ul
   NOT .menu-primary-container, which is what Beverly Hills and Scottsdale Ranch
   use. There is also NO .menu class on it, so ".header__nav .menu > li" matches
   nothing. Copying the BH block here verbatim silently does nothing at all.

   BREAKPOINT: an earlier block hides .header__nav at max-width:1199px, so the
   desktop nav only exists from 1200px up and this block starts at exactly that
   width. Raising it would leave a band where the stock dropdown returns.

   THIRD-LEVEL ITEMS ARE HIDDEN, deliberately - this menu has 7 of them. The
   drawer keeps them collapsed until the parent is tapped, so showing them all on
   desktop was never matching the drawer, it was matching nothing. Each parent row
   links to its own page, which lists its children in full.

   PANEL WIDTH: 276px, not the 320px this was ported at. MEASURED on the live site
   with the applied typography, the widest row here is "Periodontal Disease
   Treatment" at 209px; with the 22px padding either side that needs 253px, so 320px
   was leaving ~67px of dead space beside every label. 276px keeps 23px of slack for
   a font fallback rendering wider. A longer future label does not break the panel -
   rows are white-space:normal with a 48px min-height, so it wraps to a taller row.

   Anchoring: the nav needs position:relative and the ITEM is the containing
   block, so each panel hangs under its own label. Pure CSS on :hover and
   :focus-within - no JavaScript, so NitroPack's script delay cannot leave it
   dead, and it opens from the keyboard.
   ============================================================ */
@media (min-width:1200px){
  .header__nav{ position:relative !important; }
  .header, .header__main, .header__flex, .header__nav,
  .menu-main-menu-container, .header__nav .menu-main-menu-container > ul{ overflow:visible !important; }
  .header__nav .menu-main-menu-container > ul{ position:static !important; }
  .header__nav .menu-main-menu-container > ul > li.menu-item-has-children{ position:relative !important; }

  .header__nav .menu-main-menu-container > ul > li.menu-item-has-children > .sub-menu{
    position:absolute !important; top:100% !important; left:0 !important; right:auto !important;
    display:block !important; columns:auto !important; float:none !important;
    width:276px !important; min-width:0 !important; max-width:none !important;
    margin:0 !important; padding:0 !important; list-style:none !important;
    transform:translateY(-4px) !important;
    background:#f7f5f3 !important;
    border:0 !important;
    border-top:2px solid #e08a5a !important;
    box-shadow:0 18px 34px -18px rgba(0,0,0,.28) !important;
    border-radius:0 0 2px 2px !important;
    /* a single column of rows can genuinely scroll, unlike a columns box, so a
       long menu is capped to the space under the bar instead of running off screen */
    max-height:min(70vh, calc(100vh - 240px)) !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transition:opacity .16s ease, transform .16s ease, visibility .16s !important;
    z-index:140 !important; text-align:left !important;
  }
  .header__nav .menu-main-menu-container > ul > li.menu-item-has-children:hover > .sub-menu,
  .header__nav .menu-main-menu-container > ul > li.menu-item-has-children:focus-within > .sub-menu{
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  /* one row per service, hairline between, exactly as the drawer does it */
  .header__nav .menu-main-menu-container > ul > li > .sub-menu > li{
    display:block !important; width:100% !important; position:static !important;
    margin:0 !important; padding:0 !important; float:none !important;
    border:0 !important; border-bottom:1px solid rgba(60,46,61,.07) !important;
  }
  .header__nav .menu-main-menu-container > ul > li > .sub-menu > li:last-child{ border-bottom:0 !important; }
  .header__nav .menu-main-menu-container > ul > li > .sub-menu > li > a{
    display:flex !important; align-items:center !important;
    min-height:48px !important; padding:13px 22px !important; box-sizing:border-box !important;
    font-size:13px !important; font-weight:500 !important;
    letter-spacing:.08em !important; text-transform:none !important; line-height:1.35 !important;
    color:#595959 !important; background:transparent !important; border:0 !important;
    white-space:normal !important; text-align:left !important; text-decoration:none !important;
    transition:background-color .14s ease, color .14s ease !important;
  }
  .header__nav .menu-main-menu-container > ul > li > .sub-menu > li > a:hover,
  .header__nav .menu-main-menu-container > ul > li > .sub-menu > li > a:focus-visible{
    color:#3c2e3d !important; background-color:rgba(253,174,132,.20) !important;
  }

  /* third level stays closed, as it does in the drawer */
  .header__nav .menu-main-menu-container > ul > li > .sub-menu .sub-menu{ display:none !important; }
  .header__nav .menu-main-menu-container > ul > li > .sub-menu .menu-item-has-children > a::after{
    display:none !important; content:none !important;
  }

  /* the theme's caret is drawn for a 200px dropdown and lands nowhere near the
     open item; the accent top border already joins panel to bar */
  .header__nav .menu-main-menu-container > ul > li > .sub-menu::before,
  .header__nav .menu-main-menu-container > ul > li > .sub-menu::after{
    content:none !important; display:none !important; border:0 !important;
  }

  /* a slim scrollbar only where a menu is actually long enough to need one */
  .header__nav .menu-main-menu-container > ul > li > .sub-menu{ scrollbar-width:thin !important; }
  .header__nav .menu-main-menu-container > ul > li > .sub-menu::-webkit-scrollbar{ width:8px !important; }
  .header__nav .menu-main-menu-container > ul > li > .sub-menu::-webkit-scrollbar-thumb{
    background:rgba(60,46,61,.18) !important; border-radius:4px !important;
  }

  /* keyboard focus must be visible, same ring the drawer toggle uses */
  .header__nav .menu-main-menu-container > ul > li > a:focus-visible,
  .header__nav .menu-main-menu-container > ul > li .sub-menu a:focus-visible{
    outline:2px solid #e08a5a !important; outline-offset:2px !important;
  }
}


/* ============================================================
   NAV ROW STRETCH - NO DEAD BAND UNDER THE LABEL
   MEASURED before this rule: the nav row is 49px tall but each item's box is
   only 34px, sitting on the text baseline, so its bottom edge was 8px ABOVE the
   bottom of the bar. The panel hangs from top:100% of the item, so it started
   8px inside the header and cut a step into it.

   Every item now fills the row top to bottom, which puts top:100% exactly on the
   bar's bottom edge.

   The row is flex ONLY to allow align-self:stretch. MEASURED: intrinsic content
   is 1033px against a 1061px list, so there are 28px of headroom. flex-wrap:nowrap
   is load-bearing: it guarantees CALL NOW can never drop to a second line, which
   inline-block layout would happily do. Do not add a gap or padding here.
   ============================================================ */
@media (min-width:1200px){
  .header__nav .menu-main-menu-container > ul{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:stretch !important; justify-content:center !important;
  }
  .header__nav .menu-main-menu-container > ul > li{
    flex:0 0 auto !important; display:flex !important; align-items:center !important;
  }
  .header__nav .menu-main-menu-container > ul > li.menu-item-has-children{
    align-self:stretch !important;
  }
}