/* ---------------------------------------------------------------------------
 * 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 than the surrounding body text.
 * The theme sizes .single-pst .desc p and h3 explicitly (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 instead. These
 * mirror the paragraph values at both widths so bullets read the same size
 * as the text around them. */
.single-pst .desc ul,
.single-pst .desc li {
    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;
    }
}