/* ==========================================================
SEEK Commercial — Navigation System
Professional multi-feature header with 6 menu item styles,
mega menu, top bar widget area, transparent/sticky modes,
and full Customizer color/size control.
========================================================== */
/* ----------------------------------------------------------
Top Bar — 3 sections, always visible when enabled,
accepts HTML in each section via Customizer textarea fields
---------------------------------------------------------- */
.cre-top-bar {
background: var(--cre-top-bar-bg, #0a1628);
color: var(--cre-top-bar-text, #cbd2d9);
font-size: 12.5px;
line-height: 1.4;
}
.cre-top-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: var(--cre-top-bar-height, 38px);
padding: 4px 0;
}
.cre-top-bar-left {
flex: 1;
display: flex;
align-items: center;
}
.cre-top-bar-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.cre-top-bar-right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.cre-top-bar a { color: var(--cre-top-bar-text,#cbd2d9); text-decoration:none; }
.cre-top-bar a:hover { color:#fff; }
.cre-top-bar p { margin:0; }
.cre-top-bar strong { color:#fff; }
.cre-top-bar-nav ul { display:flex; list-style:none; margin:0; padding:0; gap:2px; }
.cre-top-bar-nav a { display:block; padding:4px 10px; font-size:12px; font-weight:600; }
@media (max-width: 640px) {
.cre-top-bar-center { display: none; }
.cre-top-bar-left,
.cre-top-bar-right { flex: auto; }
}
/* ----------------------------------------------------------
Site Header shell
---------------------------------------------------------- */
.cre-site-header {
position: relative;
z-index: 600;
background: var(--cre-header-bg, #ffffff);
box-shadow: 0 1px 0 0 var(--cre-header-border, rgba(0,0,0,0.08));
transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* The box-shadow above is a plain 1px border, meant only for when no
pin stripe is set — it draws its own thin line directly adjacent
to where the stripe sits, and that line's color (even if faint or
semi-transparent) mixing right next to the stripe's true color is
exactly what can make the stripe look "slightly off." Once a real
stripe is active, this plain border serves no purpose and only
gets in the way — remove it entirely. */
.cre-site-header.has-pin-stripe {
box-shadow: none;
}
/* Pin stripe — the ONLY element that draws it, at every screen
size. Positioned absolute + bottom:0 against the header's padding
box, which (with no border on the header) is exactly the header's
true bottom edge — flush by construction. */
.cre-site-header::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--cre-header-stripe-width, 0px);
background: var(--cre-header-stripe-color, #005a87);
pointer-events: none;
z-index: 601;
}
.cre-site-header.is-sticky {
position: fixed;
top: 0; left: 0; right: 0;
box-shadow: 0 2px 20px rgba(0,0,0,0.10);
animation: cre-slide-down 0.25s ease;
}
@keyframes cre-slide-down {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
.cre-site-header.is-transparent {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.cre-site-header.is-transparent.is-sticky {
background: var(--cre-header-bg, #ffffff) !important;
border-bottom-color: var(--cre-header-border, rgba(0,0,0,0.08)) !important;
box-shadow: 0 2px 20px rgba(0,0,0,0.10) !important;
}
/* ----------------------------------------------------------
Admin bar compensation
When an admin is logged in, WordPress adds a sticky bar at
the very top (32px desktop, 46px mobile). Without offsetting
our own sticky header's top position, everything collides —
header presses against or hides behind the admin bar, the
top bar separates from the header, fixed elements misbehave,
and the footer gets pushed. These rules fix every case.
---------------------------------------------------------- */
/* Admin bar pushes html down 32px (46px on mobile) via WordPress
core's own CSS — that alone should be seamless. These rules exist
specifically for the STICKY state, where our header switches to
position:fixed and therefore stops inheriting that offset from
its normal document position — it needs to be told explicitly. */
.admin-bar .cre-site-footer {
margin-top: 48px;
}
.admin-bar .cre-site-header.is-sticky {
top: 32px;
}
.admin-bar .cre-top-bar {
position: relative;
z-index: 601;
}
@media screen and (max-width: 782px) {
.admin-bar .cre-site-header.is-sticky {
top: 46px;
}
}
.cre-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: var(--cre-header-height, 76px);
padding: 10px 0;
position: relative;
}
.cre-header-logo-center .cre-header-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.cre-header-logo-right .cre-header-brand { order: 2; }
.cre-header-logo-right .cre-primary-nav { order: 0; }
.cre-header-brand {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
min-width: 0;
z-index: 1;
margin-left: var(--cre-logo-margin-left, 0px);
margin-right: var(--cre-logo-margin-right, 0px);
}
.cre-custom-logo-link img,
.cre-header-logo img {
display: block;
max-height: var(--cre-logo-height, 52px);
max-width: var(--cre-logo-width, auto);
width: auto;
height: auto;
}
.cre-header-identity {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: var(--cre-header-text-margin-left, 0px);
margin-right: var(--cre-header-text-margin-right, 0px);
}
.cre-header-site-title,
a.cre-header-site-title,
.cre-header-brand a.cre-header-site-title {
display: block;
font-size: var(--cre-site-title-size, 20px);
font-weight: 800;
color: var(--cre-header-text-color, #1f2933);
text-decoration: none !important;
line-height: 1.15;
white-space: nowrap;
}
.cre-header-tagline {
display: block;
font-size: 12px;
color: var(--cre-header-muted-color, #667085);
margin-top: 2px;
white-space: nowrap;
}
.cre-header-text {
display: block;
font-size: 13px;
color: var(--cre-header-text-custom-color, var(--cre-header-muted-color, #667085));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Header text positioned left of the main menu */
.cre-header-text-before-menu {
display: none; /* hidden on mobile */
font-size: 13px;
color: var(--cre-header-text-custom-color, var(--cre-header-muted-color, #667085));
white-space: nowrap;
margin-right: var(--cre-header-text-gap, 32px);
flex-shrink: 0;
}
@media (min-width: 900px) {
.cre-header-text-before-menu {
display: block;
}
/* When header text is below tagline it sits inside .cre-header-identity
via cre_theme_the_header_text() — no extra layout needed */
.cre-header-text-below_tagline .cre-header-text-before-menu {
display: none;
}
}
/* ----------------------------------------------------------
Primary Navigation — desktop
---------------------------------------------------------- */
.cre-primary-nav {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
}
.cre-primary-nav > ul {
display: flex;
align-items: center;
list-style: none;
margin: 0; padding: 0;
gap: var(--cre-nav-item-gap, 2px);
}
.cre-primary-nav li { position: relative; }
.cre-primary-nav > ul > li > a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: var(--cre-nav-item-padding, 10px 15px);
font-size: var(--cre-nav-font-size, 14.5px);
font-weight: var(--cre-nav-font-weight, 600);
color: var(--cre-nav-text, #1f2933);
text-decoration: none;
position: relative;
transition: color 0.18s ease, background 0.18s ease, filter 0.18s ease;
white-space: nowrap;
}
/* Submenu indicator arrow — shown only when enabled via Customizer */
.cre-primary-nav > ul > li.menu-item-has-children > a::after {
content: none;
}
.cre-nav-has-indicators .cre-primary-nav > ul > li.menu-item-has-children > a::after {
content: '▾';
font-size: 11px;
opacity: 0.6;
margin-left: 2px;
}
.cre-primary-nav > ul > li.current-menu-item > a,
.cre-primary-nav > ul > li.current-menu-ancestor > a {
color: var(--cre-nav-active-color, var(--cre-primary-color, #005a87));
}
/* ==========================================================
6 MENU ITEM STYLE TYPES
Apply class "menu-type-1" … "menu-type-6" to a in
Appearance → Menus → CSS Classes to style individual items.
Set the site-wide default via the Customizer.
========================================================== */
/* Type 1 — Underline slide in */
.cre-nav-type-1 > ul > li > a { border-radius:0; background:transparent !important; }
.cre-nav-type-1 > ul > li > a::before {
content:'';
position:absolute;
bottom:0; left:15px; right:15px;
height:2px;
background: var(--cre-nav-active-color, var(--cre-primary-color,#005a87));
transform:scaleX(0);
transition:transform 0.2s ease;
}
.cre-nav-type-1 > ul > li:hover > a::before,
.cre-nav-type-1 > ul > li.current-menu-item > a::before { transform:scaleX(1); }
.menu-type-1 > a { border-radius:0; background:transparent !important; }
.menu-type-1 > a::before {
content:'';
position:absolute;
bottom:0; left:15px; right:15px;
height:2px;
background:var(--cre-nav-active-color,var(--cre-primary-color,#005a87));
transform:scaleX(0);
transition:transform 0.2s ease;
}
.menu-type-1:hover > a::before,.menu-type-1.current-menu-item > a::before { transform:scaleX(1); }
/* Type 2 — Bottom border */
.cre-nav-type-2 > ul > li > a,
.menu-type-2 > a {
border-radius:0;
border-bottom:2px solid transparent;
background:transparent !important;
padding-bottom:8px;
transition: color 0.18s, border-color 0.18s;
}
.cre-nav-type-2 > ul > li:hover > a,
.cre-nav-type-2 > ul > li.current-menu-item > a,
.menu-type-2:hover > a,
.menu-type-2.current-menu-item > a {
border-bottom-color:var(--cre-nav-active-color,var(--cre-primary-color,#005a87));
color:var(--cre-nav-active-color,var(--cre-primary-color,#005a87));
}
/* Type 3 — Filled box hover */
.cre-nav-type-3 > ul > li > a,
.menu-type-3 > a { border-radius:6px; }
.cre-nav-type-3 > ul > li:hover > a,
.cre-nav-type-3 > ul > li.current-menu-item > a,
.menu-type-3:hover > a,
.menu-type-3.current-menu-item > a {
background:var(--cre-nav-hover-bg,var(--cre-primary-color,#005a87)) !important;
color:var(--cre-nav-hover-text,#fff) !important;
}
/* Type 4 — Always filled */
.cre-nav-type-4 > ul > li > a,
.menu-type-4 > a {
background:var(--cre-primary-color,#005a87) !important;
color:#fff !important;
border-radius:6px;
}
.cre-nav-type-4 > ul > li:hover > a,
.menu-type-4:hover > a { filter:brightness(0.88); }
/* Type 4S — Slanted parallelogram, full header height */
.cre-nav-type-4s > ul > li,
.menu-type-4s {
align-self: stretch; /* stretch li to full header height */
display: flex;
align-items: stretch;
}
.cre-nav-type-4s > ul > li > a,
.menu-type-4s > a {
display: flex !important;
align-items: center;
background: var(--cre-primary-color,#005a87) !important;
color: #fff !important;
border-radius: 0;
transform: skewX(-12deg);
padding-left: 24px;
padding-right: 24px;
margin: 0 4px;
white-space: nowrap;
transition: filter 0.18s ease;
}
.cre-nav-type-4s > ul > li > a .cre-nav-text,
.menu-type-4s > a .cre-nav-text {
display: inline-block;
transform: skewX(12deg); /* counter-skew text back to upright */
}
.cre-nav-type-4s > ul > li:hover > a,
.menu-type-4s:hover > a { filter: brightness(0.85); }
/* Type 5 — Outline box */
.cre-nav-type-5 > ul > li > a,
.menu-type-5 > a {
border-radius:6px;
border:2px solid var(--cre-primary-color,#005a87);
color:var(--cre-primary-color,#005a87) !important;
background:transparent !important;
padding:8px 14px;
}
.cre-nav-type-5 > ul > li:hover > a,
.menu-type-5:hover > a {
background:var(--cre-primary-color,#005a87) !important;
color:#fff !important;
}
/* Type 6 — Pill outline */
.cre-nav-type-6 > ul > li > a,
.menu-type-6 > a {
border-radius:999px;
border:2px solid var(--cre-primary-color,#005a87);
color:var(--cre-primary-color,#005a87) !important;
background:transparent !important;
padding:8px 20px;
}
.cre-nav-type-6 > ul > li:hover > a,
.menu-type-6:hover > a {
background:var(--cre-primary-color,#005a87) !important;
color:#fff !important;
}
/* ----------------------------------------------------------
Dropdown Submenu
---------------------------------------------------------- */
/* Submenus drop from the bottom of the header, not from the
individual li — gives a clean flush-under-header appearance
regardless of item height or padding. */
.cre-primary-nav { position: static; }
.cre-site-header { overflow: visible; }
.cre-primary-nav > ul { position: static; }
.cre-primary-nav > ul > li { position: static; }
.cre-primary-nav ul ul {
position:fixed; /* fixed so it can escape any overflow:hidden ancestor */
/* top/left set dynamically by JS after measuring header bottom */
min-width:230px;
background: var(--cre-submenu-bg, #ffffff);
border:1px solid rgba(0,0,0,0.09);
border-radius:0 0 10px 10px;
box-shadow:0 12px 32px rgba(0,0,0,0.12);
padding:8px;
list-style:none;
margin:0;
opacity:0;
visibility:hidden;
transform:translateY(-4px);
transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s;
z-index:700;
pointer-events:none;
}
.cre-primary-nav li:hover > ul,
.cre-primary-nav li:focus-within > ul {
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
display:block;
}
.cre-primary-nav ul ul a {
display:block;
padding:9px 14px;
font-size:13.5px;
font-weight:500;
color:#374151;
border-radius:6px;
white-space:nowrap;
text-decoration:none;
transition:background 0.14s,color 0.14s;
}
.cre-primary-nav ul ul a:hover {
background:var(--cre-primary-color,#005a87);
color:#fff;
}
/* Third-level opens right */
.cre-primary-nav ul ul ul { top:0; left:100%; margin-left:6px; }
/* ----------------------------------------------------------
Mega Menu (add class "mega-menu" to a top-level )
---------------------------------------------------------- */
.cre-primary-nav > ul > li.mega-menu { position:static; }
.cre-primary-nav > ul > li.mega-menu > ul {
left:0; right:0;
min-width:0; width:100%;
border-radius:0 0 12px 12px;
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:4px 24px;
padding:24px 28px;
}
.cre-primary-nav > ul > li.mega-menu > ul > li { position:static; }
.cre-primary-nav > ul > li.mega-menu > ul > li > a {
font-weight:700;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.07em;
color:#9ca3af;
padding:0 0 6px;
border-bottom:1px solid #f3f4f6;
margin-bottom:4px;
border-radius:0;
pointer-events:none;
cursor:default;
}
.cre-primary-nav > ul > li.mega-menu > ul > li > ul {
position:static;
opacity:1 !important; visibility:visible !important;
transform:none !important;
box-shadow:none; border:none; border-radius:0;
padding:0; pointer-events:auto;
}
.cre-primary-nav > ul > li.mega-menu > ul > li > ul > li > a {
padding:7px 4px;
border-radius:4px;
font-size:13.5px;
font-weight:500;
color:#374151;
white-space:normal;
background:transparent !important;
}
.cre-primary-nav > ul > li.mega-menu > ul > li > ul > li > a:hover {
color:var(--cre-primary-color,#005a87);
padding-left:8px;
}
/* ----------------------------------------------------------
Hamburger + Mobile Drawer
---------------------------------------------------------- */
.cre-menu-toggle {
display:none;
align-items:center;
justify-content:center;
width:44px; height:44px;
border:none;
background:transparent;
cursor:pointer;
padding:0;
flex-shrink:0;
z-index:601;
}
.cre-menu-toggle-bars {
position:relative;
width:24px; height:18px;
}
.cre-menu-toggle-bars span {
position:absolute;
left:0; right:0;
height:2px;
background:var(--cre-header-text-color,#1f2933);
border-radius:2px;
transition:transform 0.25s ease,opacity 0.25s ease,top 0.25s ease;
}
.cre-menu-toggle-bars span:nth-child(1){top:0;}
.cre-menu-toggle-bars span:nth-child(2){top:8px;}
.cre-menu-toggle-bars span:nth-child(3){top:16px;}
.cre-site-header.is-menu-open .cre-menu-toggle-bars span:nth-child(1){top:8px;transform:rotate(45deg);}
.cre-site-header.is-menu-open .cre-menu-toggle-bars span:nth-child(2){opacity:0;}
.cre-site-header.is-menu-open .cre-menu-toggle-bars span:nth-child(3){top:8px;transform:rotate(-45deg);}
.cre-menu-backdrop {
display:none;
position:fixed; inset:0;
background:rgba(0,0,0,0.40);
z-index:598;
backdrop-filter:blur(2px);
}
.cre-site-header.is-menu-open .cre-menu-backdrop { display:block; }
body.cre-menu-open { overflow:hidden; }
@media (max-width:899px) {
/* --------------------------------------------------------
Mobile header — completely separate layout from desktop.
The desktop header inner is hidden; the mobile structure
(top bar, logo row, stripe row) is shown instead.
-------------------------------------------------------- */
/* Hide desktop nav, show hamburger */
.cre-menu-toggle { display:flex; }
.cre-menu-hide-mobile { display:none !important; }
/* Desktop top bar — hidden on mobile (mobile has its own below) */
.cre-desktop-topbar { display: none !important; }
/* Desktop header inner — hidden on mobile */
.cre-header-inner { display: none; }
/* ---- Mobile top bar (area 1) — 2 sections ---- */
.cre-mobile-topbar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--cre-top-bar-bg, #0a1628);
color: var(--cre-top-bar-text, #cbd2d9);
min-height: var(--cre-top-bar-height, 38px);
padding: 4px 16px;
gap: 8px;
/* Without an explicit position + z-index, this sits below the
mobile menu backdrop (position:fixed, z-index:598) in the
shared stacking context — the header's own z-index does NOT
protect its children automatically. This, and the same fix
on the logo row / info row / stripe below, is what actually
caused the header to visually dim when the menu opened. */
position: relative;
z-index: 601;
}
.cre-mobile-topbar a { color:var(--cre-top-bar-text,#cbd2d9); text-decoration:none; }
.cre-mobile-topbar a:hover { color:#fff; }
.cre-mobile-topbar-left,
.cre-mobile-topbar-right {
display:flex; align-items:center; gap:8px; font-size:11px;
}
.cre-mobile-topbar-right { justify-content:flex-end; }
/* ---- Mobile logo row: logo LEFT, hamburger RIGHT, nothing between ---- */
.cre-mobile-logo-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background: var(--cre-header-bg, #ffffff);
min-height: var(--cre-header-height-mobile, 64px);
box-sizing: border-box;
position: relative;
z-index: 601;
}
.cre-mobile-brand {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: var(--cre-logo-margin-left-mobile, 0px);
margin-right: var(--cre-logo-margin-right-mobile, 0px);
}
.cre-mobile-brand .custom-logo-link img,
.cre-mobile-brand .custom-logo,
.cre-mobile-brand img {
display: block;
max-height: var(--cre-logo-height-mobile, 40px);
max-width: var(--cre-logo-width-mobile, auto);
width: auto;
height: auto;
}
/* Hamburger — plain lines only, NO box, NO border, NO background */
.cre-menu-toggle {
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.cre-menu-toggle-bars {
width: 24px;
height: 18px;
}
.cre-menu-toggle-bars span {
background: var(--cre-header-text-color, #1f2933);
}
/* ---- Mobile info row — full width, two cells, adjustable ---- */
.cre-mobile-info-row {
display: flex;
align-items: stretch;
background: var(--cre-header-bg, #ffffff);
border-top: 1px solid rgba(0,0,0,0.07);
min-height: var(--cre-mobile-info-row-height, 30px);
width: 100%;
position: relative;
z-index: 601;
}
.cre-mobile-info-area3,
.cre-mobile-info-area4 {
flex: 1;
display: flex;
align-items: center;
padding: 5px var(--cre-mobile-info-padding, 16px) var(--cre-mobile-info-bottom-padding, 5px);
font-size: var(--cre-mobile-info-font-size, 12px);
line-height: 1.3;
overflow: hidden;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Only show divider when both cells have content */
.cre-mobile-info-area3 + .cre-mobile-info-area4 {
border-left: 1px solid rgba(0,0,0,0.08);
}
.cre-mobile-info-area3 {
font-weight: 700;
color: var(--cre-header-text-color, #1f2933);
}
.cre-mobile-info-area4 {
color: var(--cre-header-muted-color, #667085);
justify-content: flex-end;
text-align: right;
}
.cre-mobile-info-area3 a,
.cre-mobile-info-area4 a { color:inherit; text-decoration:none; }
/* Pin stripe already handled by .cre-site-header::after at the
top of this file (applies at every screen size) — no separate
mobile rule needed. A colored border-bottom was mistakenly
added here too, which drew a second, duplicate line on top of
the ::after stripe (the "double streak"). */
/* ---- Mobile nav panel — spans full width, edge to edge, flush
directly under the header. Only the bottom corners are
rounded (top edge sits flat against the header's bottom
edge, so a rounded top would look disconnected).
Positioned with position:absolute + top:100%, relative to
the header (which is already position:relative, or
position:fixed once sticky). This is permanently, natively
correct — CSS resolves "100% of the header's height" fresh
on every render, automatically adjusting to whatever the
header's actual height is at that moment (font loading,
text wrapping, admin bar, a pin stripe, anything). No
JavaScript measurement, no timing race, nothing that can
drift out of sync — the previous JS-calculated pixel
offset was the actual source of the recurring "detached
from header" bug, since anything that changed the header's
height after that measurement broke it again. ---- */
.cre-primary-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: auto;
width: 100%;
max-height: 80vh;
overflow-y: auto;
background: var(--cre-mobile-menu-bg, #ffffff);
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
transform: translateY(-16px);
opacity: 0;
visibility: hidden;
transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
opacity 0.22s ease,
visibility 0.28s;
z-index: 599;
padding: 0 0 var(--cre-mobile-menu-bottom-padding, 16px);
flex-direction: column;
}
.cre-site-header.is-menu-open .cre-primary-nav {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* Backdrop — a plain, full-viewport cover. It's positioned BELOW
the header in stacking order (z-index 598 vs. the header's 600),
so the opaque header always renders visually on top of it and
stays completely undimmed, with no need to calculate where the
header ends — the same reasoning already applied to the footer
elsewhere in this file. */
.cre-menu-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.30);
z-index: 598;
}
.cre-site-header.is-menu-open .cre-menu-backdrop { display: block; }
body.cre-menu-open { overflow: hidden; }
/* Nav list */
.cre-primary-nav > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
/* Top-level items */
.cre-primary-nav > ul > li {
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cre-primary-nav > ul > li:last-child {
border-bottom: none;
}
.cre-primary-nav > ul > li > a {
display: block !important;
padding: var(--cre-mobile-menu-padding, 14px) 20px !important;
font-size: var(--cre-mobile-menu-font-size, 15px) !important;
font-weight: 600 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--cre-mobile-menu-text, #1f2933) !important;
border: none !important;
transform: none !important;
filter: none !important;
white-space: normal !important;
text-decoration: none !important;
transition: background 0.14s, color 0.14s !important;
}
/* Only items that actually have an expand arrow need space
reserved for it — every other item gets the full row width for
its text, with nothing held back. */
.cre-primary-nav li.menu-item-has-children > a {
padding-right: 40px !important;
}
/* Hover / active highlight — full width */
.cre-primary-nav > ul > li > a:hover,
.cre-primary-nav > ul > li.is-submenu-open > a {
background: rgba(0,0,0,0.05) !important;
color: var(--cre-mobile-menu-active, #005a87) !important;
}
.cre-primary-nav > ul > li.current-menu-item > a {
color: var(--cre-mobile-menu-active, #005a87) !important;
border-left: 3px solid var(--cre-mobile-menu-active, #005a87) !important;
padding-left: 17px !important;
}
/* Expand arrow button */
.cre-submenu-expand {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
width: 40px;
/* height is set explicitly by JS, matching the actual link's own
height — see syncButtonHeight() — rather than height:100% of
the , which grows once the submenu becomes visible and
would otherwise stretch this button down alongside it. */
min-height: 44px;
background: transparent;
border: none;
border-left: 1px solid rgba(0,0,0,0.07);
cursor: pointer;
color: var(--cre-mobile-menu-text, #1f2933);
font-size: 18px;
transition: background 0.14s, color 0.14s, border-color 0.14s;
/* Chrome (and other browsers) draw a bold default focus ring on
buttons after they're tapped — outline:none removes that,
while :focus-visible below restores a much subtler indicator
specifically for keyboard navigation, so accessibility isn't
lost, just the harsh default appearance on tap/click. */
outline: none;
}
.cre-submenu-expand:focus-visible {
outline: 2px solid var(--cre-mobile-menu-active, #005a87);
outline-offset: -2px;
}
.cre-submenu-expand:hover,
.cre-primary-nav > ul > li.is-submenu-open .cre-submenu-expand {
background: rgba(0,0,0,0.05);
color: var(--cre-mobile-menu-active, #005a87);
}
/* No divider line while the item is actively pressed/expanded */
.cre-submenu-expand:active,
.cre-primary-nav > ul > li.is-submenu-open .cre-submenu-expand {
border-left-color: transparent;
}
/* Arrow SVG inside expand button — rotates when open */
.cre-submenu-expand svg {
transition: transform 0.22s ease;
pointer-events: none;
}
.cre-primary-nav > ul > li.is-submenu-open .cre-submenu-expand svg {
transform: rotate(180deg);
}
/* Submenus — slide open */
.cre-primary-nav ul ul {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1);
position: static;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0;
background: rgba(0,0,0,0.03);
}
.cre-primary-nav ul ul li {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.cre-primary-nav ul ul li:last-child {
border-bottom: none;
}
.cre-primary-nav ul ul a {
display: block !important;
padding: 12px 20px 12px 36px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--cre-mobile-menu-text, #1f2933) !important;
border-radius: 0 !important;
white-space: normal !important;
text-decoration: none !important;
transition: background 0.14s, color 0.14s !important;
}
/* Same arrow-space reservation as top-level, for any submenu item
that itself has a further nested level (a third-level menu) —
without this, long text on such an item could run into its own
expand button, since the general submenu rule above reserves no
space for one by default. */
.cre-primary-nav ul ul li.menu-item-has-children > a {
padding-right: 40px !important;
}
.cre-primary-nav ul ul a:hover {
background: rgba(0,0,0,0.05) !important;
color: var(--cre-mobile-menu-active, #005a87) !important;
}
/* Mega menu: flatten to normal list on mobile */
.cre-primary-nav > ul > li.mega-menu > ul {
display: block !important;
grid-template-columns: 1fr;
padding: 0;
}
/* Back to top — hide on mobile */
.cre-btt { display: none !important; }
}
@media (min-width:900px) {
.cre-menu-hide-desktop { display:none !important; }
/* Hide mobile-only elements on desktop */
.cre-mobile-topbar,
.cre-mobile-logo-row,
.cre-mobile-info-row,
.cre-mobile-stripe,
.cre-primary-nav-mobile { display: none !important; }
/* Desktop top bar visible on desktop */
.cre-desktop-topbar { display: block; }
}
/* ----------------------------------------------------------
Footer
---------------------------------------------------------- */
.cre-pre-footer-image {
background: var(--cre-body-bg, #ffffff);
padding: 32px 0;
}
.cre-site-footer {
background:var(--cre-footer-bg,#14181f);
color:var(--cre-footer-text,#cbd2d9);
padding:40px 0 24px;
margin-top:48px;
border-top: var(--cre-footer-stripe-width, 0px) solid var(--cre-footer-stripe-color, #005a87);
/* Without an explicit position + z-index, this sits below the
fixed-position mobile menu backdrop (z-index:598) by default,
getting dimmed along with the page content when the menu opens
— matching the header's z-index (600) keeps the footer fully
visible too, exactly like the header already is. */
position: relative;
z-index: 600;
}
.cre-footer-image-wrap {
display:flex;
justify-content:center;
margin-bottom:24px;
}
.cre-footer-inner {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:20px;
}
.cre-footer-nav ul {
display:flex;
flex-wrap:wrap;
gap:4px;
list-style:none;
margin:0; padding:0;
}
.cre-footer-nav a {
display:block;
padding:6px 10px;
color:var(--cre-footer-text,#cbd2d9);
font-size:14px;
font-weight:600;
text-decoration:none;
transition:color 0.15s;
}
.cre-footer-nav a:hover { color:#fff; }
.cre-footer-copyright {
font-size: var(--cre-footer-copyright-size, 13px);
color: var(--cre-footer-copyright-color, #8b95a1);
}
@media (max-width:640px) {
.cre-footer-inner { flex-direction:column; align-items:flex-start; }
}
/* ----------------------------------------------------------
Back to Top button — 3 styles
---------------------------------------------------------- */
.cre-btt {
position: fixed;
bottom: var(--cre-back-to-top-bottom, 28px);
right: 24px;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
border: none;
transition: opacity 0.25s ease, transform 0.25s ease;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
}
.cre-btt--position-left {
right: auto;
left: 24px;
}
/* Best-effort attempt to hide Adobe Acrobat's browser extension
floating icon, if it happens to inject into the page's own DOM
(rather than an isolated Shadow DOM, which this cannot reach at
all). These are commonly reported selectors for that extension's
injected button — not guaranteed to match every version, and
Adobe can change its implementation without notice. If this
doesn't work, the reliable fix is disabling the extension itself
in the browser it's active in (chrome://extensions or equivalent),
since that's a per-browser setting no website can override. */
#pdf-tool-icon,
div[id^="EXT_Icon"],
div[class*="acrobat-extension"],
div[id*="adobe-dc"],
iframe[id*="adobe"],
iframe[src*="acrobat.adobe.com"] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.cre-btt.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cre-btt:hover {
transform: translateY(-3px);
opacity: 0.88;
}
/* Style 1 — Filled circle */
.cre-btt--circle {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--cre-back-to-top-color, #005a87);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
/* Style 2 — Rounded pill with text */
.cre-btt--pill {
padding: 10px 18px;
border-radius: 999px;
background: var(--cre-back-to-top-color, #005a87);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
/* Style 3 — Square outline */
.cre-btt--square {
width: 46px;
height: 46px;
border-radius: 6px;
background: transparent;
color: var(--cre-back-to-top-color, #005a87);
border: 2px solid var(--cre-back-to-top-color, #005a87) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.cre-btt--square:hover {
background: var(--cre-back-to-top-color, #005a87);
color: #fff;
}