/* =========================
   MENU (desktop + mobile)
   ========================= */

/* Container */
#menu{
  background:transparent;           /* transparent so top-splash shows through */
  padding-top:26px;                 /* yellow strip above the row */
  display:flex;
  justify-content:center;
  position:absolute;                /* absolute positioning to float over content */
  top:0;                           /* stick to top of page */
  left:0;                          /* align to left edge */
  right:0;                         /* stretch full width */
  z-index:100;                     /* high z-index to sit above top-splash */
}

/* ---------- DESKTOP (default) ---------- */
/* Style the direct nav row inside #menu (not the mobile panel) */
#menu > nav{ display:flex; justify-content:center; width:100%; max-width:1600px; }
#menu > nav ul{
  list-style:none;
  display:flex; gap:20px;
  padding:24px 0; margin:0;
  align-items:center; justify-content:space-between; width:95%;
}
#menu > nav li{ padding:0; background:transparent; border:0; }
#menu > nav ul li:not(.menu-desktop__logo) a{
   background:#fff; color:#4B2A71;
  font-family:"Ohno Softie",sans-serif;
  font-weight:500; letter-spacing:.6px; text-transform:uppercase;
  padding:7px 20px;
  border:2px solid #4B2A71; border-radius:999px; line-height:1;
  box-shadow:0 4px 0 #4B2A71; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}

#menu > nav ul li a {
  font-size:clamp(1rem, 1.5vw + 0.5rem, 1.7rem);
  display:inline-block;
}
@media (max-width: 1227px) {
  #menu > nav ul li a {
    font-size: clamp(1rem, 1.5vw + 0.2rem, 1.7rem);
  }
}
@media (max-width: 1020px) {
  #menu > nav ul li a { 
    padding: 6px 10px;
    font-size: clamp(1rem, 1.3vw + 0.1rem, 1.7rem);
  }
}

#menu .menu-desktop__logo svg,
#menu > nav .menu-desktop__logo svg{
  max-width:190px; height:auto; display:block;
}
@media (max-width: 860px){
  #menu .menu-desktop__logo svg,
  #menu > nav .menu-desktop__logo svg{
    max-width:140px;
  }
  #menu > nav ul {
    gap: 15px;
    padding: 12px 0;
  }
  #menu {
    padding-top: 13px;
  }
}
#menu > nav ul li:not(.menu-desktop__logo) a:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #4B2A71; }
#menu > nav ul li:not(.menu-desktop__logo) a:active{ transform:translateY(0);  box-shadow:0 4px 0 #4B2A71; }

/* Hide mobile UI by default on desktop */
#menu .menu-bar,
#menu .menu-panel{ display:none; }

/* A11y helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- MOBILE (≤834px) ---------- */
@media (max-width:834px){
  /* Sticky so panel can sit underneath it cleanly */
  #menu{ padding-top:0px; }  /* this padding is used in JS calc */

  /* Hide desktop row */
  #menu > nav{ display:none; }

  /* Compact bar (logo + pill) */
  #menu .menu-bar{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; max-width:1200px; margin:0 auto;
    padding: 12px;
    z-index: 111;
  }
  #star04 {
    position: absolute;
    top: 40px;
    right: 40px;
    max-width: 100px;
  }
  #star01 {
    position: absolute;
    bottom: 40px;
    left: 40px;
    max-width: 100px;
  }

  /* Make sure the logo shows on all SVGs */
  #menu .menu-logo{ display:inline-flex; align-items:center; }
  #menu .menu-logo svg{ display:block; width:clamp(140px, 44vw, 200px); height:auto; }

  /* Burger pill (hyphen -> X) */
  #menu .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:#FFF; border:3px solid #4B2A71; border-radius:999px;
    padding:7px 20px; box-shadow:0 6px 0 #4B2A71; cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
    #menu .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
    #menu .menu-toggle__icon{ display:inline-flex; width:22px; height:28px; }
    #menu .menu-toggle__icon svg, 
    #menu .menu-toggle__icon img{ display:block; width:100%; height:100%; color:#4B2A71; }
  
    /* default: show burger, hide X */
    #menu .icon--open{ display:inline-flex; }
    #menu .icon--close{ display:none; }
  
    /* when open: hide burger, show X */
    #menu.is-open .icon--open{ display:none; }
    #menu.is-open .icon--close{ display:inline-flex; }
  
  /* Off-canvas panel (starts offscreen right).
     Top aligns to bar bottom via CSS vars set by JS. */
  #menu .menu-panel{
    display:flex;                           /* visible on mobile */
    position:fixed; left:0; right:0; bottom:0;
    top:0;
    z-index:90;                              /* below the sticky bar */
    /* background:linear-gradient(180deg,#FFE400 0%,#FF7CB9 51.71%,#5EC4ED 100%); */
    background: #FFE400;
    transform:translateX(100%);
    transition:transform .25s ease;
    align-items:center; justify-content:center;
    padding:20px 16px;
  }
  #menu.is-open .menu-panel{ transform:translateX(0); }

  /* Mobile links */
  #menu .menu-mobile{
    list-style:none; margin:0; padding:0;
    width:100%; max-width:680px;
    display:flex; gap:clamp(28px,5vh,46px); justify-items:center; align-items: center;flex-direction: column;
  }
  #menu .menu-mobile a{
    display:inline-block; text-align:center;
    background:#fff; color:#FF007F; text-decoration:none; text-transform:uppercase;
    font-family:"Ohno Softie",sans-serif; letter-spacing:.6px; font-weight:400;
    padding: 7px 20px;
    border:3px solid #FF007F; border-radius:999px;
    box-shadow:0 6px 0 #E70074;
    font-size:clamp(1.2rem, 5.2vw, 2.2rem);
    transition:transform .12s ease, box-shadow .12s ease;
    color: #F07;

    /* Nav Link */
    font-family: "Ohno Softie";
    font-size: 28px;
    font-style: normal;
    font-weight: 485;
    line-height: normal;
    letter-spacing: 0.56px;
  }
  #menu .menu-mobile a:active{ transform:translateY(2px); box-shadow:0 8px 0 #E70074; }
}


/* Lock page scroll when menu is open */
html.no-scroll, body.no-scroll{ overflow:hidden; }
@media (max-width: 834px){
  /* Ensure the logo and toggle reserve space */
  #menu .menu-logo{ 
    display:inline-flex; 
    align-items:center; 
    flex:0 0 auto;            /* don't shrink to 0 */
    min-width:140px;          /* matches your clamp floor */
  }
  #menu .menu-logo svg{
    display:block;
    width:clamp(140px, 44vw, 200px);
    height:auto;
  }
  #menu .menu-toggle{ flex:0 0 auto; }  /* burger doesn't steal all space */
}

@media (max-width: 980px) {
  #menu .menu-desktop__logo svg, #menu > nav .menu-desktop__logo svg {
    max-width: 140px;
  }
}

@media (max-width: 895px) {
  #menu > nav ul li a {
    font-size: clamp(0.9rem, 1vw + 0.1rem, 1.7rem);
  }
}