/* Studio Blocks headers on the live site (headers.css is the library's, scoped to a demo stage). Fixes only. */

/* The wrapper is the stage's parent: it carries sticky/fixed behavior and must not clip dropdowns. */
body .sb-headers.sb-chrome{position:sticky;top:0;z-index:1000;overflow:visible;background:transparent}
body.admin-bar .sb-headers.sb-chrome{top:32px}
/* 3.6.10: the theme sets body{height:100%}, so a sticky header's containing block ended one screen down and the bar
   scrolled away with the page (HDR-01, 04, 06 ...). Studio header pages let the body grow with the page. */
body.cc-header-sb:not(.cc-look-pre-3-6-10){height:auto;min-height:100%}
/* 3.6.10: without a dark hero under it (light page titles, no hero) a see-through or floating header (HDR-03, 18) sat on
   the page's root color, a dark strip on most sites. It sits on the page color like the rest of the page. */
body.cc-header-sb:not(.sb-hdr-over):not(.cc-look-pre-3-6-10) .sb-headers.sb-chrome{background:var(--pb-bg,#fff)}
body .sb-headers.sb-look-05,body .sb-headers.sb-look-14,body .sb-headers.sb-look-17,body .sb-headers.sb-look-18{position:relative;top:auto}
body .sb-headers .stage{overflow:visible;background:transparent}
/* An open menu covers the screen: the stage (a layout container, so fixed children would be trapped in it) goes fixed. */
body .sb-headers .stage:has(.is-open){position:fixed;inset:0;min-height:0;overflow:hidden}
html.sb-hdr-lock{overflow:hidden}
body .sb-headers .menu[hidden]{display:none}
/* the theme's global button/link styles */
body .sb-headers button{text-transform:none;letter-spacing:normal;box-shadow:none}
body .sb-headers a{text-decoration:none}
body .sb-headers .links a[aria-current]{text-decoration:underline}
body .sb-headers .btn{text-decoration:none}

/* Logos: an image from Site Options, sized to the reference's logo height. */
body .sb-headers .logo{--lh:30px}
body .sb-headers .logo img{width:auto;height:var(--lh);max-width:none;object-fit:contain;display:block}
body .sb-headers .logo .inv{filter:brightness(0) invert(1)}
body .sb-headers .logo .lg-d+.lg-l{display:none}
body .sb-headers .logo .rail-name{display:none}
body .sb-headers .h05 .logo{--lh:56px}
body .sb-headers .h18 .logo{--lh:36px}
body .sb-headers .h20 .logo{--lh:48px}
body .sb-headers .h20.shrunk .logo{--lh:28px}
body .sb-headers .h20 .hd-in,body .sb-headers .h20 .logo{transition:min-height var(--st-dur)}
@container (max-width:940px){
  body .sb-headers .h05 .logo,body .sb-headers .h20 .logo,body .sb-headers .h18 .logo{--lh:30px}
}

/* Over a hero: HDR-02, 03, 08 float over it (fixed), 18 sits on it. Without a hero under it they are solid bars in the flow. */
body.sb-hdr-over .sb-headers.sb-look-02,body.sb-hdr-over .sb-headers.sb-look-03,body.sb-hdr-over .sb-headers.sb-look-08{position:fixed;left:0;right:0;top:0}
body.sb-hdr-over.admin-bar .sb-headers.sb-look-02,body.sb-hdr-over.admin-bar .sb-headers.sb-look-03,body.sb-hdr-over.admin-bar .sb-headers.sb-look-08{top:32px}
body.sb-hdr-over .sb-headers.sb-look-18{position:absolute;left:0;right:0;top:0}
/* they leave the flow; a height keeps the wrapper a real box */
body.sb-hdr-over .sb-headers.sb-look-02,body.sb-hdr-over .sb-headers.sb-look-08{height:84px}
body.sb-hdr-over .sb-headers.sb-look-03{height:92px}
body.sb-hdr-over .sb-headers.sb-look-18{height:90px}
body:not(.sb-hdr-over) .sb-headers .h02 .hd,body:not(.sb-hdr-over) .sb-headers .h08 .hd,body.sb-hdr-over .sb-headers .h02.is-scrolled .hd,body.sb-hdr-over .sb-headers .h08.is-scrolled .hd{position:relative;background:var(--pb-surface);color:var(--pb-text)}
body:not(.sb-hdr-over) .sb-headers .h02 .hd-in,body.sb-hdr-over .sb-headers .h02.is-scrolled .hd-in{border-bottom:var(--st-line-w) solid var(--pb-border)}
body.sb-hdr-over .sb-headers .h02.is-scrolled .hd,body.sb-hdr-over .sb-headers .h08.is-scrolled .hd{position:absolute}
body:not(.sb-hdr-over) .sb-headers .h02 .hd .btn,body.sb-hdr-over .sb-headers .h02.is-scrolled .hd .btn{color:var(--pb-text)}
body:not(.sb-hdr-over) .sb-headers .h08 .hd .btn,body.sb-hdr-over .sb-headers .h08.is-scrolled .hd .btn{background:var(--pb-primary);color:var(--pb-on-dark)}
body.sb-hdr-over .sb-headers .h02:not(.is-scrolled) .hd .logo .lg-d,body.sb-hdr-over .sb-headers .h08:not(.is-scrolled) .hd .logo .lg-d,body.sb-hdr-over .sb-headers .h18 .hd .logo .lg-d{display:none}
body.sb-hdr-over .sb-headers .h02:not(.is-scrolled) .hd .logo .lg-d+.lg-l,body.sb-hdr-over .sb-headers .h08:not(.is-scrolled) .hd .logo .lg-d+.lg-l,body.sb-hdr-over .sb-headers .h18 .hd .logo .lg-d+.lg-l{display:block}
body.sb-hdr-over .sb-headers .h18 .hd{color:var(--pb-on-dark)}
body.sb-hdr-over .sb-headers .h18 .hd .btn{color:inherit}
/* HDR-03 floating card: in the flow (no hero) it floats 16px from the top edge and the content. */
body:not(.sb-hdr-over) .sb-headers .h03 .hd{position:relative;top:auto;left:auto;transform:none;margin:16px auto}

/* Dropdowns (menu items with children) */
body .sb-headers .has-dd{position:relative;display:inline-flex}
body .sb-headers .dd{display:none;position:absolute;top:100%;left:0;min-width:230px;flex-direction:column;padding:8px;background:var(--pb-surface);color:var(--pb-text);border:var(--st-line-w) solid var(--pb-border);box-shadow:var(--st-shadow-pop);z-index:20}
body .sb-headers .has-dd.open .dd{display:flex}
body .sb-headers .dd a{padding:0 12px;border-radius:var(--st-radius)}
body .sb-headers .has-kids[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* HDR-07 mega: one panel per parent, only the open one shows */
body .sb-headers .mega-open .mega:not(.on){display:none}
body .sb-headers .mega-open .has-kids{color:inherit}
body .sb-headers .mega-open .has-kids .chev.chev{transform:none}
body .sb-headers .mega-open .has-kids[aria-expanded="true"]{color:var(--pb-primary)}
body .sb-headers .mega-open .has-kids[aria-expanded="true"] .chev.chev{transform:rotate(180deg)}
body .sb-headers .mg-in{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
body .sb-headers .mg-feat{max-width:340px}

/* HDR-09 vertical rail: fixed to the left edge on desktop, content pushed right; a plain bar on phones */
body .sb-headers .h09 .logo img{display:none}
body .sb-headers .h09 .logo .rail-name{display:block}
@media(min-width:941px){
  body .sb-headers.sb-look-09{position:fixed;top:0;bottom:0;left:0;width:96px}
  body.admin-bar .sb-headers.sb-look-09{top:32px}
  body .sb-headers.sb-look-09 .stage{container-type:normal;height:100%}
  body .sb-headers.sb-look-09 .hx{height:100%}
  body.sb-hdr-09{padding-left:96px}
}
@container (max-width:940px){
  body .sb-headers .h09 .logo img{display:block}
  body .sb-headers .h09 .logo .rail-name{display:none}
}

/* HDR-12 tab bar: on phones the header and the tab bar are fixed to the screen edges */
@media(max-width:960px){
  body .sb-headers.sb-look-12{height:68px}
  body .sb-headers.sb-look-12 .stage:not(:has(.is-open)){position:fixed;inset:0;pointer-events:none}
  body .sb-headers.sb-look-12 .stage>.hx{pointer-events:auto}
  body.sb-hdr-12{padding-bottom:76px}
  body.admin-bar .sb-headers.sb-look-12 .stage{top:46px}
}

/* HDR-13 search */
body .sb-headers .h-form{display:contents}
body .sb-headers .h-search input,body .sb-headers .m-search input{box-shadow:none;border:0;background:none;height:auto;padding:0;margin:0}
body .sb-headers .h13 .m-search{display:flex}

/* HDR-14 giant wordmark: fitted by headers.js; this is the no-script size */

/* HDR-19 campus switcher */
body .sb-headers .loc-wrap{position:relative;display:flex}
body .sb-headers .loc-pop{position:absolute;top:100%;left:0;min-width:280px;display:flex;flex-direction:column;background:var(--pb-surface);color:var(--pb-text);border:var(--st-line-w) solid var(--pb-border);box-shadow:var(--st-shadow-pop);padding:6px;z-index:20}
body .sb-headers .loc-pop[hidden]{display:none}
body .sb-headers .loc-pop button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--st-btn-h);padding:8px 14px;background:none;border:0;text-align:left;cursor:pointer}
body .sb-headers .loc-pop button:hover,body .sb-headers .loc-pop button[aria-current="true"]{background:color-mix(in srgb,var(--pb-secondary) 28%,transparent)}
body .sb-headers .loc-pop small{font-size:var(--st-type-small) !important;color:var(--pb-muted)}
body .sb-headers .m-loc .seg{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
@container (max-width:940px){body .sb-headers .loc-wrap{display:none}}
/* the theme bolds <b> to 900; the design shows the campus name at the button weight */
body .sb-headers .h-loc .loc-name{font-weight:inherit}


/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-headers .intro h1 { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)); }
body .sb-headers .logo { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .m-links>a,body .sb-headers .m-acc { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .stub h2 { font-size: clamp(calc(var(--fs-hero) * .55), 7.875vw, var(--fs-hero)); }
body .sb-headers .stub p { font-size: var(--fs-copy) !important; }
body .sb-headers .h02 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h03 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .h04 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h05 .logo { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h05 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h05 .m-top .logo { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .mg-col a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .mg-feat b { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .h07 .m-links>a,body .sb-headers .h07 .m-acc { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h17 .m-links>a,body .sb-headers .h17 .m-acc { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .h08 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .m-feat b { font-size: var(--fs-titles-small); }
body .sb-headers .h09 .logo span { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h09 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .h10 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h11 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h12 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h-search input { font-size: var(--fs-copy) !important; }
body .sb-headers .m-search input { font-size: var(--fs-copy) !important; }
body .sb-headers .h13 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .wordmark { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)); }
body .sb-headers .h14 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h15 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h16 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .h18 .logo { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h18 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-headers .h19 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h20 .logo { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h20.shrunk .logo { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h20 .m-links>a { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-headers .h20.is-open .burger .bl::after { font-size: var(--fs-buttons) !important; }
body .sb-headers .sbi1 { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-headers .h14 .wordmark.sbi1 { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-headers .h18 .links a[aria-current] { font-size: var(--fs-buttons) !important; }
/* 3.6.10 chrome certification: the phone menus of HDR-05, 11 and 15 lay plain links out as two-up tiles; a link with
   children is an accordion row (button + chevron + sub links) and squeezed into a tile it ran into its neighbor. */
body:not(.cc-look-pre-3-6-10) .sb-headers :is(.h05,.h11,.h15,.h20) .m-links>.m-group{grid-column:1/-1}
body:not(.cc-look-pre-3-6-10) .sb-headers .h05 .m-links>.m-group .m-acc{font-size:22px !important}
/* HDR-10's phone menu is a brand-color panel: its button is the light one (the Branding button variables beat the look's own rule). */
body:not(.cc-look-pre-3-6-10) .sb-headers .h10 .m-foot .btn{--btn-fill:var(--pb-on-dark);--btn-color:var(--pb-primary);--btn-border:var(--pb-on-dark)}