/* MyCollegePark v66.58 — canonical header CSS ownership.
   This file is the single layout owner for backend/templates/components/header.html.
   Load it after page-specific CSS. Page styles should not redefine canonical header geometry. */

.canonical-site-header {
  box-sizing: border-box;
  position: relative;
  z-index: 1000;
  width: 100%;
  min-height: 96px;
  padding: 16px 24px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: visible;
  color: #fff;
  border: 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,255,255,.15), transparent 25%),
    radial-gradient(circle at 62% 125%, rgba(150,224,201,.22), transparent 38%),
    linear-gradient(118deg, #123f3a 0%, #176b5b 56%, #247b69 100%);
  box-shadow: none;
}

.canonical-site-header .home-hero-decoration { pointer-events: none; }
.canonical-site-header .canonical-header-brand-wrap {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.canonical-site-header .site-header-brand {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.canonical-site-header .canonical-header-brand-copy {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.canonical-site-header .site-header-eyebrow {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: clamp(1.28rem, 1.05rem + .55vw, 1.72rem);
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: none;
}
.canonical-site-header .beta-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.canonical-site-header .site-header-tagline,
.canonical-site-header .shared-site-header-title {
  min-width: 0;
  margin: 0;
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: 740;
  line-height: 1.18;
  letter-spacing: -.012em;
}
.canonical-site-header .site-header-description {
  margin-top: 2px;
  color: rgba(255,255,255,.82);
  font-size: .78rem;
  font-weight: 430;
  line-height: 1.3;
}
.canonical-site-header .canonical-desktop-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.canonical-site-header .canonical-mobile-actions,
.canonical-site-header .canonical-mobile-only { display: none; }
.canonical-site-header .topbar-link { color: rgba(255,255,255,.86); }
.canonical-site-header .topbar-link:hover,
.canonical-site-header .topbar-link.is-current { color: #fff; background: rgba(255,255,255,.11); }

/* Mobile is intentionally one compact two-line brand row on every page. */
@media (max-width: 760px) {
  .canonical-site-header {
    min-height: 64px !important;
    height: auto !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .canonical-site-header .home-hero-decoration { display: none !important; }
  .canonical-site-header .canonical-header-brand-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 88px) !important;
    display: flex !important;
    align-items: center !important;
  }
  .canonical-site-header .canonical-desktop-actions { display: none !important; }
  .canonical-site-header .canonical-mobile-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    position: relative !important;
    z-index: 4 !important;
  }
  .canonical-site-header .canonical-mobile-only:not(.hidden) { display: inline-flex !important; }
  .canonical-site-header .site-header-brand {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .canonical-site-header .canonical-header-brand-copy {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    gap: 2px !important;
  }
  .canonical-site-header .site-header-eyebrow {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    gap: 7px !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
  }
  .canonical-site-header .beta-badge {
    margin: 0 !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    white-space: nowrap !important;
  }
  .canonical-site-header .site-header-tagline,
  .canonical-site-header .shared-site-header-title {
    min-width: 0 !important;
    max-width: 285px !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 740 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
  }
  .canonical-site-header .site-header-description { display: none !important; }
  .canonical-site-header .mobile-account-button,
  .canonical-site-header .mobile-menu-button {
    box-sizing: border-box !important;
    min-height: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .canonical-site-header .mobile-account-button {
    max-width: 92px !important;
    padding: 0 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  .canonical-site-header .mobile-account-button.avatar-only {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 2px !important;
    border-radius: 50% !important;
  }
  .canonical-site-header .mobile-account-avatar-image,
  .canonical-site-header .mobile-account-avatar-initials {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #fff !important;
    color: #114f43 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }
  .canonical-site-header img.mobile-account-avatar-image { display: block !important; }
  .canonical-site-header .mobile-menu-button {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  .canonical-site-header .mobile-menu-button svg,
  .canonical-site-header .mobile-header-back svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  .canonical-site-header .mobile-header-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    width: min(250px, calc(100vw - 24px)) !important;
    min-width: 220px !important;
    padding: 7px !important;
    border: 1px solid rgba(15,47,79,.12) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(15,32,61,.22) !important;
    color: #17324d !important;
    z-index: 2000 !important;
  }
  .canonical-site-header .mobile-header-menu a,
  .canonical-site-header .mobile-header-menu button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #17324d !important;
    text-align: left !important;
    text-decoration: none !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 390px) {
  .canonical-site-header .canonical-header-brand-wrap { max-width: calc(100% - 86px) !important; }
  .canonical-site-header .site-header-eyebrow { font-size: 17px !important; gap: 6px !important; }
  .canonical-site-header .site-header-tagline,
  .canonical-site-header .shared-site-header-title { max-width: 225px !important; font-size: 10px !important; }
}

@media (max-width: 350px) {
  .canonical-site-header .site-header-eyebrow { font-size: 16px !important; }
  .canonical-site-header .site-header-tagline,
  .canonical-site-header .shared-site-header-title { max-width: 185px !important; font-size: 9px !important; }
  .canonical-site-header .beta-badge { font-size: 7px !important; padding: 1px 4px !important; }
}

/* v66.75 — one account control on every desktop page: avatar + attention badge. */
.canonical-site-header .canonical-account-avatar-button{
  position:relative; width:42px; min-width:42px; height:42px; padding:2px; border-radius:50%;
  display:grid; place-items:center; overflow:visible;
}
.canonical-site-header .canonical-account-avatar{
  width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:#f4f7f5; color:#174f46; font-size:.78rem; font-weight:850;
}
.canonical-site-header .canonical-account-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.canonical-site-header .canonical-account-total-badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#d92d20;color:#fff;border:2px solid #176b5b;font-size:10px;font-weight:850;line-height:1}
.canonical-site-header .canonical-account-total-badge.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}