/* ============================================================ TheraPro360 — site-wide POLISH LAYER Injected last in by the mirrored route handler so it wins the cascade. Intentionally improves on the original design WITHOUT editing the faithful mirrored HTML. Keep changes minimal and on-brand. ============================================================ */ /* NOTE: button styling is intentionally NOT touched here. The live site uses varied, theme-native buttons (gradient "Get Started Today" CTAs, light-grey secondary buttons, etc.). The byte-faithful mirror CSS already reproduces them, so we let it render as-is for pixel-identical fidelity. */ /* ---------- Mega-menu: open dropdowns on hover ---------- WoodMart opens hover-mode dropdowns with a CSS `:hover` rule, but LiteSpeed's UCSS stripped it from the mirror's combined stylesheet, so menus wouldn't open. Re-assert it (matches live's hover-open behaviour). We do NOT reposition or recolour the panel — the native WoodMart CSS/JS handles that, like live. */ .wd-nav .menu-item:hover > .wd-dropdown, .wd-nav .menu-item.wd-event-hover:hover > .wd-dropdown, .menu-item-has-children:hover > .wd-dropdown, .menu-item:hover > .wd-dropdown-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Grace period: a full-width panel sits a little below its nav item, so moving the pointer down to it briefly crosses a gap where nothing is hovered. Without help the pure-CSS :hover closes the menu instantly and you can't reach the items. Delay the hide (visibility) so there's time to travel to the panel — this mimics WoodMart's JS hover-intent. */ .menu-item > .wd-dropdown, .menu-item > .wd-dropdown-menu { /* on hover-out, hold the panel fully visible for ~0.4s before fading/hiding */ transition: opacity 0.15s ease 0.4s, visibility 0s linear 0.4s !important; } .menu-item:hover > .wd-dropdown, .menu-item:hover > .wd-dropdown-menu { transition: opacity 0.15s ease 0s, visibility 0s linear 0s !important; } /* Keep mega-menu card images inside their column (the source markup carries an explicit width attribute that can overflow). Cosmetic-neutral vs live. */ .wd-dropdown-menu img { max-width: 100% !important; height: auto !important; } /* Full-width mega dropdowns (Read, Company): on live, WoodMart JS sets an inline left offset to pull the 100vw panel edge-to-edge. That JS positioning doesn't fire on the mirror, so the panel anchors to its menu item and spills off-screen right. Span it edge-to-edge with fixed positioning to match live's layout. */ .wd-dropdown-menu.wd-design-full-width { position: fixed !important; top: 121px !important; /* sits just below the header, matching live */ left: 0 !important; right: 0 !important; width: 100vw !important; margin-left: 0 !important; } /* The inner card row carries a FIXED ~280px side padding (only correct at a 1920px viewport) and fixed-width cards (~4×340=1360px). On narrower screens 280+1360+280 exceeds the viewport and the last card gets clipped off the right edge. Replace with responsive centering padding so the row stays centred and fully on-screen at any width. */ .wd-dropdown-menu.wd-design-full-width .vc_row-fluid.mm-dd, .wd-dropdown-menu.wd-design-full-width > .vc_row-fluid, .wd-dropdown-menu.wd-design-full-width > .vc_row { padding-left: max(24px, calc((100vw - 1360px) / 2)) !important; padding-right: max(24px, calc((100vw - 1360px) / 2)) !important; } /* ---------- Blog index: reveal WPBakery post-grid cards ---------- The blog category grids are WPBakery `vc_basic_grid` (pageable). Their items ship as display:none and are revealed by vc_grid.min.js on init — which never runs on the static mirror, so the category sections look empty even though the post cards are in the DOM. Reveal them. */ /* SCOPED to .wd-page-content (main content) ONLY — the header mega-menus also embed vc_grid post cards, and we must NOT enlarge/reveal those (it breaks the Read dropdown). */ .wd-page-content .vc_grid.vc_row .vc_grid-item, .wd-page-content .vc_grid-container .vc_grid-item, .wd-page-content .vc_pageable-slide-wrapper .vc_grid-item { display: block !important; width: auto !important; float: none !important; margin: 0 !important; } /* Lay image post-card grids out in a responsive multi-column grid (WPBakery's JS normally sets --grid-cols). Leave the title-only lists single-column. */ .wd-page-content .vc_basic_grid:not(.title-only) .vc_pageable-slide-wrapper { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 22px !important; } /* hide the (now-nonfunctional) JS pager + loading spinner */ .vc_grid .vc_grid-loading, .vc_grid .vc_pagination, .vc_grid-pagination { display: none !important; } /* ---------- No underline on nav / menus / mega-menus / footer / buttons ---------- Root cause: WoodMart's :root sets --wd-link-decor:underline, and LiteSpeed's UCSS stripped the UI `none` overrides — so header nav, mega-menu dropdowns and the footer rendered underlined on the mirror. Match live: UI chrome = no underline (in-content prose links keep their underline). */ .whb-header a, header a, nav a, .wd-nav a, .wd-nav-mobile a, .wd-nav-inline a, .menu a, .sub-menu a, .wd-sub-menu a, .widget_nav_menu a, .vc_wp_custommenu a, .wd-dropdown a, .wd-dropdown-menu a, .wd-dropdown-results a, .wd-footer a, .footer-container a, .main-footer a, .btn, a.btn, button.btn { text-decoration: none !important; } /* keep a subtle hover affordance on footer links only */ .wd-footer a:hover, .footer-container a:hover { text-decoration: underline !important; } /* NOTE: article/blog content width is intentionally NOT constrained here — the live site lets single-post/archive content use its native container width, and the mirror CSS reproduces it. Constraining it would deviate from live. */