:root {
--sowelu-red: #FF444F;
--sowelu-yellow: #F7DA3B;
--sowelu-ink: #2C2C2C;
--sowelu-white: #FFFFFF;
}
.site-header {
position: fixed;
z-index: 1000;
inset: 0 0 auto;
width: 100%;
padding: 14px 0;
transition: padding .24s ease;
}
.site-header.is-scrolled { padding: 8px 0; }
.site-header .nav-shell {
width: min(calc(100% - 48px), 1240px);
min-height: 70px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1.25rem;
padding: 8px 12px 8px 16px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 16px;
background: rgba(36,32,29,.91);
color: var(--sowelu-white);
box-shadow: 0 14px 42px rgba(0,0,0,.16);
backdrop-filter: blur(18px);
}
.site-header .brand { display: flex; align-items: center; width: 210px; flex: 0 0 auto; }
.site-header .brand img { display: block; width: 100%; height: 48px; object-fit: contain; }
.site-header .main-menu { display: flex; align-items: center; gap: clamp(.8rem,1.5vw,1.55rem); margin-left: auto; }
.site-header .main-menu a { color: inherit; font: 600 .78rem/1 Outfit, Arial, sans-serif; text-decoration: none; white-space: nowrap; }
.site-header .nav-actions { display: flex; align-items: center; gap: 1rem; }
.site-header .portal-link { color: inherit; font: 600 .76rem/1 Outfit, Arial, sans-serif; text-decoration: none; white-space: nowrap; }
.site-header .header-cta { display: inline-flex; align-items: center; gap: .9rem; min-height: 50px; padding: 0 1.15rem; border: 0; border-radius: 11px; background: var(--sowelu-red); color: var(--sowelu-white); font: 700 .76rem/1 Outfit, Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.site-header .menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.site-header .menu-toggle span { display: block; width: 23px; height: 2px; margin: 5px auto; background: currentColor; }
@media (max-width: 900px) {
.site-header { padding: 10px 0; }
.site-header .nav-shell { width: min(calc(100% - 28px), 1240px); min-height: 64px; border-radius: 14px; }
.site-header .brand { width: 165px; }
.site-header .brand img { height: 42px; }
.site-header .menu-toggle { display: block; }
.site-header .nav-actions { display: none; }
.site-header .main-menu { display: none; position: absolute; top: 78px; left: 14px; right: 14px; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.25rem; border-radius: 14px; background: #2C2C2C; box-shadow: 0 18px 44px rgba(0,0,0,.22); }
.site-header .main-menu.is-open { display: flex; }
.site-header .main-menu a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.site-header .main-menu .mobile-portal { display: block; border-bottom: 0; color: var(--sowelu-yellow); }
}document.addEventListener('DOMContentLoaded', () => {
const header = document.querySelector('header .site-header, .site-header');
const toggle = header?.querySelector('.menu-toggle');
const menu = header?.querySelector('.main-menu');
if (!toggle || !menu || toggle.dataset.soweluReady) return;
toggle.dataset.soweluReady = 'true';
toggle.addEventListener('click', () => {
const open = toggle.getAttribute('aria-expanded') !== 'true';
toggle.setAttribute('aria-expanded', String(open));
menu.classList.toggle('is-open', open);
});
menu.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
menu.classList.remove('is-open');
toggle.setAttribute('aria-expanded', 'false');
}));
window.addEventListener('scroll', () => header.classList.toggle('is-scrolled', window.scrollY > 24), { passive: true });
});