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

/* The DoctorLogic runtime (lazyload.js) adds .visible.complete to fade media in.
   We do not run that JS, so force all lazy-deferred media visible. */
.lazy-load-image,
.lazy-background,
.lazy-iframe {
    opacity: 1 !important;
}

/* Logo SVGs (1559624 color / 1559625 white) are now self-hosted in the media
   library and referenced by the ported CSS, so no text fallback is needed. */

/* 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 DoctorLogic filter modal is dropped (it hid the sidebar below 1241px and
   broke the desktop layout via `.modal{position:absolute!important}`). Below the
   desktop breakpoint, the .filter falls back to grid-column:unset (a 1-col
   sliver) — lay it and the cards out full-width instead, filter stacked on top. */
@media (max-width: 1240px) {
    .gallerylist-page .listpage__container--left .filter,
    .gallerylist-page .listpage__container--left .content-wrapper {
        /*grid-column: 1 / -1;*/
    }
}

.dl-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 8px 16px;
    background-color: #a996c7;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}

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

/* Every ported DL template stylesheet sets `html{scroll-behavior:smooth}`. The
   theme's Webflow JS already animates anchor-link clicks (its own scrollTo/rAF
   loop), and CSS smooth-scroll re-animates each of those steps — the two fight,
   giving janky/overshooting anchor jumps. Hand scroll animation to Webflow by
   forcing native (instant) programmatic scrolling here. */
html {
    scroll-behavior: auto !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;
    }
}

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