/**
 * @file
 * Header background height styles
 * 
 * Heights = menu height (--header-h) + visible content area
 */

/* ==========================================================================
   HEIGHT OPTIONS
   ========================================================================== */

/* Slim - minimal visible area */
.header-background.header-height-slim {
  height: calc(var(--header-h, 100px) + clamp(120px, 14.6dvh, 200px)) !important;
  min-height: calc(var(--header-h, 100px) + 120px) !important;
}

/* Standard - default visible area */
.header-background.header-height-standard {
  height: calc(var(--header-h, 100px) + clamp(180px, 23.6dvh, 320px)) !important;
  min-height: calc(var(--header-h, 100px) + 180px) !important;
}

/* Statement - prominent visible area */
.header-background.header-height-statement {
  height: calc(var(--header-h, 100px) + clamp(300px, 38.2dvh, 520px)) !important;
  min-height: calc(var(--header-h, 100px) + 300px) !important;
}

/* Full - full viewport height */
.header-background.header-height-full {
  height: 100dvh !important;
  min-height: 100vh !important;
}

/* ==========================================================================
   CONTENT VERTICAL CENTERING
   Content should be centered in the VISIBLE area (below menu)
   ========================================================================== */

/* All height options use flexbox centering */
.header-background.header-height-slim .header-bg-content,
.header-background.header-height-standard .header-bg-content,
.header-background.header-height-statement .header-bg-content,
.header-background.header-height-full .header-bg-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  padding-top: var(--header-h, 100px) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Remove sticky positioning for all - use flexbox instead */
.header-background.header-height-slim .header-bg-headline,
.header-background.header-height-standard .header-bg-headline,
.header-background.header-height-statement .header-bg-headline,
.header-background.header-height-full .header-bg-headline {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

/* ==========================================================================
   OVERLAY CENTER POSITIONING FIX
   The radial gradient should be centered in the VISIBLE area (below menu)
   ========================================================================== */

/* Override the center overlay to account for menu height */
.header-background.header-height-slim .header-bg-overlay-black-transparent-center,
.header-background.header-height-standard .header-bg-overlay-black-transparent-center,
.header-background.header-height-statement .header-bg-overlay-black-transparent-center,
.header-background.header-height-full .header-bg-overlay-black-transparent-center {
  background: radial-gradient(
    ellipse 80% 80% at 50% calc(50% + var(--header-h, 100px) / 2),
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}

/* White center overlay fix */
.header-background.header-height-slim .header-bg-overlay-white-transparent-center,
.header-background.header-height-standard .header-bg-overlay-white-transparent-center,
.header-background.header-height-statement .header-bg-overlay-white-transparent-center,
.header-background.header-height-full .header-bg-overlay-white-transparent-center {
  background: radial-gradient(
    ellipse 80% 80% at 50% calc(50% + var(--header-h, 100px) / 2),
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.2) 60%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .header-background.header-height-slim {
    height: calc(var(--header-h, 80px) + clamp(100px, 18dvh, 180px)) !important;
    min-height: calc(var(--header-h, 80px) + 100px) !important;
  }

  .header-background.header-height-standard {
    height: calc(var(--header-h, 80px) + clamp(150px, 28dvh, 280px)) !important;
    min-height: calc(var(--header-h, 80px) + 150px) !important;
  }

  .header-background.header-height-statement {
    height: calc(var(--header-h, 80px) + clamp(250px, 42dvh, 450px)) !important;
    min-height: calc(var(--header-h, 80px) + 250px) !important;
  }
  
  .header-background.header-height-slim .header-bg-content,
  .header-background.header-height-standard .header-bg-content,
  .header-background.header-height-statement .header-bg-content,
  .header-background.header-height-full .header-bg-content {
    padding-top: var(--header-h, 80px) !important;
  }
}