/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Google Font - Space Grotesk for hero headers */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap");

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}

/* Hero Header Styles */
.hero-title {
    font-family:
        "Space Grotesk",
        system-ui,
        -apple-system,
        sans-serif;
    letter-spacing: -0.025em;
}

/* Animated gradient for hero text */
.hero-gradient-text {
    background: linear-gradient(
        135deg,
        #ff6b35 0%,
        #f7931e 20%,
        #ec4899 40%,
        #8b5cf6 60%,
        #3b82f6 80%,
        #06b6d4 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 40s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Header logo gradient - subtler version for blue header */
.header-logo-gradient {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}