/*
 * METASYS / COMPACT HIERARCHICAL NAV
 * Inspired by the uploaded Webflow design reference:
 * restrained Inter, white canvas, #080808 primary action and hairline rules.
 * Keeps METASYS 5px rectangular corner system throughout.
 * Public navigation only: does not change committee tab routing or authentication.
 */
#app .site-nav{
  position:sticky;top:0;z-index:80;
  background:#fff;border-bottom:1px solid #d8d8d8;
  box-shadow:none;backdrop-filter:none;
}
#app .nav-inner{
  width:min(1200px,calc(100% - (var(--layout-gutter) * 2)));
  margin-inline:auto;height:62px;
  display:flex;align-items:center;gap:clamp(20px,2.4vw,38px);
}
#app .logo{
  flex:0 0 auto;color:#080808;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:-.045em;line-height:1;gap:5px;
}
#app .logo .wordmark-glyph{
  display:grid;place-items:center;border-radius:var(--radius-ui);
  background:#080808;color:#fff;font-weight:600;box-shadow:none;
}
#app .logo small{font-size:10px;font-weight:500;color:#777}
#app .nav-links{
  display:flex;align-items:center;gap:clamp(13px,1.8vw,27px);margin-left:0;
  min-width:0;position:static;overflow:visible;background:transparent;border:0;
}
#app .nav-group{display:flex;align-items:center;min-width:0}
#app .nav-link{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 0 1px;border:0;border-bottom:2px solid transparent;
  border-radius:0;color:#4b4b4b;
  font:500 13px/1.2 'Inter',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.015em;white-space:nowrap;
  box-shadow:none;text-decoration:none;transition:color .16s,border-color .16s;
}
#app .nav-link:hover,#app .nav-link.active,
#app .nav-group.is-current>.nav-link{color:#080808;background:transparent}
#app .nav-link.active,#app .nav-group.is-current>.nav-link{
  border-bottom-color:#080808;box-shadow:none;text-decoration:none;padding-bottom:1px;
}
#app .nav-mobile-sub,#app .nav-mobile-portal{display:none}
#app .nav-end{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);margin-left:auto;flex:0 0 auto}
#app .studio-link{
  display:inline-flex;align-items:center;
  min-height:44px;color:#4b4b4b;font:500 12px/1.3 'Inter',sans-serif;white-space:nowrap;
}
#app .studio-link:hover{color:#080808;text-decoration:underline;text-underline-offset:4px}
#app .nav-rsvp{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:9px 15px;background:#080808;color:#fff;border:1px solid #080808;
  border-radius:var(--radius-ui);white-space:nowrap;
  font:500 12px/1.2 'Inter',sans-serif;letter-spacing:-.01em;
  transition:background-color .16s,border-color .16s;
}
#app .nav-rsvp:hover,#app .nav-rsvp.active{background:#303030;border-color:#303030;color:#fff}
#app .menu-toggle{
  display:none;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:9px 12px;border:1px solid #d8d8d8;
  color:#080808;background:#fff;border-radius:var(--radius-ui);
  font:500 12px/1.2 'Inter',sans-serif;white-space:nowrap;
}
#app .menu-toggle:hover{background:#f2f2f2;border-color:#aaa}
#app :is(.nav-link,.nav-sub-link,.nav-rsvp,.studio-link,.nav-mobile-link,.menu-toggle):focus-visible{
  outline:2px solid #146ef5;outline-offset:3px;
}
@media(max-width:1100px){
  #app .nav-inner{height:62px;gap:12px}
  #app .nav-links{
    display:none;position:absolute;top:100%;left:auto;right:var(--layout-gutter);
    margin:0;width:min(420px,calc(100% - (var(--layout-gutter) * 2)));
    max-height:calc(100dvh - 74px);overflow-y:auto;overflow-x:hidden;
    padding:12px;gap:0;background:#fff;border:1px solid #d8d8d8;
    border-radius:var(--radius-ui);box-shadow:0 15px 32px rgba(0,0,0,.11);
    -webkit-overflow-scrolling:touch;z-index:90;
  }
  #app .nav-links.open{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
  #app .nav-group{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid #ededed;padding:4px 0 9px}
  #app .nav-link{
    min-height:42px;padding:9px 11px;display:flex;font-size:14px;
    border-bottom:0;border-left:2px solid transparent;border-radius:var(--radius-ui);
  }
  #app .nav-link.active,#app .nav-group.is-current>.nav-link{
    border-left-color:#080808;border-bottom:0;background:#f4f4f4;padding:9px 11px;
  }
  #app .nav-link:hover{background:#f4f4f4}
  #app .nav-mobile-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 4px;padding:1px 7px 0 14px}
  #app .nav-mobile-link{
    min-height:38px;padding:8px 10px;display:flex;align-items:center;
    font:500 12px/1.35 'Inter',sans-serif;color:#626262;
    border-radius:var(--radius-ui);
  }
  #app .nav-mobile-link:hover,#app .nav-mobile-link.active{background:#f4f4f4;color:#080808}
  #app .nav-mobile-link.active{font-weight:600}
  #app .nav-mobile-portal{
    display:grid;padding:7px 0 0;margin-top:4px;
    border-top:1px solid #dedede;
  }
  #app .menu-toggle{display:inline-flex}
}
@media(max-width:700px){
  #app .nav-inner{height:60px}
  #app .studio-link{display:none}
  #app .nav-end{gap:9px}
  #app .nav-rsvp{min-height:39px;padding:9px 12px}
  #app .logo{font-size:14px}
}
@media(max-width:480px){
  #app .nav-inner{height:58px;gap:6px}
  #app .logo small{display:none}
  #app .nav-rsvp{font-size:11px;min-height:38px;padding:9px 11px}
  #app .nav-end{gap:7px}
  #app .menu-toggle{min-height:41px;padding:8px 10px}
  #app .nav-mobile-sub{grid-template-columns:minmax(0,1fr)}
  #app .nav-mobile-link{min-height:37px}
  #app .nav-links{max-height:calc(100dvh - 68px)}
}
@media(max-width:350px){
  #app .nav-inner{gap:4px}
  #app .logo{font-size:13px}
  #app .logo .wordmark-glyph{width:21px;height:21px;font-size:16px}
  #app .nav-rsvp{padding-inline:9px}
  #app .menu-toggle{gap:6px;padding-inline:8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  #app :is(.nav-link,.nav-sub-link,.nav-rsvp,.nav-mobile-link){transition:none!important}
}

/*
 * Desktop-only hover reveal: the full child navigation opens for the
 * hovered/focused primary category. The dropdown starts at the parent
 * bottom, so the pointer can cross the header edge without flicker.
 * Mobile retains the expanded child list inside the Menu.
 */
@media(min-width:1101px){
  #app .nav-group.has-subnav{position:relative}
  #app .nav-group.has-subnav>.nav-link{gap:8px}
  #app .nav-group.has-subnav>.nav-link::after{
    content:"⌄";display:inline-block;margin-top:-5px;
    font:600 15px/1 'Inter',ui-sans-serif,sans-serif;
    color:#737373;transition:transform .18s ease,color .18s ease;
  }
  #app .nav-group.has-subnav:hover>.nav-link,
  #app .nav-group.has-subnav:focus-within>.nav-link{color:#080808;border-bottom-color:#080808}
  #app .nav-group.has-subnav:hover>.nav-link::after,
  #app .nav-group.has-subnav:focus-within>.nav-link::after{transform:rotate(180deg);color:#080808}
  #app .nav-group.has-subnav>.nav-mobile-sub{
    display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
    position:absolute;top:100%;left:-16px;z-index:95;
    width:244px;max-width:calc(100vw - 32px);
    margin:0;padding:14px 9px 9px;
    background:#fff;border:1px solid #dedede;border-top:0;
    border-radius:0 0 var(--radius-ui) var(--radius-ui);
    box-shadow:0 16px 32px rgba(8,8,8,.09);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-5px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  }
  #app .nav-group.has-subnav:hover>.nav-mobile-sub,
  #app .nav-group.has-subnav:focus-within>.nav-mobile-sub{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  }
  #app .nav-group.has-subnav>.nav-mobile-sub>.nav-mobile-link{
    display:flex;align-items:center;min-height:42px;max-width:100%;
    padding:10px 13px;border-radius:var(--radius-ui);
    color:#484848;font:500 13px/1.3 'Inter',ui-sans-serif,system-ui,sans-serif;
    white-space:normal;overflow-wrap:break-word;
    transition:background .16s ease,color .16s ease;
  }
  #app .nav-group.has-subnav>.nav-mobile-sub>.nav-mobile-link:is(:hover,:focus-visible,.active){
    background:#f1f1f1;color:#080808;
  }
  #app .nav-group.has-subnav>.nav-mobile-sub>.nav-mobile-link.active{font-weight:600}
}
@media(prefers-reduced-motion:reduce){
  #app .nav-group.has-subnav>.nav-mobile-sub,
  #app .nav-group.has-subnav>.nav-link::after{transition:none!important}
}