/* Shared Header and in-header Quick Links geometry. */
.siteHeader{position:absolute;height:108px;display:flex;align-items:center;gap:12px;padding:0 24px}
.scheduleOpen .siteHeader,.clipsOpen .siteHeader{position:fixed}
:where(.scheduleOpen,.clipsOpen) .siteHeader{height:142px;align-items:center}
.siteHeader>.brand{flex:0 0 148px}
.siteHeader>.topNav{flex:0 0 auto;margin-left:auto}
.siteHeader>.headerCenter{display:contents}

/* Preserve every existing size/top value; only align the Quick Links group to the Header center. */
body .siteHeader .quickLinksSection{position:absolute;z-index:24;left:50%;top:22px;width:498px;max-width:none;transform:translateX(-50%);pointer-events:auto}
.siteHeader .quickLinksGrid{grid-template-columns:repeat(6,83px);gap:0}
.siteHeader .quickLinkCard{width:83px;height:74px;gap:4px}
.siteHeader .quickIcon{width:40px;height:40px;border-radius:13px}
.siteHeader .quickLinkLabel{display:block;overflow:visible;white-space:nowrap;overflow-wrap:normal;-webkit-line-clamp:unset;-webkit-box-orient:initial;font-size:16px;line-height:1.1}
.schedulePage,.songClipsPage{padding-top:158px}

@media(min-width:1201px) and (max-width:1599px){
  .siteHeader{height:198px;align-items:flex-start}
  .siteHeader>.brand{margin-top:15px}
  .siteHeader>.topNav{margin-top:21px}
  body .siteHeader .quickLinksSection{left:50%;top:100px;width:300px}
  .siteHeader .quickLinksGrid{grid-template-columns:repeat(6,50px);gap:0}
  .siteHeader .quickLinkCard{width:50px;height:72px;gap:4px}
  .siteHeader .quickLinkLabel{font-size:15px}
  .schedulePage,.songClipsPage{padding-top:214px}
}

@media(min-width:1600px) and (max-width:1899px){
  body .siteHeader .quickLinksSection{left:50%;top:22px;width:300px}
  .siteHeader .quickLinksGrid{grid-template-columns:repeat(6,50px);gap:0}
  .siteHeader .quickLinkCard{width:50px;height:72px;gap:4px}
  .siteHeader .quickLinkLabel{font-size:15px}
}

@media(min-width:901px) and (max-width:1200px){
  .siteHeader{height:232px;align-items:flex-start;padding:0 38px}
  .siteHeader>.brand{margin-top:15px}
  .siteHeader>.topNav{margin-top:21px}
  body .siteHeader .quickLinksSection{left:50%;top:88px;width:150px}
  .siteHeader .quickLinksGrid{grid-template-columns:repeat(3,50px);column-gap:0;row-gap:0}
  .siteHeader .quickLinkCard{width:50px;height:72px;gap:4px}
  .siteHeader .quickLinkLabel{font-size:15px}
  .schedulePage,.songClipsPage{padding-top:248px}
}

@media(max-width:900px){
  .siteHeader{height:176px;display:grid;padding:0 18px;grid-template-columns:112px minmax(0,1fr) auto;grid-template-rows:72px 104px;column-gap:12px;row-gap:0;align-items:center}
  .siteHeader>.brand{grid-column:1;grid-row:1;margin:0}
  .siteHeader>.topNav{grid-column:3;grid-row:1;margin:0;justify-self:end}
  .siteHeader>.headerCenter{display:flex;grid-column:1/-1;grid-row:2;width:100%;min-width:0;align-items:center;justify-content:center;gap:8px;pointer-events:none}
  body .siteHeader .quickLinksSection{position:static;left:auto;right:auto;top:auto;flex:0 0 250px;width:250px;max-width:none;transform:none;pointer-events:auto}
  .siteHeader .quickLinksGrid{grid-template-columns:repeat(6,40px);gap:2px}
  .siteHeader .quickLinkCard{width:40px;height:70px;gap:4px}
  .siteHeader .quickIcon{width:40px;height:40px;border-radius:13px}
  .siteHeader .quickLinkLabel{white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px;line-height:1.05}
  .schedulePage,.songClipsPage{padding-top:192px}
}

@media(max-width:560px){
  .siteHeader{height:254px;grid-template-rows:72px 182px}
  .siteHeader>.headerCenter{flex-direction:column;gap:8px}
  body .siteHeader .quickLinksSection{flex:0 0 auto;width:min(320px,calc(100vw - 36px))}
  .siteHeader .quickLinksGrid{width:100%;grid-template-columns:repeat(6,minmax(40px,1fr));gap:4px}
  .siteHeader .quickLinkCard{width:auto;height:68px}
  .schedulePage,.songClipsPage{padding-top:270px}
}

@media(min-width:1600px){
  body.scheduleOpen .siteHeader,
  body.clipsOpen .siteHeader{height:108px}
  body.scheduleOpen .siteHeader .quickLinksSection,
  body.clipsOpen .siteHeader .quickLinksSection{top:22px;transform:translateX(-50%)}
  body.scheduleOpen .schedulePage,
  body.clipsOpen .songClipsPage{padding-top:124px}
}


/* Schedule and clips use the same directional header reveal. */
:where(.scheduleOpen,.clipsOpen) .siteHeader{
  transition:transform .28s ease,background .25s,border-color .25s;
  will-change:transform;
}
body.pageHeaderHidden:where(.scheduleOpen,.clipsOpen) .siteHeader{
  transform:translateY(-100%);
  pointer-events:none;
}