@font-face{font-family:'Garet';src:url('/api/font?family=medium') format('woff2');font-style:normal;font-weight:500;font-display:block}

/* One source of truth for the B SIDE U top bar on home, static and proxied pages. */
.site-header,
.bsu-site-header,
#bsuUnifiedHeader{
  height:54px!important;
  min-height:54px!important;
  background:#fff!important;
  position:fixed!important;
  top:0!important;
  z-index:2147483000!important;
  border:0!important;
}

.site-nav,
.bsu-nav,
#bsuUnifiedHeader .bsu-site-nav{
  height:54px!important;
  max-width:1200px!important;
  width:calc(100% - 40px)!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

@media(min-width:761px){
  .site-nav,
  .bsu-nav,
  #bsuUnifiedHeader .bsu-site-nav{
    width:calc(100% - 80px)!important;
    max-width:1200px!important;
  }
}

.site-logo,
.bsu-brand,
#bsuUnifiedHeader .bsu-site-logo{
  width:66px!important;
  flex:0 0 66px!important;
  line-height:0!important;
}

.bsu-brand{
  height:29px!important;
  background-image:url('https://res.cloudinary.com/dqfgyorp9/image/upload/v1787734794/ndwe03rpbgir8zhivxoj.webp')!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;
  font-size:0!important;
}

.site-logo img,
#bsuUnifiedHeader .bsu-site-logo img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
}

.desktop-nav,
.bsu-links,
#bsuUnifiedHeader .bsu-desktop-nav{
  display:flex!important;
  align-items:center!important;
  gap:36px!important;
  font-family:'Garet',Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  color:#464646!important;
  white-space:nowrap!important;
  font-synthesis:none!important;
}

.desktop-nav a,
.bsu-links a,
#bsuUnifiedHeader .bsu-desktop-nav a{
  position:relative!important;
  font-family:'Garet',Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  color:#464646!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  transition:color .18s ease!important;
}

.desktop-nav a::after,
.bsu-links a::after,
#bsuUnifiedHeader .bsu-desktop-nav a::after{
  content:''!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-5px!important;
  height:2px!important;
  background:#111!important;
  transform:scaleX(0)!important;
  transform-origin:center!important;
  transition:transform .18s ease!important;
  pointer-events:none!important;
}

.desktop-nav a:hover,
.bsu-links a:hover,
#bsuUnifiedHeader .bsu-desktop-nav a:hover{
  color:#111!important;
}

.desktop-nav a:hover::after,
.bsu-links a:hover::after,
#bsuUnifiedHeader .bsu-desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.bsu-links a:focus-visible::after,
#bsuUnifiedHeader .bsu-desktop-nav a:focus-visible::after{
  transform:scaleX(1)!important;
}

@media(min-width:1400px){
  .site-logo,
  .bsu-brand,
  #bsuUnifiedHeader .bsu-site-logo{
    width:96px!important;
    flex-basis:96px!important;
  }

  .bsu-brand{height:42px!important}

  .desktop-nav,
  .bsu-links,
  #bsuUnifiedHeader .bsu-desktop-nav{
    font-size:13px!important;
    gap:48px!important;
  }

  .desktop-nav a,
  .bsu-links a,
  #bsuUnifiedHeader .bsu-desktop-nav a{
    font-size:13px!important;
  }
}

@media(max-width:760px){
  .site-header,
  .bsu-site-header,
  #bsuUnifiedHeader{
    height:57px!important;
    min-height:57px!important;
  }

  .site-nav,
  .bsu-nav,
  #bsuUnifiedHeader .bsu-site-nav{
    height:57px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 18px!important;
  }

  .site-logo,
  .bsu-brand,
  #bsuUnifiedHeader .bsu-site-logo{
    width:68px!important;
    flex-basis:68px!important;
  }

  .bsu-brand{height:27px!important}

  .desktop-nav,
  .bsu-links,
  #bsuUnifiedHeader .bsu-desktop-nav{
    display:none!important;
  }

  .mobile-nav a,
  .bsu-mobile-menu a,
  #bsuUnifiedHeader .bsu-mobile-nav a{
    font-family:'Garet',Arial,sans-serif!important;
    font-size:15px!important;
    font-weight:500!important;
    line-height:1.25!important;
    letter-spacing:normal!important;
    text-transform:none!important;
  }

  .mobile-nav a:hover,
  .bsu-mobile-menu a:hover,
  #bsuUnifiedHeader .bsu-mobile-nav a:hover{
    color:#111!important;
    background:#f7f7f7!important;
  }
}

/* Keep the shared top bar visible while scrolling */
.site-header,
.bsu-site-header,
#bsuUnifiedHeader{
  position:fixed !important;
  top:0 !important;
  z-index:2147483000 !important;
}

/* The shared navigation stays fixed on every page; this spacer preserves each page's existing top layout. */
:root{scroll-padding-top:54px}
.site-header,
.bsu-site-header,
#bsuUnifiedHeader{
  left:0!important;
  right:0!important;
  width:100%!important;
}
body:has(.site-header),
body:has(.bsu-site-header),
body:has(#bsuUnifiedHeader){padding-top:54px!important}
@media(max-width:760px){
  :root{scroll-padding-top:57px}
  body:has(.site-header),
  body:has(.bsu-site-header),
  body:has(#bsuUnifiedHeader){padding-top:57px!important}
}

/* Centered frosted mobile navigation */
@media(max-width:760px){
  .mobile-nav.open,
  .bsu-mobile-menu.open,
  #bsuUnifiedHeader .bsu-mobile-nav.open{
    min-height:250px !important;
    padding:24px 28px !important;
    align-content:center !important;
    background:rgba(255,255,255,.84) !important;
    backdrop-filter:blur(16px) saturate(115%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(115%) !important;
    box-shadow:0 14px 28px rgba(0,0,0,.055) !important;
  }
  .mobile-nav.open a,
  .bsu-mobile-menu.open a,
  #bsuUnifiedHeader .bsu-mobile-nav.open a{
    width:100% !important;
    padding:15px 0 !important;
    text-align:center !important;
  }
}

/* Full-height mobile menu overlay */
@media(max-width:760px){
  .mobile-nav.open,
  .bsu-mobile-menu.open,
  #bsuUnifiedHeader .bsu-mobile-nav.open{
    position:fixed !important;
    top:57px !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    align-content:center !important;
    z-index:2147482999 !important;
  }
  html.bsu-menu-open,
  html.bsu-menu-open body{
    overflow:hidden !important;
    touch-action:none !important;
  }
}

/* Editorial full-screen mobile navigation */
@media(max-width:760px){
  .mobile-nav.open,
  .bsu-mobile-menu.open,
  #bsuUnifiedHeader .bsu-mobile-nav.open{
    padding:34px 28px 76px !important;
    align-content:start !important;
    background:rgba(250,250,248,.94) !important;
    backdrop-filter:blur(22px) saturate(110%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(110%) !important;
  }
  .mobile-nav.open a,
  .bsu-mobile-menu.open a,
  #bsuUnifiedHeader .bsu-mobile-nav.open a{
    padding:14px 2px !important;
    text-align:left !important;
    font-size:16px !important;
    font-weight:600 !important;
    letter-spacing:-.025em !important;
    border-bottom:1px solid rgba(17,17,17,.13) !important;
  }
  .mobile-nav.open a:last-of-type,
  .bsu-mobile-menu.open a:last-of-type,
  #bsuUnifiedHeader .bsu-mobile-nav.open a:last-of-type{
    border-bottom:0 !important;
  }
  .mobile-nav.open::after,
  .bsu-mobile-menu.open::after,
  #bsuUnifiedHeader .bsu-mobile-nav.open::after{
    content:"PASADENA  ·  SAN GABRIEL";
    position:absolute;
    left:30px;
    bottom:28px;
    color:#888;
    font-size:9px;
    font-weight:600;
    letter-spacing:.15em;
  }
  html.bsu-menu-open .mobile-menu-btn,
  html.bsu-menu-open .bsu-menu,
  html.bsu-menu-open #bsuUnifiedHeader .bsu-mobile-menu-btn{
    position:relative !important;
  }
  html.bsu-menu-open .mobile-menu-btn span,
  html.bsu-menu-open #bsuUnifiedHeader .bsu-mobile-menu-btn span{
    opacity:0 !important;
  }
  html.bsu-menu-open .mobile-menu-btn::before,
  html.bsu-menu-open .mobile-menu-btn::after,
  html.bsu-menu-open #bsuUnifiedHeader .bsu-mobile-menu-btn::before,
  html.bsu-menu-open #bsuUnifiedHeader .bsu-mobile-menu-btn::after{
    position:absolute !important;
    top:50% !important;
    left:6px !important;
    right:6px !important;
    margin:0 !important;
  }
  html.bsu-menu-open .mobile-menu-btn::before,
  html.bsu-menu-open #bsuUnifiedHeader .bsu-mobile-menu-btn::before{
    transform:rotate(45deg) !important;
  }
  html.bsu-menu-open .mobile-menu-btn::after,
  html.bsu-menu-open #bsuUnifiedHeader .bsu-mobile-menu-btn::after{
    transform:rotate(-45deg) !important;
  }
  html.bsu-menu-open .bsu-menu{
    font-size:0 !important;
  }
  html.bsu-menu-open .bsu-menu::before,
  html.bsu-menu-open .bsu-menu::after{
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    left:5px!important;
    right:5px!important;
    height:1.5px!important;
    background:#111!important;
  }
  html.bsu-menu-open .bsu-menu::before{transform:rotate(45deg) !important}
  html.bsu-menu-open .bsu-menu::after{transform:rotate(-45deg) !important}
}

/* Blog: use the exact same desktop shell as the shared navigation. */
@media(min-width:761px){
  body:has(main > .hero + .grid .card) main > .hero,
  body:has(main > .hero + .grid .card) main > .grid{
    width:min(1200px,calc(100% - 80px))!important;
    max-width:1200px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:8px!important;
    padding-right:8px!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }
  body:has(main > .hero + .grid .card) main > .hero > *{
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }
}

/* All non-home inner pages use the same visible left/right edges as the logo. */
@media(min-width:761px){
  body:has(main.about) main.about,
  body:has(.join-team-wrap) main.bsu-page-shell,
  body:has(.policy-wrap) main.bsu-page-shell{
    width:min(1200px,calc(100% - 80px))!important;
    max-width:1200px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:8px!important;
    padding-right:8px!important;
    box-sizing:border-box!important;
  }
  body:has(main.about) main.about{
    padding-left:8px!important;
    padding-right:8px!important;
  }
}