/* styles.css */

/* --- Google Fonts Import --- */
/* Inter font for a clean, modern look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- CSS Variables for Colors (Semantic Naming) --- */
:root {
    /* Base Colors */
    --clr-background: #F8F9F0; /* Cream White - e.g., for backgrounds, light text */
    --clr-main-text: #3D2B1Fff;  /* Espresso Brown - e.g., for main text, dark backgrounds */
    --clr-borders: #5C3B24ff; /* Cocoa Brown - e.g., for borders, secondary text */
    --clr-primary-accent: #689F38FF; /* Lime Green - e.g., primary interactive elements, highlights */
    --clr-secondary-accent: #A3C586FF; /* Herb Green - e.g., secondary interactive, hover states */
    --clr-highlight-background: #638A472B; /* Cool Mint - e.g., soft highlight backgrounds */
    --clr-warning: #F28F3Bff;   /* Spice Orange - e.g., danger/warning actions, star ratings */
    --clr-border: #CCCCCCff;   /* Muted Gray - e.g., subtle borders, muted text */
    --clr-star-active: #FCDF3BE6; /* Gold */
    --clr-star-inactive: #9A9265E6; /* Lighter grey for empty */
    --clr-report-modal:#ffffffba; /*slightly seethrough background for report modals*/
    --clr-header-background: #EAF3E2FF;
    --clr-footer-background: #31241BFF;
    --clr-white:#ffffffff;


    /* Alert Colors (standard Bootstrap-like) */
    --clr-alert-success-text: #3c763d;
    --clr-alert-success-bg: #dff0d8;
    --clr-alert-success-border: #d6e9c6;
    --clr-alert-danger-text: #a94442;
    --clr-alert-danger-bg: #f2dede;
    --clr-alert-danger-border: #ebccd1;
    --clr-alert-info-text: #31708f;
    --clr-alert-info-bg: #d9edf7;
    --clr-alert-info-border: #bce8f1;
}

/* --- Base Styles --- */
html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--clr-background);
    color: var(--clr-main-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Layout Structure --- */
main {
    flex-grow: 1;
    padding: 1.5rem 1rem;
 /*   max-width: 1200px;
    margin: 0 auto;
    width: 100%; */
    box-sizing: border-box;
}

/* --- Global Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--clr-main-text);
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.75rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 500; }

p { line-height: 1.6; margin-bottom: 1rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.5rem; }

/* --- General Link Styles --- */
a {
    color: var(--clr-primary-accent);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
a:hover, a:focus {
    color: var(--clr-secondary-accent);
    text-decoration: underline;
    outline: none;
}

/* --- Horizontal Rule Styles --- */
hr {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin: 1.5rem 0;
}

/* --- General Button Styles --- */
.btn {
    display: inline-block;
    background-color: var(--clr-primary-accent);
    color: var(--clr-white);
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
}
.btn:hover {
    background-color: var(--clr-secondary-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Specific button variations */
.btn-primary { background-color: var(--clr-primary-accent); color: var(--clr-white); }
.btn-primary:hover { background-color: var(--clr-secondary-accent); color: var(--clr-main-text); }
.btn-secondary { background-color: var(--clr-warning); color: var(--clr-white);; }
.btn-secondary:hover { background-color: var(--clr-main-text); }
.btn-success { background-color: var(--clr-secondary-accent); }
.btn-success:hover { background-color: var(--clr-primary-accent); }
.btn-danger { background-color: var(--clr-warning); color: var(--clr-white); }
.btn-danger:hover { background-color: #FBAE6AFF; color: var(--clr-main-text); }
.btn-orange: {background-color: var(--clr-warning); color: var(--clr-white); }

/* Validation feedback for forms */
.is-invalid { border-color: var(--clr-warning) !important; }
.invalid-feedback {
    color: var(--clr-warning);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}
.error-message { /* Used in reset-password for non-field specific errors */
    color: var(--clr-warning);
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}


/* --- Utility Classes --- */
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.p-3 { padding: 1rem; }
.rounded { border-radius: 0.5rem; }
.border { border: 1px solid var(--clr-border) !important; }
.text-muted { color: var(--clr-border) !important; }
.text-danger { color: var(--clr-warning) !important; }
.text-center { text-align: center; }
.d-inline-block { display: inline-block; }
.w-auto { width: auto !important; }
.ms-3 { margin-left: 1rem; }
.d-grid { display: grid; }
.gap-2 { gap: 0.75rem; }

/* --- Alert Messages --- */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-weight: 500;
}
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

/* --- Pagination (Global) --- */
.pagination {
    display: flex;
    justify-content: center;
    padding: 0; /* Ensures no default padding */
    list-style: none; /* Removes bullet points from list items */
    margin-top: 2.5rem; /* Standardized margin from your global code */
    margin-bottom: 1rem; /* Standardized margin from your global code */
    flex-wrap: wrap; /* Allows pagination items to wrap on smaller screens */
    gap: 0.5rem; /* Provides consistent spacing between page items */
}

/* Note: With 'gap' on .pagination, individual margins on .page-item are often not needed */
/* If you still need a slight override for specific spacing, you can add it here. */
/* For now, I've removed the .page-item margin to let 'gap' manage it. */

.page-link {
    display: block;
    padding: 0.6rem 1rem; /* Slightly larger padding for better clickability */
    color: var(--clr-primary-accent); /* Uses the accent color for default link text */
    background-color: var(--clr-background); /* Explicitly sets background to your theme's background */
    border: 1px solid var(--clr-border); /* Uses your common border variable */
    border-radius: 0.4rem; /* Slightly more rounded corners */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* More specific and slightly longer transition */
}

.page-link:hover:not(.disabled) {
    background-color: var(--clr-highlight-background); /* Uses your highlight background on hover */
    color: var(--clr-main-text); /* Changes text color to main text on hover */
    border-color: var(--clr-primary-accent); /* Changes border color to primary accent on hover */
}

.page-item.active .page-link {
    background-color: var(--clr-primary-accent);
    border-color: var(--clr-primary-accent);
    color: var(--clr-background); /* Uses your theme's background color for active text */
    font-weight: 600; /* Makes active page number bold */
}

.page-item.disabled .page-link {
    color: var(--clr-muted-greys); /* Uses a muted grey for disabled link text */
    pointer-events: none; /* Prevents clicks on disabled links */
    background-color: var(--clr-highlight-background); /* Uses highlight background for disabled items */
    border-color: var(--clr-border); /* Uses your common border color for disabled items */
}

/* --- Modal Styles (Global) --- */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(-20px);
}
.modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.modal-content {
    background-color: var(--clr-background);
    padding: 2rem;
    border: 1px solid var(--clr-borders);
    width: 90%;
    max-width: 550px;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    position: relative;
}
.close-button {
    color: var(--clr-borders);
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.close-button:hover, .close-button:focus {
    color: var(--clr-warning);
    text-decoration: none;
    outline: none;
}
.report-form h2 {
    text-align: center;
    color: var(--clr-main-text);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}
.report-form .form-group { margin-bottom: 1.5rem; }
.report-form label {
    font-weight: 500;
    color: var(--clr-borders);
    margin-bottom: 0.5rem;
    display: block;
}
.report-form textarea, .report-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    background-color: var(--clr-background);
    color: var(--clr-main-text);
    box-sizing: border-box;
}
.report-form textarea { min-height: 100px; resize: vertical; }
.report-form select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233D2B1Fff%22%20d%3D%22M287%2C197.989L146.202%2C57.181L5.4%2C197.989h281.6z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.8rem;
    padding-right: 2.5rem;
}
.report-form button[type="submit"] {
    width: 100%;
    padding: 0.8rem 1.5rem;
    background-color: var(--clr-warning);
    color: var(--clr-background);
    border-radius: 0.6rem;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.report-form button[type="submit"]:hover {
    background-color: #e07f2b;
    transform: translateY(-2px);
}

#cookieConsentBanner {
            position: fixed; /* Explicitly fixed, though fixed-bottom does this */
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;

        }

.home-content {
    padding: 2rem;
    background-color: var(--clr-highlight-background);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.content-section {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--clr-highlight-background);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* --- Responsive Adjustments (Global Media Queries) --- */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    main { padding: 1rem 0.75rem; }
    .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }
    .form-control, .form-select, textarea { padding: 0.6rem 0.8rem; font-size: 0.9rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    p { font-size: 0.9rem; }
    .btn { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
    .form-control, .form-select, textarea { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
}