/** * Medical Staff page — doctor modal refinements. * * Loaded only on templates/medicalstaf-page.php (see inc/enqueue.php). * Scope is the doctor bio panel in template-parts/medical-staff/staff.php: * the scrollable `.tab-v4__content` (overflow:auto; height:570px), styled in the * frozen legacy general.css which must not be edited. */ /* ────────────────────────────────────────────────── * Layout — desktop only (legacy mobile breakpoint is max-width:1025px, where the * image/text columns stack and scroll differently; leave that untouched). * ────────────────────────────────────────────────── */ @media only screen and (min-width: 1026px) { /* Bio panel height — the frozen legacy general.css hard-caps this at height:570px, * which forces a scrollbar on longer bios even though the modal is a full 100vh * panel with lots of unused vertical space. Let it use the available height * instead: short bios collapse to their content (no empty box), long bios scroll * far less. */ .medical-view__wrap .tab-v4__content { height: auto; max-height: calc(100vh - 220px); } /* Bio alignment — the legacy layout vertically centers the bio in the 100vh panel * (vertical-align:middle on the table-cell), which floats it down the page and * leaves a big gap above the name. Top-align it instead so it starts near the top. * padding-top clears the absolutely-positioned close button (top:80px, 42px tall). */ .medical-view__box.type-txt .medical-view__inner { vertical-align: top; padding-top: 120px; } } /* ────────────────────────────────────────────────── * Scroll lock — while the doctor modal is open, stop the page behind it from * scrolling. The modal is position:fixed over the viewport, so without this the * document keeps scrolling underneath (and the sticky header drifts on scroll the * user can't see). Class toggled on by assets/js/medical-staff.js. * ────────────────────────────────────────────────── */ html.medical-view-open, html.medical-view-open body { overflow: hidden; } /* Reserve the scrollbar gutter so locking scroll (above) doesn't shift the page and * fixed modal sideways on browsers with classic, non-overlay scrollbars (Windows). */ html { scrollbar-gutter: stable; } /* ────────────────────────────────────────────────── * Scrollbar — replace the chunky native scrollbar (track + stepper arrows) with a * thin, on-brand one. Accent #dda478 matches the modal's career/tab color. Safe on * all viewports. * ────────────────────────────────────────────────── */ /* Firefox */ .medical-view__wrap .tab-v4__content { scrollbar-width: thin; scrollbar-color: rgba(221, 164, 120, 0.7) transparent; } /* WebKit / Chromium / Edge / Safari */ .medical-view__wrap .tab-v4__content::-webkit-scrollbar { width: 6px; } .medical-view__wrap .tab-v4__content::-webkit-scrollbar-track { background: transparent; } .medical-view__wrap .tab-v4__content::-webkit-scrollbar-thumb { background-color: rgba(221, 164, 120, 0.6); border-radius: 3px; } .medical-view__wrap .tab-v4__content::-webkit-scrollbar-thumb:hover { background-color: #dda478; } /* Remove the up/down stepper buttons (the worst offenders in the native look). */ .medical-view__wrap .tab-v4__content::-webkit-scrollbar-button { display: none; width: 0; height: 0; }