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

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

/* ---------------------------------------------------------------------------
   PER SITE — Spa Belle La Vie (sticky-header DL version; LESSONS "Sticky-header
   DL versions double the main/.masthead offset", heddenmd 2026-07-27).
   The 5312 bundles make .header position:sticky (in flow), so the master
   style.css offset `main,.masthead{margin-top:var(--header-height)}` would
   double-count; and the bundle pins .header to a fixed calc height against our
   taller theme header (tophat + banner). Zero both.                          */
main,
.masthead {
    margin-top: 0;
}

header.header.header--3 {
    height: auto;
}

/* DL sizes the header logo ~64px via its .header__logo background div; our
   theme header renders the logo as an <img class="header-logo"> instead, which
   otherwise paints at its natural 543x269 scale. Match DL's height. */
header.header.header--3 .brand img.header-logo {
    height: 76px;
    width: auto;
}

@media (max-width: 767px) {
    header.header.header--3 .brand img.header-logo {
        height: 50px;
    }
}

/* Logo variant swap — HOME ONLY, and only while unscrolled. In DL's LIGHT-mode
   design the white/gold logo (1552882) appears solely on the home
   transparent-over-hero header; on scroll the home header becomes a WHITE bar
   and the logo returns to the color oval (1552881). (The .header--scroll →
   white-logo rules in the bundle are all html.dark-mode-scoped — an earlier
   revision here misread them and hid the logo on scrolled white bars.) Inner
   pages never swap. Our theme renders the logo as an <img> (custom_logo =
   color 1552881), which DL's background rules can't touch: paint the white
   variant on the .brand anchor and fade the img out/in via opacity so the
   scroll transition isn't a hard pop. */
html.home-page header.header.header--3 .brand {
    display: block;
    height: 76px;
    aspect-ratio: 503 / 239;
}

html.home-page header.header.header--3:not(.header--scroll) .brand {
    background: url(../images/dl/1552882.png) left center / contain no-repeat;
}

html.home-page header.header.header--3:not(.header--scroll) .brand img.header-logo {
    opacity: 0;
}

@media (max-width: 767px) {
    html.home-page header.header.header--3 .brand {
        height: 50px;
    }
}

/* Home transparent-over-hero header (DL html.home-page rules make .header and
   .header__container transparent + fixed): the theme's own #navigation strip
   paints white and its links dark — home-scope both to match staging (white
   nav ink over the hero; dropdown panels keep their own white background). */
html.home-page #navigation {
    background: transparent;
}

html.home-page .gl-top-level > li > a,
html.home-page .gl-top-level > li > .toggle-dropdown,
html.home-page .menu-button {
    color: #fff;
}

/* Scrolled home header = WHITE bar (DL: html.home-page .header--scroll
   background #fff, CTA ink #1a1a1a): flip the theme nav ink dark to match,
   same as the DL rules do for the CTA container. */
html.home-page header.header.header--3.header--scroll .gl-top-level > li > a,
html.home-page header.header.header--3.header--scroll .gl-top-level > li > .toggle-dropdown,
html.home-page header.header.header--3.header--scroll .menu-button {
    color: #1a1a1a;
}

/* Soften the scroll-state changes (transparent→white header, white→dark ink,
   logo swap) — the DL bundle toggles the class with no easing and the jump
   reads harsh. background shorthand transitions its color component. */
header.header.header--3,
header.header.header--3 .header__container {
    transition: background-color .3s ease, background .3s ease, box-shadow .3s ease;
}

header.header.header--3 .gl-top-level > li > a,
header.header.header--3 .gl-top-level > li > .toggle-dropdown,
header.header.header--3 .menu-button,
header.header.header--3 .header__cta-container .nav__link {
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

header.header.header--3 .brand img.header-logo {
    transition: opacity .25s ease;
}

/* Chevron SVGs: navigation.css strokes them with the fixed nav-settings vars
   (--top-level-color), which can't follow the home header's white↔dark ink
   flip. On home, stroke with currentColor so the chevron tracks the button's
   color (white over the hero, #1a1a1a on the scrolled white bar) and eases
   with the same transition. Inner pages keep the var-driven strokes. */
html.home-page header.header.header--3 .gl-top-level > li > .toggle-dropdown svg path {
    stroke: currentColor;
    transition: stroke .25s ease;
}

/* Hover parity on home: the base white/dark ink rules above out-rank
   navigation.css's hover color, so restore the gold hover for links and
   chevrons in both scroll states (placed after the scrolled rules on
   purpose — equal specificity, source order wins). */
html.home-page header.header.header--3 .gl-top-level > li:hover > a,
html.home-page header.header.header--3 .gl-top-level > li:hover > .toggle-dropdown {
    color: #c6a664;
}