:root{
  --cc-header-bg: rgba(255,251,245,0.92);
  --cc-header-border: rgba(45,27,78,0.08);
}

/* A lightweight, non-overlapping header used on non-home pages.
   It reuses the Home logo animation so the brand stays consistent. */
.cc-global-header{
  position: sticky;
  top: 0;
  z-index: 120;
  backdrop-filter: blur(10px);
  background: var(--cc-header-bg);
  border-bottom: 1px solid var(--cc-header-border);
}

.cc-global-header-inner{
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo styles (copied from the home nav to keep the exact feel) */
.cc-global-header .logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.cc-global-header .logo-creatures{ display:flex; position:relative; }
.cc-global-header .logo-creature{ font-size:2rem; animation: logo-bounce .6s ease-in-out infinite; }
.cc-global-header .logo-creature:nth-child(2){ margin-left:-8px; animation-delay:.1s; }
.cc-global-header .logo-creature:nth-child(3){ margin-left:-8px; animation-delay:.2s; }
@keyframes logo-bounce{ 0%,100%{ transform:translateY(0) rotate(-5deg);} 50%{ transform:translateY(-8px) rotate(5deg);} }
.cc-global-header .logo-sparkle{ position:absolute; font-size:.8rem; animation: twinkle 1s infinite; }
.cc-global-header .logo-sparkle:nth-child(4){ top:-8px; left:8px; }
.cc-global-header .logo-sparkle:nth-child(5){ top:-5px; right:-8px; animation-delay:.3s; }
@keyframes twinkle{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
.cc-global-header .logo-text{ font-family:'Baloo 2',cursive; font-size:1.2rem; font-weight:800; line-height:1; }
.cc-global-header .logo-text-top{ background: linear-gradient(135deg, var(--purple, #a855f7), var(--pink, #ff6b9d)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.cc-global-header .logo-text-bottom{ background: linear-gradient(135deg, var(--orange, #fb923c), var(--yellow, #fbbf24)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:1.05rem; }
.cc-global-header .logo-poop{ -webkit-text-fill-color: initial; animation: wiggle 2s infinite; display:inline-block; }
@keyframes wiggle{ 0%,100%{ transform:rotate(-10deg);} 50%{ transform:rotate(10deg);} }

/* If a page already has its own sticky top nav (home), we don't add this header */
.cc-global-header[data-hidden="true"]{ display:none; }