/**
 * Header Styles
 * Banner, logo, and marquee
 */

/* Banner height variable for positioning calculations */
:root {
  --banner-height: 80px;
  --logo-size: 119px;
  --logo-overlap: 40px; /* How much logo sits below banner */
}

/* ==========================================================================
   APP HEADER - Banner with overlapping logo (matches iOS design)
   ========================================================================== */

.app-header {
  position: relative;
  height: calc(var(--banner-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(135deg, var(--color-chulas-lime) 0%, #C4CC1F 100%);
  box-shadow: 0 4px 20px var(--color-chulas-lime-glow);
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-bottom: 3px solid var(--color-chulas-black);
}

/* Inner decorative border along bottom */
.app-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--color-chulas-black);
  pointer-events: none;
}

/* Banner color themes */
.app-header.lime {
  background: linear-gradient(135deg, var(--color-chulas-lime) 0%, #C4CC1F 100%);
  box-shadow: 0 4px 20px var(--color-chulas-lime-glow);
}

.app-header.orange {
  background: linear-gradient(135deg, var(--color-chulas-orange) 0%, #E89445 100%);
  box-shadow: 0 4px 20px var(--color-chulas-orange-glow);
}

.app-header.purple {
  background: linear-gradient(135deg, var(--color-chulas-purple) 0%, #5D4E94 100%);
  box-shadow: 0 4px 20px var(--color-chulas-purple-glow);
}

.app-header.red {
  background: linear-gradient(135deg, var(--color-chulas-red) 0%, #D84850 100%);
  box-shadow: 0 4px 20px var(--color-chulas-red-glow);
}

.app-header.teal {
  background: linear-gradient(135deg, var(--color-chulas-teal) 0%, #009B87 100%);
  box-shadow: 0 4px 20px var(--color-chulas-teal-glow);
}

/* ==========================================================================
   SCROLLING MARQUEE TEXT
   ==========================================================================

   IMPORTANT BEHAVIOR (for future AI reference):
   - The marquee text scrolls right-to-left across the banner
   - Text should DISAPPEAR midway behind the logo as it scrolls
   - Text must NOT reappear on the left side of the logo
   - This is achieved using a CSS mask that makes the left portion
     (behind the logo) transparent
   - The mask-cutoff is calculated as: left padding (16px) + half the logo width
   - This creates the illusion of text passing behind an opaque logo
   ========================================================================== */

.app-header .header-marquee {
  width: 100%;
  overflow: hidden;
  padding: 0 16px;
  /* Layout: stretch to fill banner so mask coordinates align with logo */
  align-self: stretch;
  display: flex;
  align-items: center;

  /*
   * MASK BEHAVIOR: Text disappears at the logo's center point.
   * Uses a radial gradient (circular cutout around logo) combined with a linear gradient.
   * --mask-cx/cy: Center of the circular mask (logo center)
   * --mask-r1/r2: Inner/outer radius for the radial gradient fade
   * --mask-edge: Where the linear gradient starts showing text
   * This makes scrolling text vanish midway behind the logo, NOT reappear on the other side.
   */
  --mask-cx: calc(16px + var(--logo-size) / 2);
  --mask-cy: calc(-5px + var(--logo-size) / 2);
  --mask-r1: calc(var(--logo-size) * 0.4);
  --mask-r2: calc(var(--logo-size) * 0.5);
  --mask-edge: calc(16px + var(--logo-size) / 2);

  -webkit-mask-image:
    radial-gradient(circle at var(--mask-cx) var(--mask-cy), transparent var(--mask-r1), black var(--mask-r2)),
    linear-gradient(to right, transparent 0, transparent var(--mask-edge), black var(--mask-edge));
  mask-image:
    radial-gradient(circle at var(--mask-cx) var(--mask-cy), transparent var(--mask-r1), black var(--mask-r2)),
    linear-gradient(to right, transparent 0, transparent var(--mask-edge), black var(--mask-edge));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.app-header .marquee-text {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: bold;
  color: var(--color-chulas-black);
  white-space: nowrap;
  animation: marqueeScroll 15s linear infinite;
  transition: opacity 0.15s ease;
}

@keyframes marqueeScroll {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ==========================================================================
   HEADER LOGO
   ==========================================================================

   IMPORTANT BEHAVIOR (for future AI reference):
   - Logo is positioned in top-left corner, overlapping the banner edge
   - Approximately 25-30% of the logo hangs below the banner into the content area
   - Logo has z-index: 15 to sit above the banner (z-index: 10) and content
   - The logo appears visually "solid" - scrolling marquee text should
     disappear BEHIND it midway through (see marquee mask above)
   - The logo does NOT actually mask the text; the marquee uses a CSS mask
     to hide text in the logo's area, creating the illusion
   - Logo size is defined by --logo-size (119px) in :root
   ========================================================================== */

.header-logo {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) - 5px);
  left: 16px;
  width: var(--logo-size);
  height: var(--logo-size);
  z-index: 15; /* Above banner (10) so logo overlaps content below */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}