/* Define custom orange color */
:root {
    --custom-orange: #F97316;
    --custom-light-orange: #FFE5B4;
    --custom-dark-orange: #FF9800;
}

/* General body styling */
body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
    background-color: #ffffff;
}

/* Dark mode styles */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}
body.dark-mode .text-muted {
    color: #bbbbbb !important;
}
body.dark-mode .bg-light {
    background-color: #1f1f1f !important;
}

/* --- Hero Section (Updated for Orange Theme) --- */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    background-color: var(--custom-orange);
    color: #000000;
}

/* Styles for the particle effect container */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Behind hero-content */
}

/* Ensure hero content is above the particles */
.hero-content {
    position: relative; /* Needed for z-index */
    z-index: 1; /* Above #particles-js */
    /* background-color: rgba(0, 0, 0, 0.45); /* REMOVED transparent background */
    padding: 2rem; /* Adjust padding if needed */
    border-radius: 0.75rem; /* Keep rounded corners if desired */
    max-width: 900px; /* Optional: constrain width */
    margin: 0; /* Center the content block if max-width is set */
    color: #ffffff; /* Ensure text is white */
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Optional: remove or keep shadow */
}


.hero#article {
    background-image: url('/static/articles/002_narrative.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.6);
}


/* Navbar */
.navbar {
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.navbar.dark-mode {
    background-color: #121212 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.navbar-light .navbar-brand {
    color: var(--custom-orange);
}
.navbar-light .navbar-nav .nav-link {
    color: #333333;
}
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--custom-orange);
}
.navbar-light .navbar-toggler {
    border-color: var(--custom-orange);
}
.navbar.dark-mode .navbar-brand {
    color: #ffffff;
}
.navbar.dark-mode .navbar-nav .nav-link {
    color: #ffffff;
}
.navbar.dark-mode .navbar-nav .nav-link:hover {
    color: var(--custom-orange);
}
.navbar.dark-mode .navbar-toggler {
    border-color: #ffffff;
    color: #ffffff;
}

/* Cards */
.service-card,
.training-card,
.global-reach-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--custom-light-orange);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    color: #333333; /* Ensure text color for light mode */
}
body.dark-mode .service-card,
body.dark-mode .training-card,
body.dark-mode .global-reach-card {
    background-color: #1f1f1f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.service-card:hover,
.training-card:hover,
.global-reach-card:hover {
    transform: translateY(-6px); /* Consistent hover effect */
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.1)!important; /* Consistent hover effect */
}
body.dark-mode .service-card:hover,
body.dark-mode .training-card:hover,
body.dark-mode .global-reach-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4); /* Dark mode hover shadow */
}

/* Icon Styling */
.service-icon, /* Keep if used elsewhere */
.icon-feature {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--custom-orange);
    display: inline-block;
}
body.dark-mode .icon-feature {
    color: #ffaf4d; /* Lighter orange for dark mode contrast */
}

/* Accent Border */
.accent-border {
    border-bottom: 3px solid var(--custom-orange);
    padding-bottom: 0.3rem;
    display: inline-block;
}

/* Custom Orange Text and Background Classes */
.text-custom-orange {
    color: var(--custom-orange) !important;
}
body.dark-mode .text-custom-orange {
    color: #ffaf4d !important; /* Lighter orange for dark mode contrast */
}
.bg-custom-orange {
    background-color: var(--custom-orange) !important;
}

/* CTA Section */
.cta-section {
    /* Assume styles are defined elsewhere or add specific background/padding */
    color: #333; /* Default text color */
}
.cta-section h2, .cta-section p {
     /* Default text color, override if needed */
     color: inherit;
}
body.dark-mode .cta-section {
    color: #ffffff !important; /* White text for readability */
}
.cta-section .btn-light {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.cta-section .btn-light:hover {
    background-color: #f1f3f5;
    color: var(--custom-orange);
    transform: scale(1.03);
}

/* Buttons (Consolidated & using vibrant orange) */
.btn-custom-orange,
.btn.btn-custom-orange {
    background-color: var(--custom-orange) !important;
    border-color: var(--custom-orange) !important;
    color: white !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    padding: 0.75rem 1.25rem; /* Base padding */
    font-size: 1rem; /* Base font size */
}
.btn-custom-orange:hover,
.btn-custom-orange:focus,
.btn.btn-custom-orange:hover,
.btn.btn-custom-orange:focus {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
    color: white !important;
    transform: scale(1.02); /* Subtle scale on hover */
}

.btn-outline-light {
    border-color: #f8f9fa;
    color: #f8f9fa;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    padding: 0.75rem 1.25rem; /* Base padding */
    font-size: 1rem; /* Base font size */
}
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: #f8f9fa;
    color: #343a40; /* Dark text on light hover/focus */
    transform: scale(1.02); /* Subtle scale on hover */
}
/* Dark mode outline button */
body.dark-mode .btn-outline-light {
    color: #ffffff;
    border-color: #ffffff;
}
body.dark-mode .btn-outline-light:hover,
body.dark-mode .btn-outline-light:focus {
    background-color: #ffffff;
    color: #121212; /* Dark text on dark mode hover */
}

/* Responsive Buttons (Adjusting base button styles) */
.responsive-button, .responsive-button-outline {
    /* Inherit base styles from .btn-custom-orange & .btn-outline-light */
    /* Add specific responsive overrides below if needed */
}

@media (max-width: 576px) {
  .responsive-button, .responsive-button-outline {
    font-size: 1rem; /* Keep font size reasonable */
    padding: 0.6rem 1rem; /* Adjust padding */
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem; /* Add space between stacked buttons */
  }
  /* Ensure specificity if needed */
  .d-sm-flex .responsive-button,
  .d-sm-flex .responsive-button-outline {
      width: auto; /* Reset width if they become flex items again */
      margin-bottom: 0;
  }
}

/* Footer */
.footer {
    background-color: #f8f9fa; /* Light grey background */
    color: #333333;
    padding: 2rem 0; /* Add some padding */
    border-top: 1px solid #e9ecef; /* Subtle top border */
}
body.dark-mode .footer {
    background-color: #1f1f1f; /* Dark background */
    color: #ffffff;
    border-top: 1px solid #333; /* Darker border */
}

/* Forms */
.form-control,
.form-select {
    background-color: #fff;
    border: 1px solid #ced4da; /* Standard Bootstrap border color */
    color: #495057; /* Standard Bootstrap text color */
    border-radius: 0.375rem; /* Standard Bootstrap radius */
    padding: 0.5rem 1rem; /* Adjust padding */
    font-size: 1rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--custom-orange);
    box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25); /* Use custom orange for focus */
    background-color: #fff; /* Ensure background stays white on focus */
    color: #495057;
}
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #2c2c2c; /* Darker input background */
    color: #ffffff;
    border-color: #555;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    border-color: var(--custom-orange);
    box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
    background-color: #333; /* Slightly lighter focus background */
}
.form-control::placeholder {
    color: #6c757d; /* Standard Bootstrap placeholder color */
}
body.dark-mode .form-control::placeholder {
    color: #aaa;
}
.form-control-lg, .form-select-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1.1rem; /* Slightly larger */
}

/* Form Validation */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: #dc3545;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
    color: #dc3545;
}
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback, /* Support Bootstrap validation */
.was-validated .form-select:invalid ~ .invalid-feedback {
    display: block;
}

/* Contact Section Card */
body.dark-mode .card { /* General card styling in dark mode */
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border-color: #333; /* Add border for definition */
}

/* Map */
#map {
    height: 400px; /* Slightly shorter map */
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd; /* Add subtle border */
}
body.dark-mode #map {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
}

/* Articles Section */
body.dark-mode .text-dark {
    color: #ffffff !important;
}

/* Offcanvas */
.offcanvas {
    background-color: #fff;
    color: #333333;
}
body.dark-mode .offcanvas {
    background-color: #1f1f1f; /* Consistent dark background */
    color: #ffffff;
}
.offcanvas-header {
    background-color: #f8f9fa; /* Light header */
    border-bottom: 1px solid #dee2e6;
}
body.dark-mode .offcanvas-header {
    background-color: #2c2c2c; /* Dark header */
    border-bottom: 1px solid #444;
}
.offcanvas-title {
    color: var(--custom-orange);
}
body.dark-mode .offcanvas-title {
     color: var(--custom-orange); /* Keep orange title */
}
.offcanvas .btn-close {
    filter: invert(0); /* Default close button */
}
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* White close button */
}
.offcanvas .navbar-nav .nav-link {
    color: #333333;
    padding: 0.75rem 1rem; /* Add padding */
}
.offcanvas .navbar-nav .nav-link:hover {
    color: var(--custom-orange);
    background-color: #f1f1f1; /* Slight hover background */
}
body.dark-mode .offcanvas .navbar-nav .nav-link {
    color: #ffffff;
}
body.dark-mode .offcanvas .navbar-nav .nav-link:hover {
    color: var(--custom-orange);
    background-color: #333; /* Dark hover background */
}

/* Message Area */
#message-area .alert {
    margin-top: 1rem;
    border-radius: 0.5rem; /* Consistent radius */
}

/* Accent elements */
.section-divider {
    border-top: 2px solid var(--custom-orange);
    margin: 2rem 0;
}

.highlight {
    background: linear-gradient(90deg, #FFE5B4 0%, #FFFACD 100%);
    color: #000000;
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
}

.metaphor-box {
    background-color: #FFF3E0;
    border-left: 4px solid var(--custom-orange);
    color: #000000;
    padding: 1em;
    margin-bottom: 1em;
}

/* Buttons */
button, .btn {
    background-color: var(--custom-orange);
    color: #000000;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    cursor: pointer;
}
button:hover, .btn:hover {
    background-color: var(--custom-dark-orange);
}