/**
 * Mesada Landing - Hero Section
 * Gradient background, typography with stroke effect
 */

/* ===== Hero Section ===== */
.hero {
  background:
    radial-gradient(1100px 450px at 50% 10%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(180deg, var(--mesada-primary) 0%, var(--mesada-primary-dark) 92%);
  color: var(--color-white);
  overflow: hidden;
}

.hero-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6);
  text-align: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-content {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* ===== Hero Logo ===== */
.hero-logo {
  height: 4rem;
  width: auto;
  margin: 0 auto var(--space-6);
  opacity: 0.95;
}

@media (min-width: 768px) {
  .hero-logo {
    height: 5rem;
  }
}

@media (min-width: 1024px) {
  .hero-logo {
    height: 6rem;
  }
}

/* ===== Hero Title ===== */
.hero-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 6px var(--mesada-ink);
  paint-order: stroke fill;
}

@media (min-width: 640px) {
  .hero-title {
    font-size: 2.25rem;
    -webkit-text-stroke-width: 8px;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 3.75rem;
    -webkit-text-stroke-width: 10px;
  }
}

/* Fallback for browsers without text-stroke */
@supports not (-webkit-text-stroke: 1px black) {
  .hero-title {
    text-shadow:
      0 2px 0 var(--mesada-ink),
      2px 0 0 var(--mesada-ink),
      -2px 0 0 var(--mesada-ink),
      0 -2px 0 var(--mesada-ink),
      1.5px 1.5px 0 var(--mesada-ink),
      -1.5px 1.5px 0 var(--mesada-ink),
      1.5px -1.5px 0 var(--mesada-ink),
      -1.5px -1.5px 0 var(--mesada-ink);
  }
}

/* ===== Hero Accent Text ===== */
.hero-accent {
  color: #6EE7B7; /* emerald-300 */
}

/* ===== Hero Subtitle ===== */
.hero-subtitle {
  max-width: 48rem;
  margin: var(--space-6) auto 0;
  font-size: 0.875rem;
  color: rgba(238, 242, 255, 0.95); /* indigo-50/95 */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .hero-subtitle {
    font-size: 1.125rem;
  }
}

/* ===== Hero CTA Group ===== */
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* ===== Hero Footer Text ===== */
.hero-footer {
  margin-top: var(--space-6);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
  .hero-footer {
    font-size: 0.875rem;
  }
}