/* NAV-V27: Projects Flyout (clean, single implementation) */

:root{
  --nav-surface: rgba(255,255,255,0.90);
  --nav-border: rgba(148,163,184,0.22);
  --nav-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
  --nav-text: #0f172a;
  --nav-muted: #475569;
  --nav-hover: rgba(15,23,42,0.06);
  --nav-accent: #16a34a;
  --nav-radius: 18px;
}

/* anchor */
.site-header .has-flyout{ position: relative; }

/* dropdown surface */
.site-header .has-flyout > .flyout{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0;
  width: 650px;
  min-width: 650px;
  border-radius: var(--nav-radius);
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
  padding: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  transform-origin: top;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 220ms;
  z-index: 999;
}

@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout:hover > .flyout,
  .site-header .has-flyout:focus-within > .flyout{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
}

/* layout: left column + right area */
.site-header .flyout-left{
  width: 260px;
  padding: 14px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-header .flyout-item{ position: static; }

/* divider */
.site-header .has-flyout > .flyout::after{
  content:"";
  position:absolute;
  top: 12px;
  bottom: 12px;
  left: 260px;
  width: 1px;
  background: rgba(148,163,184,0.20);
  pointer-events:none;
}

/* category links */
.site-header .flyout-item > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;
}

.site-header .flyout-item > a::after{
  content:"›";
  opacity: 0.55;
  transform: translateY(-1px);
}

.site-header .flyout-item > a:hover,
.site-header .flyout-item > a:focus{
  background: var(--nav-hover);
}

.site-header .flyout-item > a::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 50%;
  width: 0;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--nav-accent);
  opacity: 0;
  transition: width 180ms ease, opacity 180ms ease;
}
.site-header .flyout-item > a:hover::before,
.site-header .flyout-item > a:focus::before{
  width: 4px;
  opacity: 0.9;
}

/* right panels (inside same surface) */
.site-header .flyout-right{
  position:absolute;
  left: 260px;
  top: 0;
  width: 390px;
  height: 100%;
  padding: 44px 14px 14px 14px; /* room for label */
  margin: 0;
  list-style: none;
  background: transparent;
  border: 0;
  box-shadow: none;

  display: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

/* label */
.site-header .flyout-right::before{
  content:"Select project";
  position:absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nav-muted);
  opacity: 0.85;
}

/* show only active panel */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout-right.is-active > .flyout-right{
    display: block;
    opacity: 1;
    transform: translateX(0);
  }
  /* ignore any mobile .open class on desktop */
  .site-header .has-flyout-right.open > .flyout-right{ display:none !important; }
}

/* project links */
.site-header .flyout-right li a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--nav-text);
  font-weight: 600;
}
.site-header .flyout-right li a:hover,
.site-header .flyout-right li a:focus{
  background: var(--nav-hover);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header .has-flyout > .flyout,
  .site-header .flyout-right{
    transition: none;
    transform: none;
  }
}

/* Mobile: accordion (reuse .open) */
@media (max-width: 900px){
  .site-header .has-flyout > .flyout{
    position: static;
    width: 100%;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    display: none; /* toggled by JS */
  }
  .site-header .has-flyout.open > .flyout{ display:block; margin-top: 8px; }

  .site-header .has-flyout > .flyout::after{ content:none; }
  .site-header .flyout-left{ width:100%; padding: 0; }

  .site-header .flyout-right{
    position: static;
    width: 100%;
    height: auto;
    padding: 10px;
    margin-top: 8px;
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    background: var(--nav-surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    display: none;
    opacity: 1;
    transform: none;
  }
  .site-header .flyout-right::before{ content:none; }
  .site-header .has-flyout-right.open > .flyout-right{ display:block; }
}

/* NAV-V28 PATCH: fix stray underlines/chevrons and align category text */

/* Remove any global nav underline/active pseudo elements inside the flyout */
.site-header .flyout a::before,
.site-header .flyout a::after{
  content: none !important;
}

/* Re-apply our intended pseudo elements for category links */
.site-header .flyout-item > a::before{
  content:"" !important;
}
.site-header .flyout-item > a::after{
  content:"›" !important;
  opacity: 0.55 !important;
}

/* Make categories left-aligned, stable, no wrapping artifacts */
.site-header .flyout-item > a{
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;
  justify-content:space-between !important;
  text-align:left !important;
  white-space:nowrap !important;
  border-bottom: 0 !important;
}

/* Remove any inherited text-decoration/underline bars on category links */
.site-header .flyout-item > a,
.site-header .flyout-right li a{
  text-decoration:none !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Ensure label doesn't inherit underline/pseudo */
.site-header .flyout-right::before{
  background: none !important;
}

/* NAV-V29: Fix global .site-nav underline pseudo leaking into flyout */

/* Kill the header nav underline animation inside flyout completely */
.site-header .flyout a::after{
  content: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  transform: none !important;
  transition: none !important;
}

.site-header .flyout a{
  position: static !important;
  background-image: none !important;
}

/* Categories: use real span chevron instead of pseudo */
.site-header .flyout-item > a::before,
.site-header .flyout-item > a::after{
  content: none !important;
}

.site-header .flyout-item > a{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.site-header .flyout-chev{
  opacity: 0.55;
  font-size: 18px;
  line-height: 1;
}

/* Keep green accent bar on hover using box-shadow inset (no pseudo) */
.site-header .flyout-item > a:hover,
.site-header .flyout-item > a:focus{
  box-shadow: inset 4px 0 0 var(--nav-accent);
}

/* NAV-V30: No default right panel. Expand only when a category is hovered/active. */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout{
    width: 300px !important;
    min-width: 300px !important;
  }
  .site-header .has-flyout > .flyout.is-expanded{
    width: 650px !important;
    min-width: 650px !important;
  }
  .site-header .has-flyout > .flyout::after{ opacity: 0 !important; }
  .site-header .has-flyout > .flyout.is-expanded::after{ opacity: 1 !important; }

  .site-header .flyout-right{ display:none !important; opacity:0 !important; }
  .site-header .has-flyout-right.is-active > .flyout-right{
    display:block !important;
    opacity:1 !important;
  }
}

/* NAV-V31: Option A — smooth expand on category hover, no right-panel peek */

/* Animate width (desktop only) */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout{
    transition: width 220ms cubic-bezier(.2,.8,.2,1), min-width 220ms cubic-bezier(.2,.8,.2,1),
                opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 220ms;
    overflow: hidden !important; /* ensures nothing can peek outside rounded corners */
  }
}

/* In compact mode, force-hide right column completely */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout:not(.is-expanded) .flyout-right{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .site-header .has-flyout > .flyout:not(.is-expanded)::after{
    opacity: 0 !important; /* hide divider when compact */
  }
}

/* Only show panel when BOTH expanded AND the category is active */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout .flyout-right{ display:none !important; }
  .site-header .has-flyout > .flyout.is-expanded .has-flyout-right.is-active > .flyout-right{
    display:block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  /* Right panel entrance animation */
  .site-header .has-flyout > .flyout.is-expanded .flyout-right{
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 160ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
  }
}

/* NAV-V32: Elegant polish (tighter width, refined colors, typography) */

:root{
  --nav32-surface: rgba(255,255,255,0.94);
  --nav32-border: rgba(148,163,184,0.18);
  --nav32-shadow: 0 22px 60px rgba(2, 6, 23, 0.22);
  --nav32-text: #0b1220;
  --nav32-muted: rgba(15,23,42,0.62);
  --nav32-hover: rgba(2,6,23,0.05);
  --nav32-accent: #16a34a;
}

/* Tighter footprint: compact and expanded widths */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout{
    width: 280px !important;
    min-width: 280px !important;
    border-radius: 16px !important;
    background: var(--nav32-surface) !important;
    border: 1px solid var(--nav32-border) !important;
    box-shadow: var(--nav32-shadow) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
  }
  .site-header .has-flyout > .flyout.is-expanded{
    width: 600px !important;
    min-width: 600px !important;
  }
}

/* Left column a bit narrower */
.site-header .flyout-left{
  width: 240px !important;
  padding: 12px !important;
  gap: 6px !important;
}

/* Divider position follows new left width */
.site-header .has-flyout > .flyout::after{
  left: 240px !important;
  background: rgba(148,163,184,0.16) !important;
}

/* Category link typography + spacing */
.site-header .flyout-item > a{
  padding: 11px 12px !important;
  border-radius: 13px !important;
  color: var(--nav32-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.15px !important;
}

/* Replace big accent bar with subtle accent edge */
.site-header .flyout-item > a::before{
  left: 10px !important;
  height: 16px !important;
  background: var(--nav32-accent) !important;
}

/* Hover */
.site-header .flyout-item > a:hover,
.site-header .flyout-item > a:focus{
  background: var(--nav32-hover) !important;
}

/* Chevron refined */
.site-header .flyout-item > a::after{
  opacity: 0.40 !important;
}

/* Right panel aligned with new divider */
.site-header .flyout-right{
  left: 240px !important;
  width: 360px !important;
  padding: 40px 12px 12px 12px !important;
}

/* Label more elegant */
.site-header .flyout-right::before{
  color: var(--nav32-muted) !important;
  letter-spacing: 0.22em !important;
}

/* Project links */
.site-header .flyout-right li a{
  padding: 9px 10px !important;
  border-radius: 11px !important;
  color: var(--nav32-text) !important;
  font-weight: 600 !important;
}

.site-header .flyout-right li a:hover,
.site-header .flyout-right li a:focus{
  background: var(--nav32-hover) !important;
}

/* Reduce overall “rusty” feel: make panels feel airy */
.site-header .has-flyout > .flyout,
.site-header .flyout-item > a,
.site-header .flyout-right li a{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* NAV-V34: Elegant + more visible refinement (spacing, color, typography) */

:root{
  --nav34-surface: rgba(250, 250, 252, 0.94);
  --nav34-surface2: rgba(245, 247, 250, 0.92);
  --nav34-border: rgba(148,163,184,0.18);
  --nav34-shadow: 0 20px 55px rgba(2, 6, 23, 0.26);
  --nav34-text: #0a1020;
  --nav34-muted: rgba(15,23,42,0.58);
  --nav34-hover: rgba(2,6,23,0.06);
  --nav34-accent: #16a34a;
}

/* Panel surface + a subtle accent top edge (helps you SEE the new styling) */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout{
    background: linear-gradient(180deg, var(--nav34-surface), var(--nav34-surface2)) !important;
    border: 1px solid var(--nav34-border) !important;
    box-shadow: var(--nav34-shadow) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .site-header .has-flyout > .flyout::before{
    content:"";
    position:absolute;
    left:0; top:0; right:0;
    height: 2px;
    background: linear-gradient(90deg, rgba(22,163,74,0.0), rgba(22,163,74,0.55), rgba(22,163,74,0.0));
    pointer-events:none;
  }
}

/* Tighter widths + less “extra space” */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout{ width: 272px !important; min-width: 272px !important; }
  .site-header .has-flyout > .flyout.is-expanded{ width: 584px !important; min-width: 584px !important; }
}

/* Left column */
.site-header .flyout-left{
  width: 236px !important;
  padding: 10px !important;
  gap: 6px !important;
}

/* Divider alignment */
.site-header .has-flyout > .flyout::after{
  left: 236px !important;
  background: rgba(148,163,184,0.14) !important;
}

/* Category text: cleaner + premium */
.site-header .flyout-item > a{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  color: var(--nav34-text) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Accent bar: slimmer */
.site-header .flyout-item > a::before{
  height: 14px !important;
  opacity: 0.0 !important;
}
.site-header .flyout-item > a:hover::before,
.site-header .flyout-item > a:focus::before{
  opacity: 0.9 !important;
}

/* Chevron a bit smaller */
.site-header .flyout-item > a::after{
  opacity: 0.35 !important;
}

/* Right panel */
.site-header .flyout-right{
  left: 236px !important;
  width: 348px !important;
  padding: 40px 12px 12px 12px !important;
}

/* Label */
.site-header .flyout-right::before{
  color: var(--nav34-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.24em !important;
}

/* Project links */
.site-header .flyout-right li a{
  padding: 9px 10px !important;
  border-radius: 11px !important;
  color: var(--nav34-text) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}
.site-header .flyout-right li a:hover,
.site-header .flyout-right li a:focus{
  background: var(--nav34-hover) !important;
}

/* NAV-V35: Override-proof (fix global .site-nav link styles overriding flyout) */

/* 1) Hard-neutralize global link underline/pseudo effects INSIDE flyout */
.site-header nav.site-nav .has-flyout .flyout a,
.site-header nav.site-nav .has-flyout .flyout a:link,
.site-header nav.site-nav .has-flyout .flyout a:visited{
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

.site-header nav.site-nav .has-flyout .flyout a::before,
.site-header nav.site-nav .has-flyout .flyout a::after{
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* If your global nav uses a::after underline, kill it specifically here */
.site-header nav.site-nav .has-flyout .flyout a::after{
  content: none !important;
}

/* 2) Re-apply our intended category chevron + accent bar with higher specificity */
.site-header nav.site-nav .has-flyout .flyout .flyout-item > a::after{
  content: "›" !important;
  opacity: 0.35 !important;
}

.site-header nav.site-nav .has-flyout .flyout .flyout-item > a::before{
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  width: 0 !important;
  height: 14px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: var(--nav34-accent) !important;
  opacity: 0 !important;
  transition: width 180ms ease, opacity 180ms ease !important;
}

.site-header nav.site-nav .has-flyout .flyout .flyout-item > a:hover::before,
.site-header nav.site-nav .has-flyout .flyout .flyout-item > a:focus::before{
  width: 4px !important;
  opacity: 0.9 !important;
}

/* 3) Force panel colors/spacing (highest specificity + !important) */
@media (hover:hover) and (pointer:fine){
  .site-header nav.site-nav .has-flyout > .flyout{
    background: linear-gradient(180deg, var(--nav34-surface), var(--nav34-surface2)) !important;
    border: 1px solid var(--nav34-border) !important;
    box-shadow: var(--nav34-shadow) !important;
    border-radius: 16px !important;
  }
  .site-header nav.site-nav .flyout-item > a{
    color: var(--nav34-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
  }
  .site-header nav.site-nav .flyout-right li a{
    color: var(--nav34-text) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
  }
}

/* 4) If any global nav adds underline on hover with background-size tricks, disable it here */
.site-header nav.site-nav .has-flyout .flyout a:hover,
.site-header nav.site-nav .has-flyout .flyout a:focus{
  background-image: none !important;
  text-decoration: none !important;
}

/* NAV-V36: remove extra arrow + stronger typography + fancy micro-animations */

/* 0) Remove any existing chevrons from global styles within flyout */
.site-header nav.site-nav .has-flyout .flyout .flyout-item > a::after{
  content: "" !important; /* kill any previous arrow definitions */
}

/* 1) Single chevron using span (if present) OR re-add one arrow only */
.site-header nav.site-nav .has-flyout .flyout .flyout-item > a .flyout-chev{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(2,6,23,0.05);
  color: rgba(2,6,23,0.55);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), background 220ms ease, color 220ms ease;
}

/* If the span doesn't exist, create a single arrow via ::after */
.site-header nav.site-nav .has-flyout .flyout .flyout-item > a:not(:has(.flyout-chev))::after{
  content: "›" !important;
  opacity: 0.55 !important;
}

/* 2) Stronger, more premium font color */
.site-header nav.site-nav .has-flyout > .flyout,
.site-header nav.site-nav .has-flyout > .flyout *{
  color: #0b1220 !important;
}

/* Softer muted label */
.site-header nav.site-nav .flyout-right::before{
  color: rgba(15,23,42,0.56) !important;
}

/* 3) Fancy open animation for dropdown surface */
@media (hover:hover) and (pointer:fine){
  .site-header nav.site-nav .has-flyout > .flyout{
    transform: translateY(12px) scale(0.985) !important;
    opacity: 0 !important;
    filter: blur(0.2px);
  }
  .site-header nav.site-nav .has-flyout:hover > .flyout,
  .site-header nav.site-nav .has-flyout:focus-within > .flyout{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    filter: none;
  }
}

/* 4) Active/hover highlight with subtle glow */
.site-header nav.site-nav .flyout-item > a:hover,
.site-header nav.site-nav .flyout-item > a:focus{
  background: rgba(2,6,23,0.05) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08) inset !important;
}

.site-header nav.site-nav .has-flyout-right.is-active > a{
  background: rgba(22,163,74,0.10) !important;
}

/* Move chevron on hover */
.site-header nav.site-nav .flyout-item > a:hover .flyout-chev,
.site-header nav.site-nav .flyout-item > a:focus .flyout-chev{
  transform: translateX(2px);
  background: rgba(22,163,74,0.14);
  color: rgba(22,163,74,0.95);
}

/* 5) Right panel content: fade+slide with slight stagger */
@media (hover:hover) and (pointer:fine){
  .site-header nav.site-nav .flyout-right{
    will-change: opacity, transform;
  }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right{
    animation: navPanelIn 260ms cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes navPanelIn{
    from{ opacity: 0; transform: translateX(10px); }
    to{ opacity: 1; transform: translateX(0); }
  }

  .site-header nav.site-nav .flyout-right li{
    opacity: 0;
    transform: translateY(6px);
    animation: navItemIn 360ms cubic-bezier(.2,.8,.2,1) both;
  }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li{
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger (first 8 items) */
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(1){ animation-delay: 40ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(2){ animation-delay: 80ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(3){ animation-delay: 120ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(4){ animation-delay: 160ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(5){ animation-delay: 200ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(6){ animation-delay: 240ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(7){ animation-delay: 280ms; }
  .site-header nav.site-nav .has-flyout-right.is-active > .flyout-right li:nth-child(8){ animation-delay: 320ms; }

  @keyframes navItemIn{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-header nav.site-nav .has-flyout > .flyout,
  .site-header nav.site-nav .flyout-right li{
    animation: none !important;
    transition: none !important;
  }
}

/* NAV-V37: Tighten left/right gaps (more compact, precise) */
@media (hover:hover) and (pointer:fine){
  .site-header .has-flyout > .flyout{ width: 260px !important; min-width: 260px !important; }
  .site-header .has-flyout > .flyout.is-expanded{ width: 560px !important; min-width: 560px !important; }
}
.site-header .flyout-left{
  width: 220px !important;
  padding: 8px !important;
  gap: 4px !important;
}
.site-header .has-flyout > .flyout::after{
  left: 220px !important;
  top: 10px !important;
  bottom: 10px !important;
}
.site-header .flyout-item > a{
  padding: 9px 10px !important;
  border-radius: 12px !important;
}
.site-header .flyout-right{
  left: 220px !important;
  width: 340px !important;
  padding: 36px 10px 10px 10px !important;
}
.site-header .flyout-right li a{
  padding: 8px 10px !important;
  border-radius: 10px !important;
}