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