/* Color Palette Suggestions */
:root {
  --primary: #FF6F0F;           /* Brand Orange */
  --secondary: #FFF0E6;         /* Soft Cream */
  --light: #F8F8F9;             /* Off-white */
  --dark: #001D23;              /* Near Black */
  --text-color: #333;           /* Base Text */
  --text-muted: #555;           /* Muted Text */
  --border-color-light: #e0e0e0;
  --border-color-dark: rgba(255, 255, 255, 0.4); /* For glass effect borders */

  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-strong: rgba(0, 0, 0, 0.15);
  --shadow-glass: rgba(31, 38, 135, 0.15);
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--rkm-dark);
    line-height: 1.7;
    background-color: var(--rkm-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--rkm-dark);
}

/* Navbar Enhancements */
.navbar-brand img {
    border-radius: 50%;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--rkm-accent-gold);
}

/* Horizontal rule styling (global) */
hr.border-primary {
    border-top: 3px solid var(--rkm-primary);
    opacity: 0.5;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Global Utility classes for text colors and backgrounds */
.text-primary { color: var(--rkm-primary) !important; }
.text-success { color: var(--rkm-accent-green) !important; }
.text-info { color: var(--rkm-accent-info) !important; }
.text-warning { color: var(--rkm-accent-warning) !important; }
.text-danger { color: var(--rkm-accent-danger) !important; }
.bg-light-subtle { background-color: var(--rkm-light) !important; }
/* Add any other global styles here */




/* Styles for Activity Category Pages */
.category-hero {
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('{% static "images/background_pattern.png" %}') repeat; /* Use a subtle pattern or relevant image */
    color: var(--rkm-dark);
    padding: 60px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.category-hero h1 {
    font-size: 3rem;
    color: var(--rkm-primary);
}

.category-hero .lead {
    font-size: 1.25rem;
    color: var(--rkm-secondary);
}

.category-content {
    padding: 40px 0;
}

.activity-card {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.activity-img {
    height: 200px; /* Fixed height for activity images */
    object-fit: cover; /* Ensures images cover the area without distortion */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.list-group-item-action.active {
    background-color: var(--rkm-primary);
    border-color: var(--rkm-primary);
    color: white;
}

.list-group-item-action:hover {
    background-color: rgba(0, 86, 179, 0.1); /* Light hover effect */
}

/* Responsive adjustments for sidebar */
@media (max-width: 991.98px) {
    .category-content .col-lg-3 {
        margin-bottom: 2rem;
    }
}


/* Styles for Activity Category Pages and All Activities Page */
.category-hero {
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('{% static "images/background_pattern.png" %}') repeat;
    color: var(--rkm-dark);
    padding: 60px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.category-hero h1 {
    font-size: 3rem;
    color: var(--rkm-primary);
}

.category-hero .lead {
    font-size: 1.25rem;
    color: var(--rkm-secondary);
}

.category-content {
    padding: 40px 0;
}

.activity-card {
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.activity-img {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.list-group-item-action.active {
    background-color: var(--rkm-primary);
    border-color: var(--rkm-primary);
    color: white;
}

.list-group-item-action:hover {
    background-color: rgba(0, 86, 179, 0.1);
}

/* Responsive adjustments for sidebar */
@media (max-width: 991.98px) {
    .category-content .col-lg-3 {
        margin-bottom: 2rem;
    }
}