/** * Header & Footer Builder — element + header-type/behavior styles. * * Loaded globally: the Header/Footer Elements shortcodes ([nav_menu], [site_logo], * [site_search], [social_icons], [menu_toggle]) can appear in normal page content * too, not just builder headers/footers. Element selectors are scoped to their * `.sc-*` wrappers so they never clobber the theme's own (slot) header markup. */ /* ========================================================= * Navigation Menu shortcode ([nav_menu] → .sc-nav) * ========================================================= */ .sc-nav { display: flex; } .sc-nav .primary-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .sc-nav .primary-menu a { text-decoration: none; } .sc-nav .primary-menu--vertical { flex-direction: column; align-items: flex-start; gap: .5rem; width: 100%; } .sc-nav .nav-align-center { justify-content: center; } .sc-nav .nav-align-end { justify-content: flex-end; } .sc-nav .nav-align-justified { justify-content: space-between; width: 100%; } /* Submenus — base */ .sc-nav .primary-menu .sub-menu { list-style: none; margin: 0; padding: .5rem 0; } .sc-nav .primary-menu .sub-menu a { display: block; padding: .4rem 1.25rem; } /* Dropdown (horizontal) */ .sc-nav .primary-menu--horizontal .menu-item-has-children { position: relative; } .sc-nav .primary-menu--horizontal .sub-menu { position: absolute; top: 100%; left: 0; min-width: 12rem; background: #fff; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12); border-radius: .375rem; opacity: 0; visibility: hidden; transform: translateY(.25rem); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; z-index: 1000; } .sc-nav .primary-menu--horizontal .menu-item-has-children.is-open > .sub-menu, .sc-nav .primary-menu--horizontal .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Accordion (vertical / drawer) */ .sc-nav .primary-menu--vertical .sub-menu { padding-left: 1rem; } .sc-nav .submenu-accordion .sub-menu { display: none; } .sc-nav .submenu-accordion .menu-item-has-children.is-open > .sub-menu { display: block; } /* Mega (full-width panel) */ .sc-nav .submenu-mega .menu-item-has-children { position: static; } .sc-nav .submenu-mega .sub-menu { left: 0; right: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; } /* ========================================================= * Site Logo shortcode ([site_logo] → .sc-site-logo) * ========================================================= */ .sc-site-logo { display: inline-flex; align-items: center; } .sc-site-logo__img { display: block; height: auto; max-width: 100%; } .sc-site-logo__title { font-size: 1.5rem; font-weight: 700; text-decoration: none; } .sc-site-logo.text-center { justify-content: center; width: 100%; } .sc-site-logo.text-end { justify-content: flex-end; width: 100%; } /* ========================================================= * Search shortcode ([site_search] → .sc-site-search) * ========================================================= */ .sc-site-search { display: inline-flex; align-items: center; } .sc-search-form { display: flex; align-items: center; } .sc-search-field { border: 1px solid rgba(0, 0, 0, .2); border-radius: .375rem 0 0 .375rem; padding: .4rem .75rem; min-width: 0; } .sc-search-submit { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, .2); border-left: 0; border-radius: 0 .375rem .375rem 0; background: transparent; padding: .4rem .6rem; cursor: pointer; color: inherit; } .sc-site-search--icon-toggle { position: relative; } .sc-search-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: .4rem; cursor: pointer; color: inherit; } .sc-search-panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 1000; background: #fff; padding: .75rem; border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15); } .sc-search-panel[hidden] { display: none; } /* ========================================================= * Social Icons shortcode ([social_icons] → .sc-social) * ========================================================= */ .sc-social { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; list-style: none; margin: 0; padding: 0; } .sc-social__link { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; } .sc-social--sm { font-size: 1rem; } .sc-social--md { font-size: 1.25rem; } .sc-social--lg { font-size: 1.5rem; } /* Builder Section escape-hatch wrapper */ .up-builder-section { width: 100%; } /* Spacer + Divider header elements */ .header-element--spacer { flex: 1 1 auto; } .header-spacer { display: block; flex: 1 1 auto; min-width: 1rem; } .header-divider { display: inline-block; align-self: stretch; width: 1px; min-height: 1.25rem; margin: 0 .25rem; background: currentColor; opacity: .25; } /* ========================================================= * Slot header — Bottom Bar row (mirrors .header-topbar in style.css) * ========================================================= */ .header-bottombar { background-color: var(--bottombar-bg, transparent); color: var(--bottombar-color, inherit); border-top: 1px solid rgba(0, 0, 0, .06); font-size: .9375rem; } .header-bottombar a { color: inherit; } .header-bottombar a:hover { opacity: .85; } .header-bottombar .header-row { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; } .header-bottombar .header-col--start { flex: 1 1 0; justify-content: flex-start; min-width: 0; } .header-bottombar .header-col--center { flex: 0 1 auto; justify-content: center; min-width: 0; } .header-bottombar .header-col--end { flex: 1 1 0; justify-content: flex-end; min-width: 0; } @media (max-width: 767.98px) { .header-bottombar .header-row { flex-direction: column; gap: .25rem; text-align: center; } .header-bottombar .header-col { flex: 0 0 auto; justify-content: center; } } /* ========================================================= * Builder header TYPES (
) * ========================================================= */ .site-header .up-builder-section { width: 100%; } /* Off-canvas: the visible bar shows the toggle; nav lives in the drawer. */ .site-header--off-canvas .menu-toggle { display: inline-flex; } /* Sidebar: fixed vertical column on desktop (base — refine per project). */ @media (min-width: 992px) { .site-header--sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 1031; overflow-y: auto; display: flex; flex-direction: column; } } /* Transparent overlay over the first section; solidifies once stuck. */ .site-header--transparent { position: absolute; /* Sit below the WP admin bar when logged in (--admin-bar-offset is 32/46px, else 0). An absolute top:0 lands at the viewport top — BEHIND the fixed admin bar — so its top strip gets clipped; the offset drops it clear of the bar. */ top: var(--admin-bar-offset, 0px); left: 0; right: 0; z-index: 1030; background: transparent; } .site-header--transparent.is-stuck { position: fixed; /* background handled by the two-state STUCK rule below (no forced white) */ } /* The router also adds .header-sticky to a transparent-overlay header (it needs it for the JS is-stuck toggle), and `.site-header.header-sticky { position: sticky }` (0,2,0) outranks `.site-header--transparent` (0,1,0) — so without these the header stayed IN-FLOW (sticky) and pushed the content down instead of OVERLAYING the first section. Re-assert the overlay positioning at a higher specificity: absolute over the first section until stuck, then fixed + solid. */ .site-header.header-sticky.site-header--transparent { position: absolute; top: var(--admin-bar-offset, 0px); } .site-header.header-sticky.site-header--transparent.is-stuck { position: fixed; top: var(--admin-bar-offset, 0px); } /* ========================================================= * Builder header BEHAVIORS (data-hf-behavior on
) * ========================================================= */ /* Sticky base — reuses the existing .header-sticky → .is-stuck observer. Offset by the WP admin-bar height when logged in (0 otherwise) so the pinned header never hides under the admin bar. (This selector ties style.css's on specificity, so it must carry the offset too — otherwise whichever loads last wins with top:0.) */ .site-header.header-sticky { position: sticky; top: var(--admin-bar-offset, 0px); z-index: 1030; } /* STUCK background — the TWO-STATE model. These win at (0,4,0) over the core style.css `.site-header.header-sticky.is-stuck { background: var(--header-sticky-bg) }` (0,3,0), so the old forced white/near-opaque repaint is retired. Change-on-scroll OFF => the stuck header inherits the At-top --header-bg (same look both states); ON => it repaints to --header-scroll-bg (falling back to --header-bg when no scrolled colour was set). Glass, if on for the active state, overrides the fill below. */ .site-header.header-sticky.is-stuck:not(.site-header--scroll-change) { background: var(--header-bg); box-shadow: none; } .site-header.header-sticky.is-stuck.site-header--scroll-change { background: var(--header-scroll-bg, var(--header-bg)); } /* Sticky + shrink — the shrunk logo height is configurable (Header → Layout → Shrunk Logo Height → --header-shrink-logo), defaulting to 40px. Covers both the theme logo (.site-logo) and the Site Logo shortcode (.sc-site-logo__img). */ /* Shrink on scroll — now an INDEPENDENT toggle (.site-header--scroll-shrink), so it composes with ANY position (e.g. a transparent overlay that shrinks its logo on scroll). Shrunk logo height is configurable (--header-shrink-logo, default 40px); covers the theme logo + the Site Logo shortcode. */ .site-header--scroll-shrink { transition: padding .2s ease; } .site-header--scroll-shrink.is-stuck { padding-top: .25rem; padding-bottom: .25rem; } .site-header--scroll-shrink .sc-site-logo__img, .site-header--scroll-shrink .site-logo { transition: max-height .2s ease; } .site-header--scroll-shrink.is-stuck .sc-site-logo__img, .site-header--scroll-shrink.is-stuck .site-logo { max-height: var(--header-shrink-logo, 40px); } /* Hide on scroll down — an independent toggle (.site-header--hide); header-behaviors.js toggles .is-hidden. */ .site-header--hide { transition: transform .3s ease; will-change: transform; } .site-header--hide.is-hidden { transform: translateY(-100%); } /* Keyboard a11y: a header holding focus (or an open menu) is never left off-screen. */ .site-header--hide.is-hidden:focus-within { transform: none; } /* Reduced motion: the JS bails, but if is-hidden is ever set, don't animate. */ @media (prefers-reduced-motion: reduce) { .site-header--hide { transition: none; } } /* ========================================================= * Chrome toggles (Header → Layout switches — compose with any design/behavior) * Always loaded (tiny, class-gated). Placed AFTER the sticky base rule (above) so the * glass background wins over the .is-stuck white repaint by source order. * ========================================================= */ /* TWO-STATE chrome. Each look applies (a) at top always, (b) when stuck WITHOUT Change-on-scroll (inherit), and the On-scroll variants apply (c) when stuck WITH the matching --scroll-* class. box-shadow doesn't stack across selectors, so Border / Shadow / both are separate rule sets. */ /* Border — a hairline rule under the header (inset shadow: no height / layout shift). */ .site-header--border:not(.is-stuck), .site-header--border.is-stuck:not(.site-header--scroll-change), .site-header--scroll-border.is-stuck { box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .18); } /* Shadow — a soft drop shadow lifting the header off the page. */ .site-header--shadow:not(.is-stuck), .site-header--shadow.is-stuck:not(.site-header--scroll-change), .site-header--scroll-shadow.is-stuck { box-shadow: 0 6px 22px -10px rgba(15, 23, 42, .28); } /* Border + Shadow together — compose (a single box-shadow with both layers). */ .site-header--border.site-header--shadow:not(.is-stuck), .site-header--border.site-header--shadow.is-stuck:not(.site-header--scroll-change), .site-header--scroll-border.site-header--scroll-shadow.is-stuck { box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .18), 0 6px 22px -10px rgba(15, 23, 42, .28); } /* Uppercase navigation — primary menu links. */ .site-header--uppercase-nav .header-main .menu-item > a { text-transform: uppercase; letter-spacing: .04em; } /* Translucent / Glass — TWO-STATE frosted background. The `.site-header` prefix + the state qualifiers keep specificity above both the core `.site-header { background: var(--header-bg) }` (0,1,0) and the two-state stuck-bg rules above, so glass wins for whichever state is active. AT-TOP glass (header_glass) tints from --header-bg; ON-SCROLL glass (scroll_glass) tints from --header-scroll-bg. This is what finally enables "clear over the hero -> frost only on scroll": set At-top with no glass, and Change-on-scroll + Glass-on-scroll. */ .site-header.site-header--glass:not(.is-stuck), .site-header.site-header--glass.is-stuck:not(.site-header--scroll-change) { background: color-mix(in srgb, var(--header-bg, #fff) 72%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } .site-header.header-sticky.site-header--scroll-glass.is-stuck { background: color-mix(in srgb, var(--header-scroll-bg, var(--header-bg, #fff)) 72%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); } /* ========================================================= * Responsive — per-element visibility + collapse breakpoint + mobile height * ========================================================= */ /* Per-element "Hide On" (header + footer elements). */ @media (max-width: 767.98px) { .header-element.hide-xs, .footer-element.hide-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .header-element.hide-sm, .footer-element.hide-sm { display: none !important; } } @media (min-width: 992px) { .header-element.hide-md, .footer-element.hide-md { display: none !important; } } /* Collapse to the mobile hamburger. Below the chosen breakpoint the INLINE PRIMARY MENU is hidden — wherever it sits (left / center / RIGHT column) — and the toggle is shown; other elements (logo, a CTA) stay in place. Was scoped to `.header-col--center` only, so a menu placed in the right column (a very common layout, and what the Site Converter emits) never collapsed and overlapped the page on mobile. Default breakpoint = lg (992px); header-collapse-md = 768px. Higher specificity than the base rules. */ /* The inline elements that move into the drawer on mobile: the primary menu AND the inline CTA button — an inline CTA is wide and pushes the toggle off-screen (an unreachable menu). The logo + toggle stay, so a collapsed header is always logo-left / hamburger-right and never overflows. Users who want another element on mobile keep it via the off-canvas drawer. */ /* header-collapse-lg (default) — collapse below 992px. */ @media (max-width: 991.98px) { .site-header.header-collapse-lg .header-element--menu, .site-header.header-collapse-lg .header-element--menu_area, .site-header.header-collapse-lg .header-element--cta_button { display: none; } .site-header.header-collapse-lg .menu-toggle { display: inline-flex; } } @media (min-width: 992px) { .site-header.header-collapse-lg .menu-toggle { display: none; } } /* header-collapse-md — collapse below 768px. */ @media (max-width: 767.98px) { .site-header.header-collapse-md .header-element--menu, .site-header.header-collapse-md .header-element--menu_area, .site-header.header-collapse-md .header-element--cta_button { display: none; } .site-header.header-collapse-md .menu-toggle { display: inline-flex; } } @media (min-width: 768px) { .site-header.header-collapse-md .menu-toggle { display: none; } } /* Mobile main-header height (falls back to the desktop height when unset). */ @media (max-width: 767.98px) { .header-main { min-height: var(--header-min-height-mobile, var(--header-min-height)); } } /* ── Mobile Header Layout (Header → Mobile & Tablet → Mobile Header Layout) ────────────────── Re-arranges the logo (start column) and hamburger (end column) once the header COLLAPSES. Each layout is gated to its own collapse width so it engages exactly when the toggle shows. 'default' emits no class. Assumes logo in .header-col--start, toggle in .header-col--end (the default placement). The rules are duplicated per breakpoint because a header carries only ONE collapse class and each has a different engage width (lg = <992, md = <768). */ @media (max-width: 991.98px) { /* Mobile BAR background — only applied when --mobile-bar-bg is set (invalid var ⇒ ignored). */ .site-header.header-collapse-lg .header-main { background-color: var(--mobile-bar-bg); } /* Toggle left · Logo center */ .header-collapse-lg.header-mlayout--toggle-left .header-main .header-row { position: relative; justify-content: flex-start; } .header-collapse-lg.header-mlayout--toggle-left .header-main .header-col--end { order: -1; } .header-collapse-lg.header-mlayout--toggle-left .header-main .header-col--start { position: absolute; left: 50%; transform: translateX(-50%); } /* Logo right · Toggle left */ .header-collapse-lg.header-mlayout--logo-right .header-main .header-row { justify-content: space-between; } .header-collapse-lg.header-mlayout--logo-right .header-main .header-col--end { order: -1; } .header-collapse-lg.header-mlayout--logo-right .header-main .header-col--start { order: 2; } /* Logo center · Toggle below (two rows) */ .header-collapse-lg.header-mlayout--center-below .header-main .header-row { flex-wrap: wrap; row-gap: 0.5rem; justify-content: center; } .header-collapse-lg.header-mlayout--center-below .header-main .header-col--start { flex: 0 0 100%; display: flex; justify-content: center; order: 1; } .header-collapse-lg.header-mlayout--center-below .header-main .header-col--center { flex: 0 0 100%; display: flex; justify-content: center; order: 2; } .header-collapse-lg.header-mlayout--center-below .header-main .header-col--end { flex: 0 0 100%; display: flex; justify-content: center; order: 3; } } @media (max-width: 767.98px) { .site-header.header-collapse-md .header-main { background-color: var(--mobile-bar-bg); } .header-collapse-md.header-mlayout--toggle-left .header-main .header-row { position: relative; justify-content: flex-start; } .header-collapse-md.header-mlayout--toggle-left .header-main .header-col--end { order: -1; } .header-collapse-md.header-mlayout--toggle-left .header-main .header-col--start { position: absolute; left: 50%; transform: translateX(-50%); } .header-collapse-md.header-mlayout--logo-right .header-main .header-row { justify-content: space-between; } .header-collapse-md.header-mlayout--logo-right .header-main .header-col--end { order: -1; } .header-collapse-md.header-mlayout--logo-right .header-main .header-col--start { order: 2; } .header-collapse-md.header-mlayout--center-below .header-main .header-row { flex-wrap: wrap; row-gap: 0.5rem; justify-content: center; } .header-collapse-md.header-mlayout--center-below .header-main .header-col--start { flex: 0 0 100%; display: flex; justify-content: center; order: 1; } .header-collapse-md.header-mlayout--center-below .header-main .header-col--center { flex: 0 0 100%; display: flex; justify-content: center; order: 2; } .header-collapse-md.header-mlayout--center-below .header-main .header-col--end { flex: 0 0 100%; display: flex; justify-content: center; order: 3; } } /* The header CTA re-surfaced inside the mobile drawer (moved there from the hidden inline bar). */ .drawer-cta { margin-top: 1.25rem; } .drawer-cta .header-element--cta_button { display: block; } .drawer-cta .btn { display: block; width: 100%; text-align: center; } /* ── Mobile bottom tab bar (Phase 3, Header → Mobile & Tablet → Bottom Navigation) ── Hidden by default; a fixed bottom bar on phones, built from the Primary menu. */ .mobile-bottom-nav { display: none; } @media (max-width: 767.98px) { .has-bottom-nav .mobile-bottom-nav { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: var(--mobile-bar-bg, var(--drawer-bg, #fff)); border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08); } .mobile-bottom-nav ul { display: flex; margin: 0; padding: 0; list-style: none; } .mobile-bottom-nav li { flex: 1 1 0; min-width: 0; text-align: center; } .mobile-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; min-height: 52px; color: var(--drawer-color, var(--color-text)); text-decoration: none; font-size: 0.7rem; line-height: 1.1; } .mobile-bottom-nav li.is-current a { color: var(--drawer-active, var(--color-primary)); } .mobile-bottom-nav .mbn-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-bottom-nav--no-labels .mbn-label { display: none; } .mobile-bottom-nav .mbn-icon { font-size: 1.15rem; line-height: 1; } .mobile-bottom-nav .mbn-icon--dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Keep page content clear of the fixed bar. */ .has-bottom-nav { padding-bottom: 56px; } } /* iOS safe-area padding (Phase 3) — notch / home-indicator insets. */ .mobile-safe-area .site-header.header-sticky { padding-top: env(safe-area-inset-top); } .mobile-safe-area .primary-navigation-drawer__panel { padding-top: max(1.5rem, env(safe-area-inset-top)); } @media (max-width: 767.98px) { .mobile-safe-area.has-bottom-nav .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); } .mobile-safe-area.has-bottom-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } /* Disable sticky on mobile (Phase 3). */ @media (max-width: 767.98px) { .mobile-no-sticky .site-header.header-sticky { position: static; } } /* ============================================================ Primary nav — regular dropdowns + Mega Menu support (shared base for child themes; children render the menu inside .upw-nav-links > ul.upw-menu). Dropdown rules use STRICT child combinators from the menu UL so they never reach the Mega Menu extension's internal .sub-menu (which lives inside a .mega-menu div). ============================================================ */ .upw-nav-links .menu-item-has-children { position: relative; } .upw-nav-links > ul > li.menu-item-has-children > .sub-menu { position: absolute; top: 100%; left: 0; z-index: 200; min-width: 210px; margin: .45rem 0 0; padding: .4rem; list-style: none; background: #fff; border: 1px solid rgba(20,22,26,.08); border-radius: 12px; box-shadow: 0 16px 40px rgba(20,22,26,.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .upw-nav-links > ul > li.menu-item-has-children:hover > .sub-menu, .upw-nav-links > ul > li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .upw-nav-links > ul > li > .sub-menu li { list-style: none; } .upw-nav-links > ul > li > .sub-menu a { display: block; padding: .5rem .8rem; border-radius: 8px; white-space: nowrap; font-weight: 500; text-decoration: none; color: #1c1e22; } .upw-nav-links > ul > li > .sub-menu a::after { display: none; } .upw-nav-links > ul > li > .sub-menu a:hover, .upw-nav-links > ul > li > .sub-menu .current-menu-item > a { background: rgba(20,22,26,.05); } /* Mega Menu (FW Mega Menu extension) — the extension positions the full-width panel; the theme just makes it readable on its light surface. These now consume the Header → Mega Menu tokens (--mm-*), with the previous hardcoded values as fallbacks so the look is identical until customized. NOTE: the theme's higher specificity here is deliberate — it lets the settings win over the extension's own baseline rules on this theme. */ .upw-header .mega-menu, .site-header .mega-menu { padding-top: var(--mm-panel-pad, 1.6rem); padding-bottom: var(--mm-panel-pad, 1.9rem); } .upw-header .mega-menu .mega-menu-col > a, .site-header .mega-menu .mega-menu-col > a { color: var(--mm-heading-color, #1c1e22); font-weight: var(--mm-heading-weight, 700); font-size: var(--mm-heading-size, .95rem); text-transform: var(--mm-heading-transform, none); letter-spacing: var(--mm-heading-spacing, normal); padding-bottom: var(--mm-heading-pad-bottom, 0); border-bottom: var(--mm-heading-border, 0 solid transparent); } .upw-header .mega-menu .mega-menu-col > .sub-menu a, .site-header .mega-menu .mega-menu-col > .sub-menu a { color: var(--mm-item-color, #5f6266); font-weight: 500; font-size: var(--mm-item-size, inherit); } .upw-header .mega-menu .mega-menu-col > .sub-menu a:hover, .site-header .mega-menu .mega-menu-col > .sub-menu a:hover, .upw-header .mega-menu .mega-menu-col > .sub-menu .current-menu-item > a, .site-header .mega-menu .mega-menu-col > .sub-menu .current-menu-item > a { color: var(--mm-item-hover-color, #1a8f74); } /* Keep the heading link's hover accent (headings are links too). */ .upw-header .mega-menu .mega-menu-col > a:hover, .site-header .mega-menu .mega-menu-col > a:hover { color: var(--mm-item-hover-color, #1a8f74); } .upw-header .mega-menu a::after, .site-header .mega-menu a::after { display: none; } .upw-header .mega-menu .mega-menu-col > .sub-menu > li + li, .site-header .mega-menu .mega-menu-col > .sub-menu > li + li { margin-top: var(--mm-item-gap, 0); } .upw-header .mega-menu .mega-menu-desc, .site-header .mega-menu .mega-menu-desc { font-size: var(--mm-desc-size, .85em); color: var(--mm-desc-color, inherit); opacity: .85; } /* ------------------------------------------------------------------------- * Menu item sub-labels (from the item Description field). * Rendered by unysonplus_nav_menu_item_sublabel() for header nav locations. * The sub-label stacks under the main label; only shows when a Description * is set. Child themes can override the colour/size. * ---------------------------------------------------------------------- */ .upw-nav-links > ul > li > a:has(.menu-sublabel), .primary-menu > li > a:has(.menu-sublabel) { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.15; } .menu-sublabel { display: block; font-size: .72em; font-weight: 400; line-height: 1.1; letter-spacing: 0; text-transform: none; opacity: .68; margin-top: 2px; } /* Per-item menu icon (Appearance → Menus → item → Icon). Rendered INSIDE the label span (filter priority 9) so it sits inline with the text and the sub-label still stacks beneath — hence no flex-direction handling needed. */ .menu-icon { margin-right: .45em; font-size: 1em; line-height: 1; vertical-align: -.05em; } /* ============================================================ Footer — Auto Width columns (Column Ratio → "Auto Width: On") Content-sized flex columns distributed by --fa-justify, bypassing the Bootstrap 12-grid ratio snap (which can only do twelfths + fifths). Row class + --fa-justify are set in inc/includes/footer-builder.php. ============================================================ */ .footer-section .footer-row--auto { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; justify-content: var(--fa-justify, space-between); margin: 0; /* cancel the grid row's negative gutters */ } .footer-section .footer-row--auto > .footer-col--auto { flex: 0 0 auto; /* size to content, not a fixed fraction */ width: auto; max-width: 100%; padding: 0; /* gap handles spacing, not grid gutters */ } @media (max-width: 782px) { .footer-section .footer-row--auto { justify-content: center; gap: 28px; } } /* Converter footer link / contact columns render as a raw