/* core/static/core/css/styles.css */

:root {
    /* --- NEW BRAND PALETTE --- */
    --bg-dark-green: #0A4D3C;   /* Deep background green */
    --bg-lime-green: #C8E973;   /* Vibrant lime accents */
    --bg-mint-green: #5EE6B3;   /* Fresh mint accents */
    --brand-purple: #8F93FF;    /* Your existing purple for buttons */
    --brand-white: #FFFFFF;     /* Pure white for cards/text */
    --text-dark: #3C4C49;       /* Dark text for inside the white card */
    
    /* --- FONTS --- */
    --font-main: 'Bahnschrift', 'DIN Alternate', sans-serif;
}

/* Apply global font style */
body {
    font-family: var(--font-main);
    background-color: var(--brand-white); /* Reset body bg */
}

/* --- HERO SECTION STYLES (The new design) --- */
.hero-section {
    position: relative;
    /* Create the dark textured green background */
    background: linear-gradient(135deg, var(--bg-dark-green) 0%, #052a21 100%);
    overflow: hidden; /* Clip the background shapes */
    padding: 8rem 0; /* Nice spacing top and bottom */
    min-height: 80vh; /* Take up most of the screen height */
    display: flex;
    align-items: center;
}

/* The flowing abstract shapes in the background */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Place them behind the content */
    pointer-events: none; /* So they don't interfere with clicks */
    opacity: 0.8;
    filter: blur(40px); /* Give them that soft, glowing look */
}

/* We use CSS gradients to simulate the organic shapes */
.hero-shape-1 {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 140%;
    background: radial-gradient(ellipse at center, var(--bg-mint-green), transparent 60%);
    transform: rotate(25deg);
}

.hero-shape-2 {
    position: absolute;
    bottom: -30%;
    left: 10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(ellipse at center, var(--bg-lime-green), transparent 60%);
    transform: rotate(-15deg);
}

.hero-shape-3 {
    position: absolute;
    top: 40%;
    left: -20%;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at center, var(--bg-lime-green), transparent 50%);
    transform: rotate(45deg);
}

/* The white content card on the right */
.hero-content-card {
    background-color: var(--brand-white);
    padding: 4rem;
    border-radius: 1rem; /* Rounded corners */
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); /* Soft shadow for depth */
    position: relative;
    z-index: 1; /* Place in front of the shapes */
}

.hero-subtitle {
    color: var(--brand-purple);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.hero-title {
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -1px;
}

/* If the body has the dark green background, make the navbar links white */
body[style*="background-color: var(--bg-dark-green)"] .navbar-light .nav-link,
body[style*="background-color: var(--bg-dark-green)"] .navbar-light .navbar-brand {
    color: white !important;
}

body[style*="background-color: var(--bg-dark-green)"] .btn-outline-dark {
    color: white !important;
    border-color: white !important;
}