/*
 * Site layer — loads after the theme chain (depends on glacial-style).
 * Holds only what this site's Webflow export needs on top of the theme's CSS.
 */

/*
 * Doctor-card overlays.
 *
 * The export ships this as an inline <style> in <head>. Webflow's IX3 engine
 * adds .w-mod-ix3 to <html> once it has taken the overlays over, so the guard
 * keeps them hidden until then instead of flashing the bio text on load.
 */
html.w-mod-js:not(.w-mod-ix3) :is(.doc_overlay_info_wrapper, .doc_overlay_text) {
    visibility: hidden !important;
}

/*
 * Top banner geometry.
 *
 * navigation.css styles .glacial-top-banner and loads after webflow.css, so at
 * equal specificity it beats the export's .navbar rule on the same element:
 * the design's `padding: 10px 5%` collapses to `10px`, `inset: 0 0 auto` is
 * overridden by `top: auto`, and a box-shadow the design does not have is
 * added. Restated here so the export's values win by load order.
 */
.glacial-top-banner.navbar {
    top: 0;
    padding: 10px 5%;
    box-shadow: none;
}

/*
 * Footer legal links.
 *
 * glacial_footer_menu() emits bare <a> tags with no delimiter, so the menu runs
 * together as one string. The design separates these with a pipe.
 */
.legal_links .footer_link + .footer_link:before {
    content: " | ";
}

/*
 * Inner-page top offset.
 *
 * The banner is position:fixed and 101px tall (the 120px .logo at the export's
 * 978.99x659.8 aspect, plus the 10px vertical padding), but it is out of flow,
 * so .standard-inner-wrapper starts at y=0 and the theme's 4rem
 * --gl-inner-pad-top is not enough to clear it — the <h1> on every inner page,
 * archive, search and 404 rendered underneath the nav. Clear the banner, then
 * keep the theme's 4rem of breathing room below it.
 */
:root {
    --gl-inner-pad-top: calc(101px + 4rem);
}

/*
 * Related pages, moved below the content.
 *
 * glacial_related_pages_position is filtered to 'bottom' for this site (see
 * includes/custom-filters.php). Block-built pages end in a full-bleed band, so
 * without real separation the links read as part of that band rather than as
 * site navigation. The clamp keeps the gap proportional without letting it run
 * away on a wide monitor.
 */
.related-pages--after-content {
    margin-top: clamp(3rem, 7vw, 6.5rem);
}

/*
 * "Our Doctors" band on single doctor pages.
 *
 * glacial-cpt-acf hardcodes `.doctors-section { background-color: #929191 }` in
 * the plugin's own stylesheet, and exposes no --cpt-* variable for it. Overriding
 * here rather than editing the plugin, which git-updater would overwrite.
 *
 * Same specificity (0,1,0) — this wins on source order, since site.css is the
 * last stylesheet enqueued and the plugin's is sixth.
 */
.doctors-section {
    background-color: #fff;
}

/*
 * Doctor cards — matched to the homepage doctor tiles.
 *
 * The plugin renders a black box with a bordered image and the name beneath it;
 * the homepage design (.doc_btn in webflow.css) is an image filling a 4:5 tile
 * with a blurred translucent label bar pinned to the bottom. The markup differs,
 * so this restyles the plugin's structure to match:
 *
 *   plugin:   .cpt-doctor-image-link > a.doctor-headshot-link > img + .doctor-name
 *   homepage: a.doc_btn > .doc_img_div > img, + .doc_btn_label
 *
 * Applied in BOTH places the plugin renders doctor cards:
 *   .doctors-section    — the "Our Doctors" band at the foot of a single bio page
 *   .doctor-filter-grid — the /doctors/ archive (the doctors pillar)
 *
 * Sizing is deliberately NOT touched on the archive: .doctor-filter-grid owns the
 * flex widths and gutters via --cpt-filter-col and its breakpoints, and those
 * still apply. Only the card's appearance is restyled.
 *
 * Every selector carries one more class than the plugin rule it overrides, so
 * these win on specificity rather than load order — which matters because the
 * plugin also styles these inside media queries, and a media query adds none.
 *
 * The homepage's hover bio overlay is deliberately not reproduced — these fade.
 */

.doctors-section .cpt-doctor-image-link,
.doctor-filter-grid .cpt-doctor-image-link {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* padding-top drives the tile's 4:5 aspect, exactly as .doc_btn does. */
.doctors-section .cpt-doctor-image-link > a.doctor-headshot-link,
.doctor-filter-grid .cpt-doctor-image-link > a.doctor-headshot-link {
    display: block;
    position: relative;
    height: auto;
    padding: 125% 0 0;
    border-radius: .3rem;
    overflow: hidden;
    color: var(--white);
    transition: opacity 200ms ease;
}

.doctors-section .cpt-doctor-image-link .doctor-headshot-link img,
.doctor-filter-grid .cpt-doctor-image-link .doctor-headshot-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 0%;
}

/* The .doc_btn_label bar, restated on the plugin's .doctor-name element. */
.doctors-section .doctor-name,
.doctor-filter-grid .doctor-name {
    z-index: 10;
    position: absolute;
    inset: auto 0% 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 15px 10px;
    background-color: #01072a66;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 5px;
    color: var(--white);
    text-align: center;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1rem;
}

/*
 * Archive cards carry an extra .doctor-additional-specialties element inside the
 * link, which the plugin gives a 20px min-height even when empty. Inside a tile
 * whose height comes entirely from padding, it would sit over the image. No
 * doctor currently populates the field; if that changes, this needs a real home
 * in the design rather than staying hidden.
 */
.doctor-filter-grid .doctor-additional-specialties {
    display: none;
}

/* Opacity on hover, replacing the plugin's grey background + black text swap. */
.doctors-section .cpt-doctor-image-link > a.doctor-headshot-link:hover,
.doctors-section .cpt-doctor-image-link > a.doctor-headshot-link:focus-visible,
.doctor-filter-grid .cpt-doctor-image-link > a.doctor-headshot-link:hover,
.doctor-filter-grid .cpt-doctor-image-link > a.doctor-headshot-link:focus-visible {
    background: none;
    color: var(--white);
    opacity: .82;
}

@media (prefers-reduced-motion: reduce) {
    .doctors-section .cpt-doctor-image-link > a.doctor-headshot-link,
    .doctor-filter-grid .cpt-doctor-image-link > a.doctor-headshot-link {
        transition: none;
    }
}

/* Matches the homepage tile's taller crop on small screens. */
@media screen and (max-width: 479px) {
    .doctors-section .cpt-doctor-image-link > a.doctor-headshot-link,
    .doctor-filter-grid .cpt-doctor-image-link > a.doctor-headshot-link {
        padding-top: 95%;
    }
}

/*
 * Mobile menu getting cut off.
 *
 * navigation.css makes the open menu a full-height scrolling panel at <=991px:
 *
 *     .site-navigation { position: fixed; height: 100%; overflow: auto; }
 *
 * That assumes the VIEWPORT is the containing block. It is not. A non-`none`
 * backdrop-filter makes an element a containing block for its position:fixed
 * descendants — exactly as transform, filter and perspective do — and this
 * site's design puts `backdrop-filter: blur(14px)` on .navbar. So height:100%
 * resolved against the ~100px banner rather than the screen, and whatever
 * spilled past that was clipped by Webflow's `.w-nav-overlay { overflow:hidden }`.
 * With 20 links and three sub-menus, the menu appeared to stop after the first
 * item or two.
 *
 * Dropping the blur at mobile widths is visually a no-op: .navbar's
 * background-color is a fully opaque white, so nothing shows through to blur.
 * It only matters at desktop, where the banner is fixed over scrolling content.
 */
@media screen and (max-width: 991px) {

    .glacial-top-banner.navbar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /*
     * Now that it resolves against the viewport, anchor the panel explicitly:
     * a fixed element with auto offsets shrink-wraps to its widest item, and
     * height:100% would run it past the bottom of the screen by the height of
     * the banner. Top stays at the static position (just under the banner) and
     * bottom:0 lets the height solve to the remaining screen.
     */
    .glacial-top-banner .site-navigation {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        /* 12em in navigation.css compensated for the panel overrunning the
           viewport; a correctly bounded panel just needs a little end padding. */
        padding-bottom: 2em;
    }
}
