/* ---------------------------------------------------------------------------
 * Deliberate deviations from the imported WordPress rendering.
 * Loaded last so it wins over the page's Elementor custom CSS.
 * ------------------------------------------------------------------------- */

/* The fixed "Call Now / Book Now" bar is for phones only.
 *
 * Two rules in the theme fight against that. The footer prints
 * `.mobile-cta { display: flex !important }` for viewports up to 767px, and a
 * script adds a `show` class once the visitor scrolls — which picks up the
 * theme's generic `.show { display: block !important }` and puts the bar on
 * screen at any width. Both are single-class selectors, and the theme's copy is
 * printed inline in the footer — later in the document than this file — so a
 * matching selector would lose the tie. The bar's id settles it outright.
 *
 * Requested: hidden on desktop, shown below 600px. Change the breakpoint below
 * to move that line; delete the block to go back to the theme's 767px. */
#mobileCTA,
.mobile-cta,
.mobile-cta.show {
    display: none !important;
}

@media (max-width: 599px) {
    #mobileCTA,
    .mobile-cta,
    .mobile-cta.show {
        display: flex !important;
    }
}

/* Blog article hero: the headline sits over the banner rather than above the
   body, and the banner is shorter than the site-wide 600px one. The theme sets
   its height with !important, so this has to answer in kind. The dark overlay
   and stacking come from the theme's own .banadjust rules. */
.inner-banner.banadjust.post-hero-banner {
    height: 300px !important;
    /* The header is absolutely positioned over the top of the banner, so the
       headline is padded clear of it. --nav-h is published by the header script
       because the header's height changes with the viewport; the fallback here
       covers the moment before that runs. The padding counts inside the 300px
       because the theme sets border-box, and below 850px the theme pads this
       element by 200px top and bottom — which alone is taller than the hero
       should be — so every value is stated outright. */
    padding: var(--nav-h, 140px) 0 0 !important;
    display: flex;
    align-items: center;
}

.post-hero { width: 100%; }

/* The theme carries a blanket `h1 { font-size: 12px !important }`, so every
   size here has to answer in kind. */
.post-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 30px !important;
    line-height: 1.3;
    font-weight: 700;
}

/* Narrower than this the menu can wrap onto a second line, making the header
   taller, so the banner grows to fit rather than squeezing the headline. */
@media (max-width: 991px) {
    .inner-banner.banadjust.post-hero-banner {
        height: auto !important;
        min-height: 240px;
        padding: calc(var(--nav-h, 150px) + 16px) 0 28px !important;
    }
    .post-hero h1 { font-size: 26px !important; }
}

@media (max-width: 767px) {
    .inner-banner.banadjust.post-hero-banner {
        min-height: 200px;
        padding: calc(var(--nav-h, 150px) + 16px) 0 32px !important;
    }
    .post-hero h1 { font-size: 22px !important; line-height: 1.35; }
}

@media (max-width: 480px) {
    .post-hero h1 { font-size: 20px !important; }
}

/* The page's Elementor custom CSS ends with `nav.nav{z-index:2}`, which lets
 * page content paint over the sticky header. The theme's own stylesheet
 * intends `nav{z-index:9999}`; restore that. */
nav.nav,
nav.nav.fixed {
    z-index: 9999;
}

/* Keep the slide-out mobile menu above the header it replaces. */
html.open-menu nav.nav1 {
    z-index: 10000;
}

/* ---------------------------------------------------------------------------
 * Fallback styling for repeater items added from the admin panel.
 *
 * Items imported from WordPress still carry their original Elementor element
 * ids, and those rules (`.elementor-1573 .elementor-element.elementor-element-X`)
 * outrank everything below — so these only take effect for new items.
 * ------------------------------------------------------------------------- */

/* Service grid — card */
.cms-service-card {
    --display: flex;
    --min-height: 241px;
    --justify-content: center;
    --gap: 0px 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    --overlay-opacity: 0.44;
    border-style: solid;
    --border-style: solid;
    border-width: 1px;
    --border-top-width: 1px;
    --border-right-width: 1px;
    --border-bottom-width: 1px;
    --border-left-width: 1px;
    border-color: var(--e-global-color-f761767);
    --border-color: var(--e-global-color-f761767);
    --border-radius: 10px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cms-service-card::before {
    background-color: #4C9BD1;
    --background-overlay: '';
}

.cms-service-card:hover::before {
    background-color: #00000080;
    --background-overlay: '';
}

.cms-service-card:hover {
    --overlay-opacity: 0.73;
}

.cms-service-card-title {
    text-align: center;
}

.cms-service-card-title .elementor-heading-title {
    font-family: "Open Sans", Sans-serif;
    font-size: 25px !important;
    font-weight: 500;
    color: #FFF;
}

/* "Why Mill Mountain" tiles */
.cms-why-tile {
    --display: flex;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.cms-why-tile-image {
    text-align: center;
}

.cms-why-tile-image img {
    width: 100%;
    border-radius: 50%;
}

.cms-why-tile-title {
    text-align: center;
}

.cms-why-tile-title .elementor-heading-title {
    font-family: "Open Sans", Sans-serif;
    font-size: 20px !important;
    font-weight: 600;
    color: #000;
}

/* "What We Do" column */
.cms-whatwedo-col {
    --display: flex;
}

/* Lead-dentist credentials table. These rules used to sit in an inline <style>
 * inside the widget's HTML; they moved here when the block became editable
 * label/value rows. */
.info-box div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.info-box span,
.info-box strong {
    color: #000;
}

/* ---------------------------------------------------------------------------
 * Footer, rearranged at the client's request: services where the contact
 * details used to be, the contact details last, and the association badges on
 * a line of their own rather than stacked in a column.
 * ------------------------------------------------------------------------- */

/* The badges sat one under another in a narrow column. Across the full width
   they only need to be small, evenly spaced and on one row. */
.ftr-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 26px 0 6px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Below 950px the theme sizes each badge at a third of the row and pads it,
   which with any gap at all adds up to more than the width and pushes the third
   onto a line of its own. That rule is more specific than a two-class selector
   here and is printed after this file, so these have to shout. Each badge ends
   up only as wide as the image inside it. */
.ftr-badges .imgscompany {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ftr-badges .imgscompany img {
    height: 54px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* The services column borrows the hours styling; these are the differences. */
.ftr-services ul { list-style: none; padding: 0; margin: 0; }
.ftr-services ul li { margin-bottom: 10px; }

.ftr-services ul li a {
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    text-decoration: none;
}

.ftr-services ul li a:hover { color: var(--e-global-color-f761767, #f9df4e); }

@media (max-width: 600px) {
    .ftr-badges { gap: 22px; padding-top: 20px; }
    .ftr-badges .imgscompany img { height: 42px; }
}

/* Blog article bullet lists render smaller, and in a different typeface,
 * than the surrounding body text. The theme styles .single-pst .desc p
 * explicitly (Roboto, weight 300, 18px / 30px desktop, 13px / 20px below
 * 850px) but never gives .single-pst .desc li a matching rule, so list text
 * falls back to the 12px sitewide base font instead. These mirror the
 * paragraph's font, weight, and size at both widths so bullets read as part
 * of the same block of text rather than a different style. */
.single-pst .desc ul,
.single-pst .desc li {
    font-family: "Roboto", "Open Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #000;
    font-size: 18px;
    line-height: 1.8em;
}

@media screen and (min-width: 100px) and (max-width: 850px) {
    .single-pst .desc ul,
    .single-pst .desc li {
        font-size: 13px;
        line-height: 23px;
    }
}

/* Map + NAP block added to the location-hub pages (default.php) and their
   individual location pages (dental-template-1.php), via
   partials/location-map-nap.php. Rendered only when the page's map_embed
   field is set, so unrelated pages sharing those templates are unaffected. */
.cms-location-map {
    padding: 10px 0 40px;
}

.cms-location-note {
    max-width: 1140px;
    margin: 0 auto 26px;
}

.cms-location-note h2 {
    font-size: 24px;
    font-weight: 700;
    color: #16324a;
    margin: 0 0 12px;
}

.cms-location-note p {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    margin: 0;
}

.cms-location-map-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: stretch;
    max-width: 1140px;
    margin: 0 auto;
}

.cms-location-map-embed {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
    min-height: 380px;
}

.cms-location-map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

.cms-location-nap {
    background: #fbfaf7;
    border-radius: 10px;
    padding: 28px 26px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

.cms-location-nap-name {
    font-size: 20px;
    font-weight: 700;
    color: #16324a;
    margin: 0 0 14px;
}

.cms-location-nap-phone a {
    color: #16324a;
    font-weight: 600;
    text-decoration: none;
    font-size: 17px;
}

.cms-location-nap-phone a:hover {
    color: #4C9BD1;
}

.cms-location-nap-address {
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    margin: 10px 0 20px;
}

.cms-location-nap-hours-heading {
    font-size: 16px;
    font-weight: 700;
    color: #16324a;
    margin: 0 0 10px;
}

.cms-location-nap-hours {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cms-location-nap-hours li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    font-size: 14px;
    color: #333;
}

.cms-location-nap-hours li:last-child {
    border-bottom: 0;
}

@media (max-width: 850px) {
    .cms-location-map-grid {
        grid-template-columns: 1fr;
    }
    .cms-location-map-embed,
    .cms-location-map-embed iframe {
        min-height: 300px;
    }
}

/* Homepage "Searching for the best dentist in Roanoke VA?" welcome intro.
 * The imported Elementor CSS hardcodes this one paragraph to Roboto at
 * 16px/400/26px, while the rest of the homepage's body copy (about_content,
 * and the vast majority of elementor-css-post-1573.css, ~71 rules vs 6) uses
 * Open Sans at 18px/300/32px. Both fonts now load correctly (see header.php's
 * Google Fonts link), which is what made the mismatch visible instead of
 * both silently falling back to the same generic sans-serif. Match every
 * typography value here, not just the family, so this paragraph reads as
 * the same style as the rest of the page, not just the same typeface. */
.elementor-element-638e1f6 .elementor-heading-title {
    font-family: "Open Sans", Sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 32px !important;
    color: #000 !important;
}

/* ---------------------------------------------------------------------------
 * Site-wide font standardization: "Open Sans", Sans-serif everywhere.
 *
 * The WordPress import left dozens of different font-family declarations
 * scattered across per-widget Elementor CSS (Roboto, Roboto Slab, DM Sans,
 * Helvetica Neue, plus many elements with no declaration at all inheriting
 * whatever their container happened to set). This forces one consistent
 * typeface everywhere, overriding all of that regardless of specificity.
 *
 * Icon classes are restored immediately below and MUST stay listed after
 * this rule. Font Awesome, dashicons and elementskit icons work by mapping
 * specific Unicode code points to glyphs in their own font file - and,
 * critically, neither Font Awesome's nor dashicons' own CSS protects itself
 * with !important - so without the restoration rule below, every icon on
 * the site (phone, map marker, clock, arrows, socials, etc.) would silently
 * render as a blank box instead of an icon.
 * ------------------------------------------------------------------------- */
body,
body * {
    font-family: "Open Sans", Sans-serif !important;
}

.fa,
.fas,
.far {
    font-family: "Font Awesome 5 Free" !important;
}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
}

.dashicons,
.dashicons-before:before {
    font-family: dashicons !important;
}

.ekit-wid-con .fasicon,
.ekit-wid-con .icon,
.ekit-wid-con .icon::before,
.fasicon,
.icon,
.icon::before {
    font-family: elementskit !important;
}

/* "Medically Reviewed By" block appended to the bottom of blog post content,
   crediting Dr. Priyanka Dutt as clinical reviewer (E-E-A-T signal for
   health-content pages). Shared markup lives in each post's content field.
   The heading sits outside/above the box (bold label), and the photo is
   sized to sit properly adjacent to the bio text, not dwarfed by it.
   !important is required on the text properties here: the theme forces
   .single-pst .desc p to font-weight:300/font-size:18px, and that selector
   (two classes + a type) is more specific than a single class, so it wins
   over these rules otherwise - which is why the heading wasn't bolding. */
.reviewed-by-heading {
    margin: 40px 0 10px;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #16324a;
}

.reviewed-by {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 20px;
    padding: 20px;
    background: #fbfaf7;
    border-radius: 10px;
    border-top: 3px solid #15a4b7;
}

.reviewed-by-photo {
    width: 110px;
    height: 110px;
    min-width: 110px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewed-by-name {
    margin: 0 0 6px;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.reviewed-by-name a {
    color: #16324a;
    text-decoration: none;
}

.reviewed-by-name a:hover {
    text-decoration: underline;
}

.reviewed-by-bio {
    margin: 0;
    font-size: 18px !important;
    font-weight: 300;
    line-height: 1.6;
    color: #444;
}

@media (max-width: 480px) {
    .reviewed-by {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .reviewed-by-photo {
        width: 90px;
        height: 90px;
        min-width: 90px;
    }
}

/* Breathing room between the "Frequently Asked Questions" heading and the
   first question directly below it - they were rendering flush against
   each other with no visual separation. */
.single-pst .desc h2 + h3 {
    margin-top: 22px;
}

/* "Meet the Doctor" feature section appended to the bottom of hub/location
   pages centered on a specific doctor's specialty - dental implants pages
   feature Dr. Felo, general-dentist location pages feature Dr. Dutt.
   Rendered via the doctor_feature field on dental-template-1 pages, or
   inline in the content field on the location-hub pages (default.php). */
.doc-feature {
    padding: 40px 0 10px;
}

.doc-feature-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 34px;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    background: #fbfaf7;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

.doc-feature-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.doc-feature-eyebrow {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4C9BD1;
    margin: 0 0 8px;
}

.doc-feature-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: #16324a;
    margin: 0 0 4px;
}

.doc-feature-title {
    font-size: 16px;
    font-weight: 600;
    color: #15a4b7;
    margin: 0 0 14px;
}

.doc-feature-body p {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    margin: 0 0 18px;
}

.doc-feature-btn {
    display: inline-block;
    padding: 12px 26px;
    background: #16324a;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.doc-feature-btn:hover {
    background: #4C9BD1;
}

@media (max-width: 700px) {
    .doc-feature-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .doc-feature-img img {
        max-width: 160px;
        margin: 0 auto;
    }
}


/* Sitewide insurance strip (partials/insurance-section.php, printed by
   layouts/footer.php). Mirrors the homepage "Dental insurances and finances"
   section, restyled for the inner-page theme. */
.ins-sec {
  padding: 50px 0 34px;
  background: #fbfaf7;
  text-align: center;
  margin-top: 40px;
  border-top: 1px solid #ece7dc;
}
.ins-sec .container { max-width: 1140px; }
.ins-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4C9BD1;
  margin: 0 0 8px;
}
.ins-sec h2 {
  font-size: 30px;
  font-weight: 700;
  color: #16324a;
  margin: 0 0 14px;
}
.ins-lede {
  max-width: 760px;
  margin: 0 auto 26px;
  font-size: 17px;
  line-height: 1.7;
  color: #444;
}
.ins-marquee {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e1d6;
  padding: 22px 0;
}
.ins-track {
  display: flex;
  gap: 56px;
  width: max-content;
  align-items: center;
  animation: insSlide 50s linear infinite;
}
.ins-marquee:hover .ins-track,
.ins-marquee:focus-within .ins-track { animation-play-state: paused; }
.ins-track img {
  height: 44px;
  width: auto;
  flex: none;
  object-fit: contain;
}
@keyframes insSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ins-names {
  max-width: 860px;
  margin: 20px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}
.ins-names a { color: #16324a; font-weight: 600; }
.ins-paylines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.ins-paylines li {
  border: 1px solid #d9d3c3;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: #16324a;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .ins-track { animation-duration: 120s; }
}
@media (max-width: 700px) {
  .ins-sec { padding: 36px 0 26px; }
  .ins-sec h2 { font-size: 24px; }
  .ins-track { gap: 36px; }
  .ins-track img { height: 36px; }
}

/* Tables inside blog posts (first used by the insurance guides) */
.single-pst .desc table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 15px; }
.single-pst .desc th, .single-pst .desc td { border: 1px solid #e0dccf; padding: 10px 12px; text-align: left; vertical-align: top; }
.single-pst .desc th { background: #f4f1ea; color: #16324a; }

/* Dental implants page (page 124): tables, updated line; sitewide button centered under the centered intro */
.dpt-1 .dpt12btn { text-align: center; }
.impl-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 15px; }
.impl-table th, .impl-table td { border: 1px solid #e0dccf; padding: 10px 12px; text-align: left; vertical-align: top; }
.impl-table th { background: #f4f1ea; color: #16324a; }
.impl-table td { background: #fff; color: #2b2b2b; }
.impl-updated { font-size: 13px; color: #777; margin-top: 18px; }
@media (max-width: 600px) { .impl-table { font-size: 13px; } .impl-table th, .impl-table td { padding: 8px; } }