; 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;
}
/* Fixed header → body needs a static top-offset so content isn't hidden
behind it. On the live site `auto-hide-nav.js` measures the header and
sets `--header-height` (typically 80px desktop / 60px mobile); we ship
without that JS, so pin the variable to a sensible static default. */
:root {
--header-height: 80px;
}
@media (max-width: 768px) {
:root {
--header-height: 60px;
}
}
body {
padding-top: var(--header-height) !important;
}
/* Theme's CLS-prevention rule on reserves 150px via
`clamp(0px, var(--header-height, 150px), 200px)`. With our body
padding-top already reserving the fixed-header space, that main
padding doubles up and produces ~230px of dead space above content. */
.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;
}