already spans the full viewport width via `left:0; right:0` against
* the position:relative header. Clamp its GRID content to the page's
* container column by setting `padding-inline` to the gap between the
* viewport edge and the container edge (with the standard responsive
* gutter). Effect: background, border, and shadow still bleed edge-to-edge;
* links align with the page content below. */
@media (min-width: 992px) {
.seamlessmd-primary-nav .menu-item-has-children > .sub-menu {
padding-inline: max(var(--seamlessmd-gutter), calc((100% - var(--seamlessmd-container-max)) / 2 + var(--seamlessmd-gutter)));
}
.seamlessmd-primary-nav .menu-item-has-children > .sub-menu > li {
padding: 0;
}
}
/* =====================================================================
* 9. MEGA-NAV (ported 1:1 from Nabed's `.navbar-wrapper.w-nav`)
*
* Upstream source: upstream source line 28 + upstream source.
* Classes match Webflow's originals so the cascade carries through when
* compared side-by-side against nabed.net. Everything is scoped under
* `.seamlessmd-site-header .navbar-wrapper` so these rules never leak
* onto page content that happens to use the same Webflow class names.
* ===================================================================== */
/* Reset the height clamp the legacy header rule (§4) imposed — the mega
* nav manages its own height via .navbar--container's min-height. Uses
* `:has()` so themes that still use the old flat markup keep the clamp;
* only pages that render the new mega-nav get auto-height. */
.seamlessmd-site-header:has(.navbar-wrapper) {
height: auto;
min-height: 80px;
}
.seamlessmd-site-header .navbar-wrapper {
position: relative;
background: #fff;
z-index: 50;
height: 100%;
}
/* Header bar — uses the unified `.seamlessmd-container` width + gutter so
* the header content edge aligns exactly with every block's content edge
* at every breakpoint. The bar's outer background still bleeds full-width
* via the parent `.seamlessmd-site-header`; this rule constrains the
* inner row only. Upstream Webflow originally used a hardcoded 1440 cap;
* we replaced that with the project's --seamlessmd-container-max token. */
.seamlessmd-site-header .navbar--container {
width: 100%;
max-width: var(--seamlessmd-container-max);
min-height: 80px;
margin-inline: auto;
padding-inline: var(--seamlessmd-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
/* Logo */
.seamlessmd-site-header .navbar--logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.seamlessmd-site-header .navbar--logo img,
.seamlessmd-site-header .navbar--logo .custom-logo {
height: 52px;
width: auto;
display: block;
}
/* Primary nav menubar */
.seamlessmd-site-header .navbar-menu {
display: flex;
align-items: center;
flex: 1 1 auto;
justify-content: center;
}
.seamlessmd-site-header .navbar-menu__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}
.seamlessmd-site-header .navbar-menu__item {
position: static; /* dropdown is absolutely positioned against navbar-wrapper */
}
/* Top-level trigger (the button-style menuitem) */
.seamlessmd-site-header .dropdown-toggle-7 {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
cursor: pointer;
padding: 12px 14px;
font: inherit;
font-weight: 500;
color: var(--seamlessmd-dark-navy);
text-decoration: none;
border-radius: var(--seamlessmd-radius-md);
transition: color 140ms ease, background-color 140ms ease;
}
.seamlessmd-site-header .dropdown-toggle-7:hover,
.seamlessmd-site-header .dropdown-toggle-7:focus-visible,
.seamlessmd-site-header .dropdown-4.is-open > .dropdown-toggle-7 {
color: var(--seamlessmd-primary-dark);
background-color: rgba(37, 99, 235, 0.06);
}
.seamlessmd-site-header .dropdown-toggle-7:focus-visible {
outline: 2px solid var(--seamlessmd-primary);
outline-offset: 2px;
}
.seamlessmd-site-header .dropdown-toggle-text { line-height: 1.2; }
.seamlessmd-site-header .caret {
display: inline-flex;
transition: transform 160ms ease;
}
.seamlessmd-site-header .dropdown-4.is-open > .dropdown-toggle-7 .caret {
transform: rotate(180deg);
}
/* CTAs on the far right — upstream Webflow classes `.nav-button` (solid blue
* "Contact Sales" variant) and `.nav-button.green-btn` (solid green "View
* Demo"/"Patient Support" variant). Colors, radius, and padding are copied
* verbatim from nabed.net's compiled webflow stylesheet. */
.seamlessmd-site-header .navbar--ctas {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.seamlessmd-site-header .nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
color: #fff;
background-color: #045089;
border: 0;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
white-space: nowrap;
cursor: pointer;
}
.seamlessmd-site-header .nav-button:hover,
.seamlessmd-site-header .nav-button:focus-visible {
background-color: #1e2a5c;
color: #fff;
}
.seamlessmd-site-header .nav-button.green-btn {
background-color: #2ecb70;
color: #fff;
}
.seamlessmd-site-header .nav-button.green-btn:hover,
.seamlessmd-site-header .nav-button.green-btn:focus-visible {
background-color: #26a860;
color: #fff;
}
/* Mobile CTAs block lives inside .navbar-menu for the drawer; hidden
* on desktop (CTAs there render via .navbar--ctas on the outer row). */
.seamlessmd-site-header .mobile-ctas { display: none; }
/* Mobile hamburger — hidden on desktop. */
.seamlessmd-site-header .mobile-menu-btn {
display: none;
width: 44px;
height: 44px;
padding: 10px;
border: 0;
background: transparent;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 5px;
border-radius: var(--seamlessmd-radius-sm);
}
.seamlessmd-site-header .mobile-menu-btn__line {
display: block;
height: 2px;
background: var(--seamlessmd-dark-navy);
border-radius: 2px;
transition: transform 160ms ease, opacity 120ms ease;
transform-origin: center;
}
.seamlessmd-site-header .mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.seamlessmd-site-header .mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__line:nth-child(2) { opacity: 0; }
.seamlessmd-site-header .mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------------------------------------------------------------------
* Mega dropdown panel
*
* Upstream: `.dropdown--list.w-dropdown-list` — full-bleed panel that
* sits below the nav bar. When open it spans 100vw. Structure:
* .dropdown-overflow → white full-bleed base + clip
* .dropdown-inner-shadow → 8px inner shadow strip at top
* .dropdown-list-body → grid content (main columns + sidebar)
* .dropdown-column--sidebar → grey band (extends to viewport right edge
* via ::after pseudo), auto-aligns with
* the grid column boundary
* --------------------------------------------------------------------- */
.seamlessmd-site-header .dropdown--list {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 40;
display: none;
background: transparent;
box-shadow: 0 20px 40px rgba(30, 42, 92, 0.08);
}
.seamlessmd-site-header .dropdown-4.is-open > .dropdown--list {
display: block;
animation: seamlessmd-mega-in 180ms ease forwards;
}
@keyframes seamlessmd-mega-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.seamlessmd-site-header .dropdown-overflow {
position: relative;
overflow: hidden;
background: #ffffff;
}
.seamlessmd-site-header .dropdown-inner-shadow {
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background: linear-gradient(to bottom, rgba(30, 42, 92, 0.08), transparent);
pointer-events: none;
z-index: 2;
}
.seamlessmd-site-header .dropdown-list-body {
position: relative;
z-index: 1;
padding: 0;
}
/* Mega-nav grid — verbatim 1:1 clone of seamless.md's Webflow modifier
* classes. Each known panel uses a different layout:
*
* Specialties → `.dropdown-grid` (no mod) columns: Medical | Surgery (2-grid subgrid) | Related articles sidebar
* Product → `.dropdown-grid.mod_g2` columns: Product cards (2-grid subgrid) | sidebar
* Solutions → `.dropdown-grid.resources` columns: Solutions cards (2-grid subgrid) | sidebar
* Resources → `.dropdown-grid.resources.mod__g3` columns: Resources cards (3-group subgrid) | sidebar
* Company → `.dropdown-grid.resources.mod__g4` columns: Company cards (flat) | sidebar
*
* Column widths follow upstream's fixed-pixel grid template within the
* 1312px container; we use percentage shares for fluid behavior at narrower
* desktop breakpoints. */
.seamlessmd-site-header .dropdown-grid {
display: grid;
grid-template-columns: 250px 480px 1fr;
gap: 75px 50px;
align-items: start;
padding: 40px 0 0;
}
/* Specialty panel "no sidebar" case — xlsx row 4 explicitly removes the
* "Related articles" sidebar from the Specialty mega-nav, leaving only
* Medical + Surgery. With only two content columns rendered, the parent
* grid's `250px 480px 1fr` template stranded Medical at just 250px —
* not enough to hold an internal `.dropdown-subgrid.mod__2-grid`
* (2-col cards), which spilled into Surgery's column at desktop widths.
*
* Detect the no-sidebar case via `:not(:has(.dropdown-column.third))`
* and rebalance to equal-share columns so both Medical and Surgery have
* the same horizontal real estate for their 2-col card grids. If the
* sidebar is re-enabled later (via Customizer), the original
* `250px 480px 1fr` template applies again. */
.seamlessmd-site-header .dropdown-grid:not(:has(.dropdown-column.third)) {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 75px 64px;
}
.seamlessmd-site-header .dropdown-grid.mod_g2 {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 60px 50px;
}
.seamlessmd-site-header .dropdown-grid.resources {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 60px 50px;
}
.seamlessmd-site-header .dropdown-grid.resources.mod__g3 {
grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}
.seamlessmd-site-header .dropdown-grid.resources.mod__g4 {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.seamlessmd-site-header .dropdown-column {
position: relative;
min-width: 0;
}
/*
* Defend the mega-nav from Webflow IX2's auto-init.
*
* When a `seamlessmd/source-section` block is on the current post, the
* theme conditionally enqueues Webflow's IX2 JS runtime so source HTML
* can render its scroll animations + lightbox modals correctly. IX2
* binds to Webflow-flavored class names (.dropdown-column, .dropdown-bg,
* .dropdown-card-bg, etc.) and sets `style="opacity: 0; transform: …"`
* inline as an animation START state. Without the user's hover/click
* actually firing the Webflow nav-open trigger (we use our own theme
* nav JS), those inline styles persist — making the dropdown columns
* and card overlays invisible.
*
* The fix: override the inline opacity with `!important` on every
* Webflow-IX2-managed element inside the theme's site header. Inline
* `style="opacity: 0"` loses to a CSS rule with `!important`.
*
* Scoped strictly to `.seamlessmd-site-header` so source-section
* content (which DOES want its IX2 animations) is untouched.
*/
.seamlessmd-site-header .dropdown-column,
.seamlessmd-site-header .dropdown-column.first,
.seamlessmd-site-header .dropdown-column.second,
.seamlessmd-site-header .dropdown-column.third {
opacity: 1 !important;
transform: none !important;
}
.seamlessmd-site-header .dropdown-bg,
.seamlessmd-site-header .dropdown-inner-shadow,
.seamlessmd-site-header .dropdown-card-bg {
opacity: 0 !important;
transform: none !important;
}
/* Sidebar column (`.dropdown-column.third`) — full-bleed lavender bg
* extending to the right viewport edge, matching upstream. */
.seamlessmd-site-header .dropdown-column.third {
position: relative;
padding: 40px 24px 24px 32px;
align-self: stretch;
}
.seamlessmd-site-header .dropdown-column.third .sidebar-column-bg {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100vw;
background: #f4f6fb;
z-index: -1;
pointer-events: none;
}
/* Product dropdown's bespoke right rail — Accreditations grid + Patient
* Testimonials list. Mirrors the live seamless.md /product/ panel.
* Heading style reuses .dropdown-column-title; this block adds the
* 4×2 badge grid + the testimonial list. */
.seamlessmd-site-header .seamlessmd-product-sidebar-col {
padding-top: 0;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__heading {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--seamlessmd-text-muted);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e6e8ee;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__heading + .seamlessmd-product-sidebar__heading,
.seamlessmd-site-header .seamlessmd-product-sidebar__accred-grid + .seamlessmd-product-sidebar__heading,
.seamlessmd-site-header .seamlessmd-product-sidebar__testimonials + .seamlessmd-product-sidebar__heading {
margin-top: 28px;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__accred-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 4px;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__badge {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
text-decoration: none;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__badge img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__testimonials {
display: flex;
flex-direction: column;
gap: 18px;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__testimonial-title {
font-size: 14px;
font-weight: 600;
font-style: italic;
color: var(--seamlessmd-text-strong, #0f172a);
margin-bottom: 4px;
}
.seamlessmd-site-header .seamlessmd-product-sidebar__testimonial-body {
font-size: 13px;
line-height: 1.55;
color: var(--seamlessmd-text-muted);
}
.seamlessmd-site-header .dropdown-column-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--seamlessmd-text-muted);
margin: 0 0 14px;
}
.seamlessmd-site-header .dropdown-column-title.mod--mbl-hide,
.seamlessmd-site-header .dropdown-column-title.mod__second {
margin-top: 24px;
}
/* Subgrid wrappers — upstream uses `.dropdown-subgrid` (single col) and
* `.dropdown-subgrid.mod__2-grid` (2 columns of cards). */
.seamlessmd-site-header .dropdown-subgrid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.seamlessmd-site-header .dropdown-subgrid.mod__2-grid {
grid-template-columns: 1fr 1fr;
gap: 0 32px;
}
/* 4-col row-major grid — cards flow left-to-right across 4 equal
* columns, wrap to the next row beyond the 4th. Used by Solutions
* (5 items → 4+1) and Company (≥4 items) panels after the right-rail
* sidebar was removed per xlsx. */
.seamlessmd-site-header .dropdown-subgrid.mod__4-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px 32px;
}
/* Solutions + Company panels use `.dropdown-grid.resources.mod__no-sidebar`
* when the right-rail sidebar is suppressed. The base `.dropdown-grid.resources`
* template (`minmax(0, 2fr) minmax(0, 1fr)`) reserves the right column
* for a sidebar that no longer exists, leaving a wide empty strip;
* override to a single full-width content column so the 4-col subgrid
* spreads across the whole panel. */
.seamlessmd-site-header .dropdown-grid.resources.mod__no-sidebar {
grid-template-columns: minmax(0, 1fr);
}
/* Resources panel uses an unmodified `.dropdown-subgrid` with three inner
* `` groups (`.div-block-247`, `.div-block-245`, `.div-block-246`).
* Spread them across 3 columns inside the Resources mod__g3 grid only —
* the same selector elsewhere stays single-column. */
.seamlessmd-site-header .dropdown-grid.resources.mod__g3 .dropdown-subgrid {
grid-template-columns: 1fr 1fr 1fr;
gap: 0 32px;
}
.seamlessmd-site-header .dropdown-subgrid > div {
display: flex;
flex-direction: column;
}
/* Single dropdown card — icon-left + title + optional description.
* Upstream uses an oversized `.dropdown-card-bg` rectangle that sits
* BEHIND the card and lights up on hover; we honour that. */
.seamlessmd-site-header .dropdown-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 16px 8px 12px;
margin-bottom: 18px;
border-radius: 5px;
text-decoration: none;
color: var(--seamlessmd-dark-navy);
transition: background-color 140ms ease;
}
.seamlessmd-site-header .dropdown-card.mod__hide { display: none; }
.seamlessmd-site-header .dropdown-card:focus-visible {
outline: 2px solid var(--seamlessmd-primary);
outline-offset: 2px;
}
.seamlessmd-site-header .dropdown-card-bg {
position: absolute;
top: -8px; bottom: -8px; left: -8px; right: -8px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease;
z-index: 0;
}
.seamlessmd-site-header .dropdown-card-bg.is-blue { background: rgb(237, 248, 255); }
.seamlessmd-site-header .dropdown-card-bg.is-red { background: rgb(255, 240, 240); }
.seamlessmd-site-header .dropdown-card-bg.white { background: #fff; }
.seamlessmd-site-header .dropdown-card:hover .dropdown-card-bg,
.seamlessmd-site-header .dropdown-card:focus-visible .dropdown-card-bg { opacity: 1; }
.seamlessmd-site-header .dropdown-card-icon {
position: relative;
z-index: 1;
width: 21px;
height: 21px;
flex-shrink: 0;
object-fit: contain;
margin-top: 4px;
}
.seamlessmd-site-header .dropdown-card-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.seamlessmd-site-header .dropdown-card-title {
font-size: 15px;
font-weight: 700;
color: rgb(21, 27, 38);
line-height: 1.4;
}
.seamlessmd-site-header .dropdown-card-text {
margin: 0;
font-size: 13px;
line-height: 1.65;
color: rgb(85, 95, 110);
}
/* Sidebar Specialties "Related articles" — title-only cards (white bg)
* with a top border separator. */
.seamlessmd-site-header .dropdown-column.third .dropdown-card {
padding: 14px 0;
margin: 0;
border-top: 1px solid rgba(35, 47, 76, 0.12);
}
.seamlessmd-site-header .dropdown-column.third .dropdown-card:first-of-type {
border-top: 0;
}
.seamlessmd-site-header .dropdown-column.third .dropdown-card-title {
font-size: 13px;
font-weight: 600;
line-height: 1.45;
}
.seamlessmd-site-header .dropdown-column.third .dropdown-card-bg {
display: none;
}
/* Sidebar blog-card-scroll list — Product/Solutions/Resources/Company. */
.seamlessmd-site-header .blog-card-scroll-wrapper {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 4px;
}
.seamlessmd-site-header .blog-card-scroll {
display: flex;
flex-direction: column;
gap: 18px;
}
.seamlessmd-site-header .blog-card {
display: flex;
flex-direction: column;
padding: 18px 18px 16px;
background: #fff;
border: 1px solid rgba(35, 47, 76, 0.10);
border-radius: 8px;
text-decoration: none;
color: var(--seamlessmd-dark-navy);
transition: box-shadow 140ms ease, transform 140ms ease;
}
.seamlessmd-site-header .blog-card:hover {
box-shadow: 0 6px 20px rgba(30, 42, 92, 0.08);
transform: translateY(-1px);
}
.seamlessmd-site-header .blog-card-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.seamlessmd-site-header .blog-card-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--seamlessmd-primary-dark, var(--seamlessmd-primary));
}
.seamlessmd-site-header .blog-card-title {
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: rgb(21, 27, 38);
}
.seamlessmd-site-header .blog-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--seamlessmd-primary, #2563eb);
margin-top: 4px;
}
.seamlessmd-site-header .blog-card-link .dropdown-card-icon.arrow {
width: 14px;
height: 10px;
margin: 0;
}
/* Dropdown footer — upstream class `.dropdown-footer-full`. */
.seamlessmd-site-header .dropdown-footer-full {
position: relative;
z-index: 1;
border-top: 1px solid var(--seamlessmd-border);
background: #fafbfc;
}
.seamlessmd-site-header .dropdown-footer-full .navbar--container {
min-height: 0;
padding-top: 12px;
padding-bottom: 12px;
}
.seamlessmd-site-header .dropdown-footer {
display: inline-flex;
align-items: center;
gap: 20px;
}
.seamlessmd-site-header .dropdown-footer-link {
color: var(--seamlessmd-dark-navy);
font-weight: 500;
font-size: 14px;
text-decoration: none;
}
.seamlessmd-site-header .dropdown-footer-link:hover {
color: var(--seamlessmd-primary-dark);
}
.seamlessmd-site-header .footer-divider {
width: 1px;
height: 16px;
background: var(--seamlessmd-border);
}
.seamlessmd-site-header .footer-divider .divider { display: none; }
/* Full-viewport scrim behind open dropdowns + mobile menu. */
.seamlessmd-site-header .w-nav-overlay {
position: fixed;
inset: var(--seamlessmd-header-height, 80px) 0 0 0;
background: rgba(30, 42, 92, 0.35);
z-index: 30;
}
.seamlessmd-site-header .w-nav-overlay[hidden] { display: none; }
/* ---------------------------------------------------------------------
* Mobile/tablet (<=1102px): collapse nav into a full-screen drawer
* triggered by the hamburger.
*
* The threshold is measured, not chosen for tidiness. `.navbar--container`
* is a nowrap flex row whose logo and `.navbar--ctas` are both
* `flex-shrink: 0`, while `.navbar-menu` bottoms out at its
* `min-width: auto` min-content width. Nothing can absorb a deficit, so
* below the row's real minimum it overflows and the document scrolls past
* the painted layout — the "empty strip on the right" that this threshold
* exists to prevent. Gaps and padding are far too small to close the
* shortfall, so trimming them was never an option.
*
* It has moved twice: 900 → 1032 when the redesigned row was measured, and
* 1032 → 1102 on 2026-09-10 when the optional secondary header CTA was
* restored. The second button adds ~70px to the row, taking the English
* minimum from 1033 to 1103; measured at 1103 (English) and 1063 (Arabic).
* Both languages deliberately share the English figure — one breakpoint,
* no language branch, and Arabic simply switches to the drawer with room
* to spare. Re-measure this whenever the header row gains or loses an
* element.
*
* Keep this in sync with the same threshold in `seamlessmd-header.css`
* and the `matchMedia` query in `assets/js/seamlessmd-blocks.js`.
* --------------------------------------------------------------------- */
@media (max-width: 1102px) {
.seamlessmd-site-header .mobile-menu-btn { display: flex; }
.seamlessmd-site-header .navbar-menu,
.seamlessmd-site-header .navbar--ctas {
display: none;
}
.seamlessmd-site-header.is-mobile-open .navbar-menu {
display: block;
position: fixed;
top: var(--seamlessmd-header-height, 80px);
left: 0;
right: 0;
background: #fff;
/* Auto height: drawer sizes to its content. The max-height cap + inner
* scroll keeps a runaway-long menu from overflowing the viewport. */
max-height: calc(100vh - var(--seamlessmd-header-height, 80px));
overflow-y: auto;
z-index: 45;
box-shadow: 0 12px 28px rgba(30, 42, 92, 0.12);
animation: seamlessmd-nav-drawer-in 260ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes seamlessmd-nav-drawer-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.seamlessmd-site-header.is-mobile-open .navbar-menu__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.seamlessmd-site-header.is-mobile-open .navbar-menu__item {
border-bottom: 1px solid var(--seamlessmd-border);
}
.seamlessmd-site-header .dropdown-toggle-7 {
width: 100%;
justify-content: space-between;
padding: 18px 24px;
border-radius: 0;
}
.seamlessmd-site-header .dropdown--list {
position: static;
display: none;
box-shadow: none;
}
.seamlessmd-site-header .dropdown-4.is-open > .dropdown--list {
display: block;
animation: seamlessmd-nav-sub-in 220ms ease both;
transform-origin: top;
}
@keyframes seamlessmd-nav-sub-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.seamlessmd-site-header .dropdown-inner-shadow { display: none; }
.seamlessmd-site-header .dropdown-list-body { padding: 8px 0 16px; }
.seamlessmd-site-header .dropdown-list-body .navbar--container {
padding-left: 24px;
padding-right: 24px;
min-height: 0;
display: block;
}
.seamlessmd-site-header .dropdown-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
/* Collapse the Medical/Surgery 2-col subgrid back to 1col on narrow
* viewports — selector intentionally matches the upstream-Webflow
* `.dropdown-subgrid.mod__2-grid` class the PHP renderer emits, not
* a `--2col` BEM variant that was never wired up. */
.seamlessmd-site-header .dropdown-subgrid.mod__2-grid {
grid-template-columns: 1fr;
gap: 8px 0;
}
/* Solutions / Company 4-col grid collapses to single-column on
* mobile (one card per row) so cards remain legible. */
.seamlessmd-site-header .dropdown-subgrid.mod__4-grid {
grid-template-columns: 1fr;
gap: 8px 0;
}
/* Resources panel's 3-col bare subgrid (`.resources.mod__g3 .dropdown-subgrid`)
* also collapses to one card per row on mobile — desktop has
* `1fr 1fr 1fr` set earlier, which on mobile would still try to fit
* three side-by-side. Override here. */
.seamlessmd-site-header .dropdown-grid.resources.mod__g3 .dropdown-subgrid {
grid-template-columns: 1fr;
gap: 8px 0;
}
.seamlessmd-site-header .mod__hide-mobile,
.seamlessmd-site-header .dropdown-column--sidebar { display: none; }
.seamlessmd-site-header.is-mobile-open .navbar-menu__item--ctas {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
}
.seamlessmd-site-header.is-mobile-open .mobile-ctas {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px;
}
.seamlessmd-site-header.is-mobile-open .mobile-ctas .nav-button {
width: 100%;
}
}
/* RTL mirror — caret should flip when the language flips. The rest of
* the layout is bidi-safe thanks to logical gap values. */
[dir="rtl"] .seamlessmd-site-header .caret { transform: scaleX(-1); }
[dir="rtl"] .seamlessmd-site-header .dropdown-4.is-open > .dropdown-toggle-7 .caret {
transform: scaleX(-1) rotate(180deg);
}
/* ------------------------------------------------------------------
* Static fallbacks for IX2-driven widgets inside source-section.
*
* The Webflow JS runtime is enqueued conditionally (see
* inc/source-section-assets.php), but the per-page IX2 *data* JSON
* (animation definitions) lives on Webflow's CDN behind site/page IDs
* we don't host. That means modules like `ix2` load but have no
* animations to play, so widgets that depend on JS-driven state
* transitions render as if the page is in their initial state — often
* with sections overlapping, stuck behind sticky containers, or with
* 0 opacity that never gets transitioned to 1.
*
* These rules give those widgets a usable static look. Scoped strictly
* to `.seamlessmd-source-section` so theme chrome is never affected.
* ------------------------------------------------------------------ */
/* care-plan-library Operational/Clinical Benefits switcher.
* Source uses two stacked
+
* an IX2 switch that toggles which "state" is visible. Without IX2
* data, both states render on top of each other inside the same
* positioned container, looking like garbled text. We stack them
* vertically (Operational first, then Clinical) and let each render
* its own benefits column underneath. Also hide the now-purposeless
* switch indicator and click target so the layout isn't fragmented
* by an inert toggle row. */
.seamlessmd-source-section .state_container { position: static; }
.seamlessmd-source-section h1.state { position: static; opacity: 1 !important; transform: none !important; }
.seamlessmd-source-section .switch_indicator,
.seamlessmd-source-section .switch_bg,
.seamlessmd-source-section .switch_operational,
.seamlessmd-source-section .switch_clinical { display: none !important; }
/* scroll-track sticky panel (e.g. product-overview "How it works").
* Source uses `.scroll-track > .the-sticky` with `position: sticky`
* and IX2 to swap which `.product-image-N` is visible at each scroll
* step. Without IX2, the sticky panel sticks to top forever and a
* single empty product-image div shows. Disable stickiness, let the
* content flow naturally, and force any product-image div to a sane
* fallback rendering (visible via its CSS background-image). */
.seamlessmd-source-section .scroll-track .the-sticky {
position: static !important;
height: auto !important;
top: auto !important;
}
.seamlessmd-source-section .scroll-track [class*="product-image-"] {
opacity: 1 !important;
transform: none !important;
}
/* IX2 sets data-w-id elements to opacity:0 as their initial state.
* Force visibility so they don't disappear inside source-section. */
.seamlessmd-source-section [data-w-id] {
opacity: 1 !important;
}
/* Zero out the first child's top margin.
*
* Webflow's source CSS sets `margin-top: 80px` on hero sections
* (.section.hero.bg.lp, .section.hero.bg.lp.customers, etc.) and
* other top-level wrappers as a built-in offset for the source's own
* fixed navbar (which we strip during clone). With our theme's
* site-header already providing a sticky top bar + its own offset,
* the extra 80px leaves a visible empty band above the first hero
* on /customers/ and /press/. The first-of-type selector keeps the
* rule scoped to the section directly under our wrapper, not nested
* hero clones deeper in the markup. */
.seamlessmd-source-section > :first-child {
margin-top: 0 !important;
}