.header-wrapper {position:fixed; top:24px; z-index: 99999; left:0; right:0;}
.admin-bar .header-wrapper {top:calc(var(--wp-admin--admin-bar--height) + 24px)}
.header-wrapper .container .header {display:flex; justify-content:space-between; align-items: center; background:#fff; padding:12px 32px; border-radius:999px; box-shadow: 0 3px 3px rgba(0,0,0,0.15);;}

.header-wrapper .container .header .menu-toggle {background:var(--darkblue); width:56px; height:56px; border-radius:100px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; transition:background 0.3s; cursor:pointer; border:none; position:relative; z-index:1002;}
.header-wrapper .container .header .menu-toggle.active,
.header-wrapper .container .header .menu-toggle:hover {background:var(--blue);}

.header-wrapper .container .header .menu-toggle .menu-icon {position:relative; width:24px; height:24px; display:flex; align-items:center; justify-content:center;}
.header-wrapper .container .header .menu-toggle .menu-icon i {position:absolute; transition:opacity 0.3s ease, transform 0.3s ease;}
.header-wrapper .container .header .menu-toggle .menu-icon .icon-open {opacity:1;}
.header-wrapper .container .header .menu-toggle .menu-icon .icon-close {opacity:0; transform:rotate(-90deg);}

.header-wrapper .container .header .menu-toggle.active .icon-open {opacity:0; transform:rotate(90deg);}
.header-wrapper .container .header .menu-toggle.active .icon-close {opacity:1; transform:rotate(0deg);}

/* Flyout */
.flyout-overlay {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1001; pointer-events:none; overflow:hidden;}
.flyout-overlay.active {pointer-events:auto;}

.flyout-overlay::before {content:''; position:absolute; width:100px; height:100px; border-radius:50%; background:var(--darkblue); top:var(--ripple-y, 50%); left:var(--ripple-x, 50%); transform:translate(calc(-50% + 12px), -50%) scale(0); transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;}
.flyout-overlay.active::before {transition:transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform:translate(-50%, -50%) scale(50);}

.flyout-content {position:relative; z-index:2; color:#fff; opacity:0; transform:translateY(20px); transition:opacity 0.25s ease, transform 0.25s ease; height:100%; display:flex; align-items:center; justify-content:center;}
.flyout-overlay.active .flyout-content {transition:opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s; opacity:1; transform:translateY(0);}

.flyout-nav ul {list-style:none; padding:0; margin:0; text-align:center;}
.flyout-nav li {margin:20px 0;}
.flyout-nav a {color:#fff; text-decoration:none; font-size:32px; font-weight:600; transition:opacity 0.3s;}
.flyout-nav a:hover {opacity:0.7;}