/*
Theme Name: dr-shari-carroll
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.10
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* "Meet Our Pediatric Dentists" grid — matches dr-sheri-carroll.local:
   CSS grid, 2 equal columns, gap 44px 48px desktop / 34px stacked mobile.
   Grid stretch gives both cards equal height. */
.row.sc-doctors-wrap {
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.row.row-large.align-center.sc-doctors-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
    justify-content: normal !important;
    flex-wrap: nowrap !important;
}
@media (min-width: 850px) {
    .row.row-large.align-center.sc-doctors-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 44px 48px !important;
    }
}
.row.row-large.align-center.sc-doctors-grid > .col.sc-doctor-card.medium-12.small-12.large-6 {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    align-self: stretch !important;
}
@media (max-width: 849px) {
    .row.sc-doctors-wrap > .col {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .row.row-large.align-center.sc-doctors-grid {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 549px) {
    .row.row-large.align-center.sc-doctors-grid .col.sc-doctor-card.medium-12.small-12.large-6 .sc-doctor-name,
    .row.row-large.align-center.sc-doctors-grid .col.sc-doctor-card.medium-12.small-12.large-6 .sc-doctor-bio,
    .row.row-large.align-center.sc-doctors-grid .col.sc-doctor-card.medium-12.small-12.large-6 .sc-doctor-cta {
        padding: 0 22px !important;
    }
    .row.row-large.align-center.sc-doctors-grid .col.sc-doctor-card.medium-12.small-12.large-6 .col-inner > .img {
        margin-bottom: 24px !important;
    }
}
.col.sc-doctor-card > .col-inner {
    padding: 0 0 34px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.col.sc-doctor-card .col-inner > .img {
    margin-bottom: 30px !important;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

}

/* ==========================================================================
   MOBILE HERO TITLE CARDS (service pages) — Item 10
   On phones (<=549px) Flatsome's res-text clamp pushed the white title card
   to the top of the photo hero, hiding the child's face behind it. Pin the
   card to its intended low position and shrink the H1 so the photo is
   composed properly behind the title. Desktop/tablet layout is untouched.
   ========================================================================== */
@media screen and (max-width: 549px) {
    /* Item 10: reset Flatsome's x50 offset so the card never runs past the right edge on phones */
    .sc-em-hero .sc-em-card {
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: 16px !important;
        transform: none !important;
    }
    .sc-em-hero .sc-em-card .text {
        padding: 18px 16px 20px !important;
    }
    .sc-em-hero .sc-em-h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin: 0 0 14px !important;
    }
}

/* ==========================================================================
   CALL OUR OFFICE BUTTONS: never clip the phone number.
   The label ("CALL OUR OFFICE: 310-357-4414") is wide and uses negative letter-spacing, so on
   narrow iPhones (375-393px) the last digit was cut by the button's overflow. The label now
   scales with the viewport width, has no clipping, and wraps to a second line only as a last
   resort. Scoped to the red buttons only (the old rule hit every tel: link).
   ========================================================================== */
.button.sc-em-phone,
.button.sc-em-cta-btn {
    overflow: visible !important;
    text-overflow: clip !important;
}
@media (max-width: 549px) {
    .sc-em-hero .sc-em-card .button.sc-em-phone,
    .button.sc-em-phone {
        font-size: clamp(12px, 4vw, 16px) !important;
        letter-spacing: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        min-height: 44px !important;
        text-align: center !important;
    }
    .button.sc-em-phone span { white-space: nowrap; }
}

/* Item 3: homepage landscape hero.
   Root cause: the header is too tall in landscape (large logo row on phones, a 112px
   primary-nav row on tablets), pushing the slider below the fold so the lower part of the
   photo and the pagination dots are cut off-screen. Fix: compact the header on short
   landscape viewports so the whole slider + dots fit on screen. (The previous 30vh clamp
   could not win against Flickity's JS-set inline height, so it was removed.) */
@media (orientation: landscape) and (max-height: 600px) {
    /* Phones / short landscape: hide the social top bar and shrink the logo row */
    .header-wrapper .header-top { display: none !important; }
    #masthead,
    #masthead .header-inner {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    #masthead #logo { height: auto !important; min-height: 0 !important; }
    #masthead img.header-logo,
    #masthead img.header-logo-dark { max-height: 46px !important; }
    #masthead .nav > li > a { padding: 6px 8px !important; font-size: 13px !important; }
    #masthead .nav-icon { font-size: 15px !important; }
    .header-wrapper { min-height: 0 !important; }
    /* The 'Diplomate...' tagline is absolutely positioned for the tall header (top: 135px); with the compact
       header it floated on top of the carousel photo, so it is hidden on short landscape screens. */
    .header-block.block-html-after-header { display: none !important; }
}
/* Tablet landscape: collapse the tall primary-nav row so the slider clears the fold */
@media (orientation: landscape) and (min-width: 800px) and (max-width: 1180px) and (max-height: 920px) {
    .header-wrapper .header-top { display: none !important; }
    .header-wrapper .header-bottom {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .header-wrapper .header-bottom .menu-item { height: auto !important; }
    .header-wrapper .header-bottom .nav-top-link { line-height: 34px !important; font-size: 13px !important; padding: 0 9px !important; }
    .header-block.block-html-after-header { display: none !important; }
}
/* Keep the carousel dots readable over bright hero photos */
.sc-hero-section .flickity-page-dots .dot {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
}

/* ==========================================================================
   HOME HERO SLIDER: frame the people in every orientation.
   The slides are cropped with background-size: cover, so what shows depends on the vertical
   focal point. The old blanket rules (centre / top / 38% on every slide, ~38% in short landscape)
   cut the doctors' heads off. Slide 5 (doctors + dragon) and slide 4 (child at the front desk)
   get their own focal point so the faces and the tops of heads stay in frame on phones,
   tablets and desktops. Slides 1-3 (rooms, no people) keep the default framing.
   Specificity is high on purpose: it must beat the customizer's !important 38% rule.
   ========================================================================== */
.sc-hero-section .slider-wrapper .flickity-slider > .banner:nth-child(5) .banner-bg .bg,
.sc-hero-section .slider-wrapper .flickity-slider > .banner:nth-child(5) .bg.bg-loaded {
    background-position: 50% 22% !important;
}
.sc-hero-section .slider-wrapper .flickity-slider > .banner:nth-child(4) .banner-bg .bg,
.sc-hero-section .slider-wrapper .flickity-slider > .banner:nth-child(4) .bg.bg-loaded {
    background-position: 50% 65% !important;
}

/* ==========================================================================
   HOME HERO: no gap under the nav bar, bottom flush with the screen (>= 850px wide).
   assets/sc-hero-fit.js measures the nav bar and sets --sc-hero-h = screen height - nav bottom.
   The fallback below is used until the script runs.
   ========================================================================== */
@media (min-width: 850px) {
    html body .sc-hero-section { padding-top: 0 !important; padding-bottom: 0 !important; }
    html body .sc-hero-section .section-content,
    html body .sc-hero-section .slider-wrapper,
    html body .sc-hero-section .slider,
    html body .sc-hero-section .flickity-viewport,
    html body .sc-hero-section .slider-wrapper .flickity-viewport,
    html body .sc-hero-section .flickity-slider,
    html body .sc-hero-section .flickity-slider > * {
        height: var(--sc-hero-h, clamp(440px, 64svh, 640px)) !important;
    }
}

/* ==========================================================================
   HOME "Call Our Office" / "Get Directions" buttons on phones.
   The two buttons wrap onto separate lines but kept their left/right margins (8px on one side each),
   so the second sat 16px to the right of the first. Stack them centered, same width, equal spacing.
   ========================================================================== */
@media (max-width: 549px) {
    html body .sc-cta-wrap .col-inner {
        flex-direction: column !important;
        align-items: center !important;
        column-gap: 0 !important;
    }
    html body .sc-cta-wrap .col-inner .button.sc-cta-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 0 12px 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    html body .sc-cta-wrap .col-inner .sc-cta-note { width: 100%; }
}

/* ==========================================================================
   Text-only banners on phones ("Services" and "Children with Special Needs").
   Their phone height (807px / 615px) was set for a layout with a background picture, but the banner holds only
   a text box centred in it, leaving 150-240px of empty space above and below the text. On phones the banner now
   sizes to its text. Tablets and desktop are unchanged.
   ========================================================================== */
@media (max-width: 549px) {
    html body .banner.sc-text-only-banner { padding-top: 0 !important; height: auto !important; min-height: 0 !important; }
    html body .sc-text-only-banner .banner-inner { position: relative !important; }
    html body .sc-text-only-banner .banner-layers { position: relative !important; height: auto !important; display: block !important; padding: 24px 0 !important; }
    html body .sc-text-only-banner .banner-layers > .text-box {
        position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        transform: none !important; margin: 0 auto !important;
    }
}

/* ==========================================================================
   HOME "Contact" section on phones: tighten the space between the address/parking text and the picture below it.
   The text was followed by a 30px spacer, a 24px paragraph margin and 40px of section padding.
   ========================================================================== */
@media (max-width: 549px) {
    html body .sc-contact-section { padding-bottom: 8px !important; }
    html body .sc-contact-section .col-inner > .gap-element:last-child { display: none !important; }
    html body .sc-contact-section .col-inner > p:last-of-type { margin-bottom: 0 !important; }
}