@font-face {
    font-family: "digital";
    src: url(fonts/digital-7.ttf);
}

.digi-font{
    font-family: "digital" !important;
    backdrop-filter: blur(100px);
    background-color: rgba(0, 0, 0, 0.597);
    border-radius: 100px;

}

:root {
    --nature-green: #27ae60;
    --dark-green: #1e8449;
    --light-green-bg: #eafaf1;
    --text-dark: #2c3e50;
    --text-light: #f8f9fa;
    --accent-blue: #3498db;
    --warning-red: #e74c3c;
    --subtle-gray: #dee2e6;
}

body {
    font-family: 'Roboto', sans-serif;
    padding-top: 56px; /* Offset for fixed navbar */
    background-color: #f4f9f4; /* Light eco background */
    color: var(--text-dark);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.navbar {
    background-color: var(--dark-green) !important; /* Darker green for nav */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}
.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

.btn-success {
    background-color: var(--nature-green);
    border-color: var(--nature-green);
}
.btn-success:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

/* Add smooth scrolling */
html {
  scroll-behavior: smooth;
}

section {
    scroll-margin-top: 60px; /* Offset for anchor links due to fixed navbar */
}

/* General Card Styling */
.card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/* Reduce distracting hover effect on general cards */
/* .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
} */

/* ==================== Component Styles ==================== */

/* Climate Clock */
#climate-clock-container {
    background: linear-gradient(135deg, var(--dark-green), var(--nature-green)); /* Green gradient */
    color: white;
    padding: 30px 20px;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 6px 15px rgba(39, 174, 96, 0.3); /* Softer shadow */
}
#climate-clock {
    font-weight: bold;
    font-size: clamp(2rem, 10vw, 4rem);
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
#climate-clock-container a {
    color: #e0f2e9;
}
#climate-clock-container a:hover { color: #ffffff; }


/* Accordion */
#infoAccordion .accordion-button { font-weight: 500; color: var(--text-dark); }
#infoAccordion .accordion-button:not(.collapsed) { color: white; background-color: var(--nature-green); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); }
#infoAccordion .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(39, 174, 96, 0.25); border-color: rgba(0,0,0,.125); }
#infoAccordion .accordion-button:not(.collapsed)::after { filter: brightness(0%) invert(100%); }
#infoAccordion .accordion-item { border: 1px solid #eee; margin-bottom: 10px; border-radius: 8px !important; overflow: hidden; }
#infoAccordion .accordion-body a { font-weight: 500; }


/* Weather Section */
#weather-section { background-color: var(--light-green-bg); border: 1px solid #c3e6cb; border-radius: 8px; }
#weather-info { font-size: 1.1rem; }
#weather-info h4 { font-size: 1.4rem; font-weight: 500; color: var(--dark-green); }
#weather-info img { width: 60px; height: 60px; filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.1)); }
.scenario-card { border-radius: 8px; color: #333; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.scenario-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); }
.scenario-card .card-title { font-weight: bold; }
.scenario-1-5 { background-color: var(--bs-warning-bg-subtle); border-left: 5px solid var(--bs-warning); color: #664d03; }
.scenario-2-0 { background-color: var(--bs-danger-bg-subtle); border-left: 5px solid var(--bs-danger); color: #58151c;}
.scenario-3-0 { background-color: #e9ecef; border-left: 5px solid #6c757d; color: #41464b;} /* Secondary */
.scenario-card .location-name { font-weight: bold; }


/* Fact Cards */
.fact-card { background-color: #fff; border-left: 5px solid var(--accent-blue); box-shadow: 0 2px 5px rgba(0,0,0,0.07); transition: all 0.2s ease-in-out; border-radius: 8px; display: flex; flex-direction: column; }
.fact-card:hover { transform: scale(1.01) translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.fact-card .btn-outline-primary { font-size: 0.85em; padding: 0.25rem 0.6rem; border-width: 1px; margin-top: auto; /* Pushes button to bottom */ }


/* Duties Section */
#duties .list-group-item { background-color: transparent; border: none; padding-left: 0; margin-bottom: 8px; border-bottom: 1px dashed var(--subtle-gray); }
#duties .list-group-item i { width: 20px; text-align: center; }
#role-specific-duties-display .accordion-item { border-radius: 4px !important; margin-bottom: 8px; background-color: #f8f9fa; }
#role-specific-duties-display .accordion-button { font-size: 0.95rem; font-weight: 400; background-color: #f1f3f5; }
#role-specific-duties-display .accordion-button:not(.collapsed) { color: var(--dark-green); background-color: var(--light-green-bg); }
#role-specific-duties-display .accordion-body ul { padding-left: 0; }
#role-specific-duties-display .accordion-body li { font-size: 0.9rem; color: #495057; list-style: none; padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem;}
#role-specific-duties-display .accordion-body li i { position: absolute; left: 0; top: 0.1em; }

/* ==================== Calculator Step Indicator ==================== */
#calculator-steps {
    display: flex;
    align-items: center;
    width: 100%;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #adb5bd; /* Default grey */
    transition: color 0.3s ease;
    position: relative; /* Needed for potential checkmarks later */
    flex-shrink: 0; /* Prevent items from shrinking too much */
}
.step-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border: 2px solid #adb5bd; /* Default grey border */
    border-radius: 50%;
    font-weight: bold;
    margin-bottom: 5px;
    background-color: #fff;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    z-index: 1; /* Keep numbers above line */
}
.step-label {
    font-size: 0.8rem;
    font-weight: 500;
}
.step-line {
    flex-grow: 1;
    height: 2px;
    background-color: #dee2e6; /* Light grey line */
    margin: 0 5px; /* Reduced margin for better connection */
    transform: translateY(-17px); /* Align line closer to number center */
}

/* Active Step */
.step-item.active { color: var(--nature-green); }
.step-item.active .step-number { border-color: var(--nature-green); background-color: var(--nature-green); color: #fff; }

/* Completed Step */
.step-item.completed { color: var(--dark-green); /* Darker green */ }
.step-item.completed .step-number { border-color: var(--dark-green); background-color: var(--light-green-bg); color: var(--dark-green);}
/* Line after completed step */
.step-item.completed + .step-line { background-color: var(--dark-green); }


/* ==================== Calculator Content Styling ==================== */
.calculator-step {
    /* display: none; is managed by JS now */
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Step 1 Include Sections */
#include-sections .form-switch { margin-bottom: 0.5rem; } /* Add spacing */
#include-sections .form-check-label {
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    background-color: #fff;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    width: 100%; /* Make label fill column width for better click area */
    justify-content: center; /* Center content in label */
}
#include-sections .form-check-input {
    width: 1.8em; height: 1em; /* Standard BS5 switch size ratio */
    margin-top: 0;
    margin-left: -0.8em; /* Pull switch slightly left */
    margin-right: 0.5em; /* Space between switch and text */
    cursor: pointer;
    flex-shrink: 0; /* Prevent switch from shrinking */
}
#include-sections .form-check-input:checked {
    background-color: var(--nature-green);
    border-color: var(--nature-green);
}
#include-sections .form-check-input:checked + .form-check-label {
     background-color: var(--light-green-bg);
     border-color: var(--nature-green);
     color: var(--dark-green);
     font-weight: 500;
}
#include-sections .form-check-label i { width: 1.2em; margin-right: 0.3em; }


/* Input Groups in Calculator */
#calculator label {
    font-weight: 500; font-size: 0.9rem; margin-bottom: 0.3rem; display: block; color: #495057;
}
#calculator .input-group-text.small { font-size: 0.8em; padding-top: 0.2rem; padding-bottom: 0.2rem; }


/* Transport sub-sections */
.transport-subsection {
    background-color: #f8f9fa; border: 1px solid #e9ecef; padding: 1.5rem; border-radius: 0.375rem;
}


/* Results Pane Specifics */
#step-5-content .results-container { background-color: transparent; border: none; box-shadow: none; padding: 0; }
#step-5-content .display-4 { font-weight: 600; }
#results-breakdown-details .breakdown-item { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed #eee; }
#results-breakdown-details .breakdown-item:last-child { border-bottom: none; }
#results-breakdown-details strong { color: var(--dark-green); }
#results-breakdown-details small { color: #6c757d; }
#reduction-tips-list-results .list-group-item {
    font-size: 0.95rem; padding-left: 0.5rem; border-left: 3px solid var(--nature-green); margin-bottom: 10px; background-color: var(--light-green-bg); border-radius: 4px;
    border-top-width: 0; border-right-width: 0; border-bottom-width: 0; /* Override BS default borders */
}


/* Contributor Cards */
.contributor-card {
    background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); border-radius: 8px;
    transition: all 0.2s ease-in-out; padding-top: 60px; /* Space for image */
    margin-top: 60px; position: relative; border: 1px solid #eee;
}
.contributor-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); }
.contributor-img {
    width: 100px; height: 100px; object-fit: cover; border-radius: 50%;
    border: 4px solid white; position: absolute; top: -50px; /* Pull image up */
    left: 50%; transform: translateX(-50%); background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contributor-img-placeholder { /* Loading state */
     width: 100px; height: 100px; border-radius: 50%; border: 4px solid white; position: absolute;
     top: -50px; left: 50%; transform: translateX(-50%); background-color: #e9ecef;
     display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-check{
    display: flex !important;
    align-items: center !important;
}

/* Footer */
footer { background-color: var(--text-dark) !important; }


/* Tooltips */
.tooltip-inner { max-width: 250px; background-color: #343a40; color: #fff; font-size: 0.85rem; padding: 8px 12px; }
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #343a40; }

/* Modal Styling */
.modal-header { background-color: var(--nature-green); color: white; }
.modal-header .btn-close { filter: brightness(0) invert(1); }
#suggestRoleModal .modal-title i { margin-right: 8px; }