/*
 * 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, #7f9685);
}

/* 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;
}

/* 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;
}

/* Contact Us nav CTA (live: .nav__item--126476 pill). The nav is theme-native,
   so the ported rules don't reach it: they sit behind @media (min-width:1241px)
   and style `.nav__link`, a class the theme's wp_nav_menu <a> doesn't carry.
   The hook is the same class, set as the menu item's CSS Classes (menu item 444)
   so it follows the item, not its position. Scoped to the theme's own desktop
   nav range (>= 992px); on mobile it stays a normal menu entry. border: 0 also
   drops navigation.css's 3px hover/current underline, and the !importants beat
   its var-driven color plus current-menu-item styling on the contact page. */
@media (min-width: 992px) {
    #navigation .gl-top-level > li.nav__item--126476 {
        background: #4f529b;
        border-radius: 8px;
        margin-left: 20px;
    }

    #navigation .gl-top-level > li.nav__item--126476:hover {
        background: #f58132;
    }

    #navigation .gl-top-level > li.nav__item--126476 > a {
        color: #fff !important;
        border: 0;
        padding: 10px !important;
    }
}

/* Header CTA (Contact Us text + envelope icon — menu-banner.php). Live shows
   the container only in the mobile-header regime: the ported CSS hides
   .header__cta-container at DL's >=1241px desktop breakpoint, but the THEME's
   nav goes desktop at 992px — without this, at 992-1240px the CTA would sit
   beside the desktop nav (and its own Contact Us button). !important because
   ported `html .header.header--scroll .header__cta-container{display:flex}`
   (0-3-1) outspecifies any sane un-important selector once the header-scroll
   JS adds the class. Below 992px the ported top-level rules (container
   display:flex, .cta__icon display:block) keep text + icon visible. */
@media (min-width: 992px) {
    .header .header__cta-container {
        display: none !important;
    }
}

.videoitem__wrapper {
    grid-column: auto / span 24;
    padding: 40px 40px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}