/* Base */
.k-banner {
  position: relative;
  width: 100vw;
  height: calc(100vh - 127px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #312783 0%, #004f9f 100%);
}

.k-banner .content-container {
  position: static;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  width: 100%;
  max-width: 859px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
	.k-banner .content-container {
		width: 100vw;
		max-width: 100%;
		padding: 0px;
		margin: 0 auto;
	}
}

/* Typography */
.k-banner .marketing-headline {
  font-family: Raleway, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(255,255,255,0.5);
  opacity: 0;
  animation: fadeInGlow 2s ease-out 1s forwards;
}

/* Small banner headline - responsive font sizes like Tailwind text-xl md:text-4xl */
.k-banner .marketing-headline--small {
  font-size: 2.5rem; /* text-xl equivalent (20px) */
  line-height: 2.5rem; /* text-xl line-height */
}

/* Small screens - equivalent to sm:text-2xl */
@media (min-width: 640px) {
  .k-banner .marketing-headline--small {
    font-size: 1.5rem; /* text-2xl equivalent (24px) */
    line-height: 2rem; /* text-2xl line-height */
  }
}

/* Medium screens and up - equivalent to md:text-4xl */
@media (min-width: 768px) {
  .k-banner .marketing-headline--small {
    font-size: 2.25rem; /* text-4xl equivalent (36px) */
    line-height: 2.5rem; /* text-4xl line-height */
    font-weight: 400; /* Normal weight for larger sizes */
  }
}

/* Large screens - equivalent to lg:text-5xl */
@media (min-width: 1024px) {
  .k-banner .marketing-headline--small {
    font-size: 3rem; /* text-5xl equivalent (48px) */
    line-height: 1;
  }
}

.k-banner .marketing-subtext {
  font-family: 'Hind', sans-serif;
  font-weight: 300;
  line-height: 1.2;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: #e0e0e0;
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.k-banner .marketing-btn {
  font-family: Hind, Arial, sans-serif;
  font-weight: 300;
  margin-top: 1rem;
  padding: 1rem 2.5rem;
  line-height: 1;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #fff;
  background: #ee7003;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(255,102,0,0.25);
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
  pointer-events: all;
}

.k-banner .marketing-btn:hover { background: #ff8533; transform: scale(1.05); }

@media (max-width: 600px) {
  .k-banner .marketing-headline { font-size: clamp(1.1rem, 7vw, 2rem); margin-bottom: 0.75rem; }
  .k-banner .marketing-subtext { font-size: clamp(0.9rem, 4vw, 1.1rem); max-width: 95vw; }
  .k-banner .marketing-btn { font-size: clamp(0.9rem, 4vw, 1.1rem); padding: 0.8rem 1.5rem; margin-top: 1rem; }
}

/* Decorative elements for full variant */
.k-banner--full #man-container { position: absolute; bottom: 0; left: 10%; width: 150px; max-width: 15vw; height: auto; z-index: 6; }
.k-banner--full .tree-svg-bottom-right { position: absolute; right: 0; bottom: 0; width: 480px; max-width: 45vw; height: auto; z-index: 6; }
.k-banner--full .ground-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; z-index: 5; fill: #351800; }

/* Small variant: hide large decorations and set minimum height */
.k-banner--small #man-container, .k-banner--small .tree-svg-bottom-right, .k-banner--small .ground-svg { display: none !important; }

/* Small variant specific sizing */
.k-banner--small {
    height: auto;
    min-height: 300px;
    padding: 2rem 1rem;
}
.k-banner--small .marketing-headline--small {
    font-family: 'Hind', sans-serif;
}
/* Small variant responsive adjustments */
@media (max-width: 600px) {
    .k-banner--small {
        min-height: 250px;
        padding: 1.5rem 1rem;
    }
}

/* Keyword highlighting within title */
.k-banner-keyword-highlight {
    color: #f47721;
    position: relative;
}

/* Canvases */
.k-banner canvas { display: block; position: absolute; top: 0; left: 0; }
/* Ensure correct stacking: stars behind, light above SVG but below text */
.k-banner canvas[data-role="star"] { z-index: 1; }
.k-banner canvas[data-role="light"] { z-index: 8; pointer-events: none; }

@keyframes fadeInGlow {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}