/* Custom styles for Kitale Skating */

/* Override Bootstrap colors */
:root {
    --bs-primary: #2cb34a; /* Primary color */
    --bs-secondary: #6c757d; /* Secondary color */
    --bs-success: #2cb34a; /* Success color matching primary */
    /* Add more custom colors as needed */
}

/* Override link color */
a {
    color: #2cb34a;
}

a:hover {
    color: #228b37; /* Darker shade for hover */
}

/* Override button colors */
.btn-primary {
    background-color: #2cb34a;
    border-color: #2cb34a;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #228b37 !important;
    border-color: #228b37 !important;
}

/* Override outline button colors */
.btn-outline-primary {
    color: #2cb34a;
    border-color: #2cb34a;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #2cb34a !important;
    border-color: #2cb34a !important;
    color: white !important;
}

/* Override other primary elements */
.btn-success {
    background-color: #2cb34a;
    border-color: #2cb34a;
}

/* Secondary buttons */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #545b62 !important;
    border-color: #545b62 !important;
}

/* Outline secondary buttons */
.btn-outline-secondary {
    color: #2cb34a;
    border-color: #2cb34a;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #2cb34a !important;
    border-color: #2cb34a !important;
    color: white !important;
}

.text-primary {
    color: #2cb34a !important;
}

.bg-primary {
    background-color: #2cb34a !important;
}

.border-primary {
    border-color: #2cb34a !important;
}

/* Form elements */
.form-control:focus {
    border-color: #2cb34a;
    box-shadow: 0 0 0 0.2rem rgba(44, 179, 74, 0.25);
}

/* Navigation links */
.nav-link {
    color: #2cb34a;
}

.nav-link:hover,
.nav-link:focus {
    color: #228b37;
}

/* Custom links */
.custom-link {
    color: #2cb34a;
}

.custom-link:hover {
    color: #228b37;
}

/* Custom font styles */
body {
    font-family: "Jost", sans-serif;
    background-image: url('../images/sun-tornado.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Faster One", system-ui;
    letter-spacing: 0.05em !important;
}

/* Footer styling */
footer {
    background-color: #2cb34a !important; /* Primary color */
    color: white !important;
}

footer .text-muted {
    color: white !important;
}

footer a {
    color: white !important;
}

footer a:hover {
    color: #d0f0d6 !important; /* Lighter shade for hover */
}

/* Main content full height */
main {
    min-height: calc(100vh - 120px); /* Adjust based on header and footer height */
}

/* Hero sections */
.hero-section {
    margin-bottom: 2rem;
    position: relative;
    height: 70vh; /* Make the hero section tall */
    background: url('../images/krsc_banner.jpg') no-repeat center center/cover fixed; /* Background image */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for readability */
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1;
}

.hero-section > .container {
    position: relative;
    z-index: 2;
}

.events-hero-section {
    margin-bottom: 2rem;
}

/* Latest events carousel */
.event-carousel-img {
    max-height: 500px; /* Adjust as needed to control overall size */
    width: auto; /* Allow width to adjust based on aspect ratio */
    object-fit: contain; /* Show the full poster, maintaining aspect ratio */
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.event-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 0.25rem;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.placeholder-img {
    background-color: #6c757d; /* Secondary color for placeholder */
    color: white;
    max-height: 500px; /* Match event-carousel-img max-height */
    height: 100%; /* Ensure it takes available height within max-height */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Cards Section */
.cards-section .card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.cards-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.cards-section .card-title {
    color: var(--bs-primary);
    font-weight: bold;
}

/* Add any other custom overrides here */

/* Floating messages container */
.messages-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1100; /* Above navigation (most nav z-index is 1030-1040) */
    width: 350px;
    max-width: 90vw;
}

.messages-container .alert {
    margin-bottom: 10px;
    border: 2px solid rgba(0,0,0,0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    font-weight: bold;
    backdrop-filter: blur(2px); /* Add blur for better readability if overlaying */
}