/* =============================================================================
   Zahra gold AppBar title styling — paired with gold-title.js.
   The rich vertical gold sheen + bold weight + dark drop-shadow copy the app's
   AnimatedAppBarTitle gold treatment.
   ============================================================================= */

#page-title.gold-title,
.gold-title {
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  /* Gold sheen on the element itself too, so the title stays gold even in the
     brief moment before the marquee/segment spans are (re)built. */
  background: linear-gradient(to bottom,
    #FBEFB0 0%,
    #EBC85C 30%,
    #CE9F35 52%,
    #B77F13 74%,
    #F3DE93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* dark shadow/stroke for contrast on the teal header (text-shadow can't be
     used with background-clip:text, so use a drop-shadow filter) */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
  overflow: hidden;
  max-width: 100%;
}

/* The gold sheen is painted on each text segment so it stays correct while the
   marquee scrolls. Vertical gradient => horizontal position doesn't matter. */
.gold-title .gt-seg {
  background: linear-gradient(to bottom,
    #FBEFB0 0%,
    #EBC85C 30%,
    #CE9F35 52%,
    #B77F13 74%,
    #F3DE93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
}

/* Static (fits): single centered segment */
#page-title.gold-title:not(.gt-marquee) {
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Marquee (overflows): seamless right-to-left loop */
#page-title.gold-title.gt-marquee {
  display: inline-block;
  white-space: nowrap;
}
.gt-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: gt-scroll var(--gt-dur, 12s) linear infinite;
}
.gt-gap {
  display: inline-block;
  flex: 0 0 auto;
}
@keyframes gt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--gt-dist, 200px))); }
}