/** * Phase 2 — Industrial mega menu visual refinement (desktop-first). * Semantic masthead: `header.pt-mega-site-header` (banner) may contain `.pt-mega-topstrip__center` announcement strip plus `.pt-mega-shell--sync-row`, or `.pt-mega-shell` alone. * Legacy Divi / TB suppression scoped under body.pt-mega-menu-active. */ .pt-mega-site-header { /* Shared horizontal gutter: top strip + shell use the same inset so centered copy lines up with the bar. */ --pt-mega-header-pad-x: clamp(1.35rem, 3vw, 2.5rem); /* Chrome row + top announcement strip share gutter and (below 981px) column rhythm via these tracks. */ --pt-mega-sync-grid-cols: minmax(0, auto) minmax(12rem, 1fr) minmax(0, auto); --pt-mega-sync-grid-gap: clamp(1.25rem, 2.2vw, 2.5rem); /* Vertical hit band between bar bottom and mega panel top (fixed mega is centered; top-level

stays narrow). */ --pt-mega-hover-bridge: 1.35rem; /* Pull mega panels slightly up toward the chrome; keep small — large values overlap the nav bar. */ --pt-mega-dropdown-overlap: 6px; display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; position: relative; /* Above typical Divi hero/z-index stacks; below WP admin bar (99999) */ z-index: 98000; } /** * Desktop: mega masthead stays in document flow (first thing after ``), then `#page-container`. * No fixed header + padding hacks — content naturally starts below the banner. Divi legacy fixed-nav * padding on `#page-container` is zeroed so it does not stack with our external header. */ @media (min-width: 981px) and (max-width: 1320px) { .pt-mega-site-header { --pt-mega-sync-grid-cols: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); --pt-mega-sync-grid-gap: clamp(0.65rem, 1.5vw, 1.5rem); } } @media (min-width: 981px) { body.pt-mega-menu-active #page-container { padding-top: 0 !important; } body.pt-mega-menu-active .pt-mega-site-header { position: relative; left: auto; right: auto; top: auto; transition: none; transform: none; will-change: auto; } } /** * Top announcement strip is `header > .pt-mega-topstrip__center` (above chrome). Full-bleed bar uses `::before`. */ @media (min-width: 981px) { header.pt-mega-site-header > .pt-mega-topstrip__center { position: relative; z-index: 100091; box-sizing: border-box; max-width: 92rem; margin-left: auto; margin-right: auto; padding-inline: var(--pt-mega-header-pad-x); padding-block: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; vertical-align: middle; gap: 6px; min-width: 0; height: 45px; min-height: 45px; text-align: right; font-size: 0.8125rem; line-height: 1.45; color: #1b0c09; background: transparent; border-bottom: 0; box-shadow: none; } header.pt-mega-site-header > .pt-mega-topstrip__center::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 100vw; z-index: 0; pointer-events: none; background: #fff; border-bottom: 0; box-shadow: none; } header.pt-mega-site-header > .pt-mega-topstrip__center > * { position: relative; z-index: 1; } .pt-mega-topstrip__spacer-logo-wrap { opacity: 0; pointer-events: none; user-select: none; display: flex; align-items: center; max-width: min(22rem, 46vw); } .pt-mega-topstrip__spacer-logo-wrap--text .pt-mega-shell__title-link { pointer-events: none; } .pt-mega-topstrip__end { display: none !important; } header.pt-mega-site-header > .pt-mega-shell--sync-row { box-sizing: border-box; width: 100%; max-width: 92rem; margin-left: auto; margin-right: auto; padding-inline: var(--pt-mega-header-pad-x); } .pt-mega-shell--sync-row { display: grid; grid-template-columns: var(--pt-mega-sync-grid-cols); align-items: center; column-gap: var(--pt-mega-sync-grid-gap); row-gap: 0; min-height: 5.25rem; overflow: visible; } .pt-mega-shell--sync-row > .pt-mega-shell__brand, .pt-mega-shell--sync-row > .pt-mega-shell__logo-link, .pt-mega-shell--sync-row > .pt-mega-shell__title-link { grid-column: 1; justify-self: start; min-width: 0; } .pt-mega-shell--sync-row > nav.pt-mega-nav { grid-column: 2; justify-self: stretch; min-width: 0; } .pt-mega-shell--sync-row > .pt-mega-shell__tools { grid-column: 3; justify-self: stretch; min-width: 0; } /* * Wordmark / site-title align visually with nav cap-height (logo glyphs often sit low in the box). Site icon unchanged. */ header.pt-mega-site-header .pt-mega-shell--sync-row > .pt-mega-shell__brand:not(:has(.pt-mega-shell__logo-img--site-icon)), header.pt-mega-site-header .pt-mega-shell--sync-row > .pt-mega-shell__logo-link:not(:has(.pt-mega-shell__logo-img--site-icon)), header.pt-mega-site-header .pt-mega-shell--sync-row > .pt-mega-shell__title-link, header.pt-mega-site-header .pt-mega-shell__header-inner > .pt-mega-shell__brand:not(:has(.pt-mega-shell__logo-img--site-icon)), header.pt-mega-site-header .pt-mega-shell__header-inner > .pt-mega-shell__logo-link:not(:has(.pt-mega-shell__logo-img--site-icon)), header.pt-mega-site-header .pt-mega-shell__header-inner > .pt-mega-shell__title-link { transform: translateY(-10px); } header.pt-mega-site-header .pt-mega-shell--sync-row > .pt-mega-shell__logo-link:has(.pt-mega-shell__logo-img--site-icon), header.pt-mega-site-header .pt-mega-shell__header-inner > .pt-mega-shell__logo-link:has(.pt-mega-shell__logo-img--site-icon) { transform: none; } .pt-mega-topstrip__contact-link { flex: 0 0 auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: #1b0c09 !important; white-space: nowrap; padding: 0.25rem 0.15rem; border-radius: 2px; transition: color 0.15s ease, text-decoration-thickness 0.15s ease; } .pt-mega-topstrip__contact-link:hover, .pt-mega-topstrip__contact-link:focus-visible { color: #1b0c09 !important; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; } .pt-mega-topstrip__contact-link:focus-visible { outline: 2px solid #c63f1f; outline-offset: 2px; } /* Top strip: cloned `` sits in `.pt-mega-topstrip__center` (mirror wrappers stripped). */ .pt-mega-topstrip__center .pt-mega-social-follow-mirror { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; width: max-content; min-width: 0; max-width: 100%; padding-block: 0 !important; margin-block: 0 !important; min-height: 0 !important; height: auto !important; } /* * Divi Social Follow defaults: `margin: 0 0 22px` on the UL and `margin-bottom: 8px` on LIs — kills the thin top strip layout. */ header.pt-mega-site-header > .pt-mega-topstrip__center ul.et_pb_social_media_follow { margin: 0 !important; margin-block: 0 !important; margin-bottom: 0 !important; } header.pt-mega-site-header > .pt-mega-topstrip__center .et_pb_social_media_follow > li { margin: 0 !important; margin-block: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } .pt-mega-topstrip__center .et_pb_social_media_follow { flex: 0 0 auto; box-sizing: border-box; width: max-content !important; max-width: 100%; margin: 0; padding: 0; padding-block: 0 !important; padding-inline: 0 !important; list-style: none; background: transparent; border: 0; box-shadow: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end !important; gap: 16px; line-height: normal; } /* Module + `.clearfix` can leave the `