/**
 * Hero Section Fixes
 * Additional overrides to ensure proper hero display
 */

/* Remove any grey bars or borders */
.site-header,
.fund-ticker,
.site-header::before,
.site-header::after,
.fund-ticker::after {
  border: none !important;
  box-shadow: none !important;
}

/* Remove any separators between elements */
.site-header + *,
.fund-ticker + * {
  border-top: none !important;
  margin-top: 0 !important;
}

/* Ensure hero takes exact viewport height */
.hero-fullscreen {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
}

/* Ensure scroll indicator is visible with better contrast */
.hero-scroll-indicator,
.scroll-indicator-premium {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-scroll-indicator svg,
.scroll-indicator-premium svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Adjust hero background image - keep boat visible at all aspect ratios */
.hero-fullscreen .hero-image {
  background-size: cover !important;
  background-position: center 75% !important;
}

/* Fix content positioning - account for fixed header/ticker */
.hero-fullscreen .hero-content {
  margin-top: 0 !important;
  padding-top: calc(var(--ticker-height) + var(--header-height));
  transform: translateY(-15vh);
}

/* WordPress admin bar adjustment for hero content */
.admin-bar .hero-fullscreen .hero-content {
  padding-top: calc(32px + var(--ticker-height) + var(--header-height));
}

@media screen and (max-width: 782px) {
  .admin-bar .hero-fullscreen .hero-content {
    padding-top: calc(46px + var(--ticker-height) + var(--header-height));
  }
}

/* Tablet and narrow viewports - ticker and header are relative positioned */
@media screen and (max-width: 1023px) {
  .hero-fullscreen .hero-content {
    padding-top: var(--spacing-lg);
    transform: none;
  }

  .admin-bar .hero-fullscreen .hero-content {
    padding-top: var(--spacing-lg);
  }
}

/* Portrait/vertical aspect ratios - move content higher */
/* Near-square aspect ratios (like iPad portrait or resized browser) */
@media screen and (max-width: 1023px) and (max-aspect-ratio: 5/4) {
  .hero-fullscreen .hero-content {
    transform: translateY(-10vh);
  }
}

@media screen and (max-width: 1023px) and (max-aspect-ratio: 1/1) {
  .hero-fullscreen .hero-content {
    transform: translateY(-15vh);
  }
}

@media screen and (max-width: 1023px) and (max-aspect-ratio: 4/5) {
  .hero-fullscreen .hero-content {
    transform: translateY(-18vh);
  }
}

@media screen and (max-width: 1023px) and (max-aspect-ratio: 3/4) {
  .hero-fullscreen .hero-content {
    transform: translateY(-22vh);
  }
}

/* Ensure hero title stays dominant at all screen sizes */
.hero-fullscreen .hero-title {
  font-size: clamp(2rem, 8vw, 4.5rem) !important;
}

/* Ensure tagline stays proportionally smaller */
.hero-fullscreen .hero-tagline {
  font-size: clamp(0.75rem, 2.5vw, 1.25rem) !important;
}

/* Ensure subtitle/eyebrow text stays small */
.hero-fullscreen .hero-subtitle {
  font-size: clamp(0.65rem, 2vw, 0.875rem) !important;
}
