/* BUTTON */
#flyout-toggle{
  position:fixed; top:46px; right:100px; z-index:10001;
  background:none; border:none; font-size:60px; cursor:pointer;
}
#flyout-toggle .hamburger-icon{display:inline;color:#000;}
#flyout-toggle .close-icon{display:none;color:#f90;}

/* CONTAINER */
.flyout-menu{
  position:fixed; inset:0; width:100vw; height:100vh;
  background:linear-gradient(to bottom right,#0b2b5b,#0d4a79);
  z-index:10000; display:flex; flex-direction:row; align-items:stretch;
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform .4s ease-in-out, opacity .4s ease-in-out;
}
.flyout-menu.open{transform:translateX(0);opacity:1;pointer-events:auto;}
.flyout-menu.closing{transform:translateX(100%);opacity:0;pointer-events:none;}
body.flyout-open{overflow:hidden;}

/* LEFT */
.flyout-left{
  width:50%; padding:4rem; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; position:relative;
  /* no scrolling on the menu column */
  overflow:visible; max-height:none;
}

/* Optional: adjust these if your logo area changes */
:root{
  --flyout-top-offset: 0rem;  /* space above menu list inside .flyout-left */
  --flyout-bottom-offset: 0rem; /* space below menu list */
}

/* Positioning wrapper (keep your offsets if you want) */
.flyout-nav{ margin-top:-5.2rem; margin-left:25rem; }

/* LOGO */
.flyout-logo img{max-width:200px; margin-bottom:4rem;}

/* ====== MENU LIST LAYOUT ======
   Evenly spaced when nothing is open; stacks naturally when a submenu opens */
.flyout-menu-items{
  list-style:none; margin:0; padding:0;
  text-align:right;
  display:flex; flex-direction:column;
  /* evenly distribute items to fill the viewport column height */
  height:calc(78vh - var(--flyout-top-offset) - var(--flyout-bottom-offset));
  justify-content:space-between; /* ← even spacing baseline */
}

/* When any submenu is open, switch to natural flow + a sensible gap */
.flyout-menu.has-open-sub .flyout-menu-items{
  justify-content:flex-start;
  gap:clamp(0.75rem, 2.2vh, 2.5rem);
}

/* TOP-LEVEL ITEMS (keep arc transform; no big fixed margins) */
.arc-item{
  display:block; margin:0; transform-origin:left center; transition:transform .3s ease;
}
.arc-1{transform:translateX(90px);}
.arc-2{transform:translateX(40px);}
.arc-3{transform:translateX(15px);}
.arc-4{transform:translateX(40px);}
.arc-5{transform:translateX(90px);}
.arc-6{transform:translateX(90px);}

/* LINKS */
.flyout-menu-items a{
  font:700 16px/1 Figtree, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.96px; text-transform:uppercase;
  color:#fff; text-decoration:none; transition:color .3s ease;
}
.flyout-menu-items a:hover,
.flyout-menu-items a:focus{ color:#f90; }

/* RIGHT SIDE ART */
.flyout-right{
  width:50%; padding:4rem; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.spiral-placeholder{width:100%;height:100%;background-size:cover;background-position:center;}

/* ====== SUBMENUS IN NORMAL FLOW (push items below) ====== */
.flyout-menu .menu-item-has-children{position:relative;}

/* Closed state: collapsed height */
.flyout-menu .sub-menu{
  position:static; width:auto; margin:.5rem 0 0; padding-inline-start:1.25rem;
  list-style:none; text-align:right;
  max-height:0; opacity:0; pointer-events:none;
  transition:max-height .28s ease, opacity .25s ease;
  will-change:max-height, opacity;
}

/* Open state: expands and pushes siblings down */
.flyout-menu .menu-item-has-children.is-open > .sub-menu{
  /* While open we’ll let JS set a precise max-height;
     but give a large floor so it still works if JS misses once */
  max-height:1000px;
  opacity:1; pointer-events:auto;
}

.flyout-menu .sub-menu li{margin:1rem 0;}
.flyout-menu .sub-menu a{font-size:1rem; color:#bbb; font-weight:400; letter-spacing:.3px;}
.flyout-menu .sub-menu a:hover{color:#f90;}

/* Optional “sub-arc” micro offsets */
.flyout-menu .sub-menu li.sub-arc{transform-origin:left center;}
.sub-arc-1{transform:translateX(-5px);} 
.sub-arc-2{transform:translateX(-15px);}
.sub-arc-3{transform:translateX(-25px);} 
.sub-arc-4{transform:translateX(-30px);}
.sub-arc-5{transform:translateX(-35px);} 
.sub-arc-6{transform:translateX(-0px);}
.sub-arc-7{transform:translateX(-5px);} 
.sub-arc-8{transform:translateX(-10px);}
.sub-arc-9{transform:translateX(-15px);} 
.sub-arc-10{transform:translateX(-15px);}
.sub-arc-11{transform:translateX(5px);} 
.sub-arc-12{transform:translateX(10px);}
.sub-arc-13{transform:translateX(15px);} 
.sub-arc-14{transform:translateX(20px);}

/* MOBILE */
@media (max-width:1024px){
  .arc-item, .sub-arc{transform:none !important;}
  .flyout-menu-items{text-align:left; height:auto; justify-content:flex-start; gap:1.5rem;}
  .flyout-menu .sub-menu{text-align:left; padding-inline-start:1rem; max-height:none; opacity:1; pointer-events:auto; transition:none;}
  .flyout-left, .flyout-right{width:100%; padding:2rem;}
  .flyout-menu{flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-top:4rem; overflow-y:auto;}
  .flyout-nav{margin:0; width:100%;}
  .flyout-logo{margin-bottom:2rem;}
}