/* BLUE shared navigation. One layout for every page; TOP is the reference. */
.blue-nav{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:200!important;pointer-events:none!important;display:block!important;line-height:normal!important;font-family:Arial,"Helvetica Neue",sans-serif!important;color:#f8faff!important;}
.blue-nav *{box-sizing:border-box}
.blue-nav-logo{position:absolute!important;left:3.2%!important;top:0!important;width:12%!important;height:11.48%!important;display:block!important;pointer-events:auto!important;z-index:2}
.blue-nav-row{position:absolute!important;left:39%;right:3.2%;top:0;height:11.48%;display:flex;align-items:center;gap:1.4%;padding:0 0 0 .2%;pointer-events:auto;background:transparent;}
.blue-nav-pages{display:flex;align-items:center;justify-content:space-between;gap:clamp(5px,1.15vw,22px);flex:1 1 auto;min-width:0;}
.blue-nav-pages>a{display:block!important;position:static!important;width:auto!important;height:auto!important;padding:8px 0!important;text-decoration:none!important;line-height:1.2!important;font-size:clamp(8px,1.02vw,17px)!important;font-weight:400!important;letter-spacing:-.025em!important;color:#f8faff!important;white-space:nowrap!important;text-shadow:0 1px 3px #000!important;pointer-events:auto!important;background:transparent!important;}
.blue-nav-pages>a:hover,.blue-nav-pages>a:focus-visible{color:#a6d8ff!important}
.blue-nav-separator{display:block;flex:0 0 1px;height:53%;background:rgba(255,255,255,.7);margin:0 1.2%;}
.blue-nav-actions{display:flex;align-items:center;justify-content:space-between;flex:0 0 29%;height:100%;gap:clamp(3px,.45vw,10px);}
.blue-nav-actions>a,.blue-nav-icon{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;color:#f8faff!important;padding:0!important;width:100%!important;height:100%!important;line-height:normal!important;cursor:pointer!important;text-decoration:none!important;pointer-events:auto!important;}
.blue-nav-actions>a{flex:1 1 0!important;min-width:0!important;}
.blue-nav-actions>div{flex:1 1 0;min-width:0;height:100%;position:relative;display:flex;align-items:center;justify-content:center;}
.blue-nav-icon svg{display:block!important;width:78%!important;height:55%!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;overflow:visible!important;}
.blue-nav-line-button svg{width:90%!important;height:63%!important;}
.blue-nav-more-button svg{width:95%!important;height:65%!important;stroke-width:1.8!important;}
.blue-nav-icon:hover,.blue-nav-icon:focus-visible{color:#9ed1ff!important;}
.blue-nav-popup{display:none;position:absolute;right:0;top:calc(80% + 7px);z-index:300;width:290px;max-width:min(90vw,320px);padding:10px;background:rgba(2,12,29,.98);border:1px solid #3a536d;box-shadow:0 18px 40px rgba(0,0,0,.5);line-height:1.5;}
.blue-nav-popup a{position:static!important;display:block!important;width:auto!important;height:auto!important;color:#fff!important;font-size:13px!important;text-decoration:none!important;padding:11px 12px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;white-space:normal!important;}
.blue-nav-popup a+a{margin-top:7px}.blue-nav-popup a:hover,.blue-nav-popup a:focus-visible{background:#174466!important}
.blue-nav-popup strong,.blue-nav-popup small{display:block!important}.blue-nav-popup small{font-size:11px!important;color:#b5cadc!important;margin-top:4px;}
.blue-nav-line:hover .blue-nav-popup,.blue-nav-line:focus-within .blue-nav-popup,.blue-nav-line.is-open .blue-nav-popup,.blue-nav-more.is-open .blue-nav-popup{display:block;}
.schedule-hero .blue-nav-row{height:45.1%;}.schedule-hero .blue-nav-logo{height:45.1%;}
.top-header .blue-nav-row{height:100%;}.top-header .blue-nav-logo{height:100%;}
/* Keep the nav as one responsive group: on narrow screens it remains usable by horizontal scrolling. */
@media(max-width:880px){.blue-nav-row{left:37%;right:2%;gap:1%;}.blue-nav-pages{gap:5px}.blue-nav-pages>a{font-size:clamp(8px,1.1vw,12px)!important}.blue-nav-actions{flex-basis:25%;}.blue-nav-separator{margin:0 .5%}}
@media(max-width:620px){.blue-nav-row{left:29%;right:1.5%;}.blue-nav-pages{display:none}.blue-nav-actions{margin-left:auto;flex:0 0 54%;}.blue-nav-separator{display:none}.blue-nav-logo{width:20%!important}.blue-nav-icon svg{height:62%!important}}

/* FOR ARTISTS dropdown — same shared header behavior as LINE */
.blue-nav-pages>.blue-nav-artist{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;min-width:0;flex:0 0 auto;pointer-events:auto;}
.blue-nav-artist-trigger{appearance:none;display:block;position:static;border:0;margin:0;padding:8px 0;background:transparent;color:#f8faff;font:400 clamp(8px,1.02vw,17px)/1.2 Arial,"Helvetica Neue",sans-serif;letter-spacing:-.025em;white-space:nowrap;text-shadow:0 1px 3px #000;cursor:pointer;}
.blue-nav-artist-trigger:hover,.blue-nav-artist-trigger:focus-visible{color:#a6d8ff;}
.blue-nav-artist .blue-nav-artist-popup{left:0;right:auto;top:calc(100% - 4px);width:310px;max-width:min(90vw,340px);transform:none;}
.blue-nav-artist:hover .blue-nav-artist-popup,.blue-nav-artist:focus-within .blue-nav-artist-popup,.blue-nav-artist.is-open .blue-nav-artist-popup{display:block;}
.blue-nav-artist-popup a strong{font-size:15px!important;font-weight:700!important;letter-spacing:.02em;}
.blue-nav-artist-popup a small{font-size:12px!important;}
@media(max-width:880px){.blue-nav-artist-trigger{font-size:clamp(8px,1.1vw,12px);}}

/* Fine amber underline on top navigation text (all pages). */
.blue-nav-pages>a,
.blue-nav-artist-trigger{
  position:relative!important;
}
.blue-nav-pages>a::after,
.blue-nav-artist-trigger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  border-radius:2px;
  background:#e9a54d;
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .2s ease,opacity .2s ease;
  pointer-events:none;
}
.blue-nav-pages>a:hover::after,
.blue-nav-pages>a:focus-visible::after,
.blue-nav-artist-trigger:hover::after,
.blue-nav-artist-trigger:focus-visible::after,
.blue-nav-artist:hover .blue-nav-artist-trigger::after,
.blue-nav-artist:focus-within .blue-nav-artist-trigger::after,
.blue-nav-artist.is-open .blue-nav-artist-trigger::after{
  transform:scaleX(1);
  opacity:1;
}
@media(prefers-reduced-motion:reduce){
  .blue-nav-pages>a::after,.blue-nav-artist-trigger::after{transition:none;}
}

/* FOR ARTISTS: keep the amber underline visible while its dropdown is open. */
.blue-nav-artist .blue-nav-artist-trigger{
  position:relative!important;
  z-index:2;
}
.blue-nav-artist:hover .blue-nav-artist-trigger,
.blue-nav-artist:focus-within .blue-nav-artist-trigger,
.blue-nav-artist.is-open .blue-nav-artist-trigger{
  box-shadow:inset 0 -2px 0 #e9a54d;
}
.blue-nav-artist:hover .blue-nav-artist-trigger::after,
.blue-nav-artist:focus-within .blue-nav-artist-trigger::after,
.blue-nav-artist.is-open .blue-nav-artist-trigger::after{
  opacity:1!important;
  transform:scaleX(1)!important;
}

/* FIX: show FOR ARTISTS amber line immediately under the text, above the dropdown cards. */
.blue-nav-artist .blue-nav-artist-trigger{isolation:isolate;}
.blue-nav-artist .blue-nav-artist-trigger::after{
  bottom:6px!important;
  z-index:4!important;
  height:2px!important;
}
.blue-nav-artist:hover .blue-nav-artist-trigger,
.blue-nav-artist:focus-within .blue-nav-artist-trigger,
.blue-nav-artist.is-open .blue-nav-artist-trigger{box-shadow:none!important;}
.blue-nav-artist .blue-nav-artist-popup{z-index:1;}

/* HOME header alignment: match the STUDIO header image (1672 x 108).
   Keep the top hero artwork and all existing links unchanged. */
.page > .blue-nav .blue-nav-row {height:6.45933vw;min-height:0;}
.page > .blue-nav .blue-nav-logo {height:6.45933vw;}


/* BLUE 2026-10 mobile header accessibility fix.
   Keep all four social/menu controls within viewport regardless of the
   underlying header artwork's aspect ratio. Desktop remains unchanged. */
@media (max-width: 620px) {
  .blue-nav {
    overflow: visible !important;
    z-index: 500 !important;
  }
  .blue-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(2, 12, 29, .97);
    pointer-events: none;
    z-index: 0;
  }
  .top-header { min-height: 64px; }
  .top-header .blue-nav-row,
  .schedule-hero .blue-nav-row,
  .page > .blue-nav .blue-nav-row,
  .blue-nav .blue-nav-row {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: 10px !important;
    width: 180px !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    z-index: 2 !important;
  }
  .blue-nav-pages, .blue-nav-separator { display: none !important; }
  .blue-nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  .blue-nav-actions > a, .blue-nav-actions > div {
    width: 40px !important;
    min-width: 40px !important;
    height: 48px !important;
    flex: 0 0 40px !important;
  }
  .blue-nav-actions .blue-nav-icon {
    width: 40px !important;
    height: 48px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .blue-nav-icon svg,
  .blue-nav-line-button svg,
  .blue-nav-more-button svg {
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  .top-header .blue-nav-logo,
  .schedule-hero .blue-nav-logo,
  .page > .blue-nav .blue-nav-logo,
  .blue-nav .blue-nav-logo {
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    width: min(38vw, 155px) !important;
    height: 64px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  .blue-nav-logo::before {
    content: "BLUE";
    display: block;
    font: 700 23px/1 Georgia, "Times New Roman", serif;
    letter-spacing: .12em;
    color: #fff;
  }
  .blue-nav-logo::after {
    content: "MUSIC LOUNGE";
    position: absolute;
    left: 1px;
    top: 43px;
    font: 500 7px/1 Arial, sans-serif;
    letter-spacing: .2em;
    color: #dae4f0;
  }
  .blue-nav-popup { top: calc(100% + 2px); }
}
@media(max-width: 370px) {
  .top-header .blue-nav-logo,
  .schedule-hero .blue-nav-logo,
  .page > .blue-nav .blue-nav-logo,
  .blue-nav .blue-nav-logo { width: 112px !important; }
  .blue-nav-logo::before { font-size: 19px; }
  .blue-nav-logo::after { font-size: 6px; top: 41px; }
  .top-header .blue-nav-row,
  .schedule-hero .blue-nav-row,
  .page > .blue-nav .blue-nav-row,
  .blue-nav .blue-nav-row { right: 4px !important; width: 168px !important; }
  .blue-nav-actions { gap: 2px !important; }
}

/* BLUE mobile: viewport-based controls, independent of hero image size. */
@media(max-width:620px){
 .page > .blue-nav, .top-header > .blue-nav, .schedule-hero > .blue-nav {overflow:visible!important;}
 .page > .blue-nav .blue-nav-row,.top-header .blue-nav-row,.schedule-hero .blue-nav-row {right:6px!important;width:176px!important;left:auto!important;max-width:calc(100vw - 126px)!important;}
 .blue-nav-actions {gap:2px!important;}
 .blue-nav-actions>a,.blue-nav-actions>div {min-width:0!important;flex:1 1 0!important;width:auto!important;}
 .blue-nav-actions .blue-nav-icon {width:100%!important;min-width:0!important;}
 .top-header .blue-nav-logo,.schedule-hero .blue-nav-logo,.page > .blue-nav .blue-nav-logo {left:8px!important;width:114px!important;}
 .blue-nav-logo::before {font-size:20px!important;}
 .blue-nav-logo::after {font-size:6px!important;top:42px!important;}
 .top-header .blue-nav-row,.top-header .blue-nav-logo {height:64px!important;}
 .page > .blue-nav .blue-nav-row,.page > .blue-nav .blue-nav-logo {height:64px!important;}
 .blue-nav-popup {max-width:calc(100vw - 24px)!important;}
}