/* ============================================================================= CBMG Mega Nav — component styles Mirrors the existing syntax-newnav megamenu visual design. Variables are inherited from the active theme's :root. ============================================================================= */ /* Force the Elementor widget container itself to break out of any column padding */ .elementor-widget-cbmg_mega_nav, .elementor-widget-cbmg_mega_nav .elementor-widget-container { width: 100%; padding: 0 !important; margin: 0 !important; } /* ── Sticky header: main bar pins to top, utility bar scrolls away ──────────── */ /* position:sticky lives on

(direct child of ) so its containing */ /* block is the full page height — negative top hides the 37px utility bar. */ /* overflow-x:hidden on html/body creates a scroll container that breaks sticky; */ /* clip has the same visual effect but does NOT create a scroll container. */ html, body { overflow-x: clip !important; } :root { --cbmg-nav-utility-h: 37px; } header.elementor-location-header { position: sticky; top: calc(-1 * var(--cbmg-nav-utility-h)); z-index: 1000; } @media (max-width: 1023px) { /* No utility bar on mobile — stick flush to top */ header.elementor-location-header { top: 0; } } /* Admin bar (logged-in only — body.admin-bar is set by WP). */ /* Offset sticky so header sits flush under the fixed admin bar. */ /* Desktop ≥783px: admin bar = 32px → top = 32 - 37 = -5px (utility scrolls off)*/ body.admin-bar header.elementor-location-header { top: calc(32px - var(--cbmg-nav-utility-h)); } /* Mobile ≤1023px: no utility bar, header sticks right below admin bar (32px) */ @media (max-width: 1023px) { body.admin-bar header.elementor-location-header { top: 32px; } } /* Mobile ≤782px: WP increases admin bar to 46px at this breakpoint */ @media screen and (max-width: 782px) { body.admin-bar header.elementor-location-header { top: 46px; } } /* Fill any scroll-transition gap between fixed admin bar and sticky nav bar */ /* box-shadow extends upward with the nav background colour — zero layout impact */ body.admin-bar .cbmg-nav__bar { box-shadow: 0 -60px 0 60px #fff; } /* ── CRITICAL: allow panels to overflow Elementor's wrapper elements ─────────── */ /* Without this, position:absolute panels are clipped by overflow:hidden parents */ .elementor-location-header, .elementor-location-header .elementor-section, .elementor-location-header .elementor-container, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, /* Elementor template canvas (preview mode) */ .elementor-template-canvas .elementor-section, .elementor-template-canvas .elementor-container, .elementor-template-canvas .elementor-column, .elementor-template-canvas .elementor-widget-wrap, .elementor-template-canvas .e-con, .elementor-template-canvas .e-con-inner { overflow: visible !important; } /* ── Layout variables ───────────────────────────────────────────────────────── */ .cbmg-nav { --cbmg-nav-height: 70px; --cbmg-nav-utility-h: 37px; --cbmg-nav-bg: #fff; --cbmg-nav-border: #e8e8e8; --cbmg-nav-text: var(--color-text, #1a1a2e); --cbmg-nav-accent: var(--color-primary, #0632A0); --cbmg-nav-cta-bg: #0632A0; --cbmg-nav-cta-hover: #052380; --cbmg-nav-panel-bg: #fff; --cbmg-nav-panel-shadow: 0 8px 32px rgba(0,0,0,.12); --cbmg-nav-z: 1000; position: relative; z-index: var(--cbmg-nav-z); width: 100%; box-sizing: border-box; display: block; } /* Force bars to fill full Elementor column width */ .cbmg-nav__utility, .cbmg-nav__bar { width: 100%; box-sizing: border-box; } /* ── Utility bar ─────────────────────────────────────────────────────────────── */ .cbmg-nav__utility { background: var(--cbmg-nav-bg); height: var(--cbmg-nav-utility-h); display: none; /* desktop only — shown via media query below */ } .cbmg-nav__utility-inner { width: 100%; max-width: var(--container-width, 1280px); margin: 0 auto; padding: 0 1.5rem; height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; } .cbmg-nav .cbmg-nav__utility-link { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.5em; border-radius: 3px; font-size: 0.8125rem; letter-spacing: 0; color: #000; text-decoration: none; transition: background 0.15s, color 0.15s; } .cbmg-nav .cbmg-nav__utility-link:hover { background: var(--cbmg-nav-accent); color: #fff; } .cbmg-nav__ext-icon { flex-shrink: 0; } .cbmg-nav__lang-switcher { display: flex; align-items: center; } /* Keep switcher out of footer after moving it to the top utility bar. */ .elementor-location-footer .country-selector { display: none !important; } /* Hide Weglot auto-injected fixed switcher (bottom-right). */ body > .weglot-container.wg-default, body > .weglot_switcher.default_dropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* ── Main bar ────────────────────────────────────────────────────────────────── */ .cbmg-nav__bar { background: var(--cbmg-nav-bg); } .cbmg-nav__bar-inner { max-width: var(--container-width, 1280px); margin: 0 auto; padding: 0 1.5rem; height: var(--cbmg-nav-height); display: flex; align-items: center; gap: 1rem; } /* ── Logo ────────────────────────────────────────────────────────────────────── */ .cbmg-nav__logo { flex-shrink: 0; } .cbmg-nav__logo a { display: block; line-height: 0; } .cbmg-nav__logo-img, .cbmg-nav__logo .custom-logo { max-height: 40px; width: auto; display: block; } /* ── Desktop nav list ────────────────────────────────────────────────────────── */ .cbmg-nav__desktop { flex: 1; display: none; /* shown at breakpoint */ } .cbmg-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0; } .cbmg-nav__item { position: static; outline: none; } .cbmg-nav__item:focus { outline: none; } .cbmg-nav__item > a { display: inline-flex; align-items: center; gap: 0.3em; padding: 0 0.5rem; height: var(--cbmg-nav-height); font-size: 0.9375rem; font-weight: 500; line-height: 1; color: var(--cbmg-nav-text); text-decoration: none; white-space: nowrap; position: relative; outline: none; transition: color 0.15s; } .cbmg-nav__item > a::after { content: ''; position: absolute; left: 48%; width: 52%; height: 2px; bottom: 1.05rem; background: var(--cbmg-nav-accent); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 0.18s ease; } .cbmg-nav__item > a:hover, .cbmg-nav__item--active > a { color: var(--cbmg-nav-accent); } .cbmg-nav__item > a:hover::after, .cbmg-nav__item--active > a::after, .cbmg-nav__item--open > a::after { transform: translateX(-50%) scaleX(1); } .cbmg-nav__chevron, .cbmg-nav__ext-icon { flex-shrink: 0; display: block; /* prevent inline baseline offset inside flex */ } .cbmg-nav__chevron { transition: transform 0.2s; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .cbmg-nav__item--open > a .cbmg-nav__chevron { transform: rotate(180deg); } .cbmg-nav__mobile-item--open > button .cbmg-nav__chevron { transform: rotate(180deg); } /* ── Megapanel ───────────────────────────────────────────────────────────────── */ .cbmg-nav__panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--cbmg-nav-panel-bg); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s; z-index: calc(var(--cbmg-nav-z) + 1); } .cbmg-nav__item--open > .cbmg-nav__panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .cbmg-nav__panel-inner { max-width: var(--container-width, 1280px); margin: 0 auto; padding: 1rem 1.5rem; position: relative; } .cbmg-nav__panel-close { position: absolute; top: 0.5rem; right: 0.75rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; line-height: 1; z-index: 1; color: #999; transition: color 0.15s; } .cbmg-nav__panel-close:hover { color: #000; background: none; } /* ── CTA button ─────────────────────────────────────────────────────────────── */ .cbmg-nav__cta { display: inline-block; padding: 0.55em 1.4em; background: var(--cbmg-nav-cta-bg); color: #fff !important; font-size: 0.9375rem; font-weight: 600; text-decoration: none; border-radius: 3px; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; } .cbmg-nav__cta:hover { background: var(--cbmg-nav-cta-hover); } /* ── Search button ───────────────────────────────────────────────────────────── */ .cbmg-nav__search-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; line-height: 0; color: var(--cbmg-nav-text); } .cbmg-nav__search-btn svg { fill: currentColor; } .cbmg-nav__search-btn:hover { background: var(--cbmg-nav-accent); color: #fff; border-radius: 3px; } /* ── Search overlay bar ─────────────────────────────────────────────────────── */ .cbmg-nav__search-bar { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.25s ease, opacity 0.2s; background: var(--cbmg-nav-bg); /* border-bottom only when open — avoids adding 1px to parent height when closed */ } .cbmg-nav--search-open .cbmg-nav__search-bar { max-height: 80px; opacity: 1; border-bottom: 1px solid var(--cbmg-nav-border); } .cbmg-nav__search-bar-inner { display: flex; align-items: center; max-width: var(--container-width, 1280px); margin: 0 auto; padding: 0.625rem 1.5rem; gap: 0.75rem; } .cbmg-nav__search-bar form { flex: 1; display: flex; align-items: center; gap: 0; } .cbmg-nav__search-input { flex: 1; height: 2.25rem; border: 1px solid var(--cbmg-nav-border); border-right: none; border-radius: 3px 0 0 3px; padding: 0 0.75rem; font-size: 0.9375rem; color: var(--cbmg-nav-text); background: #fff; outline: none; box-sizing: border-box; } .cbmg-nav__search-input:focus { border-color: var(--cbmg-nav-accent); } .cbmg-nav__search-submit { height: 2.25rem; padding: 0 0.75rem; background: var(--cbmg-nav-accent); color: #fff; border: 1px solid var(--cbmg-nav-accent); border-radius: 0 3px 3px 0; cursor: pointer; line-height: 0; display: flex; align-items: center; transition: background 0.15s; } .cbmg-nav__search-submit:hover { background: var(--cbmg-nav-cta-hover, var(--cbmg-nav-accent)); filter: brightness(0.9); } .cbmg-nav__search-close { background: none; border: none; cursor: pointer; padding: 0.25rem; line-height: 0; color: var(--cbmg-nav-text); flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s; } .cbmg-nav__search-close:hover { opacity: 1; } /* ── Mobile controls ─────────────────────────────────────────────────────────── */ .cbmg-nav__mobile-controls { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .cbmg-nav__lang-toggle { background: none; border: none; cursor: pointer; padding: 0.4rem; line-height: 0; color: var(--cbmg-nav-text); border-radius: 4px; transition: background 0.15s, color 0.15s; } .cbmg-nav__lang-toggle svg { fill: currentColor; } .cbmg-nav__lang-toggle:hover, .cbmg-nav__lang-toggle:focus, .cbmg-nav__lang-toggle:active, .cbmg-nav--lang-open .cbmg-nav__lang-toggle { background: var(--cbmg-nav-accent) !important; color: #fff !important; border: none !important; } .cbmg-nav__hamburger { background: none; border: none; cursor: pointer; padding: 0.4rem; display: flex; flex-direction: column; gap: 5px; border-radius: 4px; transition: background 0.15s; } .cbmg-nav__hamburger:hover, .cbmg-nav__hamburger:focus, .cbmg-nav__hamburger:active, .cbmg-nav--mobile-open .cbmg-nav__hamburger { background: var(--cbmg-nav-accent) !important; border: none !important; } .cbmg-nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--cbmg-nav-text); transition: transform 0.2s, opacity 0.2s, background 0.15s; } .cbmg-nav__hamburger:hover span, .cbmg-nav__hamburger:focus span, .cbmg-nav__hamburger:active span, .cbmg-nav--mobile-open .cbmg-nav__hamburger span { background: #fff; } .cbmg-nav--mobile-open .cbmg-nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cbmg-nav--mobile-open .cbmg-nav__hamburger span:nth-child(2) { opacity: 0; } .cbmg-nav--mobile-open .cbmg-nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile drawer ───────────────────────────────────────────────────────────── */ .cbmg-nav__mobile-drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cbmg-nav-bg); z-index: calc(var(--cbmg-nav-z) + 1); max-height: calc(100vh - var(--cbmg-nav-height)); overflow-y: auto; } .cbmg-nav--mobile-open .cbmg-nav__mobile-drawer { display: block; } /* Globe/lang toggle opens drawer independently of hamburger (mobile only) */ @media (max-width: 1023px) { .cbmg-nav--lang-open .cbmg-nav__mobile-drawer { display: block; } /* When ONLY lang is open (hamburger not), hide the regular nav list */ .cbmg-nav--lang-open:not(.cbmg-nav--mobile-open) .cbmg-nav__mobile-list { display: none; } } .cbmg-nav__mobile-list { list-style: none; margin: 0; padding: 0.5rem 0; } .cbmg-nav__mobile-item { } .cbmg-nav__mobile-item > a:not(.cbmg-nav__cta), .cbmg-nav__mobile-toggle { display: flex; align-items: center; gap: 0.75em; width: 100%; padding: 1.1rem 1.5rem; font-size: 1.125rem; font-weight: 500; color: var(--cbmg-nav-text); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; text-transform: none; letter-spacing: 0; } .cbmg-nav__mobile-item > a:not(.cbmg-nav__cta):hover, .cbmg-nav__mobile-toggle:hover { color: var(--cbmg-nav-accent); } .cbmg-nav__mobile-toggle:hover, .cbmg-nav__mobile-toggle:focus, .cbmg-nav__mobile-toggle:active { background: none; border: none; } .cbmg-nav__mobile-panel { display: none; padding: 0.5rem 1.5rem 1.25rem; background: #fff; } .cbmg-nav__mobile-item--open > .cbmg-nav__mobile-panel { display: block; } .cbmg-nav__mobile-item--open > .cbmg-nav__mobile-toggle .cbmg-nav__chevron { transform: rotate(180deg); } .cbmg-nav__mobile-item--cta { padding: 1rem 1.5rem; } .cbmg-nav__cta--mobile { display: block; text-align: center; width: 100%; padding: 0.85em 1.4em; } /* Mobile language panel */ .cbmg-nav__mobile-lang { display: none; padding: 1rem 1.5rem; } .cbmg-nav--lang-open .cbmg-nav__mobile-lang { display: block; } /* ── Bullet / list reset (scoped — does not affect rest of site) ────────────── */ .cbmg-nav ul, .cbmg-nav__panel ul, .cbmg-nav__panel ol, .cbmg-nav__mobile-drawer ul, .cbmg-nav__mobile-drawer ol { list-style: none !important; margin: 0 !important; padding-left: 0 !important; } .cbmg-nav li, .cbmg-nav__panel li, .cbmg-nav__mobile-drawer li { list-style: none !important; list-style-type: none !important; } .cbmg-nav li::marker, .cbmg-nav__panel li::marker, .cbmg-nav__mobile-drawer li::marker { display: none !important; content: '' !important; } .cbmg-nav ul li::before, .cbmg-nav ol li::before, .cbmg-nav__panel li::before, .cbmg-nav__mobile-drawer li::before { content: none !important; display: none !important; } /* ── WPBakery nav panel item classes (el_class on [vc_btn]) ──────────────────── */ /* nav-heading = category label (slightly bold, accent color, small-caps feel) */ /* nav-standard = regular nav link */ /* nav-sub = indented sub-item under a standard link */ .cbmg-nav__panel .nav-heading .vc_btn3, .cbmg-nav__panel .nav-heading .vc_btn3:visited, .cbmg-nav__mobile-panel .nav-heading .vc_btn3, .cbmg-nav__mobile-panel .nav-heading .vc_btn3:visited { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cbmg-nav-accent) !important; text-decoration: none; } .cbmg-nav__panel .nav-standard .vc_btn3, .cbmg-nav__panel .nav-standard .vc_btn3:visited, .cbmg-nav__mobile-panel .nav-standard .vc_btn3, .cbmg-nav__mobile-panel .nav-standard .vc_btn3:visited { font-size: 0.875rem; font-weight: 400; color: #444 !important; text-decoration: none; } .cbmg-nav__panel .nav-standard .vc_btn3:hover, .cbmg-nav__mobile-panel .nav-standard .vc_btn3:hover { color: var(--cbmg-nav-accent) !important; } .cbmg-nav__panel .nav-sub, .cbmg-nav__mobile-panel .nav-sub { padding-left: 0.75rem; } .cbmg-nav__panel .nav-sub .vc_btn3, .cbmg-nav__panel .nav-sub .vc_btn3:visited, .cbmg-nav__mobile-panel .nav-sub .vc_btn3, .cbmg-nav__mobile-panel .nav-sub .vc_btn3:visited { font-size: 0.8125rem; color: #666 !important; text-decoration: none; } .cbmg-nav__panel .nav-sub .vc_btn3:hover, .cbmg-nav__mobile-panel .nav-sub .vc_btn3:hover { color: var(--cbmg-nav-accent) !important; } /* WPBakery button container reset inside panels */ .cbmg-nav__panel .vc_btn3-container, .cbmg-nav__mobile-panel .vc_btn3-container { margin-bottom: 0.35rem; } /* Override WPBakery per-post CSS (padding-top/bottom: 35px from _wpb_shortcodes_custom_css) */ .cbmg-nav__panel .vc_row, .cbmg-nav__panel [class*="vc_custom_"], .cbmg-nav__mobile-panel .vc_row, .cbmg-nav__mobile-panel [class*="vc_custom_"] { padding-top: 0 !important; padding-bottom: 0 !important; } .cbmg-nav__panel .vc_btn3, .cbmg-nav__mobile-panel .vc_btn3 { display: inline-block; background: none !important; border: none !important; padding: 0 !important; line-height: 1.4; box-shadow: none !important; } .cbmg-nav__panel .vc_row, .cbmg-nav__mobile-panel .vc_row { display: flex; flex-wrap: wrap; } .cbmg-nav__panel .vc_col-sm-3, .cbmg-nav__mobile-panel .vc_col-sm-3 { flex: 0 0 25%; max-width: 25%; padding: 0 0.75rem; box-sizing: border-box; } .cbmg-nav__panel .vc_col-sm-4, .cbmg-nav__mobile-panel .vc_col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 0.75rem; box-sizing: border-box; } .cbmg-nav__panel .vc_column_container, .cbmg-nav__mobile-panel .vc_column_container { width: 100%; } .cbmg-nav__panel .vc_column-inner, .cbmg-nav__mobile-panel .vc_column-inner { padding: 0 !important; } /* ── Breakpoint: desktop (≥1024px) ──────────────────────────────────────────── */ @media (max-width: 1023px) { .cbmg-nav { --cbmg-nav-height: 45px; } .cbmg-nav__desktop { display: none !important; } /* Hide desktop CTA only — the mobile CTA (.cbmg-nav__cta--mobile) must remain visible */ .cbmg-nav__cta:not(.cbmg-nav__cta--mobile) { display: none; } .cbmg-nav__utility { display: none; } .cbmg-nav__logo-img, .cbmg-nav__logo .custom-logo { max-height: 24px; } } @media (min-width: 1024px) { .cbmg-nav__utility { display: block; } /* block so inner stretches full width */ .cbmg-nav__desktop { display: block; } .cbmg-nav__mobile-controls { display: none; } .cbmg-nav__mobile-drawer { display: none !important; } .cbmg-nav__panel-inner { padding: 15px 0px; } } /* ── Region / Language Switcher ─────────────────────────────────────────────── */ .cbmg-nav__region-switcher { position: relative; display: flex; align-items: center; } .cbmg-nav__region-btn { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.5em; border-radius: 3px; background: none; border: none; cursor: pointer; line-height: 1; letter-spacing: 0; color: #000; transition: background 0.15s, color 0.15s; } .cbmg-nav__region-btn:hover, .cbmg-nav__region-btn[aria-expanded="true"] { background: var(--cbmg-nav-accent); color: #fff; } /* Current region label shown next to globe icon (desktop only). * JS writes the active region's display name here at runtime. * Weglot will translate this text if active on the page. */ .cbmg-nav__region-current { font-size: 0.8125rem; font-weight: 500; color: currentColor; line-height: 1; white-space: nowrap; text-transform: none; } .cbmg-nav__region-dropdown { position: absolute; top: calc(100% + 4px); right: 0; background: #fff; border: 1px solid var(--cbmg-nav-border); box-shadow: var(--cbmg-nav-panel-shadow); z-index: calc(var(--cbmg-nav-z) + 5); min-width: 220px; padding: 0.375rem 0; display: none; border-radius: 3px; } .cbmg-nav__region-dropdown[aria-hidden="false"] { display: block; } .cbmg-nav__region-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; gap: 1.25rem; } .cbmg-nav__region-row + .cbmg-nav__region-row { border-top: 1px solid var(--cbmg-nav-border); } .cbmg-nav__region-name { font-size: 0.8125rem; color: var(--cbmg-nav-text); white-space: nowrap; } .cbmg-nav__region-langs { display: flex; align-items: center; gap: 0.25rem; } .cbmg-nav .cbmg-nav__region-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 1.75em; padding: 0 0.35em; border: 1px solid #bdbdbd; border-radius: 2px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; color: var(--cbmg-nav-text); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cbmg-nav .cbmg-nav__region-lang:hover, .cbmg-nav .cbmg-nav__region-lang--active { background: var(--cbmg-nav-accent); color: #fff; border-color: var(--cbmg-nav-accent); } /* Mobile region panel */ .cbmg-nav__region-mobile .cbmg-nav__region-row { padding: 0.75rem 0; } .cbmg-nav__region-mobile .cbmg-nav__region-row + .cbmg-nav__region-row { border-top: 1px solid var(--cbmg-nav-border); }