/*
 * DoctorLogic faithful-replica overrides.
 * Loaded after the ported per-template stylesheet.
 */

/* Safety net: js/lazyload.js (ported from the PVPS capture) promotes data-src
   and adds .visible.complete to fade media in; if it ever fails to run, keep
   lazy-deferred media visible rather than opacity:0-invisible. */
.lazy-load-image,
.lazy-background,
.lazy-iframe {
    opacity: 1 !important;
}

/* The DoctorLogic CTA button style targets a bare `button` selector, so it leaks
   onto the theme nav's <button class="toggle-dropdown"> (dropdown toggles) — making
   them dark pills (border-radius/min-width/uppercase/etc.). navigation.css resets
   background/border/padding/width but NOT these, so neutralize only the leaked
   props, scoped to the nav (real content CTA buttons keep the DL style). */
.glacial-top-banner button,
#navigation button,
#navigation .toggle-dropdown {
    border-radius: 0;
    min-width: 0;
    margin: 0 !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    line-height: inherit;
}

/* Promo notification bar: the original button style lived in a nested promo doc
   we strip out; restore a compact centered banner + button. */
.header__notification-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.3;
}

/* ---- Before/After gallery (before_after_case CPT + ba_type taxonomy) ---- */
.ba-noresults {
    text-align: center;
    padding: 40px;
    font-size: 18px;
}

/* The gallery list sidebar renders DL's real modal chrome (fixed-bottom
   .filter__toggle "Search" bar + .modal-state checkbox + .modal wrapper) — see
   glacial_ba_filter_sidebar(). gallerylist.css natively handles both viewports:
   below 1241px the sidebar is the checkbox modal, at min-width:1241px .modal is
   reset inline and the toggle hides. No layout shim needed here — an earlier
   one stacked .filter/.content-wrapper full-width on mobile, justified by a
   misread of `.modal-window--open figure{position:absolute!important}` (the
   case LIGHTBOX, not the filter modal). */

/* Before/After case detail: the Practitioner/Category/Procedure filter nav
   (glacial_ba_filter_sidebar) is injected into the left
   .galleryitem__details_container panel — the SAME component the term archive
   renders. But the detail page loads css/dl/gallery.css, which styles
   `.filter__link` for the page's ACF facets (bulleted list, underlined links, a
   "label:" colon after every span) rather than the archive's clean sidebar
   (css/dl/gallerylist.css). Re-apply the archive's treatment so the two sidebars
   match. Everything below is scoped to `.modal__container` — only the injected
   nav has it — so the patient/pictures/research facets (.filter--no-modal) keep
   their own styling. */

/* Blend the panel in (no separate white card). */
.galleryitem__details_container .filter--sidebar,
.galleryitem__details_container .filter--sidebar .modal__container {
    background: transparent !important;
}

/* Drop the list bullets + tighten items (gallerylist.css does this via
   .modal__container ul/li; gallery.css omits it, so discs show). */
.galleryitem__details_container .filter--sidebar .modal__container ul {
    padding: 0;
    list-style: none;
}

.galleryitem__details_container .filter--sidebar .modal__container li {
    line-height: 1;
    padding: 0;
}

.galleryitem__details {
    padding: 0 30px 30px;
}

.galleryitem .filter__group {
    padding: 0;
}

.galleryitem__research-items h3 {
    margin-top: 0 !important;
}

.listcard__card-headline {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Links: dark, not underlined — matching the archive sidebar. */
.galleryitem__details_container .filter--sidebar .modal__container a.filter__link {
    color: #333 !important;
    text-decoration: none !important;
}

.galleryitem__details_container .filter--sidebar .modal__container a.filter__link:hover {
    color: #3c313d !important;
}

.galleryitem__details_container .filter--sidebar .modal__container .filter__link::before {
    background: #3c313d !important;
}

/* gallery.css appends a ":" after every .filter__link span (for the facet
   "Age:/Gender:" labels); the injected nav uses that span for the count badge,
   so the colon leaks onto the numbers. Suppress it here. */
.galleryitem__details_container .filter--sidebar .modal__container .filter__link span::after {
    content: none !important;
}

/* Single before/after case grid (.galleryitem__images): the left sidebar
   (.galleryitem__details_container) spans BOTH grid rows (grid-row:1/span 2),
   while the cards sat in row 1 and the description in row 2. When a sidebar
   <details> filter expands, the sidebar grows taller than the right column and
   CSS Grid distributes that extra height into both rows — pushing the cards and
   description apart, and stretching the right-column items to the row height.
   The cards + description are now wrapped in .galleryitem__main (one grid cell),
   so they stack in normal flow and the sidebar's height can't wedge between them.
   align-self:start keeps them top-aligned (no vertical stretch); the sidebar
   keeps its default stretch so its panel still fills the column. */
.galleryitem__main {
    grid-column: auto / span 24;
}

@media (min-width: 1241px) {
    .galleryitem__main {
        grid-column: 7 / span 19;
        grid-row: 1 / span 2;
        align-self: start;
    }
}

/* --- glacial native megafinder (locations-and-providers) --------------------
   The sticky map height uses --header-height, set by js/glacial-finder.js from
   the nav banner. Provide a fallback so the map is a sane height pre-JS, and a
   placeholder background for provider cards missing a headshot. */
.megafinder--h .map.megafinder-map {
    height: calc(100vh - var(--header-height, 110px));
    min-height: 480px;
}

.glacial-megafinder .card__image {
    background-color: var(--color-3, #b3ac9a);
}

/* native megafinder: map info-window (card--map cards) */
.megafinder__infowindow {
    /*max-width: 340px;*/
    max-height: 60vh;
    overflow-y: auto;
}

.megafinder__infowindow .card--map {
    margin: 0 0 10px;
}

.megafinder__infowindow .card--map:last-child {
    margin-bottom: 0;
}

/* native megafinder: inline geolocation error notice */
.megafinder-search__note {
    color: #b00020;
    font-size: 0.85rem;
    padding: 6px 4px 0;
    width: 100%;
}

.megafinder-search__note:empty {
    display: none;
}

/* native megafinder: info-window close X (replaces Google's faint native one) */
.megafinder__infowindow {
    position: relative;
}

.glacial-megafinder .gm-ui-hover-effect {
    display: none !important;
}

/* hide Google's native close */
.megafinder__infowindow-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #333;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.megafinder__infowindow-close:hover {
    background: #fff;
    color: #000;
}

/* anchor scroll: webflow.js's animated scroll is unbound (doctorlogic-assets.php
   inline script) because its fixed-header offset never fires on the DL sticky
   header (.header--3{position:sticky} != 'fixed'). Native smooth scroll +
   scroll-padding lands every anchor below the header instead — including
   on-load #deep-links, which webflow's click-only handler never covered.
   --glacial-header-h is set from header.header's real height by the same script.
   (An earlier `html{scroll-behavior:auto !important}` block — added when webflow
   still owned the animation and CSS smooth fought it — was removed with the
   unbind; nothing here needs !important, and the reduced-motion override below
   must be able to win.) */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: calc(var(--glacial-header-h, 90px) + 10px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* -------------------------------------------------------------------------
 * Before/After gallery age gate (js/age-gate.js). Shown via body.age-gate--show
 * on gallery contexts (gallery-page / gallerylist-page body classes).
 * ------------------------------------------------------------------------- */
body.age-gate--show {
    overflow: hidden;
}

body.age-gate--show > div:not(.age-gate),
body.age-gate--show > main:not(.age-gate) {
    filter: blur(20px);
}

body.age-gate--show .age-gate {
    display: flex;
}

body.age-gate--show .age-gate__overlay {
    display: block;
}

.age-gate {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 999999999;
}

.age-gate .age-gate__body {
    background: white;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
    outline: 2px solid black;
    text-align: center;
    outline-offset: -10px;
    border-radius: 5px;
}

@media (min-width: 1441px) {
    .age-gate .age-gate__body {
        width: 50%;
    }
}

.age-gate .age-gate__options {
    display: flex;
    width: 40%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 600px) {
    .age-gate .age-gate__options {
        flex-direction: row;
    }
}

.age-gate .age-gate__options button {
    padding: 10px 20px;
    border-radius: 5px;
    margin: 15px;
}

.age-gate .age-gate__message {
    font-style: italic;
    text-align: center;
}

.age-gate__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.8;
    z-index: 99999999;
}

/* Featured image on blog posts.
   css/dl/post.css (generated per site by port-css.py from the capture) ships
   `.post__featured-image-item{background-position-y:top -200px!important}`.
   That hard offset assumes a tall hero; on a smaller image it pushes the subject
   out of frame. Re-centre it. Needs !important + equal specificity to beat the
   generated rule, and must not be "fixed" in post.css itself — port-css.py
   regenerates that file. */
.post__featured-image-item {
    background-position-y: center !important;
}

/* Native (non-migrated) blog posts only: breathing room under the title/byline
   block before the featured image. Migrated posts never emit .post__heading —
   they carry a .masthead in their baked markup — so this cannot affect them. */
.post__heading {
    margin-bottom: 24px;
}

/* Keyless megafinder (no Google Maps API key -> static cards, see
   includes/doctorlogic-megafinder.php): the map pane and search bar are not
   rendered, so drop the sticky-map split and let the cards own the grid. */
.megafinder--no-map {
    grid-template-rows: auto;
}

.megafinder--no-map .megafinder__cards-container {
    grid-column: 1 / span 25;
    grid-row: 1 / span 1;
    padding-bottom: 40px;
}

.megafinder--no-map .megafinder__cards {
    max-width: 980px;
}

/* Testimonial list progressive reveal (js/reviews-load-more.js). The captures
   hardcode EVERY review — the head script stamps .reviews-batching on <html>
   before the body parses so no card ever lays out, then reveals the first
   batch on DOMContentLoaded and steps through the rest via the Load More
   button. No JS = neither class ever exists = all reviews render as captured. */
.reviews-batching .listcard__card--testimonial,
.listcard__card--testimonial.reviews-batch-hidden {
    display: none;
}

/* .content-wrapper is a 24-col grid — span it, don't sit in one track.
   PER-SITE: swap the background/hover for the site's .btn colors (grep the
   site's css/dl/testimoniallist.css for `.btn{background:`). */
.reviews-loadmore {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 30px auto 0;
    padding: 14px 44px;
    border: 0;
    background: #333;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.reviews-loadmore:hover {
    opacity: .85;
}

/* ============ TLH per-site (2026-08-12) ============ */

/* Sticky-header DL bundle (header--3{position:sticky}): the master's
   margin-top offset would double-count — zero it (heddenmd lesson). */
main, .masthead {
    margin-top: 0;
}

/* The ported header css pins .header height against OUR taller theme header
   (promo bar + CTAs live inside <header>). Neutralize the pin. */
header.header.header--3 {
    height: auto;
}

/* THEME-markup class collision (spagreystone lesson): the theme banner uses
   .header--3/.header__container — the SAME classes the DL bundle styles for
   ITS header (grid-template-columns / padding:0 / height rules leak in).
   Scoped reset on the theme's own elements only. */
header.header.header--3 .glacial-top-banner.header__container {
    display: flex;
    grid-template-columns: none;
    padding: 12px 20px;
    height: auto;
    background: #fff;
}

/* Practice logo svgs are viewBox-only (no width/height attrs): no intrinsic
   size, so max-height never binds. Size with an EXPLICIT height. */
.header-logo {
    height: 44px;
    width: auto;
    max-width: 60vw;
}

/* Theme banner layout (TLH) — match the DL three-row header (2026-08-20).
   DL renders: tophat CTA strip (lifted 1:1 into promo-banner.html — the DL
   bundle ships all .header__tophat styling) / logo left + two INLINE phone
   CTAs right / a full-width centered nav row below. The previous one-row
   cram (30px logo, stacked CTAs, hidden icons) is replaced: the banner
   wraps, #navigation is ordered last at flex-basis 100% so it forms row 2.
   NOTE: the DL per-site bundle forces .header__container
   flex-direction:column!important under 991px (row!important above) — the
   wrap layout rides row mode; mobile stacking + the theme's fixed-position
   mobile nav (991px breakpoint) are untouched. */
header.header.header--3 .glacial-top-banner.header__container {
    gap: 4px 16px;
    flex-wrap: wrap;
}

header.header.header--3 .glacial-top-banner .header-logo {
    height: 50px;
}

header.header.header--3 .glacial-top-banner #navigation {
    flex: 0 0 100%;
    order: 10;
    transition: 0.4s
}

header.header.header--3 .glacial-top-banner .header__cta-container {
    flex: 0 0 auto;
    margin-left: auto;
}

/* DL's home-page rules paint the CTA links/icons/labels #fff for ITS
   transparent over-hero header — ours sits on white at EVERY width, so force
   the ink back on. Below 1241px the bundle hides the number text
   (.nav__link display:none) and renders icon + "TPSC"/"Nouvo" ::after labels;
   on non-home pages its own late rules already recolor those #333 — these
   mirror that treatment on home. (The bundle's mobile tan-pill rule never
   renders here: it styles the hidden .nav__link.) */
header.header.header--3 .glacial-top-banner .header__cta-container .nav__link {
    color: #333 !important;
}

html.home-page .header.header--3 .glacial-top-banner .header__cta-container .nav__item::after {
    color: #333 !important;
}

html.home-page .header.header--3 .glacial-top-banner .header__cta-container .nav__item .cta__icon {
    background: transparent !important;
    border: 0 !important;
}

html.home-page .header.header--3 .glacial-top-banner .header__cta-container .nav__item .cta__icon .st0 {
    fill: #333 !important;
}

/* ── Homepage header sits TRANSPARENT over the hero (2026-08-21) ────────────
   AMENDS the block directly above: the header no longer "sits on white at every
   width" on the homepage. DL fixes the home header over the hero with a
   transparent .header__container + nav row and white ink, then swaps to a solid
   white bar once js/site.js adds .header--scroll (threshold
   max(headerHeight*.75, 30)px). The header is already position:fixed here and
   .hero__block already starts at y≈64 BEHIND it, so this is purely a colour
   change — no layout moves. The dark promo bar and the tan .header__tophat keep
   their own opaque backgrounds in both states, exactly as live does.
   Everything below is gated on :not(.header--scroll), so the scrolled state is
   left exactly as it is today (white bar, tan nav row, #333 ink, colour logo).

   DESKTOP ONLY (>=992px), deliberately. Under 992px this banner is the wrapped
   three-row layout built above (logo row / stacked phone CTAs / nav row) and it
   is TALLER than the hero's headline offset, so a transparent bar there lands
   the CTAs and hamburger on top of the hero copy — text over text. DL's own
   capture has exactly that collision at 390px; we keep the opaque white bar
   instead, which is also what nav.site-navigation needs below 992px where it
   becomes the fixed slide-out panel. */
@media (min-width: 992px) {
    html.home-page header.header.header--3:not(.header--scroll) .glacial-top-banner.header__container {
        background: transparent;
    }

    /* Logo — white over the hero. The shipped reversed variant is
       images/dl/1471523.svg (attachment 1275): the same artwork as the colour
       1471522.svg with its single #010101 fill set to #fff. The theme paints the
       logo as an <img> and CSS cannot swap an img src, so flatten the colour
       mark to that same pure white instead — the rendered result matches the
       asset. If the logo ever becomes a background-image element, use the file. */
    html.home-page header.header.header--3:not(.header--scroll) .glacial-top-banner .header-logo {
        filter: brightness(0) invert(1);
    }

    /* Phone CTA ink/icons/labels back to DL's white while over the hero.
       Specificity has to clear the !important rules above, hence the length. */
    html.home-page header.header.header--3:not(.header--scroll) .glacial-top-banner .header__cta-container .nav__link {
        color: #fff !important;
    }

    html.home-page header.header.header--3:not(.header--scroll) .glacial-top-banner .header__cta-container .nav__item::after {
        color: #fff !important;
    }

    html.home-page header.header.header--3:not(.header--scroll) .glacial-top-banner .header__cta-container .nav__item .cta__icon .st0 {
        fill: #fff !important;
    }

    html.home-page header.header.header--3:not(.header--scroll) nav.site-navigation {
        background: transparent;
    }

    /* --top-level-color is set inline on #navigation by
       Glacial_Frontend_Hooks::navigation_css_custom_props(), so override the
       custom property rather than the links themselves. */
    html.home-page header.header.header--3:not(.header--scroll) #navigation {
        --top-level-color: #fff;
        --top-level-color-hover: #f0ece4;
    }

    /* Dropdown chevrons: navigation.css already strokes them from
       var(--top-level-color), so the override above DOES flip them white. What
       they don't do is ANIMATE — the svg computes transition-duration:0s while
       the label is 0.3s, so on the scroll flip the text fades and the chevron
       snaps. Point the stroke at the button's own ink (one source of truth) and
       give it the label's timing so the two move together.

       The `color: var(--top-level-color)` line is load-bearing, not tidiness:
       the CTA-leak reset near the top of this file sets `#navigation button
       { color: inherit }`, which resolves to the dark body ink — so
       `stroke: currentColor` ALONE would paint the chevrons #333 over the hero.
       currentColor is only safe once the button carries the nav ink. */
    html.home-page header.header.header--3 #navigation .gl-top-level > li > .toggle-dropdown {
        color: var(--top-level-color);
    }

    html.home-page header.header.header--3 #navigation .gl-top-level > li:hover > .toggle-dropdown {
        color: var(--top-level-color-hover, var(--top-level-color));
    }

    html.home-page header.header.header--3 #navigation .gl-top-level > li > .toggle-dropdown svg {
        stroke: currentColor;
        transition: stroke 0.3s ease;
    }
}

/* ── Compact mobile banner (2026-08-21) ─────────────────────────────────────
   The DL per-site bundle forces .header__container flex-direction:column
   !important under 991px, which stacks logo / phone CTAs / hamburger as three
   tall rows — 236px of banner at 390px, with 20px padding blocks on .brand and
   .header__cta-container and 18px on the toggle inflating each one. Put the
   banner back on a wrapping ROW so the phone CTAs and the hamburger share a
   single line (the hamburger was landing on its own row below them) and drop
   the padding. #navigation is display:none/position:fixed at this width — it is
   the slide-out panel — so it does not take part in the row. */
@media (max-width: 991px) {
    /* The over-hero treatment is desktop-only, so at this width the banner is
       an opaque bar that was still position:fixed — it overlaid the hero and
       swallowed the first line of the hero headline. Opaque bar + no overlay
       design means it belongs in the flow; the slide-out nav is position:fixed
       in its own right, so it is unaffected. */
    /* Homepage only — inner pages are position:sticky, which takes up flow space
       and never overlapped anything, so they keep their sticky header. */
    html.home-page header.header.header--3 {
        position: sticky;
        top: 0;
    }

    /* Taking the banner out of fixed positioning exposed .home-tag — the SEO
       <h1> that the overlaying header had been covering at every width (DL
       never shows it either). Collapse it visually rather than display:none so
       it still counts for search and screen readers, and the hero sits straight
       under the header instead of behind a 64px white strip. */
    html.home-page .home-tag {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    header.header.header--3 .glacial-top-banner.header__container {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 2px;
        padding: 6px 12px;
    }

    /* Logo keeps its own line — at 390px it is ~234px of a 390px row, so the
       CTAs cannot fit beside it. */
    header.header.header--3 .glacial-top-banner .brand {
        flex: 0 0 100%;
        padding: 2px 0;
    }

    /* Line two: CTAs left, hamburger pinned right. */
    header.header.header--3 .glacial-top-banner .header__cta-container {
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
    }

    header.header.header--3 .glacial-top-banner #openNavMenu {
        float: none;
        margin-left: auto;
        /* 24px icon + 10px padding = a 44px touch target (WCAG 2.5.8 asks for
           24px minimum; 44px is the comfortable size). Was 18px padding/60px. */
        padding: 10px;
        width: auto;
        height: auto;
    }
}

/* Reviews (testimoniallist template): hide the facility-filter sidebar and let
   the review cards own the full 24-col grid (mirrors DL's own
   .content-wrapper--no-sidebar). The fixed-bottom mobile "Search" toggle lives
   inside .filter--sidebar, so one display:none covers both viewports. The
   desktop padding drops the sidebar's 32px left-gutter carve-out (was
   32px 32px 32px 0) so the full-width grid sits centered in the container. */
main.testimonials .filter--sidebar {
    display: none;
}

main.testimonials .listpage__container--left .content-wrapper {
    grid-column: auto / span 24;
}

@media (min-width: 1241px) {
    main.testimonials .listpage__container--left .content-wrapper {
        padding: 32px 0;
    }
}

/* Blog index (DL `collection` template) + the theme's native pagination.
   - The captured card markup emits .card__image AFTER the text block; order:-1
     lifts it back above, and pinning 2/1 keeps listing rows even when the source
     images vary in aspect.
   - .nav-link-buttons is the theme's OWN pagination class (home.php /
     archive.php), not DL markup — without nowrap the prev/next buttons wrap to a
     second line at narrow widths. */
.collection .card__image {
    order: -1;
    aspect-ratio: 2 / 1;
}

.nav-link-buttons .nav-links {
    flex-wrap: nowrap;
}

.brand, .header__cta-container {
    padding: 20px;
}

.home-tag {
    height: 10px;
}