; with the semantic element
now in place, fixing both parent and child collapses the parent to 0 height
(the child is removed from the parent's flow), zeroing --header-height. */
header,
.wp-site-header,
.wp-block-template-part[data-area="header"] {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-bottom: 2px solid var(--wp--preset--color--off-base, #f1f1f1);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s ease;
transform: translateY(0);
opacity: 1;
}
/* Hidden state when scrolling down */
header.header-hidden,
.srh-auto-hide-header.header-hidden,
.wp-site-header.header-hidden,
.wp-block-template-part[data-area="header"].header-hidden {
transform: translateY(-100%);
opacity: 0;
}
/* Visible state when scrolling up */
header.header-visible,
.srh-auto-hide-header.header-visible,
.wp-site-header.header-visible,
.wp-block-template-part[data-area="header"].header-visible {
transform: translateY(0);
opacity: 1;
}
/* Enhanced background when scrolled */
header.header-scrolled,
.srh-auto-hide-header.header-scrolled,
.wp-site-header.header-scrolled,
.wp-block-template-part[data-area="header"].header-scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* Ensure content doesn't jump when header becomes fixed */
body {
padding-top: 0;
transition: padding-top 0.3s ease;
}
body.header-offset {
padding-top: var(--header-height, 80px);
}
/* Navigation links hover effects */
header a,
.srh-auto-hide-header a,
.wp-site-header a,
.wp-block-template-part[data-area="header"] a {
transition: color 0.2s ease, transform 0.2s ease;
}
header a:hover,
.srh-auto-hide-header a:hover,
.wp-site-header a:hover,
.wp-block-template-part[data-area="header"] a:hover {
transform: translateY(-1px);
}
/* Mobile menu adjustments */
@media (max-width: 768px) {
header,
.srh-auto-hide-header,
.wp-site-header,
.wp-block-template-part[data-area="header"] {
background: rgba(255, 255, 255, 0.98);
}
body.header-offset {
padding-top: var(--header-height, 60px);
}
}
/* Smooth scroll behavior for the whole page */
html {
/* === theme style.css L1429-1494 === */
}
/* Stack full-width on narrow screens — floats get too cramped.
Applies to alignleft/alignright images at any nesting level inside
post-content (e.g. inside columns or groups), not just direct children. */
@media (max-width: 640px) {
.wp-block-post-content .wp-block-image.alignleft,
.wp-block-post-content .wp-block-image.alignright {
float: none;
max-width: 100%;
margin-inline: auto !important;
margin-top: 1em;
margin-bottom: 1em;
}
}
/***********************************************************
######################### Footer ###########################
************************************************************/
/* 100px breathing room above the footer.
Targeting .srh-footer (className on the outermost group block in
patterns/footer.php) since the template-part wrapper does not reliably
carry a data-area attribute in the rendered HTML. */
.srh-footer {
margin-top: 100px !important;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
/* Touch-target sizing: ensure top-nav, offcanvas-menu, and footer links
meet axe-core's 24×24 minimum (WCAG 2.5.8). Default line-height yielded
~19 px tall click targets — too tight for finger taps on mobile.
Vertical padding grows the box without changing the visible text size.
`!important` overrides core-block layout CSS that zeroes the padding. */
nav.wp-block-navigation a.wp-block-navigation-item__content {
padding-top: 0.25em !important;
padding-bottom: 0.25em !important;
}
.srh-footer h2.wp-block-heading > a,
.srh-footer ul.wp-block-list li > a,
.offcanvas-content ul.wp-block-list li > a,
.offcanvas-nav-list li > a {
display: inline-block !important;
padding-top: 0.1em !important;
padding-bottom: 0.1em !important;
}
/* Align all footer columns to the top */
.srh-footer .wp-block-columns {
align-items: flex-start;
}
/* Footer column headings are H2 for accessibility (heading hierarchy),
but visually rendered at the smaller size to match the footer design. */
.srh-footer .wp-block-column > h2 {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.3;
letter-spacing: normal;
margin-bottom: 10px;
}
.srh-footer .wp-block-column > .footer-list-nav {
margin-top: 0;
}
/* === subdomain-shell overrides === */
/* Theme paints with accent-4 (dark navy) and `.wp-site-blocks`
with #f1f1f1 (off-base), and renders the fixed header at 95% white
+ a soft drop shadow. Together they read as a dark stripe right
under the header on the subdomain. Force everything to opaque white
so the bundle matches the providers app's white background. */
body:not(.editor-styles-wrapper):not(.block-editor-page):not(.wp-admin) {
background-color: #ffffff !important;
}
.wp-site-blocks {
background-color: #ffffff !important;
}
header,
.wp-site-header,
.wp-block-template-part[data-area="header"] {
background: #ffffff !important;
box-shadow: none !important;
/* Un-fix the header for embed scenarios. The live SRH site uses
position:fixed + auto-hide-nav.js to scroll-hide the header and to
dynamically size --header-height. The bundle ships without that JS
AND lives inside a shadow root (Epic's prelogin shell) where the
compensating `body { padding-top: var(--header-height) }` rule has
no effect — `body` is in the document light DOM, not the shadow
tree, so the selector matches nothing inside the shadow stylesheet.
Net effect: fixed header → no body padding → page content slides
under the header. Making the header position:static keeps it in
normal flow, lets the host page lay everything out naturally. */
position: static !important;
top: auto !important;
transform: none !important;
}
/* `--header-height` retained for any consumer that wants to know the
approximate header offset for their own layout calculations, but no
longer required for our own positioning. */
:root {
--header-height: 80px;
}
@media (max-width: 768px) {
:root {
--header-height: 60px;
}
}
/* Theme's CLS-prevention rule on reserves 150px via
`clamp(0px, var(--header-height, 150px), 200px)` to compensate for
the fixed header. Static header → no compensation needed. */
.wp-site-blocks > main {
padding-top: 0 !important;
}
/* Extra breathing room between the fixed header and the first content
element so the subdomain app's content (Epic MyChart provider grid,
etc.) doesn't sit flush against the header bottom border. The live
site uses inline `style="margin-top:12px"` on ; the subdomain
app's won't have that, so add it here — matched to the live
site value to avoid the excess gap that 3rem produced. */
.wp-site-blocks > main {
margin-top: 3rem !important;
}
@media (max-width: 768px) {
.wp-site-blocks > main {
margin-top: 1.5rem !important;
}
}
/* Footer butts up directly against the main content. Three sources of
gap to neutralise: (1) the 24px sibling margin WP layout adds between
siblings of .wp-site-blocks; (2) the theme's `.srh-footer { margin-top:
100px !important }`; (3) the inline `style="padding-top:var(--…--60)"`
on the footer's inner wrapper. */
.wp-site-blocks > footer {
margin-top: 50px !important;
margin-block-start: 50px !important;
}
.srh-footer {
margin-top: 0 !important;
}